Game performance optimization – A practical example from Industry Idle
1–10 of 37 posts
Re: Game performance optimization – A practical example from Industry Idle
#2Industry Idle is cool - didn't realize you're on HN!
One of the most frustrating things about using a web stack is issues like this where you've got an embarrassingly parallel problem and you can't use threads easily.
Even in Unity non ECS, which is fairly constrained, high performance dot processing would be fairly straight forward.
I'm working on an idle web game using ClojureScript, and it's very much the other end of the spectrum. The game design is event driven and state small out of necessity.
Re: Game performance optimization – A practical example from Industry Idle
#3Missing one important thing: if your object goes in a straight line at a fixed speed with a known start and end position, instead of going through the game engine tweens you can build an equivalent CSS animation between the start and stop position and it'll be blazingly fast.
Re: Game performance optimization – A practical example from Industry Idle
#4Hero
Re: Game performance optimization – A practical example from Industry Idle
#5Industry Idle is cool - didn't realize you're on HN! One of the most frustrating things about using a web stack is issues like this where you've got an embarrassingly parallel problem and you can't use threads easily. Even in Unity non ECS, which is fairly constrained, high performance dot processing would be fairly straight forward. I'm working on an idle web game using ClojureScript, and it's very much the other en…
[deleted]
Re: Game performance optimization – A practical example from Industry Idle
#6Lots of cool stuff here. But on the last point about managing renders, for my money any browser game is in a state of original sin if its logic and render loops are tightly coupled.
The Right Thing To Do is to run logic and rendering at separate cadences, with rendering driven exclusively by requestAnimationFrame. Then when the browser is minimized, RAF stops firing and rendering is skipped entirely (on top of the other benefits of decoupling logic and rendering).
Re: Game performance optimization – A practical example from Industry Idle
#7Missing one important thing: if your object goes in a straight line at a fixed speed with a known start and end position, instead of going through the game engine tweens you can build an equivalent CSS animation between the start and stop position and it'll be blazingly fast.
Browser games like this are normally drawing pixels into a canvas, not creating DOM objects for each game entity.
Re: Game performance optimization – A practical example from Industry Idle
#8Lots of cool stuff here. But on the last point about managing renders, for my money any browser game is in a state of original sin if its logic and render loops are tightly coupled. The Right Thing To Do is to run logic and rendering at separate cadences, with rendering driven exclusively by requestAnimationFrame. Then when the browser is minimized, RAF stops firing and rendering is skipped entirely (on top of the ot…
I'd go further: for many games the right thing to do is pause execution entirely if the window is minimised or the user switches to another tab or application. Obviously not possible for online multiplayer games, but a good practice for single player.
Rendering can be but isn't always the most expensive portion of a game's execution, but if you have a lot feeding into that in terms of object updates and game logic you can find yourself chewing a surprising amount of CPU time, and therefore power, which isn't great if the host device is running on batteries.
Re: Game performance optimization – A practical example from Industry Idle
#9Missing one important thing: if your object goes in a straight line at a fixed speed with a known start and end position, instead of going through the game engine tweens you can build an equivalent CSS animation between the start and stop position and it'll be blazingly fast.
Browser games like this are normally drawing pixels into a canvas, not creating DOM objects for each game entity.
I know, that's not a limit tho. you get the canvas origin from the engine and offset the animation. you keep a pool of div on the side, and when you need one depending on your culling result you attach the sprite image as a background, tweak the css animation start,end and attacch it to the overlay. you keep a relative offseted parent on the div, so that as the canvas scroll, you can adjust it wherever you go. overflow hidden takes care of the visibility if they go out of the canvas area.
hybrid canvas html game are a joy to work with, there's no reason to limit oneself to canvases as long as you can export and import events to the external world. I've built some, and having for example the ux in html sending control events to the canvas cut the development time a lot. all these 2d libs have painful ux api, with dreadful limitation, while in html you can just slap whatever stile and it'll always be crisp.
Re: Game performance optimization – A practical example from Industry Idle
#10Earlier quoted context omitted.
Browser games like this are normally drawing pixels into a canvas, not creating DOM objects for each game entity.
I know, that's not a limit tho. you get the canvas origin from the engine and offset the animation. you keep a pool of div on the side, and when you need one depending on your culling result you attach the sprite image as a background, tweak the css animation start,end and attacch it to the overlay. you keep a relative offseted parent on the div, so that as the canvas scroll, you can adjust it wherever you go. overfl…
Sounds massively complex compared to just a stateless rendering pipeline clearing the canvas and drawing the sprites with drawImage on every RAF.