Klõpsa mänguväljal; liikumine - nooleklahvid või AWDS!
Reload, kui mäng on läbi (peatub)!
Animatsiooni kirjeldamine spriidilehega
Selles loengus esitatakse:

Täiendame seenekorjamismängu - paneme tegelase liikuma; animeeritud (sammuv) kangekane näeb välja palju parem.

Animatsioon koosneb kaadritest ja neid on loomulik salvestada ja laadida spriidilehega.

Kangelase sammuma panemiseks lisame kangelase 32x32px pildile veel kaks 32x32px kaadrit. Esimene (spriidilehel keskmine) on saadud esialgse pildi peegeldamisel horisontaalselt - kuna kangelase jalgade ja käte asend pole täiesti sümmeetriline, tekib nende piltide vaheldumisi näitamisel sammumise effekt. Teine (spriidilehel alumine) on saadud esimese ja teise pildi (Photoshop-is) üksteise peale asetamisel ja nende kihtide kokkusulatamisel, kusjuures ülemise kihi visuaalseks effektiks on määratud "Darken", s.t. alumisele lisatakse ülemise kihi tumedamad pikslid. Tekib horisontaalselt sümmeetriline kujutis - kangelane seisab paigal. Kõigis kaadrites peab kangelase taust olema läbipaistev.

Animatsiooni kirjeldava spriidilehe põhjal loob animeeritud tegelase funktsioon animated; kõrvaloleval väikesel 32x32px kanvaal näidatakse tegelast, kes on loodud käsuga hero_ani1 = new animated(images.hero_ani,d0,d0,2,"walking",24) : 

 function animated(img,dx,dy,n_fr,state,sp){
	  this.image = img;
	  this.width = dx;
	  this.height = dy;
	  this.dx = dx; //this.width;
	  this.dy = dy; //this.height/3; //32
	  this.n_frames = n_fr; //number of frames
	  this.actualFrame = 0;
	  this.speed = sp;  //how many *game* frames a frame is shown
	  this.step = 0;
	  this.y = 0;
	  this.x = 0; 
	  this.state = state;		  
	  
	  this.setPosition = function(X, Y){
		this.x = X;
		this.y = Y;
	  }
	  this.draw = function(){
	   if (this.state == "still")
		ctx.drawImage(this.image,0,this.dy*2,this.dx,this.dy,this.x,this.y+yl,this.dx,this.dy);
		else {   //state == "walking"
		ctx.drawImage(this.image,0,this.dy*this.actualFrame,this.dx,this.dy,this.x,this.y+yl,this.dx,this.dy);
		this.step ++;
		if (this.step == this.speed) {
			this.actualFrame++;
			this.actualFrame = this.actualFrame%this.n_frames
			this.step = 0;
			}
			}
		}
	}

Kangelasel on kaks seisu (animatsiooni)

Seisule vastavalt valitakse ka joonistamiskäsud; kõndimise puhul määrab parameeter speed iga kaadri näitamise aja, s.t. animatsiooni kiiruse.

Seisu muutus toimub funktsioonis update: kui kangelane on tormanud vastu takistust (puud), ta peatub; peatub ka siis, kui klaviatuuril pole ükski nooleklahv alla vajutatud: 

function update(modifier) {
	if (38 in keysDown) { // Player holding up key
	if (hero.y > 0)
		{hero.y -= hero.speed * modifier;
		hero.state = "walking";}
		if (hero.y < d0) //can not go through trees!
			{hero.y = d0;
			hero.state="still";}
	}
	if (40 in keysDown) { // Player holding down
	if (hero.y < h - d0-hero.height)
		{hero.y += hero.speed * modifier;
		hero.state = "walking";}
		if (hero.y > h - d0-hero.height)
			{hero.y = h - d0-hero.height;
			hero.state = "still";}
	}
	if (37 in keysDown) { // Player holding left
	if (hero.x > 0)
		{hero.x -= hero.speed * modifier;
		hero.state="walking";}
		if (hero.x < d0)
			{hero.x = d0;
			hero.state = "still";}
	}
	if (39 in keysDown) { // Player holding right
	if (hero.x < w - d0-hero.width)
		{hero.x += hero.speed * modifier;
		hero.state = "walking";}
		if (hero.x > w - d0-hero.width)
			{hero.x = w - d0-hero.width;
			hero.state = "still";}
	}
	if (!(37 in keysDown) && !(38 in keysDown) && !(39 in keysDown) && !(40 in keysDown))
		hero.state = "still";

	// Are they touching?
	if (collision(hero,seen)){
		++collected;
		reset();
	}
};

Veidi teise kuju saab ka kangelase ekraanile joonistamise käsk funktsioonis render(): 

 function render() {
	ctx.clearRect(0,0,w,h);
	//ctx.drawImage(hero.sprite, hero.x, hero.y);
	hero.draw(hero.x,hero.y);
	seen.draw(currentseen,seen.x,seen.y);
	showScore("Seeni: " + collected);
	hero_ani.draw_ani(0,0);
}

Kõik muu jääb samaks.

Ülesandid

1. Lisa ülalesitatud skriptile funktsiooni update ka võimalus kasutada liikumise juhtimiseks nn Wordstar-i rombi klahve AWDS (A - vasakule, W - üles, D - paremale, S - alla)!

2. Lehel http://gmc.yoyogames.com/index.php?showtopic=512544 on kõigis neljas suunas kõndiva tüdruku spriidileht. Lae see alla, leia iga suuna (oleku) jaoks koordinaadid (kõige lihtsam - jaga faili laius/kõrgus võrdseteks osadeks) ja asenda praegune kangelane selle tüdrukuga !