impact-banner

Your First HTML5 game using ImpactJS – part 6

Creating Items is basically the same as creating the player. We create a new entity with a file name of item.js. An put the following code inside it.

ig.module(
'game.entities.item'
)
.requires(
'impact.entity'
)
.defines(function() {

EntityItem = ig.Entity.extend({
});

});

Before going on. Download this zip file containing the new art for the new entities we are creating.

Alright, now let’s add the properties for our new item entity. Add the following code inside the Entity Definintion:

EntityItem = ig.Entity.extend({

size: {x:16, y: 16},
flip: false,
gravityFactor: 0,
animSheet: new ig.AnimationSheet('media/item.png', 16, 16),

});

The item has an sprite-sheet representing an spinning gem.

Spinning Gem Sprite sheet
Spinning Gem Sprite sheet

Lets define this animation. Add an init function for the item inside put the animation definition like this:

init: function(x, y){
this.parent(x, y);
this.addAnim('spin', 0.1, [0,1,2,3]);
}

By now you can add the item entity in weltmeister by pressing spacebar on the entities layer.

Prees spacebar to add an entity
Press spacebar to add an entity

If you play the game right now you cannot do much with the gems. We need to be able to pick them up by touching them. Let’s add the code to do so.

First add the following properties on the player.js file under the animSheet property:

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

// allow collision detection with other entities
type: ig.Entity.TYPE.A,

Now add this to the item.js file:

// allow collision detection with other entities
type: ig.Entity.TYPE.B,
checkAgainst: ig.Entity.TYPE.A,

This will let us define the relationship of our entities when they touch or collide each other. Now add a check function after the init function to our item.js file:

init: function(x, y){
// code hidden
},
check: function(other){
this.kill();
}

Now whenever an item entity touches an entity with the type A it will trigger a check function. So in this case we just kill the item entity.

Try it now. You can collect gems in our game.

Let’s make it more fun to collect Items by adding a visual feedback, a score and a sound when you collect a gem item.

In our item.js file lets add a new entity definition after the item definition like this:

EntityItem = ig.Entity.extend({
// code hidden
});
EntityFedback = ig.Entity.extend({
size: {x:16, y: 16},
flip: false,
gravityFactor: 0,
animSheet: new ig.AnimationSheet('media/feedback.png', 16, 16),
init: function(x, y){
this.parent(x, y);
this.addAnim('feedback', 0.1, [0,1,2,3]);
},

});

Defining the feedback inside the item entity file allows us to spawn a feedback entity from the item.js file like this:

check: function(other){
this.kill();
ig.game.spawnEntity(EntityFedback, this.pos.x, this.pos.y);
}

Screen Shot 2017-06-01 at 3.16.04 PM

Now lets get rid of the feedback after half a second after its creation with a timer.

In the init function of our Feedback definiton create a timer and then create an update function with a conditional to check when half a second has elapsed like this:

init: function(x, y){
this.parent(x, y);
this.addAnim('feedback', 0.1, [0,1,2,3]);
this.killTimer = new ig.Timer();
},
update: function(){
this.parent();
// destroy after a second
if(this.killTimer.delta() > 0.5){
this.kill();
}
},

Very good! But we can do better. Let’s add a sound. This is pretty easy to do. Just add the following lines of code after the spawn function in the item.js file like this:

// play a sound
var sound = new ig.Sound( 'media/pickup.ogg' );
sound.play();

And lastly lets add a score. So whenever the player picks a gem it sums to the score.

By default the main.js file template that comes with impact has the font ready to use, but just let’s be sure by checking the following.

Make sure the font is required:

.requires(
'impact.game',
'impact.font'
)

Make sure the font is defined in the properties like this:

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

Now the Draw method of the main.js file should be like this:

draw: function() {
// Draw all entities and backgroundMaps
this.parent();
this.font.draw( 'Score: ', 10, 10, ig.Font.ALIGN.LEFT );

}

Now lets update our score by creating an score_points property in our main.js file

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

And display it on the score text like this:

draw: function() {
// Draw all entities and backgroundMaps
this.parent();
this.font.draw( 'Score: ' + this.score_points, 10, 10, ig.Font.ALIGN.LEFT );

}

Then add to the score whenever we pick a gem like this:

check: function(other){
this.kill();
ig.game.spawnEntity(EntityFedback, this.pos.x, this.pos.y);
// play a sound
var sound = new ig.Sound( 'media/pickup.ogg' );
sound.play();
// add to the score
ig.game.score_points += 10;
}

That’s all for this part try it!

 

Score at the top-left corner of the screen
Score at the top-left corner of the screen

On the next part we will be adding enemies.

 

Complete code 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
59
60
61
62
63
64
65
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,
    score_points: 0,
   
    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();
        this.font.draw( 'Score: ' + this.score_points, 10, 10, ig.Font.ALIGN.LEFT );
       
    }
   
});


// 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
71
72
73
74
75
76
77
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),
           
            type: ig.Entity.TYPE.A,


            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") && 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 > ig.system.height){
                    this.kill();
                   
                }
            },
           
           
           
            kill: function(){
                // reset the player
                this.pos.x = 64;               
                this.pos.y = 144;
            }

        });

    });

item.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.entities.item'
)
    .requires(
    'impact.entity'
)
    .defines(function() {

        EntityItem = ig.Entity.extend({
           
            size: {x:16, y: 16},
            flip: false,  
            gravityFactor: 0,          
            animSheet: new ig.AnimationSheet('media/item.png', 16, 16),
           
            // allow collision detection with other entities
            type: ig.Entity.TYPE.B,
            checkAgainst: ig.Entity.TYPE.A,        
   
   
            init: function(x, y){
                this.parent(x, y);
                this.addAnim('spin', 0.1, [0,1,2,3]);                              
            },
                                   
            check: function(other){
                this.kill();
                ig.game.spawnEntity(EntityFedback, this.pos.x, this.pos.y);
                // play a sound
                var sound = new ig.Sound( 'media/pickup.ogg' );
                sound.play();
                // add to the score
                ig.game.score_points += 10;
            }
                       
        });
       
       
        EntityFedback = ig.Entity.extend({         
            size: {x:16, y: 16},
            flip: false,  
            gravityFactor: 0,          
            animSheet: new ig.AnimationSheet('media/feedback.png', 16, 16),
            init: function(x, y){
                this.parent(x, y);
                this.addAnim('feedback', 0.1, [0,1,2,3]);
                this.killTimer = new ig.Timer();
            },
            update: function(){
                this.parent();
                // destroy after a second
                if(this.killTimer.delta() > 0.5){
                    this.kill();
                }
            },
        });

    });

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

Show all Impact Tutorials