Ch009 - Game Mechanic: Add Moving Enemies

Game Mechanic: Add Moving Enemies

In this section, we’ll look at adding new enemies and making them move.. To create the movement we will use a process called tweening to do this. Our aim is to make the enemy appear in one place, and then for it to move back and forth making it difficult to get past.

What we need to know and what we will do

To be able to do this step it would help if you knew about the following from this book;

• Understand the core structure of our game and sequencing - see Building a World
• Collision detection using overlap() function- see Adding a Reward
• Already set up an enemies group which kill our player if touched - see Hazards and Enemies

Create an image for your Enemy and import it to your project

You can use a pixel art tools like Piskel or something similar to create a single frame enemy to more around the screen. You should then export this from Piskel as a PNG spritesheet and upload it to the assets folder of your project on glitch.com. There is help on how to upload in Add a Background.

Going over the code

The code for a minimal example of the Moving Enemies game mechanic is shown here - https://jamm-labs.github.io/ggcp/sgte-example-moving-enemy/js/game.js

This tutorial assumes you already have an enemies group and the code in update which makes your player disappear if touched.

Anywhere in the Playstate.preload function add the line:

  game.load.image("newenemy", "https://cdn.glitch.com/05027ea3-25db-40c7-803e-2f710bf696a1%2Fhazard.png?1549457791750");

If you want to add your own image for this moving enemy then be sure to change the link to the image in this line of code.

In Playstate.create function, after the code where you add the enemies group to the game, add the lines:

  var enemy1 = game.add.sprite(370, 320, "newenemy");
  enemies.add(enemy1);

Adding our enemy to the enemies group makes sure that it follows the normal rules for our enemy, normally that is that if our player hits the enemy something happens. Now let’s start to add some movement by adding a tween. A tween is a flexible way of controlling the properties of our game objects that are displayed on the screen. In this case we will alter the position of the enemy object.

Add these lines in the Playstate.create function after you have added your enemy1.

  var tween1 = game.add.tween(enemy1);
  tween1.to({x:170, y: 320}, 2000, null, true, 0,-1,true);

The tween code above will move our enemy to the position 170 pixels in from the left and 320 pixels down from the top, and it will take two seconds (2000 miliseconds) after the game starts. When it gets there it will move back and not stop doing it. Have a play with those figures to get the effect you want and to place your enemy where you want it to appear.

Taking it Further

To take this game mechanic further you may want to ;

• animate your enemy - see Add Animation to your Characters

• created a new sound to play when you hit this hazard - see Adding our own Sound Effects

  .