I am using html5 to build a game and it is based on Canvas not webGL. I am trying to build sprites from canvas object not from images. Because there will be many sprites on the screen and each of them has different size and moves to different direction I would be using many canvas objects. I wonder if it's OK to put so many canvas objects on the browser screen. Will this make the game very slow?
\$\begingroup\$
\$\endgroup\$
5
-
\$\begingroup\$ So, you're using the canvas elements as html objects and you move them around with CSS? Why not just draw them on a canvas \$\endgroup\$– BálintCommented Jan 5, 2017 at 6:53
-
\$\begingroup\$ @Bálint I am not moving them around with CSS. I use pure javascript. Every one of them is different and can be destroyed so I think it is best to have different canvas objects. \$\endgroup\$– newguyCommented Jan 5, 2017 at 8:03
-
\$\begingroup\$ Oh, you use pixi. Then I assume they aren't actually visible \$\endgroup\$– BálintCommented Jan 5, 2017 at 8:48
-
\$\begingroup\$ @Bálint They will be visible once I put them onto a Texture. But technically speaking yes only the Textures are visible. \$\endgroup\$– newguyCommented Jan 5, 2017 at 9:51
-
\$\begingroup\$ could you mark one of the answers as correct? \$\endgroup\$– BálintCommented Jan 7, 2017 at 11:20
Add a comment
|
3 Answers
\$\begingroup\$
\$\endgroup\$
3
Elements not in tbe DOM don't affect the rendering performance because they aren't used by the DOM renderer. They only take up a bit of memory but until you have couple thousand of them or they each have insane resolutions, then you won't have a problem with this.
-
1\$\begingroup\$ You mean even if I use
document.createElement('canvas')but without usingdocument.body.appendChild(canvas)the element will not be in the DOM? That's awesome. \$\endgroup\$– newguyCommented Jan 5, 2017 at 11:00 -
\$\begingroup\$ @newguy Yeah, it's just memory. \$\endgroup\$– BálintCommented Jan 5, 2017 at 11:53
-
\$\begingroup\$ @newguy Yes,
document.createElement('canvas')is the JavaScript way to create a render target texture. \$\endgroup\$– PhilippCommented Jan 5, 2017 at 13:13
\$\begingroup\$
\$\endgroup\$
2
Whileit is possible to have hundreds of canvas elements being dynamically resided using CSS, it is not recommended because your code can get very ugly very fast. it is far easier to render sprites on the same canvas if you are building a serious game. If this is just a theoretical question, then yes, expect a severe increase in load time simply because CSS, being a style sheet language, was not built to handle advanced keyframing and animation. Just use one canvas.
-
\$\begingroup\$ No I am not building them using CSS. I use 2d context to build the canvas object. Then I put it into a sprite using PIXI.js 's sprite create method. \$\endgroup\$– newguyCommented Jan 5, 2017 at 8:05
-
\$\begingroup\$ I see. My comment about code ugliness as well as load speed still applies. Using canvas also restricts you in that background art as well as custom hotboxes are a pain in the neck to code \$\endgroup\$ Commented Jan 5, 2017 at 8:16
\$\begingroup\$
\$\endgroup\$
Having more than one canvas is a good way of improving performance actually.
And from my tile-world example I had two canvases with one of them being 3840px wide and high. But performance was still good. You can try it out here and/or look at the code on github if you are into that stuff.
If I didn't use two canvases I'd have to redraw a whole 3840px world or you'd have to come up with a method of knowing who's within the player's sight range and only draw them. Doing that again a single canvas is a bad idea, a better idea would be to draw the background/world on one canvas and never touch it again. Then add enemies and the player on their own respective canvases. You can read the full explanation here: Camera movement, Draw grid
Anyway...
You can check out this jsperf, this tutorial on making your own html5 game engine, and this section on canvas performance on html5rocks for more info and proof.
Hope this was helpful! Have a good day :D
