Game Entity controlled states

In this post I'll show how to create a game entity controlled states.

Standing

A entity has only one state: stand. It is very easy to implement. It is quite common that after some period of inactivity entity performs some action. For example, it looks around, shuffle around, etc.

Our entity turns direction after some time of inactivity.

	update:function(){
	switch(this.state){
	case this.states.STANDING:
	this.stand();
	break;
	}
	},
	stand:function(){
	if( !(gameTimer % this.standingChangeTime) ){
	this.direction = Math.floor(Math.random() * 3);
	this.changeSprite();
	}
	},
	changeSprite:function(){
	this.sourceX = this.currentFrame * this.sourceWidth + this.sourceXPos;
	this.sourceY = this.direction * this.sourceHeight + this.sourceYPos;
	},

view raw Entity standing hosted with ❤ by GitHub

• full source

Looking

A entity has two states: moveTo, stand. An entity can move only in a circle, because we want to keep it at a specified location. The space in which it can move determine the circle radius.

States loop:

1. Calculate the angle of movement
2. Go to the boundary of circle
3. Standing
4. Go to the center of circle

	look:function(){
	switch(this.lookState){
	case 0:
	this.lookInit();
	break;
	case 1:
	this.lookOut();
	break;
	case 2:
	this.lookStand();
	break;
	case 3:
	this.lookIn();
	break;
	case 4:
	this.lookStand();
	break;
	case 5:
	this.lookState = 0;
	break;
	}
	},
	lookInit:function(){
	this.angle = Math.random() * 2 * Math.PI;
	this.targetX = this.x + (Math.cos(this.angle) * this.lookRadius);
	this.targetY = this.y + (Math.sin(this.angle) * this.lookRadius);
	this.setDirection( this.targetX - this.x, this.targetY - this.y );
	this.lookState = 1;
	},
	lookOut:function(){
	this.moveTo(this.targetX, this.targetY );
	if (this.x == this.targetX && this.y == this.targetY) {
	this.currentFrame = 0;
	this.changeSprite();
	this.lookState = 2;
	}
	},
	lookIn:function(){
	this.moveTo( this.XPos, this.YPos );
	if (this.x == this.XPos && this.y == this.YPos) {
	this.currentFrame = 0;
	this.changeSprite();
	this.lookState = 4;
	}
	},
	lookStand:function(){
	this.stand();
	if( !(gameTimer % 600) ){
	this.angle *= -1;
	this.setDirection( this.XPos - this.x, this.YPos - this.y );
	this.lookState++;
	}
	},
	moveTo:function(targetX, targetY){
	var vx = targetX - this.x;
	var vy = targetY - this.y;
	var magnitude = Math.sqrt((vx*vx)+(vy*vy));
	vx = vx/magnitude;
	vy = vy/magnitude;
	this.stepX = vx * this.speed;
	this.stepY = vy * this.speed;
	this.x += this.stepX;
	this.y += this.stepY;
	if( !(gameTimer % 10) ){
	this.updateSpriteAnimation();
	}
	if ((vx > 0 && this.x + this.speed >= targetX) || (vx < 0 && this.x - this.speed <= targetX)) {
	this.x = targetX;
	}
	if ((vy > 0 && this.y + this.speed >= targetY) || (vy < 0 && this.y - this.speed <= targetY)) {
	this.y = targetY;
	}
	},

view raw Entity looking hosted with ❤ by GitHub

• full source

Hen

A entity slowly moves across the surface. After contact runs. It has states: graze, run. Moving space is unlimited, but for border it can use the same technique as example above. After contact with the player it uses “easing” technique.

States loop:

1. Short random movement
2. Standing
3. Short random movement
4. If collision -> running

	hen:function(){
	if(this.isCollision(mouseX, mouseY)){
	this.henPrepareRun()
	}
	switch(this.henState){
	case 0:
	this.henInit();
	break;
	case 1:
	this.henGraze();
	break;
	case 2:
	this.henStand();
	break;
	case 3:
	this.henPrepareRun();
	break;
	case 4:
	this.henRun();
	break;
	}
	},
	henInit:function(){
	this.targetX = this.x + (Math.random() * 2 * this.henWalk) - this.henWalk;
	this.targetY = this.y + (Math.random() * 2 * this.henWalk) - this.henWalk;
	this.setDirection( this.targetX - this.x, this.targetY - this.y );
	this.henState = 1;
	},
	henGraze:function(){
	this.moveTo(this.targetX, this.targetY);
	if (this.x == this.targetX && this.y == this.targetY) {
	this.currentFrame = 0;
	this.changeSprite();
	this.henState = 2;
	}
	},
	henStand:function(){
	this.stand();
	if( !(gameTimer % 120) ){
	this.henState = 0;
	}
	},
	henPrepareRun:function(){
	var dx = this.centerX() - mouseX;
	var dy = this.centerY() - mouseY;
	var angle = Math.atan2( dy, dx );
	this.targetX += Math.cos(angle) * this.radius;
	this.targetY += Math.sin(angle) * this.radius;
	this.setDirection( this.targetX - this.centerX(), this.targetY - this.centerY() );
	this.henState = 4;
	},
	henRun:function(){
	if( !(gameTimer % 3)){
	this.updateSpriteAnimation();
	}
	var dx = this.targetX - this.centerX();
	var dy = this.targetY - this.centerY();
	if( Math.abs(dx) > 5 && Math.abs(dy) > 5 ){
	var vx = dx * this.easing;
	var vy = dy * this.easing;
	this.x += vx;
	this.y += vy;
	}else{ //stop easing
	this.henState = 0;
	}
	},
	moveTo:function(targetX, targetY){
	var vx = targetX - this.x;
	var vy = targetY - this.y;
	var magnitude = Math.sqrt((vx*vx)+(vy*vy));
	vx = vx/magnitude;
	vy = vy/magnitude;
	this.stepX = vx * this.speed;
	this.stepY = vy * this.speed;
	this.x += this.stepX;
	this.y += this.stepY;
	if( !(gameTimer % 7) ){
	this.updateSpriteAnimation();
	}
	if ((vx > 0 && this.x + this.speed >= targetX) || (vx < 0 && this.x - this.speed <= targetX)) {
	this.x = targetX;
	}
	if ((vy > 0 && this.y + this.speed >= targetY) || (vy < 0 && this.y - this.speed <= targetY)) {
	this.y = targetY;
	}
	},

view raw Entity hen hosted with ❤ by GitHub

• full source

Conclusion

Using the states we can define any behavior for our entity. Such code is clear, understandable and reusable.

It might interest you

• HTML5 game cookbook - examples of code
• Dialogues Builder for video games