wayfinder Posted July 23, 2015 Share Posted July 23, 2015 Hi! I have a setup where I can drag the world around with the mouse. There is some fairly complicated camera and object position calculation going on since I'm putting the actual camera position together from two separate variables and each object can have an additional positional modifier. The thing is: It sometimes works. Smooth as silk, in fact. And at other times, not: it becomes choppy and I think it's something to do with the mouse move callback and its interplay with the camera/object position, updating values in one place but not the other perhaps? Here's a (low fps) recording of me dragging the world around. The cloud picture is an extended sprite which has code in its update function to keep it always at the same browser position, no matter where the world is being dragged. The glow meanwhile follows the mouse movements. It works most of the time, but on some frames it obviously doesn't and I can't figure out why: I made another recording at a slightly higher FPS. This one has the mouse pointer in it, and yes the glow has a lag, same as all the dragging examples on http://examples.phaser.io, that's not the issue. The FPS does not drop at any point, that much I can tell. And I have not been able to find any other correlation between things happening in the project or the browser and it working or not. Sometimes it's choppy when I start the game, but gets smooth quickly. Sometimes it doesn't get better, or only after minutes of frantic dragging (not that it seems to make a difference whether I actually drag or not). Sometimes it's smooth when I start the game, and gets choppy sooner or later. It changes back and forth, not tied to anything else my computer is doing (CPU spikes or such). I am so out of ideas what even to try Does this sound familiar to anyone? Link to comment Share on other sites More sharing options...
rich Posted July 23, 2015 Share Posted July 23, 2015 mouseMove events are triggered by the actual DOM event - which can occur at any time in the game loop process. Maybe sometimes during render, sometimes during preUpdate, sometimes just after the cameras final position has been set, etc. I would wager that what you're seeing is a direct result of this irregularity in when the event happens. You may want to try and find a way to normalise this behaviour, so don't react to the move immediately but rather use it to populate a set of vars that are then used when the next loop hits. Link to comment Share on other sites More sharing options...
wayfinder Posted July 23, 2015 Author Share Posted July 23, 2015 Ah! I had put some console logs into the different functions (update, preRender, render, and in the mouse move callbacks), and the callbacks always logged after render, at the same timestamp, that's why I didn't think that was a problem. Here's some output (the number is time.now). And no, I don't know why update logs twice per frame sometimes... edit: and not at all on some frames? that feels wrong. I'll give the variables thing a go and get back to you! Link to comment Share on other sites More sharing options...
wayfinder Posted July 23, 2015 Author Share Posted July 23, 2015 It looks like on some frames, upd doesn't log, but then twice in the next frame. Could that be the source of the issue? Link to comment Share on other sites More sharing options...
wayfinder Posted July 23, 2015 Author Share Posted July 23, 2015 Hmm, I think I may have something here. Haven't had a glitch in three minutes of dragging with this latest change: I had been using the same variables I am using to calculate the camera position to also calculate the position of the cloud image, thinking that it would be best to construct it from first principles, so to speak. But now I tried to do that differently, and used the already-calculated camera position as base information for the adjustment, and SO FAR it seems to be working. But this bug has been sneaky like that before, not showing up for extended periods of time, so I don't trust it yet. shifty mf. Link to comment Share on other sites More sharing options...
rich Posted July 23, 2015 Share Posted July 23, 2015 Yes it's possible for update to be skipped if the fps rate is spiralling - and then for it to be called twice in the following frame to catch-up with itself. Link to comment Share on other sites More sharing options...
wayfinder Posted July 23, 2015 Author Share Posted July 23, 2015 How strongly would the fps rate have to spiral? time.fps gave me a constant 60fps, and so did stats.js Link to comment Share on other sites More sharing options...
wayfinder Posted July 23, 2015 Author Share Posted July 23, 2015 Update: my change hasn't squashed the bug completely, but when the objects jitter now, it's 1px or less, which I am deeming acceptable. Still, it would be interesting to know what exactly causes it Link to comment Share on other sites More sharing options...
rich Posted July 24, 2015 Share Posted July 24, 2015 It wouldn't have to change much at all, just a fraction over the desired fps rate would cause it. However what I find most interesting is that even in a completely 'bare' loop - so no delta timer, not fps checks, nothing.. moving a single image from the left to the right across a canvas will still cause it to 'jitter' now and again while things settle down - especially in Chrome / Canary. I've seen this on my Mac and PC, even from absolutely minimal test cases (not using Phaser). The fps rate never changes, but the rendering glitches a little now and again. I don't think this is related to what you're seeing, but it's highly annoying all the same. For example on my Mac I was listening to an album in iTunes, the image was scrolling, profile was perfect 60fps, then iTunes changed track, popped the notification window up for a moment and it caused the display to jitter a little. No dropped frames, no fps change, but visually it still glitched. I honestly think it's a deeper inherent problem with Chrome rendering (as I can replicate this effect anywhere, in any game made with any engine) Link to comment Share on other sites More sharing options...
Recommended Posts