Os avatares de ALPHACity têm 4 "frames" e 2 "animations" por frame. O "quadro" tem 64x64 pixels na realidade, mas, como dissemos, para testes consideraremos sempre valores divididos ao meio, donde podemos dizer que o quadro tem 32x32 pixels. CUIDADO COM ESSES CONCEITOS DE VALOR PELA METADE!
Vamos apresentar aqui um exemplo de lote tendo um avatar que anda. Comentários depois.
<html>
<head>
<script language="Javascript" src="gamelib_core.js"></script>
<script language="Javascript" src="gamelib_sprites.js"></script>
<script language="Javascript" src="gamelib_keyboard.js"></script>
<script language="Javascript">
function init(){
Sp_linuxcompatible=true;
Gl_preloader("floorW05N07.gif");
Gl_preloader("plaquehello.gif");
Gl_preloader("avat1.gif");
upkey=Kb_trapkey("UP");
downkey=Kb_trapkey("DOWN");
rightkey=Kb_trapkey("RIGHT");
leftkey=Kb_trapkey("LEFT");
av=new Sp_Sprite();
av.setImage("avat1.gif",32,32,4,2);
av.setXlimits(5,610);
av.setYlimits(5,385);
av.moveTo( 300,170);
av.setFrame(3);
av.setFrameByDirection(90,90,1,180,180,3,270,270,0,0,0,2);
av.setAnimation(0);
av.setZ(10);
av.collides=true;
av.useHitEvents(true);
av.setAnimationSpeed(3);
av.switchOn();
floor=new Sp_Sprite();
floor.setImage("floorW05N07.gif",614,390,1,1);
floor.setXlimits( 0,616);
floor.setYlimits( 0,390);
floor.setFrame(0);
floor.moveTo(0 , 0 );
floor.setZ(5);
floor.switchOn();
pl=new Sp_Sprite();
pl.setImage("plaquehello.gif",179,101,1,1);
pl.setXlimits( 0,614);
pl.setYlimits( 0,390);
pl.setFrame(0);
pl.moveTo(355 , 45 );
pl.setZ(12);
pl.makeHard();
pl.switchOn()
Gl_hook("timestep()");
Gl_start();
}
function timestep(){
av.setSpeed(0);
av.setAnimationRepeat(0);
if(rightkey.pressed){
av.setDir(1,0);
av.setAnimationRepeat(-1);
av.setSpeed(2);
}
else if(leftkey.pressed){
av.setDir(-1,0);
av.setAnimationRepeat(-1);
av.setSpeed(2);
}
else if(downkey.pressed){
av.setDir(0,1);
av.setAnimationRepeat(-1);
av.setSpeed(2);
}
else if(upkey.pressed){
av.setDir(0,-1);
av.setAnimationRepeat(-1);
av.setSpeed(2);
}
}//timestep
</script>
</head>
<title>TUTCITY </title>
<body bgcolor="black" onload="init()" >
</html>
Veja esse exercício nesse link. Clique na figura para ativar e "ande" com as teclas de setas.
Primeiro pré-recarregamos todas as imagens - melhora a performance.
Usamos as teclas de setas para mover o avatar. A captura está dentro do "time step loop".
O primeiro "frame" do avatar tem o valor ZERO. Para o avatar estar "indo para baixo" no "init" fazemos:av.setFrame(3).
Mudando a direção do movimento do avatar, o "frame" muda. Usamos setFrameByDirection para isso. E mudamos a direção usando as teclas de setas e o método: setDir.
Preste atenção que, para fazer o avatar se colidir com a placa, usamos: pl.makeHard(). A placa não é aquilo que chamaremos de "objetos 3D" (apesar de não terem uma real 3D). Nesses, o avatar passa por trás e pela frente - como vamos ver em breve (exemplo: a fonte na entrada de ALPHACity).
Você pode fazer todos os objetos de um lote serem 3D mas isso dá muito trabalho. Optamos por não fazer isso com os que estão fora das ruas e caracteres.
Se você quiser criar caracteres que andam sozinhos use o método: setRoute - ver no Reference da Classe Sprites.
LIÇÃO ANTERIOR PRÓXIMA LIÇÃO