Getting started with Geometry

[Travis]

Hi guys, 

 

I was wondering if any of you have had any luck getting vector shapes (circle, rectangle) drawn in Phaser 1.0.

Example: http://gametest.mobi/phaser/index.php?f=circle.js&d=geometry

 

In previous versions (see this link: http://gametest.mobi/phaser/geometry/circle.js) you would create a geomSprite on the Phaser.Game.

 

Now there is Phaser.game.add(), where the parameters of add are listed here: https://github.com/photonstorm/phaser/blob/master/src/gameobjects/GameObjectFactory.js

 

But none of those options seem to have support for Phaser.Circle or Phaser.Rectangle. I tried looking into the Phaser.Graphics, but that doesn't have support for geom objects either.

 

It would be nice to have some direction on this issue!

[rich]

Yeah GeomSprites had to go because of WebGL support (they're trivial in canvas, less so in WebGL). If you create a Graphics object then you can do 'moveTo', 'lineTo', 'drawRect', 'drawCircle' etc on it. Alternatively if you run your game in CANVAS mode, not AUTO/WEBGL then look at game.debug - it has lots of functions like game.debug.renderRectangle, game.debug.renderCircle, renderPoint, renderText, etc. I use it extensively for debugging

[Travis]

Ah, thanks rich. I didn't think to check in Debug... 

[Travis]

So, for some reason debug isn't working for me!

	var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', {		preload: preload,		create: create,		update: update	});	function preload() {	}	function create() {		game.debug.renderCircle(new Phaser.Circle(100, 100, 100));		game.debug.renderText("Test", 0, 0);	}	function update() {	}

just gives me a blank screen

[rich]

Debug calls should go the render function so they are called every frame AFTER the main game has rendered. Also change the text to 0, 32, as the y is the baseline value.

[Travis]

Thanks again, shame on me for not fully reading the reserved functions post you made

[Gabetin]

Hey guys,

 

we want to write text on a circle, but it doesn't work, because you can build the text only in function update, and the circle only in function render. What causes, that the text is written behind the circle and not visible.

 

We'd be happy if someone could help us with that!

[Dabney]

Gabetin,

Is your circle a sprite?  If so, I experimented a bit with putting text on top of a sprite and it worked for me.  Here is some excerpts from my code

 

function create() {

        panel = game.add.sprite(game.world.centerX, 0, 'factorystuff', 'factorypanel.png');

       equationText = game.add.text(panel.x, panel.y, 'test',{ font: "20px Arial", fill: "#ffffff", align: "center" });

}

 

Since I wanted my text to move with the 'panel', I added this to the update function.

function update () {

     equationText.x = panel.x;

     equationText.y = panel.y;

}

 

Maybe someone more familiar with Phaser can chime in with a better/more efficient way to do this, but this worked for me.  Hope this helps.