This tutorial will cover how to use mouse input and groups to control and manage your game objects. Located below is a simple demo showcasing the techniques from this tutorial. Control the direction of the turret using the mouse position and click to fire. Shoot the cannon at the incoming enemies to destroy them.
Download or view the code for this tutorial in the Kiwi.js example repo here inside of the /tutorials/website_examlpes folder.
Initializing the Mouse Object
We are going to need the mouse’s x and y coordinates to calculate our rotation. To do this we first need to access the game’s mouse object. The game’s InputManager has already created a Kiwi.Input.Mouse object when booted, and therefore we can get it using:
|
1 |
var mouse = this.game.input.mouse; |
Using the Mouse Object
We want our cannon to fire its bullets towards where the mouse is located. Therefore we need to calculate the angle between the cannon sprite and the mouse. Luckily, for those who didn’t pay attention in trigonometry, the Kiwi.Geom.Point class has a handy method, angleTo, for us to use. First we need to create a point at the center of the cannon and a point from the mouse’s coordinates. Then we can use the angleTo method to return the angle of rotation.
|
1 2 3 4 |
myState.findAngle = function () { this.mousePoint = new Kiwi.Geom.Point( this.mouse.x, this.mouse.y ); return this.centerPoint.angleTo( this.mousePoint ); } |
Using Mouse Input to Fire Bullets
Each time the mouse is clicked we want a bullet to fire from the cannon. To do this we need to detect when the mouse isDown. In our update method we simply need to check if the mouse’s isDown Boolean is true or not. This is automatically updated with the game’s event listener so we don’t need to worry about how it all works, just yet. If the mouse is down we call our createBullet method and reset the mouse. We need to reset the mouse as we only want one bullet to be created each time the mouse is pressed, otherwise a bullet will be created for every frame the mouse is down for, which is almost always more than one.
|
1 2 3 4 |
if ( this.mouse.isDown ) { this.createBullet(); this.game.input.mouse.reset(); } |
Adding Children to Groups
So far we have only looked at using two or three game objects in our games. However, most games will use many more than this. We need an efficient way to store a large, unrestricted number of objects without the need to create hundreds of unique variables. This is where Kiwi.Group come in. Groups are collections of Game Objects, usually sprites. For our game we need a group for bullets and a group for crates. Why two groups? Having two groups makes it super simple for calculating collisions later on. This is just an easy way to ensure that bullets only collide with crates and not other bullets. We can create the two groups using the following:
|
1 2 |
this.cannonBallGroup = new Kiwi.Group( this ); this.pirateShipGroup = new Kiwi.Group( this ); |
We also need to add the groups to the state, you can do this in the create method of the state.
|
1 2 |
this.addChild( this.cannonBallGroup ); this.addChild( this.pirateShipGroup ); |
This will cause children of the group to automatically update when the state updates.And now, when we create a new cannon ball or pirate ship we add them to the group. No need to add them to the state as well as the group is already a child of the state.
|
1 |
cannonBallGroup.addChild( new CannonBall( this, x, y, angle ) ); |
Detecting a Collision
Each frame we want to check to see if any bullets are colliding with crates, and if they are, we should remove the crate. To detect collisions between groups we can grab the array of members from each group, iterate through both of them and check if they collide. Get the arrays and iterate through them using:
|
1 2 3 4 5 |
var cannonBalls = this.cannonBallGroup.members; var pirateShips = this.pirateShipGroup.members; for ( var i = 0; i < cannonBalls.length; i++ ) { for ( var j = 0; j < pirateShips.length; j++ ) { |
To check the collision, take the bounds of the bullet’s and crate’s box and use the intersects method to check for a collision. If they collide then we need to destroy the crate, which completely removes the entity from the group, state and game.
|
1 2 3 4 5 6 |
var cannonBallBox = cannonBalls[i].box.bounds; if ( pirateShips[j].box.bounds.intersects( cannonBallBox ) ) pirateShips[j].destroy(); } } } |
So how would one differentiate between right and left button clicks? I’ve tried the following, but I’ve been unsuccessful:
this.mouse = this.game.input.mouse.onDown.add(Kiwi.Input.Mouse.LEFT_BUTTON);
**Differentiating Mouse Buttons**
if ( this.game.input.mouse.button === Kiwi.Input.Mouse.LEFT_BUTTON ) {
// This was a left mouse event
}
You’ve got LEFT, RIGHT, and MIDDLE buttons available.
Note that middle and right mouse buttons may perform default actions in the browser. Right now Kiwi won’t prevent that; we’re working on the issue.
**Callbacks**
When you invoke
this.game.input.mouse.onDown.add(), you’re actually creating a callback on aKiwi.Signalobject. The function wants another function as its first parameter. (It’s also usually a good idea to supply a context as the second parameter, for reasons related to the arcane nature ofthisin JavaScript.) When the signal fires (when the mouse clicks down), that callback executes.This is a useful way to attach code to events. We use callbacks all the time.
So to expand a little, your code probably wants to look something like this:
// Create a mouse handling method
// Note that it assumes the "this" context is on a State
var myMouseMethod = function() {
if ( this.game.input.mouse.button === Kiwi.Input.Mouse.LEFT_BUTTON ) {
// This was a left mouse event
// Do custom code here
}
};
// Assume the game state is called "state"
state.create = function() {
Kiwi.State.prototype.create.call( this );
// Add a callback to mouse clicks, with the context of this state
this.game.input.mouse.onDown.add( myMouseMethod, this );
};
This will cause
myMouseMethodto fire every time you click the mouse.There’s a lot more to callbacks, but I hope this is enough to get started!
Wow! Thanks a bunch for the detailed response! This is definitely enough to get me started.