Using Arcade Physics in Kiwi.js

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.

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.

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.

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.

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.

Share the joy
Comments 2

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">