How to create geometrical bodies with variable color?

[tidelake]

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() {
  game.physics.startSystem(Phaser.Physics.ARCADE);

  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');
}

 

[fillmoreb]

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:

game.debug.geom(ground,'#0fffff');

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();
groundSprite.addChild(g);
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:

g.clear();
g.beginFill(0x0000FF);
g.drawRect(0,0,game.world.width,50);

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