Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Graphical glitch when changing rotation

1492693682

Edited 1492693880
I'm experiencing graphical glitches for a fairly simple script. All it does is turn a token's direction to automatically face in the direction it was moved. <a href="https://gist.github.com/anonymous/d64ef2cff99c048b" rel="nofollow">https://gist.github.com/anonymous/d64ef2cff99c048b</a>... It works as intended. However, for other players a strange graphical glitch happens. As the movement registers, and my script turns the direction of the token, the token warps over to it's destination instantly for a single frame, before it returns to it's starting position and does a smooth moving animation to it's destination. Picture explaining the glitch I've tested, and the glitch happens in both firefox and chrome. I'm imagining that changing rotation is pretty normal, so I'm wondering if I'm doing things wrong, or is there a way to avoid such glitches with "moving tokens"?
1492694203
The Aaron
Pro
API Scripter
Try this and see if it fixes the glitch: on('ready', function() { &nbsp; on('change:graphic', function(graphic, prev) { &nbsp; &nbsp; if(graphic.get('lastmove') === prev['lastmove']) {return;} &nbsp; &nbsp; _.defer(()=&gt;{ &nbsp; &nbsp; &nbsp; var oldLeft = Math.floor(prev['left']/70); &nbsp; &nbsp; &nbsp; var oldTop = &nbsp;Math.floor(prev['top']/70); &nbsp; &nbsp; &nbsp; var newLeft = &nbsp;Math.floor(graphic.get('left')/70); &nbsp; &nbsp; &nbsp; var newTop = &nbsp;Math.floor(graphic.get('top')/70); &nbsp; &nbsp; &nbsp; if(oldLeft &lt; newLeft) { &nbsp; &nbsp; &nbsp; &nbsp; if(oldTop &lt; newTop) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; graphic.set('rotation', 315); &nbsp; &nbsp; &nbsp; &nbsp; } else if(oldTop &gt; newTop) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; graphic.set('rotation', 225); &nbsp; &nbsp; &nbsp; &nbsp; } else { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; graphic.set('rotation', 270); &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; } else if(oldLeft &gt; newLeft) { &nbsp; &nbsp; &nbsp; &nbsp; if(oldTop &lt; newTop) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; graphic.set('rotation', 45); &nbsp; &nbsp; &nbsp; &nbsp; } else if(oldTop &gt; newTop) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; graphic.set('rotation', 135); &nbsp; &nbsp; &nbsp; &nbsp; } else { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; graphic.set('rotation', 450); &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; } else if(oldTop &lt; newTop) { &nbsp; &nbsp; &nbsp; &nbsp; graphic.set('rotation', 360); &nbsp; &nbsp; &nbsp; } else if(oldTop &gt; newTop) { &nbsp; &nbsp; &nbsp; &nbsp; graphic.set('rotation', 540); &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; },100); &nbsp; }); });
Unfortunately it doesn't help. Neither does using setTimeout. All that happens is the graphical glitch happens a little later in the move, depending on the delay.
1492697263
The Aaron
Pro
API Scripter
Hmm... &nbsp;Might try a longer timeout. &nbsp;Probably what is happening is the change in rotation causes a redisplay outside the loop that is animating the token to it's final destination, which makes the frame temporarily jump as the API forces it to be in a position. &nbsp;You could also try grabbing the object again before setting it: on('ready', function() { &nbsp; on('change:graphic', function(graphic, prev) { &nbsp; &nbsp; if(graphic.get('lastmove') === prev['lastmove']) {return;} &nbsp; &nbsp; _.defer(()=&gt;{ &nbsp; &nbsp; &nbsp; var oldLeft = Math.floor(prev['left']/70); &nbsp; &nbsp; &nbsp; var oldTop = &nbsp;Math.floor(prev['top']/70); &nbsp; &nbsp; &nbsp; var newLeft = &nbsp;Math.floor(graphic.get('left')/70); &nbsp; &nbsp; &nbsp; var newTop = &nbsp;Math.floor(graphic.get('top')/70); &nbsp;var freshGraphic = getObj('graphic',graphic.id); &nbsp; &nbsp; &nbsp; if(oldLeft &lt; newLeft) { &nbsp; &nbsp; &nbsp; &nbsp; if(oldTop &lt; newTop) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; freshGraphic.set('rotation', 315); &nbsp; &nbsp; &nbsp; &nbsp; } else if(oldTop &gt; newTop) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; freshGraphic.set('rotation', 225); &nbsp; &nbsp; &nbsp; &nbsp; } else { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; freshGraphic.set('rotation', 270); &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; } else if(oldLeft &gt; newLeft) { &nbsp; &nbsp; &nbsp; &nbsp; if(oldTop &lt; newTop) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; freshGraphic.set('rotation', 45); &nbsp; &nbsp; &nbsp; &nbsp; } else if(oldTop &gt; newTop) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; freshGraphic.set('rotation', 135); &nbsp; &nbsp; &nbsp; &nbsp; } else { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; freshGraphic.set('rotation', 450); &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; } else if(oldTop &lt; newTop) { &nbsp; &nbsp; &nbsp; &nbsp; freshGraphic.set('rotation', 360); &nbsp; &nbsp; &nbsp; } else if(oldTop &gt; newTop) { &nbsp; &nbsp; &nbsp; &nbsp; freshGraphic.set('rotation', 540); &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; },1000); //&lt; Bumped up to a second delay &nbsp; }); }); &nbsp;
Just so you know, defer's second parameter isn't a timeout, it's simply the argument it invokes the anonymous function with. Underscore's defer doesn't have any sort of timing delay built in, it always operates on 0ms. But either way, switching it to a setTimeout and setting it to 1000 ms just makes the graphical glitch happen one second into the movement animation. Fetching the graphics fresh again also does not help. It simply seems that changing a graphic's visual properties while it's currently doing it's movement animation triggers this bug, no matter what you do. I thought of simply changing the rotation after the movement has completed, but there is no good way of knowing when the graphic has arrived as it's destination, as there is no event for it. :/
1492704296
PaprikaCC
Pro
API Scripter
I just tested this in game in both GM and Player modes and I can't see this graphical glitch. How can I reproduce this?
1492708380
The Aaron
Pro
API Scripter
Whoops.. I meant _.delay(). =D
It's not visible to yourself, you have to have one browser window open as a player and one browser window open as another player (either of these can be a GM, that doesn't matter). When player 1 moves his token, the token glitches out for player 2. If you still can't reproduce it, I can record a video of the glitch in action.
1492736980
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Is there an easy way to convert this to a 180° facing? The script assumes that the handle of the token is the back (as do a lot of token creators). But the angled lighting actually assumes the handle to be the front. Do I just add 180 to all the rotation values?
1492758911
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Also, is there a way to drag an image without it rotating? Sometimes I want to drag an object that is not a character, such as piece of furniture or other prop without it changing orientation.
keithcurtis, I'm not sure how you'd allow for movement without rotating. It reacts to all position changes, and I can't think of any smart way to let players change the position without triggering the script. As for changing it's facing, I'm not sure. I just used log(graphic.get('rotation')) to get the values I needed. It doesn't appear to be either degrees or radians.
1492770377
The Aaron
Pro
API Scripter
Rotation is in degrees. rotation 0 The orientation of the token in degrees.
1492786992
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Could the script be modified to work only on tokens and not on drawings?