Veja na figura: o avatar está chegando perto de uma mesa com um micro OLPC encima.
Chamamos esse sprite de link.É como se fosse um ícone. Ele não é bem um "objeto 3D" porque a idéia é colocá-lo sempre na parte superior de uma "rua". Mas ele tem uma "sombra para colisão". Então, é , na realidade, composto de dois sprites: LinkD e LinkS (Você pode baixá-los vendo o endereço no "Código fonte" da demo dessa lição - aliás você pode baixar e reusar qualquer objeto e código de ALPHACity vendo o "Código fonte" num browser como o IE.).
Quando o avatar colide com a "sombra" de um link, é aberta uma página web "normal". O caso mais comum disso, apresentado em ALPHACity, é o do "Jornal de ALPHACity".
Nessa página colocamos um ícone que, clicado, faz com que voltemos à ALPHACity. Você vê esse ícone no fim dessa página.
O desafio é fazer o avatar voltar para a frente da representação do micro OLPC. Isso é feito com um cookie. Leia o Reference da Classe Cookie.
Nesse cookie colocamos um "flag" que define a "entry" do avatar no "lote" (na demo o "flag" é: "LTUT")
Um avatar pode ter uma "entry" em muitos lugares: vindo de outro lote visinho pela esquerda (usando um "Transit" - que vamos ver na próxima lição"), pela direita etc. Existe uma entrada "default" - no cookie temos null ou "G".
Para ir para uma nova página (que pode ser outro "lote" ou página web "normal") usamos uma propriedade da Classe Window (ver seu Reference). As linhas de código, dentro do "time step loop" são qualquer coisa assim:
...
if(av.hasHit(linkS)){
entryt.setvalue("LTUT"); //a value for the cookie "entryt"
linkD.switchOff(); //the Link disapears
window.location="somepage.html";//loads the new page
}
...
Na página web "normal" usamos o velho HREF para voltar.
Vamos apresentar aqui um exemplo completo de uso do "link"
<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("avat1.gif");
Gl_preloader("linkD.gif");
Gl_preloader("linkS.gif");
entryt = new Gl_cookie("entt");
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);
if(entryt.value=="LTUT"){
av.moveTo( 160,95);
av.setFrame(2);
entryt.setvalue("G");
}
else{
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,614);
floor.setYlimits( 0,390);
floor.setFrame(0);
floor.moveTo(0 , 0 );
floor.setZ(5);
floor.switchOn();
linkD=new Sp_Sprite();
linkD.setImage("linkD.gif",20,28,1,1);
linkD.setXlimits( 0,614);
linkD.setYlimits( 0,390);
linkD.setFrame(0);
linkD.moveTo(160 , 70 );
linkD.setZ(6);
linkD.switchOn();
linkS=new Sp_Sprite();
linkS.setImage("linkS.gif",20,13,1,1);
linkS.setXlimits( 0,614);
linkS.setYlimits( 0,390);
linkS.setFrame(0);
linkS.moveTo(160 , 70 );
linkS.setZ(0);
linkS.makeHard();
linkS.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);
}
if(av.hasHit(linkS)){
entryt.setvalue("LTUT");
linkD.switchOff();
window.location="linktut.html";
}
}//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.
LIÇÃO ANTERIOR PRÓXIMA LIÇÃO