In Phaser how to force sprite physics be active / enabled after no movement

Question

New to Phaser JS and trying to build a "simple" game. If you can imagine the game brick breaker - just the base and the ball. I want to be able to move the base up and have the ball still sitting on the base. I also want to be able to tilt the base and have the ball "roll" down depending on which side is tilted.

Initially the ball drops and lands on the base and if I move the base right away everything works the way I expect. But my issue is after the ball is resting on the base, I can not move the base up without having the ball fall thru the base - I also can not tilt the base in that state because the ball does not move along while the base is tilting.

Maybe I need to somehow set the ball sprite (using Box2d physics in Phaser) to enabled / active so that the physics engine takes the sprite into consideration instead of ignoring it (once it's been "timed out")?

UPDATE: From @philipp's suggestion, using Phaser's default Arcade Physics, I am now able to get the up movement of the base to keep the ball sitting on-top (although there are some brief overlap's that I'd like to keep from happening and not sure how to prevent that at the moment?); I was not able to allow the ball to "roll" down either side while tilting the base. It seems that even though the base is being rotated that the collision area is not being moved and the ball does not know that it needs to "roll" down. Here is an example phaser sanbox with debugging information (move left or right to see the base rotate): http://phaser.io/sandbox/WVVnswOt/play

UPDATE 2: Here is a codepen of my Box2d Phaser attempt. If you use the arrow keys immediately to move the base up,down,left, right (while coliding with the box) then physics work as expected. If you wait a few seconds after the box rests on the base, moving the base has no effect on the box; I would like the box to be effected by the base even after the initial wait: http://codepen.io/mgalpy/pen/wWRBpo

UPDATE 3: Finally was able to achieve my goal. Made the base "static" but movable by using kinematic (instead of static) and zero'ing the base's velocities on each update. There is now rotation left and right. Here is a codepen with Box2d Phaser physics moving the bottom sprite with a sprite resting on top , and having the top sprite's physics respond - even after it has been inactive or at rest: http://codepen.io/mgalpy/pen/qNLVdA

// JavaScript source code
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', {
preload: function () {
    this.scale.pageAlignHorizontally = true;
    this.game.stage.backgroundColor = "#FFFFFF";
    this.game.load.image('boxImg', boxImg);
},
create: function () {
    this.game.physics.startSystem(Phaser.Physics.BOX2D);
    this.game.physics.box2d.gravity.y = 500;
    this.game.physics.box2d.setBoundsToWorld();

    var vertices = [[-57, 51.5, 54.5, 53, -55, 53.5]];
    this.box2 = this.game.add.sprite(420, 50, 'boxImg');
    this.game.physics.box2d.enable(this.box2);
    this.createPolygon(this.box2, vertices);

    this.box = this.game.add.sprite(420, 450, 'boxImg');
    this.game.physics.box2d.enable(this.box);
    this.createPolygon(this.box, vertices);
    this.box.body.fixedRotation = true;
    this.box.body.kinematic = true;

    this.cursors = this.game.input.keyboard.createCursorKeys();
},
createPolygon: function (piece, vertices) {
    piece.body.clearFixtures();
    for (var i = 0; i < vertices.length; i++) {
        piece.body.addPolygon(vertices[i]);
    }
},
render: function () {
    this.game.debug.box2dWorld();
},
update: function () {
    this.box.body.velocity.x = 0;
    this.box.body.velocity.y = 0;
    this.box.body.angularVelocity = 0;

    if (this.cursors.left.isDown) {
        this.box.body.rotateLeft(30);
    }
    else if (this.cursors.right.isDown) {
        this.box.body.rotateRight(30);
    }

    if (this.cursors.up.isDown) {
       this.box.body.moveUp(200);
    }
    else if (this.cursors.down.isDown) {
        this.box.body.moveDown(200);

    }
}
});

var boxImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABYCAYAAAB4fpBOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxOEM2MTA5OTk0RERFNDExOUExQUVFOUVENUM1REE4RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOTVEQzI2N0UxNDAxMUU0OUExNUE5MDkzOTc2MzE0MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOTVEQzI2NkUxNDAxMUU0OUExNUE5MDkzOTc2MzE0MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkI1MkE0QTFEMjlFMUU0MTFBM0I1RDA2NTA2MjUxOTkyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE4QzYxMDk5OTREREU0MTE5QTFBRUU5RUQ1QzVEQThGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+p0NIbgAAA29JREFUeNrsnTuPEzEQx+3dTUKSI3dClEjUiALRUHENLYJ6KyRKvsOVNPAF0oYqafkMUF1PARINAgnRXAL3IMk+GOe8y9jaSIDWPs76jzTSxLvO4zeT8fgRRU6nU9EgN0nvk+6TLlj7nLTU9jHpWts/Sc+0vdbXhL53zvp/J821fUK6Yv1PxSWUNE3/6v7EejwgHZM+ucDPUGjHNDn5B2mm7TPtKNvJhRUkC93W5OQqSDL93JUcbQkSFRRLbavnOZnNZsrOCfziTz6ctCL81QXDDkUWOkjekL4lZ7ysLkTspiFgtya7pHukj0hf0LfgdVNK2ec9vi5G4svRnujEed3WTfL6251EhYjkuR2RHUfapraE92G2ei4pz+1407/Qdrl5HLA8JujPKdIPOPC7/I756UB8/Hbd+zuT5LBOXBhOqpys2qV2snJQLJud3EksJ1fRFTMny99Olpv+BQusjPWn1xTsNevAKlh/YQTmFnlGepD8b6FQllKssrh+zO3LItU3+cGt92LUr8Z1cY2i/DYHvsM7rfMImfgfZZ3HdfBYEnGqsRlpAOdCoi22ykyg4xj4VaQUv8AhnoF3jfl1CV+4Bt7nF/ICORwpJTDgQzPCY9BxDDwxczjguAaOpO0Z+KhpegrBoBkM8A6/0LDwAnFZh2cFgh8pJTDgA6MOx+KV3xxeIIcjpYQGfBd1OCIcdTjEUZWCOhwpJSjg1m4P/OAaeBc1OFJK0MCNtfAM03rnwI0cUmLzxznwxKzBAcY18KGZUjCtx6AZGPArRh2OstA58J5Rh2Pig5QSGnDjbDgWrtwDt35ughzueeID8Ty1Rx2OQTMw4Fie9QwcGxBIKWEDtxav4AfXwM3lWayHI6WEBtw45rbK4AdEeGDAcczNM3Acc0NKwUwT0iJwrKUgpYQNHOvhnoFjx8czcOxpega+gzocg2bQwI2jbjh55bkOx9lCpBTU4ZA263AU4p7rcOxpeq7DsWuPQTPsOhxloXPgxk9OsAGBlBIUcCxceQaOpVnPwBHSnoFb/26CaT0GzcCAW79CRg53Kepc+CfeMOitxMM770CmBel3V3bTBwVc/eXsIem9TcjLUgx7S9BqXw7TNF1WOXwMHs5lzAfNCelTHemQliNbsaXonlQ5XDDoEz2I3gCnVuSzSiO84ZcAAwDMgAEnYKuw5QAAAABJRU5ErkJggg==';

philipp philipp · Accepted Answer · 2016-08-09T10:09:05

Phaser.js has its own Physics module, so you do not need to use Box2d in this case. Here you can find a basic tutorial to create a simple platform game which uses physics, so this might give you a basic understanding about the usage of phasers' physics engine.

The basic approach when using physics is, that you hand over the control about transformation of the objects in the physics world, to the physics engine. If you want to "move" or "rotate" the object within this "world", you need to apply forces on them, rather than setting the values directly, because that is, what the physics engine will do for you.

In Phaser how to force sprite physics be active / enabled after no movement

1 Answers