[x] Window resizing affects game speed

[amberreeves]

If the browser width is changed during the game, the game speed changes. If you begin with a small width, and then expand, the game slows down too much. If you begin with a wide width, and then reduce it, the game speeds up and the fish flash on and off the screen.

From Mike: We should discuss this to see if it is feasible to wrap these functions in a window resize event.

[mtedeschi]

@jmaj: the frames per second drop significantly when the screen is full size. Is there any way you can think of to try to boost performance?

[jmaj]

I've examined the code with the FPS Monitor even with everything but the translate effect comment it still runs at a lower FPS(Frames Per Second). So as for as code optimizations go there isn't much to do there.

I tested with all the background removed and it runs at a consistent 60 FPS. With one background showing it runs at 51-60FPS depending on what's being painted.

Assuming the backgrounds were saved and exported at a higher quality, maybe we should we consider saving the backgrounds at a lesser quality?

[tespenshade]

The background images are exported at 2x for retina, I've run them through ImageOptim. @mtedeschi do you think we should be using lower resolution images?

[mtedeschi]

I think that might be a worthwhile test. @tespenshade can you export them at 1x instead, and see if you can get the filesize lower? We can start there.

[jmaj]

Just want to clarify, we are currently using the non 2x files. Thé total file size for all three of is 2.5MB

[tespenshade]

I'm assigning this to @mtedeschi for guidance on next steps- I am not sure how to help resolve this issue if we are already using the lower resolution images.

[mtedeschi]

@jmaj, so at this point, we're using the lower quality images (1x) and the game's FPS drops when it translates the background, even when everything else is disabled. Is that correct?

[jmaj]

Most of everything the CSS animations are still there. But everything in the updateworld() method is commented out but the background translate code.

http://nmai.interactivemechanics.com/nk360/1-salmon-challenges/?instructions=false

[mtedeschi]

@jmaj have you considered trying translate3d instead? There are some general performance improvements in most browsers, according to some research: https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance

[jmaj]

Tested it out, translate3d seemed to provide a good performance boost on desktop. When you resize the window the game still slows down for about a second or two but then it comes back to the 60 FPS.

This also relates to the Android issue as well, the tranlate3d help a bit on Android browsers but there's still some jitteriness but not nearly as much as before.

It's live on the site with the code uncommented out if you wanted to test.

[mtedeschi]

@jmaj can you confirm that all code is back in and then close this issue when done?

[jmaj]

It's back in