Image loading, flickering, and roguelikes

JavaScript
1

Hi all. Been having some fun (and frustration) working on the roguelike challenge. I’ve got the core gameplay down and I’ve moved onto the graphics. However whenever I move there is often a noticeable and painful flicker. My thoughts on this are that the images have to load each time the screen is redrawn and that’s what’s causing flickering. I feel like it would make more sense to load the images in once, presumably when the screen component mounts, but I’m not sure how to do that so they can be referenced in the update function. Or I could be wrong, I’m not sure.

If you could take a look and tell me how if could do better (obviously don’t click this if you’re prone to seizures, it could be dangerous!) that would be great. The screen component starts on line 138.

https://codepen.io/jsanderson/pen/JLRYBg

(obviously the graphics are placeholders so don’t mind the mess)

2

Scratch all that. I tried loading the images as part of the main app’s componentDidMount function and passing them as props to the screen so they only have to load once. Everything seems ok now, at least I’m not getting any flickers. Updated link is below:

I am not sure if this would be best practice, this is only my second time using canvas with React and the first time using images with the canvas, but it does seem to work much better.