Game performance optimization – A practical example from Industry Idle

Lots 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.<p>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).

Industry Idle is cool - didn&#x27;t realize you&#x27;re on HN!<p>One of the most frustrating things about using a web stack is issues like this where you&#x27;ve got an embarrassingly parallel problem and you can&#x27;t use threads easily.<p>Even in Unity non ECS, which is fairly constrained, high performance dot processing would be fairly straight forward.<p>I&#x27;m working on an idle web game using ClojureScript, and it&#x27;s very much the other end of the spectrum. The game design is event driven and state small out of necessity.

Whilst I imagine the final line &quot;I cannot get a discrete GPU at a reasonable price&quot; is more a frustration, never underestimate the importance of working with restraints. If you develop against a terrible GPU you&#x27;re forced to fix issues like this quickly.<p>Although I&#x27;ll of course agree a better computer helps the iterative dev cycle.

Huh? I am surprised that you choose to use a &quot;setTimeout&quot;-like callback there.<p>Everyone on the internet is an expert (&#x2F;s), so here is my intuition: If a mine produces $stuff at a rate of x $stuff&#x2F;s, the factory it is sending to will have a supply of x $stuff&#x2F;s coming from that mine; the factory&#x27;s total supply will be the sum of all these x from the various mines that are sending to that factory. So what I would do is a setTimeout(&quot;increase supply of stuff for target factory by x every 2.5s&quot;, 2.5) to link a mine to a factory (and &quot;decrease...&quot; for unlink). This simulates that the first resources take some time to arrive.<p>Are the deliveries continuous and not bursty? Then the cheap way is then to increase the resources every second (or whatever your ticklength is) for the appropriate fraction by iterating over the factories - which are probably much fewer than the resources in flight. Players might notice this.<p>Are the deliveries bursty? Keep an array of pairs (burst_amount, burst_time, burst_stride) and when iterating over the factories to add resources, add those for which &quot;burst_time modulo tick_time == burst_stride&quot;. This requires some discretisation, but would the players even notice...? Just make sure that if you draw resources on the screen that they arrive roughly in sync with the actual resource update in the factory.<p>Bonus: This could go in a thread of it&#x27;s own that only takes care of these updates. But I am not sure if that can be done in your language like I would do it in C++.<p>Curious why you&#x27;ve chosen to use massive amounts of timeouts with the respective overhead.

&gt; To optimize this, instead of scheduling a function call, we simply add the information to a Map - the arrival time, resource, amount, and target building. Then in the tickDots method, we loop through the map and if a resource has arrived, we remove it from the Map and add the resource to the target building. This reduces the frame time from barely under 16.7ms to a comfortable 11ms.<p>What you have implemented here is a priority queue, with O(1) insertion and O(n) deletion. It is easy to get down priority queues to O(log n) deletion without sacrificing insertion speed noticeably much. So unless you have some good reason to iterate all resources every iteration, changing to a better priority queue implementation will most probably yield you even more of a benefit.

Thanks for the write-up. Always cool to see how different people solve these kind of problems.<p>I don&#x27;t know much about cocos2d but since the dots are purely visual, do they need to be game objects? Couldn&#x27;t you keep their transform in a separate data structure which you can update independently and pass to a shader (or similar) for rendering? I&#x27;m thinking something similar to how particles in VFX are usually done.

Missing 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&#x27;ll be blazingly fast.

I’ve done some hobby game-developing in the browser and I always end up frustrated by the poor and inconsistent performance.<p>Using Unity to compile to the browser seems to yield much better performance out of the box

I think a well written GPU renderer (in webGL for example, if running in the browser) ought to be able to render 30,000 dots at 60fps, even on an intel GPU.

have you considered moving the simulation to worker(s), and providing the game state to the render function through a SharedArrayBuffer?

is the profiler a home-grown one? or publicly available?

Hero