So You Want to Make an Enemy - PluresHiemes/Game_template GitHub Wiki

Step 1: Creating the Constructor

Create a new file. Call it Enemy.

Step 2: Code

var Enemy = function(game,x,y,key,frame) {
    key = 'missile';
    Phaser.Sprite.call(this,game,x,y,key,frame);
    this.scale.setTo(2);
    this.anchor.setTo(0.5);
    
    this.animations.add('fly');
    
    this.game.physics.arcade.enableBody(this);
    this.body.allowGravity= false;
    this.checkWorldBounds = true;
    this.onOutOfBoundsKill=true;
    this.events.onRevived.add(this.onRevived,this);
};

This An Objects constructor define all the initial properties of said object. It works the kinda the same way the create: function() works in your state files. In order to make an enemy you must first create the object and define the properties you want it to have( things like position, what image it uses, its ID, and so forth)

So, What I've done here is create an object called Enemy that takes in 5 inputs ( what game it goes to, x position, y position, the ID of the image it will use, etc)

by setting key = 'missile' I am telling phaser to give it the image associated with the ID 'missile'

Everything else is optional( giving the item physics and other properties and what not) The most important this however is the line that reads:

 Phaser.Sprite.call(this,game,x,y,key,frame);

This line tells phaser that you want this object to be considered a Sprite. A sprite is a Phaser Object that can move around the make and be effected by the Phaser physics engine. So that Everything can fit well together, we want this our custom object to fit within the Phaser framework. "This" is a reference to the object enemy itself and the rest I described above.

The next things we need to is to officially make this our constructer and cement our connection to the Phaser Sprite object

  Enemy.prototype= Object.create(Phaser.Sprite.prototype);
  Enemy.prototype.constructor = Enemy;

after that you can begin adding methods to the object using the Following format: 'Object_name'.prototype.'method name' = function(){ // code }

For example:

Enemy.prototype.update = function(){
    //Your code here
}

The method is called update and it belong to the Enemy.

Here is the Full example:

var Enemy = function(game,x,y,key,frame) {
    key = 'missile';
    Phaser.Sprite.call(this,game,x,y,key,frame);
    this.scale.setTo(2);
    this.anchor.setTo(0.5);
    
    this.animations.add('fly');
    
    this.game.physics.arcade.enableBody(this);
    this.body.allowGravity= false;
    this.checkWorldBounds = true;
    this.onOutOfBoundsKill=true;
    this.events.onRevived.add(this.onRevived,this);
};

Enemy.prototype= Object.create(Phaser.Sprite.prototype);
Enemy.prototype.constructor = Enemy;
    
Enemy.prototype.onRevived = function() {
    this.body.velocity.x=-400;
};

Step 3: add it to Game.js

To put your enemy in the game. Inside your Game.js' create method write the following:

 this.enemy = new Enemy(this.game, 0, 0);//  the 0's are the x and y position.

note that i am not using all the arguments that gave it ( i.e. key and frame) but you can if you would like to ( it shouldn't break anything.)