impact-banner

Your First HTML5 game using ImpactJS – part 4

At this stage we should have a level done where our “Entities” will live on. An Entity on impact is basically an object that has properties and methods, think of them like an enemy, an item or the player character in a game.

Let’s create the player entity now. It will have the basic actions, walking and jumping. Create a new .js file and save it as player.js into the “entities/folder”

Screen Shot 2015-03-12 at 5.44.55 PM

 

All files in impact are created as modules. To create the player entity copy and paste the following code into your player.js file:

1
2
3
4
5
6
7
8
9
ig.module(
'game.entities.player'
)
.requires(
'impact.entity'
)
.defines(function() {

});

 

In the previous code we define our file as an impact module named player “game.entitites.player”, then  we required the “impact.entity” module because we are inheriting the base  code from the entity class. Now lets define our player properties and methods inside the “defines function”. We need to define its size and some other physics values and an init method, add the following code inside the “defines” funcion:

1
2
3
4
5
6
7
8
9
10
11
12
EntityPlayer = ig.Entity.extend({

size: {x:16, y: 16},
flip: false,
gravityFactor: 1,
maxVel: {x: 100,y: 150},
friction: {x: 600,y: 0},

init: function(x,y,settings) {
this.parent(x, y, settings);

}

Basically what i did was:

  1. Set the size of our entity to 16 x 16 pixels
  2. Set the flip property to false, this is used to flip our entity on the X axis.
  3. Set the gravity force to our entity, this will make our entity fall when is not standing on the ground
  4. Set friction and max velocities. They are useful to create a more realistic movement when the player moves
  5. Also i created an init function. This function is executed once when it’s created. Put inside it all the code you want to be executed once.

If you go back to weltmeister you will see the player in the entities list if you hit the space bar while the entities layer is selected.

Screen Shot 2015-03-12 at 6.20.17 PM

If you test the game our entity will be there however you won’t be able to see any player or entitity because we haven’t defined any animation spritesheet yet.  Add the following module in the require block in the main.js file to enable the debug panel.

'impact.debug.debug',

Now test the game again and click on the entities tab at the bottom of the page. Check the “Show Collision Boxes” option to see the boundary box of our entity represented by a red line square.

Screen Shot 2015-03-12 at 6.06.04 PM

 

 

To solve this invisible entity issue lets add an animation to our player entity. Make sure you have downloaded the assets files and place them in the media folder. Add the following property below the friction property in our player entity:

animSheet: new ig.AnimationSheet('media/player.png', 16, 16),

Observe that the path points to the “media” folder and the 16 parameters are for the width and height of the frame from the spritesheet player.png.

Now add the animation for the idle state inside the init function:

this.addAnim('idle',1,[4]);

The first parameter is the state of the animation, in this case “idle”, then there is the speed of the animation, and inside the brackets is the frame from the spritesheet, in this case it will be 4. Notice that the first frame is numbered as 0. So for the 5th frame will be write 4. Also pay attention that each frame has the same width and height. This is a technical requirement for impact. That all frames in the spritesheets have the same size proportion.

 

player-frames

 

If you test the game now you should see the player character now.

Screen Shot 2015-03-12 at 6.49.43 PM

 

Adding Controls

Lets add some controls to move our hero. For this we need to bind the keyboard on the main.js file. Add the following chunk of code inside the init function after the loadLevel function:

// 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');

Now, on the player.js file add an update function below the init function:

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

This function will execute every frame and we’ll check if a key was pressed to perform an action on our player file. Now lets add some properties  in our player.js

speed: 150,
jump_speed: -200,

Add the following conditional logic code inside the update function after the this.parent();

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

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

This is what the previous code is doing:

Check if the left or right arrows are being pressed. If the left key is being pressed change the acceleration in x to a negative value, if the right key is pressed change it to a positive value and if none is being pressed stop the player by setting the acceleration in x to 0.

If our hero is standing on the ground and the “space bar” (the jump key binding) was pressed then change its Y velocity to a negative value making it jump. Please note that you will need to add a gravity property to the main.js file in order to make the jump work. Add the following property at the main.js file:

gravity: 300,

Go and test your game and by now youwill have the basic actions for our hero.

Here’s the complete code for the player.js file:

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
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]);
},

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

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

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

});

});

And the code for the main.js file

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
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,

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');
},

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

// Add your own, additional update code here
},

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 );

});

Whats Next?

Camera configuration, states animation and more. Until next time!

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

Show all Impact Tutorials
  • Eekeemoo

    Loving this thanks for sharing… I am looking forward to making my first eekeemoo pixel game :)

    • ansimuz

      You are welcome!

  • Guest

    Great guide about impact! Loving it! :)

    btw. Do you recomend any specific plugin to use with impact? Have you use for example, impact++ on Elliot Quest?

    • ansimuz

      No, i didn’t use impact++ i tried to use the less possible plugins to avoid performances or incompatibilities issues.

  • Ian Andersen

    These are fantastic tutorials for impactjs, any plans to write the next one anytime soon? Thanks!

    • ansimuz

      Been very busy. But yes i will soon.