Forums » Help » Creating a monster class issue

I'm following the tutorial to create a zombie monster class from the HTML5 game book by Jesse Freeman.. but I can't get the entity to move with the update function code explained in the chapter. My sprite size is 40 x 40 pixels with a 10 pixel offset so how do I modify it to work with this code example?

ig.module(
	'game.entities.thug'
)
.requires(
	'impact.entity'
)
.defines(function(){
	
EntityThug = ig.Entity.extend({
        animSheet: new ig.AnimationSheet( 'media/thug.png', 40, 40 ),
	size: {x: 40, y: 40},
        offset: {x: 10, y: 0},
	maxVel: {x: 100, y: 100},
	flip: false,
        friction: {x: 100, y: 0},
        health: 10,
        
	type: ig.Entity.TYPE.B, // Evil enemy group
	checkAgainst: ig.Entity.TYPE.A, // Check against friendly
	collides: ig.Entity.COLLIDES.PASSIVE,
	
	init: function( x, y, settings ) {
		this.parent( x, y, settings );
                //this.addAnim( 'idle', 1, [0] );
		this.addAnim( 'walk', 0.7, [1,2,3,4,5] );
	},
	
	update: function() {
		// near an edge? return!
		if( !ig.game.collisionMap.getTile(
                            this.pos.x + (this.flip ? +4 : this.size.x -4),
                                this.pos.y + this.size.y+1
			)
		) {
			this.flip = !this.flip;
		}
		
		var xdir = this.flip ? -1 : 1;
		this.vel.x = this.speed * xdir;
		
		this.parent();
	},
	
	handleMovementTrace: function( res ) {
		this.parent( res );
		
		// collision with a wall? return!
		if( res.collision.x ) {
			this.flip = !this.flip;
		}
	},	
	
	check: function( other ) {
		other.receiveDamage( 10, this );
	}
});

});

Did you define this.speed? Check the javascript console.

Thanks we'll spotted. Must have been trying to isolate the effect of the friction and offset values.

Unfortunately setting the speed property made no difference when I ran saved it and ran the game again , the entity just gets stuck looping the walk animation on the spot.

Then this.flip is changing every frame:

// near an edge? return!
if( 
	!ig.game.collisionMap.getTile(
		this.pos.x + ( this.flip ? 4 : this.size.x - 4 ),
		this.pos.y + this.size.y + 1
	)
) {
    this.flip = !this.flip;
}

Is grabbing the the tile at the entity's feet. If the entity is 4 pixels over the edge, the direction gets flipped. Are you certain the entity is standing on a collision tile?

I fixed it so that the thug ping pongs between two points

ig.module(
	'game.entities.thug'
)
.requires(
	'impact.entity'
)
.defines(function(){
	
EntityThug = ig.Entity.extend({
        animSheet: new ig.AnimationSheet( 'media/thug.png', 40, 40 ),
	startPosition: null,
	size: {x: 40, y: 40},
        offset: {x: 0, y: 0},
	maxVel: {x: 50, y: 50},
	friction: {x: 200, y: 200},
	speed: 40,
	angle: 0,
	dest: {x: 0, y: 0},
	health: 10,
	flip: true,
	
	type: ig.Entity.TYPE.B, // enemy group
	checkAgainst: ig.Entity.TYPE.A, // Check against friendly
	collides: ig.Entity.COLLIDES.PASSIVE,
	
	init: function( x, y, settings ) {
		this.startPosition = {x:x, y:y};
		this.parent( x, y, settings );
		
		// Add the animations
		this.addAnim( 'idle', 1, [0] );
		this.addAnim( 'lookup', 1, [0] );
		this.addAnim( 'lookright', 1, [1] );
		this.addAnim( 'lookdown', 1, [2] );
		this.addAnim( 'lookleft', 1, [3] );
		this.addAnim( 'walk', 0.2, [4,5,6,7,8,9] );
		this.addAnim( 'shoot', 0.7, [10,11,12,13] );
		this.addAnim( 'jump', 1, [0] );
		this.addAnim( 'fall', 0.7, [0] );
	},
	
	update: function() {
		// top down movement
		this.accel.x = 0;
		this.accel.y = 0;
		
		//when an obstacle is hit flip the entity
		var xdir = this.flip ? -1 : 1;
		this.accel.x = this.speed * xdir;
		
		if(this.vel.x > 0){
			this.currentAnim = this.anims.walk;
			this.angle = 0;
		}
		else if(this.vel.x < 0){
			this.currentAnim = this.anims.walk;
			this.angle = -Math.PI;
		}
		else if(this.vel.x == 0){
			this.currentAnim = this.anims.idle;
		}
		this.currentAnim.angle = this.angle;
		
		//console.log(this.dest.x + ' ' +this.dest.y);
		
		this.parent();
	},
	
	handleMovementTrace: function( res ) {
		this.parent( res );
		
		// collision with a wall? return!
		if( res.collision.x ) {
			this.flip = !this.flip;
		}
	},	
	
	check: function( other ) {
		other.receiveDamage( 10, this );
	}
});

});

Very cool! Good thinking.