impact-banner

Your First HTML5 game using ImpactJS – part 5

The Camera

Right now the camera is static and wont follow the player. So we are not able to see the rest of the level. To fix this situation we will tell the screen to always align to the player position whatever its position is on the level.

The first thing to do is to get a reference to the player and save it in a property.

// Load a font
font: new ig.Font( 'media/04b03.font.png' ),
gravity: 300,
player: null, <-- add this

And get the reference to the player in the init function in the main.js file:

init: function() {
	// older code
		
	this.player = this.getEntitiesByType( EntityPlayer )[0];
},

Once we have the reference to our player entity we can tell the screen to center around the player. Tell the screen position on the “X” axis to be the player position on x and then substract half the size of the width of our game. Then repeat the same for the “Y” axis. Do all this on the update function of the main.js file.

update: function() {
	// Update all entities and backgroundMaps
	this.parent();
	
	// Add your own, additional update code here
    
    if( this.player ) {
          this.screen.x = this.player.pos.x - ig.system.width/2;
          this.screen.y = this.player.pos.y - ig.system.height/2;
    }
	
	 
},

Go and refresh the page and you should see that the “Camera” is following our hero.

Some empty space shows on the edges of the game
Some empty space shows on the edges of the game

You may notice that some ugly “empty” black space is showing on the edges. You can fix this bby any of these ways.

1 – Make your level taller to fill the gap

2 – Resize the screen of your game screen making it shorter.

3 – Or implement a better camera code. Look at this thread to find out how: http://impactjs.com/forums/help/screen-scrolling

Animation States

When player moves it needs a walk animation. So let’s add a new animation called ‘walk’ on the player.js file at the end of the init function:

init: function(x,y,settings) {
    this.parent(x, y, settings);
    this.addAnim('idle',1,[4]);				
	this.addAnim('walk', 0.1, [0, 1, 2, 1]);
},

Now add the following code at the end of the update function in the player.js file

update: function(){
    // older code
	
	// animations
	if(this.vel.x == 0){
		this.currentAnim = this.anims.idle;
	}else{	
		this.currentAnim = this.anims.walk;
	}
}            
			

What we are doing here is just checking if the player velocity is different than 0 (in other words is moving) then play the walk animation. Otherwise play the idle animation.
Try it out. You should see the player running to the right.

But wait if you walk to the left it won’t turn around. Lets fix that.

First you need to switch the flip property of our player whenever we move it right or left. Set the flip value to true or false in the code as shown below. In the player.s file:

if(ig.input.state("left")){
    this.accel.x = -this.speed;
	this.flip = true;

Then flip the animation according to the player flip property. Add this to the end of the update function in the player.js file:

update: function(){
    // older code
	
	this.currentAnim.flip.x = this.flip;
}            
			

Try it! It should turn now.

Now Lets add an animation for the jump. Under the walk animation add the following code:

this.addAnim('jump', 0, [3]);

Then modify the animation chunk of code of the update function like this:

// animations
if(!this.standing){
	this.currentAnim = this.anims.jump;	
}else if(this.vel.x == 0){
	this.currentAnim = this.anims.idle;
}else{	
	this.currentAnim = this.anims.walk;
}

Try it, it should look like its jumping now instead of walking on middle air.

Now what happens if you fall in the lava? You keep falling forever in an endless pit. We wwould want our player to die if that happens.

Let’s kill our player when that happens by checking its position on the Y axis. Put the folling at the end of the update function of our player.js file:

update: function(){
    // older code
	
	
	// check death from falling
	if(this.pos.y > ig.system.height){
		this.kill();
		
	}
}           

Try falling now. What we are doing here is destroying our player entity. So we are not able to play anymore. So instead of just killing it we are now going to reset its position so we can start again.

Lets override the kill function by defining it again but with our own terms. Add a kill function definition under the update function like this on the player.js file:

update: function(){
    // hidden code
},

kill: function(){
	// reset the player position instead of destroying it
	this.pos.x = 64;				
	this.pos.y = 144;
}          

Here we are overriding the killing function. Since we are not calling the parent() function, it wont execute its ancestor code.

Well This is all by now in the next part we are adding items.

Code up to date for this Part

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
ig.module(
'game.main'
)
.requires(
'impact.debug.debug',
'impact.game',
'impact.font',

// levels
'game.levels.level_1'
)
.defines(function(){

MyGame = ig.Game.extend({

// Load a font
font: new ig.Font( 'media/04b03.font.png' ),
gravity: 300,
player: null,

init: function() {
// Initialize your game here; bind keys etc.

this.loadLevel(LevelLevel_1);

// key binding
ig.input.bind(ig.KEY.LEFT_ARROW,'left');
ig.input.bind(ig.KEY.RIGHT_ARROW,'right');
ig.input.bind(ig.KEY.SPACE,'jump');

this.player = this.getEntitiesByType( EntityPlayer )[0];
},

update: function() {
// Update all entities and backgroundMaps
this.parent();

// Add your own, additional update code here

if( this.player ) {
this.screen.x = this.player.pos.x - ig.system.width/2;
this.screen.y = this.player.pos.y - ig.system.height/2;
}

},

draw: function() {
// Draw all entities and backgroundMaps
this.parent();

}
});

// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 320, 240, 2 );

});

player.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
ig.module(
'game.entities.player'
)
.requires(
'impact.entity'
)
.defines(function() {

EntityPlayer = ig.Entity.extend({

size: {x:16, y: 16},
flip: false,
gravityFactor: 1,
maxVel: {x: 100,y: 150},
friction: {x: 300,y: 0},
speed: 150,
jump_speed: -200,
animSheet: new ig.AnimationSheet('media/player.png', 16, 16),

init: function(x,y,settings) {
this.parent(x, y, settings);
this.addAnim('idle',1,[4]);
this.addAnim('walk', 0.1, [0, 1, 2, 1]);
this.addAnim('jump', 1, [3]);
},

update: function(){
this.parent();

if(ig.input.state("left")){
this.accel.x = -this.speed;
this.flip = true;
} else if(ig.input.state("right")){
this.accel.x = this.speed;
this.flip = false;
}else{
this.accel.x = 0;
}

if(ig.input.pressed("jump") &amp;&amp; this.standing){
this.vel.y = this.jump_speed;
}

// animations
if(!this.standing){
this.currentAnim = this.anims.jump;
}else if(this.vel.x == 0){
this.currentAnim = this.anims.idle;
}else{
this.currentAnim = this.anims.walk;
}

this.currentAnim.flip.x = this.flip;

// check death from falling
if(this.pos.y &gt; ig.system.height){
this.kill();

}
},

kill: function(){
// reset the player
this.pos.x = 64;
this.pos.y = 144;
}

});

});

Hey, like this post? Why not share it with a buddy?

Show all Impact Tutorials