Sign in to follow this  

Rendering Shapes (Circles)

Recommended Posts

I just stumbled over "Hundreds" ( iOS / Android Puzzle game ) and tried to find a way to render Circles with Phaser.

There is an example for rendering a circle with debug graphics, but it get's drawn last, so I can't really include the score / weight inside the circle.


What's the best way, if there is any currently, to draw Circles vector-like in Phaser? Do you have some directions for me here?


Thx a lot


Attached code:

App.Game.prototype = {    create: function() {        for (var i = 0; i < 10; i++) {            var x = Math.random() *,                y = Math.random() *,                d = 20;            var circle = new Phaser.Circle(x, y, d);            var text =, y, '' + 0, { font: "25px Arial", fill: "#ff0044", align: "center" });            text.anchor.set(0.5);            this.objects.push({                circle: circle,                color: 0x999999,                value: 0            });        }    },    render: function() {        for (var i = 0; i < this.objects.length; i++) {            var o = this.objects[i];  , o.color, true);        }    }};

Share this post

Link to post
Share on other sites

You could draw the circle on bitmapData and add it to the stage:

window.onload = function () {    var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render});    var bmd;    function preload() {    }    function create() {        game.stage.backgroundColor =  '#FFFFFF';        // Create BitmapData        bmd = game.add.bitmapData(800,600);        // Draw circle        bmd.ctx.fillStyle = '#999999';        bmd.ctx.beginPath();        bmd.ctx.arc(300, 200, 100, 0, Math.PI*2, true);         bmd.ctx.closePath();        bmd.ctx.fill();        // Put BitmapData in a Sprite        sprite = game.add.sprite(0, 0, bmd);        // Tweening just for fun         game.add.tween(sprite).to( {  y: 100}, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true);    }    function update() {    }    function render () {    }};

Share this post

Link to post
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.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.