Performance is getting to be a real issue here. I have chipped away at it each release by improving many different aspects of the code; however, the issue still lingers there – becoming more apparent the more you play Wayward. Could it be the monsters? Could it be the particles? Could it be the environmentals? All of these things do impact the performance, yes, but the performance is actually being hindered from another factor – the technologies that the game exists on itself. The slowdown (from what I have tested), is actually coming from drawing images (through HTML5’s drawImage) – all the different graphical elements on the screen: layered tiles, character, enemies, environmental, items, lighting, particles, text/item animations, etc.
Each movement we have to render a brand new screen – 13×13, 169 tiles. But not only 169 tiles, we have to loop this 13 times (since there’s 13 layers of tiles – some that overlap others). The looping surprisingly takes no time at all – the thing that takes the time is the drawImage functions being called 169 times per move. This doesn’t even include the other stuff I mentioned above like the monsters, lighting, and animations for example. I mention those three examples because these ones in particular take more resources than anything else. How could this be? Aside from HTML5’s drawImage not being the best for performance in it’s current state, if you want to do other more complex things like opacity (lighting/animations) or image mirroring (monsters), this can reduce performance up to 50% depending on the browser.
To put this in to perspective,
- Want to draw a colored square 1000 times? Okay, cool, that will take a measly 6 milliseconds.
- Want to draw a simple image 1000 times? Okay, well, that will cost you 19 milliseconds.
- Oh you’re the fancy type? You want to draw an image with opacity 1000 times? Well, now we’re talking 40 milliseconds.
I suspect something else weird is going on here too aside from canvas specific performance. The performance degrades over time and garbage collection doesn’t seem to be firing in the correct instances. The CPU keeps going up and up. I understand some of these issues, and I can try to work on some of these issues about by buffering and pre-rendering certain things; however, pre-rendering isn’t the solution as different browsers have opposite results. Not only that, but pre-rendering will actually hurt me in a world with manipulative terrain. Right now I just have to re-draw the screen when I dig some dirt. Imagine regenerating that pre-rendering of an even larger portion.
So i’m kind of stuck here. If any technical HTML5 programming types happen to stumble upon this, I would love to hear your thoughts.