Jump to content

sprites or graphics ?


Recommended Posts



I'm new to this amazing framework and I'd like to thank Rich and every contributor for this excellent work.

People loving old good Ataris can't be bad !


As I'm learning Phaser, I try to port some tiny games I formerly coded  for my son without any framework.

Thus, I'm working on a prototype of starwars/star raider-like game : http://jerome.bousquie.fr/raphael/jeux/starwars/starwars.html (no framework, canvas 2D, no preloader -reload until the cannons display, CTRL = fire)


My yesterday attempt with Phaser is here : http://jerome.bousquie.fr/phaser/game1/ (no cannon yet)


As you can see, I use sprites for the starfield here whereas I used only fillRect() in the canvas 2D version.

I know Phaser is very effective in sprite management but I wonder if it would be better to use graphics to draw and render the starfield.

Is it more expensive to draw and animate many small rectangles or circles drawn with graphics or to set sprites and use their body physics ?


Considering I will have to use graphics to draw the lasers, maybe is it a good option to draw the starfield with graphics too ?


In general, do you advice to opt for sprites or for graphics rendering in case where both could be used for quite the same result ?

Link to comment
Share on other sites

For a starfield I would recommend either a RenderTexture (indeed there is a starfield in the Examples that uses this technique!) or a BitmapData which you then could fillRect to. But for optimal WebGL the RenderTexture will be faster.


Basically use image based graphics as much as possible, it's what GPUs are optimised for! The more native graphics style operations you have in canvas, the less speed advantage you gain. Although for a simple game it will hardly matter, I still reckon it's a good practise to fall in to.

Link to comment
Share on other sites

ok, found here : http://gametest.mobi/phaser/examples/_site/view_full.html?d=display&f=render+texture+starfield.js&t=render%20texture%20starfield


thanks 1 : for the starfield and RenderTexture tip I haven't explore so far

thanks 2 : for the general recommendation about image based graphics. I appreciate your detailed answer and the general good practice given with it.

thanks 3 : for the framework, again :-)

Link to comment
Share on other sites

site down ?

seems weird as I'm currently downloading them... maybe some cache on the way serving an obsolete answer ?

same links with a different URL :

http://web.iut-rodez.fr/~jerome/raphael/jeux/starwars/starwars.html  (no phaser, no preloader -so reload until you get the cannons, CTR to fire)


http://web.iut-rodez.fr/~jerome/phaser/game1/ (phaser, a simple starfield based on sprites)

Link to comment
Share on other sites

When talking about graphics, I meant something like graphics.drawCircle() (from the Graphics class) which calls some webGL function, and then some openGL primitive, through the Pixi layer. 

So I was rather eager to compare performances about sprite rendering and webGL drawing in phaser...


I took a look a the RenderTexture object and I'm not sure it will better fit my starfield. I'll give it a try however.


happy new year to everyone :-)

Link to comment
Share on other sites


very useful answer !

I'm just beginning with Phaser but I like to start with the best practices in webGL, pixi, phaser, html5 game dev, etc

So I'll check rendertexture, even for drawing my laser lights ;-)


thanks again

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...