Jump to content

Getting started with Geometry


Recommended Posts

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! :D

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 months later...

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! :rolleyes:

Link to comment
Share on other sites


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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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