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 in FLASH e Starling #3
Pubblicato da Andrea Venturi il 2012-09-04 20:04:17

Atlas ufo robot

 

Iniziamo a mettere mano alla schermata del gioco, quindi per prima cosa serve capire come Starling gestisce le animazioni, dato che voglio dare al protagonista del gioco un minimo di animazione.

Ma prima...

 

Momento teoria

Un’ importante ottimizzazione che possiamo mettere in atto a questo punto del progetto riguarda le immagini che stiamo utilizzando e quelle che successivamente andremo ad utilizzare.

In starling le texture per essere gestite al meglio devono avere l’altezza e la larghezza pari ad una potenza di due:

2, 4 , 8, 16. 32, 64, 128, 256, 512, 1024, 2048

[Attenzione non piu’ di 2048, che è il valore massimo per le dimensioni di un’immagine gestita da Starling]

 

Se le vostre immagini non hanno nessuna dimensione come potenza di due, starling provvede a ridimensionarle per renderle potenza di due, ma questo comporterà una perdita di memoria in quanto deve gestire un’immagine con parti non necessarie, quindi attenzione allo spreco.

 

Un altro punto su cui si puo’ andare a rosicare efficenza è durante la fase di caricamento delle immagini.

Caricare un’imagine alla volta può rendere la fase di caricamento della nostro gioco più lenta, quindi per rimediare illustrerò una tecnica molto interessante che viene utilizzata spesso in ambito 3D, le  Texture Atlas.

 

 

Come si può vedere questa immagine racchiude sia elementi grafici che una serie di immagini che andrò ad utilizzare per creare l’animazione della astronave.

Oltre all’immagine per poter utilizzare una Texture Atlas serve un file xml che definisce cosa troviamo in che posizione.

 

Come crearla?

Esistono molti tool, io utilizzo Texture packer un programma che permette di compattare un grosso numero di immagini, restituisce una texture atlas .PNG e un file XML.


 

Le opzioni importanti da settare in Texture packer sono:

Data Format: Sparrow

Algorithm: Basic


Dovete crearvi le immagini che rappresentano le animazioni del vostro eroe, nel mio caso ho creato una cosa semplice in quanto non esperto.

 

Per creare l’animazione ho creato un progetto in Flash e ho esportato la sequenza in una serie di immagini.

 

Utilizzando Texture Packer, impacchetto tutte le immagini dell’animazione e quelle del menù utilizzate nel tutorial precedente.

[Attenzione: le immagini che compongono la vostra nimazione, devono avere il nome nel formato prefisso+numero.estensione]

 

A questo punto possiamo andare a modificare la classe Assets per fargli caricare la texture atlas e il file xml al posto delle singole immagini, ma prima l’import corretto.

 

import starling.textures.TextureAtlas;

 

Andiamo ad incorporare i file:

 

[Embed(source="../media/graphics/assets.xml", mimeType="application/octet-stream")]
public static const XMLAtlas:Class;
		
[Embed(source = "../media/graphics/assets.png")]
private static const SpriteAtlas:Class;

 

andiamo a creare la variabile che salverà la nostra texture atlas e la funzione per utilizzarla.

 

private static var textAtlas:TextureAtlas;

public static function getAtlas():TextureAtlas
{
	if (textAtlas == null)
	{
		var texture:Texture = getTexture("SpriteAtlas");
		var xml:XML = XML(new XMLAtlas());
		textAtlas = new TextureAtlas(texture, xml);
	}
	return textAtlas;
}

 

A questo punto per utilizzare le immagini della texture Atlas per il menu’ basta andare a cambiare la chiamata alla classe asset nella classe Menu.

 

bg = new Image(Assets.getAtlas().getTexture("BGMENU"));
title = new Image(Assets.getAtlas().getTexture("TITOLO"));
logo = new Image(Assets.getAtlas().getTexture("LOGO"));
play = new Button(Assets.getAtlas().getTexture("PLAY"));
about = new Button(Assets.getAtlas().getTexture("ABOUT"));

 

e siamo pronti per testare il tutto.

Se tutto è andato a buon fine ovviamente andate a rimuovere i pezzi di codice che ora sono diventati inutili (un ottimo esercizio per casa)

 

 

Animazione

Come in Flash per creare un oggetto animato bisogna utilizzare il tipo MovieClip, il cui costruttore ha due argomenti: un vector che raccoglie tutte le immagini dell’animazione e un intero che indica il frame rate dell’animazione.

In questo modo viene creato un oggetto MovieClip che racchiude l’animazione, ma non basta per farla partire, per eseguire l’animazione si deve utilizzare l’oggetto Juggler. Questo oggetto è presente nel “core” di Starling e prende un qualsiasi oggetto contenente un animazione e lo anima.

 

Ora andiamo a creare una classe per l’astronave di nome Ship che estenderà Sprite; la creiamo una cartella di nome ogg dove andremo a mettere le classi di tutti gli oggetti che serviranno per il nostro gioco.

Ovviamente andiamo a gestire l’evento di aggiunta allo stage, creiamo l’attributo _ship di tipo MovieClip e lo istanziamo.

 

package ogg 
{
	import starling.core.Starling;
	import starling.display.MovieClip;
	import starling.display.Sprite;
	import starling.events.Event;
	
	public class Ship extends Sprite 
	{
		private var _ship:MovieClip;
		
		public function Ship() 
		{
			super();
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		}
		
		private function onAddedToStage(evt:Event):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			createShip();
		}
		
		private function createShip():void 
		{
			_ship = new MovieClip(Assets.getAtlas().getTextures("sheep"), 12);
			_ship.x = Math.ceil( -ship.width >> 1);
			_ship.y = Math.ceil( -ship.height >> 1);
			
			Starling.juggler.add(_ship);
			
			addChild(_ship);
		}
		
	}
}

 

A questo punto andiamo a creare una nuova classe di nome StarField nella cartella screen (in quanto sarà la classe della schermata di gioco vero e proprio) che estende la classe Sprite, andiamo ad aggiungere la gestione dell’evento di aggiunta allo stage e l’attributo ship di tipo Ship e lo andiamo ad istanziare.

 

package screens 
{
	import ogg.Ship;
	import starling.display.Sprite;
	import starling.events.Event;
	
	public class StarField extends Sprite 
	{
		private var ship:Ship;
		
		public function StarField() 
		{
			super();
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		}
		
		private function onAddedToStage(e:Event):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			drawScreen();
		}
		
		private function drawScreen():void 
		{
			ship = new Ship();
			ship.x = (stage.stageWidth - ship.width) >> 1;
			ship.y = (stage.stageHeight - ship.height) >> 1;
			addChild(ship);
		}
		
	}
}

 

Per testare il risultato andiamo a cambiare nella classe Main nella funzione init, l’istanzazione dell’attributo _starling, sostituendo il primo parametro con la classe precedentemente creata StarField.

 

Codice sorgente qui

Campagne crowfunding

Just One Line
Siamo presenti su

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