sprites or graphics ?

[jerome]

Hi,

 

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 ?

[rich]

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.

[jerome]

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 :-)

[rich]

 

I tried your links but I get a 'site down' error. So do post again when the game is finished and I'll be sure to check it out!

[jerome]

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)

[rich]

Really can't connect to that either Have tried various browsers and 2 networks here but fails. I tried it on "Down For Everyone Or Just Me" and it worked fine, so it must be a local routing issue or something. Most weird.

[jerome]

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 :-)

[rich]

The problem with the Pixi Graphics class is the way the primitives are created. If you need to use it extensively you'll notice the hit involved, where-as a rendertexture is optimised for extremely fast drawing of textures, the more repeated the better.

[jerome]

ok

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