Pagine    Articoli    Prodotti    Forum    Cerca  
Nickname

Password


Non sei registrato?
Registrati a GPI qui!

Puoi anche attivare un vecchio utente GPI e chiedere una nuova password.
I Team

Mappa Team
I nostri utenti

Mappa Utenti
  Programmare un videogame Flash con Starling #7
Pubblicato da Andrea Venturi il 2013-03-03 13:06:55

“Se si muove e' piu' buono.”

 

In questo tutorial vedremo come muovere la nostra astronave.

 

Momento teoria

 

Il movimento lo implementeremo in maniera semplice, ogni frame controlleremo la posizione del dito sul display o del mouse sul filmato e ne salveremo la posizione; la posizione dell’astronave verrà modificata in base alla coordinata del dito/mouse moltiplicata per un fattore che ne rallenta il movimento (per evitare l’effetto di attaccatura).

 

Ma prima di muovere l’astronave la facciamo apparire dal bordo sinistro.

 

Andiamo al codice

Prima di tutto andiamo ad includere le classi che ci servono per gestire sia il touch che il tempo che passa.

import flash.utils.getTimer;
import starling.events.Touch;
import starling.events.TouchEvent;

Ci serve calcolare il tempo trascorso dall’ultimo frame disegnato, per farlo ci servono tre variabili, il tempo attuale, il tempo precedente e per sottrazione il tempo trascorso

private var timePrev:Number;
private var timeCurr:Number;
private var elapsed:Number;

dato che siamo qui accodiamo anche le altre varibili che utilizzeremo, due per gestire la velocità:

private var shipSpeed:Number;
private const minSpeed:int = 650;

tre variabili per gestire il tocco (o click) :

private var touch:Touch;
private var touchX:Number;
private var touchY:Number;

quattro variabili che rappresentano i limiti spaziali per mantenere l’astronave all’interno di una certa area

private var topLimit:Number;
private var buttomLimit:Number;
private var leftLimit:Number;
private var rightLimit:Number;

una per gestire lo stato in cui siamo, in quanto avremo tre stati di gioco: ingresso (per l’ingresso dell’astronave), gioco (mentre stiamo giocando) e morte

private var gameState:String;

e l’ultima per indicare quando dobbiamo passare dal secondo stato la terzo

private var life:uint = 3;

A questo punto calcoliamoci per ogni ciclo, il tempo trascorso da quello precendente.

Per questo scopo utilizziamo una funzione che viene chiamata dall’ evento di esecuzione di un frame, quindi andiamo a gestire l’evento EnterFrame con una funzione.

private function elaspedTime(e:Event):void
{
   timePrev = timeCurr;
   timeCurr = getTimer();
   elapsed = (timeCurr - timePrev)*0.001;
}

timePrev indica sempre il tempo precedente, timeCurr prende, tramite la funzione getTimer(), il tempo trascorso dal lancio del gioco (espresso in millisecondi) ed elapsed ovviamente la differenza divisa di un fattore mille per non avere numeri enormi.

 

andiamo a registrare l’evento nella inizialized, dove andiamo ad aggiungere

addEventListener(Event.ENTER_FRAME, elaspedTime);

Importante capire che Event.ENTER_FRAME non è quello di flash ma di Starling, fate attenzione.

 

Se avete fatto attenzione dobbiamo ancora definire la funzione startGame, quella che viene chiamata quando scompare la scritta “GO!”.

 

Questa funzione attiva due listener: il primo per gestire l’evento touch, il secondo per scandire l’andamento del gioco.

private function startGame():void
{
   addEventListener(TouchEvent.TOUCH, onTouch);
   addEventListener(Event.ENTER_FRAME, onTick);
}

Per semplicità andiamo subito a definire la funzione per la gestione del touch, che non farà altro che prendere l’evento e reperire l’informazione di dove abbiamo toccato, ovvero le coordinate del punto

private function onTouch(e:TouchEvent):void
{
   touch = e.getTouch(stage);
   touchX = touch.globalX;
   touchY = touch.globalY;
}

A questo punto andiamo a creare la funzione che piano piano sarà il cuore del gioco.

Questa funzione sarà divisa in base allo stato del gioco in cui ci troviamo

private function onTick(e:Event):void
{
   switch (gameState)
   {
       case "ingresso":

quindi nella prima parte andremo ad eseguire una animazione che permetterà all’astronave di entrare nel terreno di gioco.

if (ship.x < (stage.stageWidth >> 3))
{
   ship.x += (((stage.stageWidth >>2 ) + 10) - ship.x) * .05;
   ship.y = stage.stageHeight >>1;
                                                  
   shipSpeed += (minSpeed - shipSpeed) * .05;
  bg.speed = shipSpeed * elapsed;
}

fintanto che l’astronave non avrà raggiunto la posizione x (pari ad un ottavo della larghezza dello stage) andremo ad incrementare la coordinata x in maniera sempre minore,  mentre la y rimarrà constante.

 

Se ricordate dal vecchio tutorial, la velocità dell’astronave la utiliziamo per muovere tutto il resto, quindi andiamo ad aumentare la velocità in maniera da avere lo sfondo in movimento ma con accellerazione. (l’effetto dura poco)

 

A questo punto appena raggiunta la posizione si deve cambiare stato, da ingresso a gioco, così possiamo concludere questa parte.

else
{
   gameState = "gioco";
}
break;

Infine dobbiamo gestire lo stato “gioco”, dove non fare altro (per ora) che andare a muovere l’astronave verso il punto rilevato dalla funzione onTouch e controllare che rimanga nei limiti voluti.

Prima andiamo a settare i nostri limiti, nella funzione drawScreen, andiamo ad aggiungere

buttomLimit = (stage.stageHeight - (ship.height >> 1));
topLimit = (10 +(ship.width >> 1));
leftLimit = (ship.width >> 1);
rightLimit = (stage.stageWidth >> 1) - (ship.width >> 1);

Ora possiamo tranquillamente gestire lo svolgimento del gioco

case "gioco":
                                        
if (life > 0)
{
   ship.x -= (ship.x - touchX) * 0.1;
   ship.y -= (ship.y - touchY) * 0.1;
                                        
   if (ship.y > buttomLimit)
   {
       ship.y = buttomLimit;
   }
                                        
   if (ship.y < topLimit)
   {
       ship.y = topLimit;
   }

   if (ship.x > rightLimit)
   {
       ship.x = rightLimit;
   }

   if (ship.x < leftLimit)
   {
       ship.x = leftLimit;
   }
}

Finiamo con il ricalcolare la velocità da passare al backgrount

shipSpeed -= (shipSpeed - minSpeed) * .01;
bg.speed = shipSpeed * elapsed;
break;

ed il caso stato “morte” lasciamolo vuoto

case "morte":
break;

Compilate e provate.

 

e come sempre il link al codice

Campagne crowfunding

Just One Line
Siamo presenti su

     
Copyright ©2016 - Manifesto - Privacy - Termini di Servizio - Community - Collaboratori - Contattaci