This tutorial will cover how to use the ArcadePhysics component in Kiwi.js. Located below is a demo showcasing the techniques from this tutorial. Control the position of the plane with the mouse and click to drop bomb on the units below.
Download or view the code for this tutorial in the Kiwi.js example repo here inside of the /tutorials/website_examlpes folder.
Adding ArcadePhysics to a Game Object
To use ArcadePhysics you first have to know how to extend objects in Kiwi.js. Luckily, there is an in depth tutorial teaching you how located HERE.
ArcadePhysics is a Kiwi.Component which can be attached to a GameObject. First we need to create an Object that extends a GameObject, in this example we are using a Sprite. Inside the constructor we can add the ArcadePhysics component to the object by adding it to its component manager. Note that it is advisable to attach it to a variable, so that we can access it easily later. The ArcadePhysics constructor requires you to pass it the object it will affect, almost always the object it’s being attached to, and a Rectangle, which will be used as the hitbox for collisions.
|
1 2 3 |
var Bomb = function( state, x, y ){ Kiwi.GameObjects.Sprite.call( this, state, state.textures[ 'bomb' ], x, y, true ); this.physics = this.components.add( new Kiwi.Components.ArcadePhysics( this, this.box ) ); |
In our game we have bombs that are dropping from a plane. We want these bombs to look like they are being affected by gravity. To do this we will have a positive initial velocity for the bomb and add a positive acceleration to the bomb on the y axis.
|
1 2 |
this.physics.acceleration = new Kiwi.Geom.Point( 0, 15 ); this.physics.velocity = new Kiwi.Geom.Point( 0, 9 ); |
Updating the ArcadePhysics Component
The ArcadePhysics needs to be updated manually in the object that has the ArcadePhysics component attached to it. This can be done in the update loop.
|
1 2 3 4 5 |
Bomb.prototype.update = function () { Kiwi.GameObjects.Sprite.prototype.update.call( this ); //Update ArcadePhysics this.physics.update(); } |
Detecting Collision Using ArcadePhysics
ArcadePhysics can be used to also detect collisions. In our game the bombs are being dropped onto enemy soldiers and tanks. ArcadePhysics can use a custom hitbox, which allows collision to be more precise. Simply replace the current hitbox with a new Rectangle specifying where collisions should occur.
|
1 2 3 4 5 |
var EnemyTank = function ( state, x, y ){ Kiwi.GameObjects.Sprite.call( this, state, state.textures[ 'tank' ], x, y ); this.box.hitbox = new Kiwi.Geom.Rectangle( 20, 20, 110, 100 ); this.physics = this.components.add( new Kiwi.Components.ArcadePhysics( this, this.box ) ); |
That’s the basics of setting up ArcadePhysics with your Kiwi.js GameObjects. You can learn about more uses for the ArcadePhysics component in our upcoming Advanced Tutorials.
Does kiwijs support collision for irregular objects yet?
@vikram Only collisions for basic geometric items at this stage (you can view the Geom module for more info). But we do plan on having a more advanced physics system at some point