Rendering Shapes (Circles)

[BigRob154]

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() * this.game.width,                y = Math.random() * this.game.height,                d = 20;            var circle = new Phaser.Circle(x, y, d);            var text = this.game.add.text(x, 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];            this.game.debug.geom(o.circle, o.color, true);        }    }};

[Dream Of Sleeping]

 I think this graphics example has what you are looking for http://examples.phaser.io/_site/view_full.html?d=display&f=graphics.js&t=graphics

[Pedro Alpera]

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 () {    }};

[BigRob154]

Wow. I've totally missed BitmapData and Graphics.

Thanks a bunch 

 

I think I'll go with Graphics as I need to resize the shapes quite often.