JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.4.8/phaser.min.js"></script>
JavaScript
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', {
create: create
});
var sprite1;
var sprite2;
function create() {
game.physics.startSystem(Phaser.Physics.P2JS);
// sprite1
sprite1 = game.add.sprite(50, 50, createCircle(game, 's1', 10, 'red'));
game.physics.p2.enable(sprite1, true);
sprite1.body.static = true;
// sprite2
sprite2 = new Phaser.Physics.P2.Body(game, game.add.sprite(50, 100, createCircle(game, 's2', 10, 'red')), 50, 100);
sprite2.debug = true;
sprite2.static = true;
// run
setTimeout(function() {
sprite1.body.velocity.x = 200;
sprite2.velocity.x = 200;
}, 2000);
}
function createCircle(game, key, r, color) {
const bmd = new Phaser.BitmapData(game, key, r * 2, r * 2);
bmd.ctx.translate(r, r);
bmd.ctx.beginPath();
bmd.ctx.fillStyle = color;
bmd.ctx.arc(0, 0, r, 0, Math.PI * 2);
bmd.ctx.fill();
game.cache.addBitmapData(key, bmd);
return game.cache.getBitmapData(key);
}