Jump to content

How to create geometrical bodies with variable color?


Recommended Posts

Hello, I'm just getting my feet wet. I have an idea for a game, a pinball-style flipper.  I'd like to use geometrical shapes so I can change the color during the game, rather than use image sprites. So far this is all I have. I'm not sure how to apply colors to shapes.  I also need the shapes to behave like pinball flippers.  They will flip when tapped/touched.  Thank you so much. I'm eager to build my first game!

var paddles;
function create() {

  paddles = game.add.group();
  paddles.enableBody = true;

  var ground = new Phaser.Rectangle(0, game.world.height, game.world.width, 0)

  // var ground = platforms.create(0, game.world.height - 64, 'ground');


Link to comment
Share on other sites

Phaser.Rectangle is not a DisplayObject, it's not really meant to be drawn onto the screen.  You can use the debugger to visualize where a rectangle is like this:


But I don't suggest doing this for all of your game's visuals.  Instead I would make a sprite for the ground, add a graphics object as a child of that sprite, and draw a rectangle onto that graphics object, something like this:

var g = game.add.graphics();
var groundSprite = game.add.sprite();
g.beginFill(0xFF0000);  //Red Fill Color
g.drawRect(0,0,game.world.width, 50);

groundSprite.y = game.world.height - 50;

You can then recolor the rectangle at will by doing this:


You could also experiment with using groundSprite.tint to recolor your shapes.

Link to comment
Share on other sites


  • Recently Browsing   0 members

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