How to render a rectangle with color?

[dchhetri]

Sounds simple, but from the docs, I can't seem to find a phaser interface todo so, without having to use game.debug or manually change the fillStyle for the context. Anyone know how?

[JackBid]

Sounds simple, but from the docs, I can't seem to find a phaser interface todo so, without having to use game.debug or manually change the fillStyle for the context. Anyone know how?

I think the only way to do this is to use game.debug:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, render: render });var floor;function create() {    floor = new Phaser.Rectangle(0, 550, 800, 50);}function render () {    game.debug.renderRectangle(floor,'#0fffff');}

Is there a particular reason why you do not want to use game.debug?

[dchhetri]

I think the only way to do this is to use game.debug:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, render: render });var floor;function create() {    floor = new Phaser.Rectangle(0, 550, 800, 50);}function render () {    game.debug.renderRectangle(floor,'#0fffff');}

Is there a particular reason why you do not want to use game.debug?

 

 

From the name I assumed it wasn't necessarily meant to be used for production but just for debugging.

[rich]

Correct, don't use it for live and it only works in Canvas mode. If you need rectangle primitives in-game then use a Graphics object, as nothing else will work in WebGL. There's an example showing how to use it.

[jerome]

maybe this example will help :

http://gametest.mobi/phaser/examples/_site/view_full.html?d=display&f=graphics.js&t=graphics

[cbrwizard]

Hey, also starting with Phaser and just came up with the same question. This is the only info I found on the internets that a Rectangle shouldn't be used in production. Maybe this should be noted in the docs? https://photonstorm.github.io/phaser-ce/Phaser.Rectangle.html Like "Note: for production use a Graphics object, as nothing else will work in WebGL".

[samme]

You can use BitmapData#rect or Graphics#drawRect. Both work in CANVAS and WEBGL.

[ForgeableSum]

Or just use a sprite with whatever color you want as an image texture. That would be the best from a performance point of view. If you create a graphics object, you're creating a whole new webgl call. 

Bitmap data would be even worse on performance than graphics as you're creating a whole new canvas object.