6 ms·

What I'm curious about, as somebody who's writing their own game right now which targets HTML5 (among other things), is how you were able to achieve such great

by dom96 7y ago

What I'm curious about, as somebody who's writing their own game right now which targets HTML5 (among other things), is how you were able to achieve such great performance. I've given your game demo a quick look and it plays incredibly smoothly, do you have any tips on what to avoid for best rendering performance?

riadd 7y ago
Thanks! We made extensive use of Canvas caching and only redrawing if things changed. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/...
- lazerwalker 7y ago
  I'm guessing that means you rolled your own canvas API code, rather than using a library like PixiJS. Is that something you'd consider open-sourcing, or is it so tightly integrated with game-specific logic that it wouldn't make sense?
  - riadd 7y ago
    Yes, no helper libraries and I coded quite close to the metal.It's probably even a stretch to call it an engine. It's just built around the specific game mechanics. It wouldn't make sense to open source that part unfortunately.
- komali2 7y ago
  Whenever I try to use Canvas caching I run into an issue I don't yet fully understand that causes my images to come out of cache blocky and terrible looking. Something about a max canvas size? I don't quite get it. Happens whenever I use fabric.js caching.
  - deleted 7y ago
    [deleted]
danShumway 7y ago
Not OP, but a few tips from my experience: - Use `requestAnimationFrame`, don't use timers. JS timers are really bad, and they won't sync with monitor refresh rates. - If possible, avoid lots of canvas calls. For example, if you want to draw something simple like a bunch of boxes on the screen, grab the pixel array from the canvas and manipulate it directly, don't call `ctx.rect` in a for loop. I once stuck in a quick dozen-line block of code before a demo that just drew a couple hundred tiny pixel stars in the background and occasionally randomized their position. Went back and profiled later and found out it was taking something like 30% of my render time each frame, and refactoring just that one block of code got rid of a bit of stuttering on old hardware. - On that note, cache stuff in memory. My game is tile-based. At the start of a level, I iterate over the tiles on an offscreen canvas and generate a single, giant image for the entire map. Then for subsequent frames I can render that with a single sprite call, rather than by iterating over every tile. Caching visual effects is huge. In general, don't be afraid to stick generated effects in RAM, because every call you make to Canvas has an overhead. - Also on that note, don't be afraid to use multiple canvases. If you have an overlay or a visual effect on top of your main game, and you can just update that without needing to redraw all of your sprites/tiles, that can sometimes be a big performance benefit.
- chrisweekly 7y ago
  (Not OP w the Q you answered) Thanks! Great tips. Do you write about this stuff elsewhere?
  - danShumway 7y ago
    I don't have any articles specifically about canvas performance, but I'm pretty open about development so I probably will at some point in the future. If I do they'll be posted at https://loop-thesis.com/blog/ https://loop-thesis.com/blog/ (https://loop-thesis.com/rss.xml https://loop-thesis.com/rss.xml)
    - chrisweekly 7y ago
      Cool, thanks for your response. Checked out your "reset hard" prototype demo; it looks great! Reminds me a bit of Bret Victor's talk on inventing from first principles, and a game called "Braid" that involves actively playing with time as a 1st-class property of gameplay. You should post a "show hn" on it! :)
dyarosla 7y ago
I don’t know how this wasn’t mentioned yet but 100% use a Webgl framework, even for 2D games. Three.js is my personal favorite. Nowadays most all browsers and devices support it and I’m sure I don’t have to touch on the magnitudes of difference in speed for rendering anything on the GPU vs the CPU? If you plan on having any amount of medium to large numbers of things (heck I’d say any amount) you’d be doing it wrong to be using the 2D canvas API.
ttty 7y ago
You can use pixi.js for rendering. For example my game https://bitplanets.com https://bitplanets.com can run at 100fps on a mobile device (on phones that support that refresh rate, like one plus 7t)

by dom96 7y ago

riadd 7y ago

Thanks! We made extensive use of Canvas caching and only redrawing if things changed. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/...

lazerwalker 7y ago
I'm guessing that means you rolled your own canvas API code, rather than using a library like PixiJS. Is that something you'd consider open-sourcing, or is it so tightly integrated with game-specific logic that it wouldn't make sense?
- riadd 7y ago
  Yes, no helper libraries and I coded quite close to the metal.It's probably even a stretch to call it an engine. It's just built around the specific game mechanics. It wouldn't make sense to open source that part unfortunately.
komali2 7y ago
Whenever I try to use Canvas caching I run into an issue I don't yet fully understand that causes my images to come out of cache blocky and terrible looking. Something about a max canvas size? I don't quite get it. Happens whenever I use fabric.js caching.
- deleted 7y ago
  [deleted]

danShumway 7y ago

Not OP, but a few tips from my experience: - Use `requestAnimationFrame`, don't use timers. JS timers are really bad, and they won't sync with monitor refresh rates. - If possible, avoid lots of canvas calls. For example, if you want to draw something simple like a bunch of boxes on the screen, grab the pixel array from the canvas and manipulate it directly, don't call `ctx.rect` in a for loop. I once stuck in a quick dozen-line block of code before a demo that just drew a couple hundred tiny pixel stars in the background and occasionally randomized their position. Went back and profiled later and found out it was taking something like 30% of my render time each frame, and refactoring just that one block of code got rid of a bit of stuttering on old hardware. - On that note, cache stuff in memory. My game is tile-based. At the start of a level, I iterate over the tiles on an offscreen canvas and generate a single, giant image for the entire map. Then for subsequent frames I can render that with a single sprite call, rather than by iterating over every tile. Caching visual effects is huge. In general, don't be afraid to stick generated effects in RAM, because every call you make to Canvas has an overhead. - Also on that note, don't be afraid to use multiple canvases. If you have an overlay or a visual effect on top of your main game, and you can just update that without needing to redraw all of your sprites/tiles, that can sometimes be a big performance benefit.

chrisweekly 7y ago
(Not OP w the Q you answered) Thanks! Great tips. Do you write about this stuff elsewhere?
- danShumway 7y ago
  I don't have any articles specifically about canvas performance, but I'm pretty open about development so I probably will at some point in the future. If I do they'll be posted at https://loop-thesis.com/blog/ https://loop-thesis.com/blog/ (https://loop-thesis.com/rss.xml https://loop-thesis.com/rss.xml)
  - chrisweekly 7y ago
    Cool, thanks for your response. Checked out your "reset hard" prototype demo; it looks great! Reminds me a bit of Bret Victor's talk on inventing from first principles, and a game called "Braid" that involves actively playing with time as a 1st-class property of gameplay. You should post a "show hn" on it! :)

dyarosla 7y ago

I don’t know how this wasn’t mentioned yet but 100% use a Webgl framework, even for 2D games. Three.js is my personal favorite. Nowadays most all browsers and devices support it and I’m sure I don’t have to touch on the magnitudes of difference in speed for rendering anything on the GPU vs the CPU? If you plan on having any amount of medium to large numbers of things (heck I’d say any amount) you’d be doing it wrong to be using the 2D canvas API.

ttty 7y ago

You can use pixi.js for rendering. For example my game https://bitplanets.com https://bitplanets.com can run at 100fps on a mobile device (on phones that support that refresh rate, like one plus 7t)