I try programming a splix.io clone as an electron app and do the visualization via the html5 canvas. The movement across the tiles should look fluent like the original, so I target 60 frames a second. The programm worked fine till I tried to replace the tiles created through fillRectangle() with svg images using drawImage(). This resulted in a huge performance drop, which I now try to fix. To mention here is that, like splix.io, I have a quite large playfield with a targeted size of 500x500 tiles and a fullscreen viewport, so basically the canvas has to draw the whole screen each frame.
Known performance improvements, that I implemented are:
- Separating the logic calculations and "rendering" into their own windows, separated from the main process.
- Only drawing the area visible to the player
- Foreach tileType hold a offscreen canvas, so that I can copy the ImageData to the onscreen canvas.
- Draw tiles and the players on separate canvases.
A drawing loop with requestAnimationFrame() instead of setTimeout() seemed to be impractical because the ultimate goal is to let AIs, which will run in their own child-process, play against each other. Therefore I can't rely on requestAnimationFrame which throttles performance when the window loses focus or is minimzed.
What further performance improvements can you recommend? Is the scale of my game maybe too large for the canvas and would a switch to OpenFL / WebGL may be the better solution?
