Share
Hai mai voluto creare un platform, ma non troppo appassionato di scrivere tutto il codice da zero? Il Citrus Engine non elimina del tutto il codice, ma lo rende molto più semplice, con un sacco di utili funzionalità di gioco 2D integrate. In questo tutorial, lo useremo per costruire un semplice gioco di piattaforma.
In questo tutorial useremo un popolare motore di gioco Flash, chiamato Citrus, e una serie di classi ActionScript per creare un gioco platform.
Apri Flash e crea un documento 420x280px. Imposta la frequenza dei fotogrammi su 30 fps.
Useremo questi fantastici pixel graphics di Guillaume Moreau. Puoi scaricarli da opengameart.org.
Per lo sfondo, cambia il colore dello stage in # 99D9EA, oppure usa lo Strumento Rettangolo (R) per disegnare un rettangolo di quel colore.
Un avviso verrà mostrato quando il giocatore completa il livello o muore; mostrerà un gioco sul messaggio e il punteggio. Utilizzare il Strumento rettangolo per crearlo e impostarne il nome istanza AlertView. Segna il Esporta per ActionScript box e dargli lo stesso nome di classe.
Ci sono molti altri oggetti nel gioco (per esempio: una schermata del titolo, i vari simboli per ogni sprite, il terreno). Piuttosto che spiegare come crearli qui, ti suggerisco di scaricare i file sorgente e guardare quali oggetti sono nella libreria FLA. Puoi utilizzare gli stessi simboli nel tuo gioco o crearne di nuovi!
Useremo un font bitmap nel gioco; dato che useremo il font in modo dinamico, dovremo incorporarlo nell'applicazione. Sto usando i font 04b11 e Arcade Classic.
Seleziona un campo di testo dinamico con il tipo di carattere preferito e fai clic su Incorporare… pulsante nel Pannello Proprietà.
Seleziona / aggiungi tutti i caratteri necessari e fai clic ok.
Useremo effetti sonori per migliorare la sensazione del gioco. I suoni usati in questo esempio sono stati generati usando as3sfxr e sono inclusi nei file sorgente.
Useremo un motore di interpolazione diverso dal predefinito incluso in Flash. Ciò aumenterà le prestazioni oltre ad essere più facile da usare.
È possibile scaricare TweenNano dal suo sito Web ufficiale.
Useremo il Citrus Engine per potenziare il nostro gioco.
Cos'è il Citrus Engine? Scopri di più dal suo sito Web:
The Citrus Engine è un motore di gioco Flash scalabile di livello professionale costruito per giochi di qualità industriale. È basato su moderne pratiche di programmazione Flash, permettendoti di concentrarti sul rendere il tuo gioco fantastico! Viene fornito con un kit di avvio "platformer", che puoi utilizzare per creare facilmente fantastici giochi 2D di sidescrolling.
Vai alla pagina di download e ottieni i file necessari. Apri le preferenze di Flash, seleziona ActionScript dalla lista a sinistra e clicca su Impostazioni di ActionScript 3.0 ... , quindi aggiungi il percorso alle fonti come mostrato nell'immagine sopra.
Renderemo interattiva la nostra applicazione utilizzando una classe esterna. Aggiungi il suo nome (Principale) al Classe campo nel Pubblicare sezione del Proprietà pannello per associare il FLA alla classe del documento principale.
Creare una nuova classe ActionScript 3.0 (Cmd + N) e salvarla come Main.as nella tua cartella di classe.
Crea la tua struttura di base per iniziare a scrivere il tuo codice.
package public class Main funzione pubblica Main (): void // codice costruttore
Accentsconagua
Main.as Il Principale la classe preparerà il Citrus Engine per gestire il primo livello.
package import com.citrusengine.core.CitrusEngine; public final class Main estende CitrusEngine public final function Main (): void super (); state = new Level ();
Questa classe estende la classe CitrusEngine e imposta lo "stato" del gioco su Livello, qual è il nome della classe che conterrà tutti i comportamenti del nostro gioco.
Level.as La classe State è una delle classi principali di Citrus Engine e dovresti estendere questa classe per creare la logica di gioco dei tuoi livelli o stati. In questo esempio il Livello la classe si estende Stato per creare il primo livello del gioco.
Creare una nuova classe ActionScript 3.0 (Cmd + N) e salvarla come Level.as nella tua cartella di classe.
Queste sono le classi che dovremo importare per il nostro Livello classe per lavorare. Il importare direttiva rende disponibili classi e pacchetti definiti esternamente al codice.
import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; import com.citrusengine.core.CitrusEngine; import com.citrusengine.core.State; import com.citrusengine.physics.Box2D; import com.citrusengine.objects.platformer. *; importare com.citrusengine.objects. *; import com.citrusengine.math.MathVector; import flash.events.Event; import flash.geom.Rectangle; import flash.ui.Keyboard; import flash.events.KeyboardEvent; import flash.text.TextField; import flash.text.TextFormat; import com.greensock.TweenNano; import com.greensock.easing.Expo; import flash.net.navigateToURL; import flash.net.URLRequest; import flash.filters.GlowFilter; import flash.filters.BitmapFilter;
Queste sono le variabili che useremo; leggere i commenti nel codice per saperne di più su di loro. (Alcuni dei loro nomi sono autoesplicativi, quindi non ci sono commenti.)
private var levelView: LevelView = new LevelView (); // sprite dalla libreria private var hero: Hero; cuori privati var: Vector.= nuovo vettore. (); private var tf: TextFormat = new TextFormat ('ArcadeClassic', 17, 0xFFFFFF, null, null, null, null, null, 'right'); private var scoreTF: TextField = new TextField (); private var gemSnd: GemSnd = new GemSnd (); // Snd = Sound private var goalSnd: GoalSnd = new GoalSnd (); private var hitSnd: HitSnd = new HitSnd (); private var jumpSnd: JumpSnd = new JumpSnd (); private var loseSnd: LoseSnd = new LoseSnd (); private var baddySnd: BaddySnd = new BaddySnd ();
Il costruttore è una funzione che viene eseguita quando un oggetto viene creato da una classe, questo codice è il primo ad essere eseguito quando si crea un'istanza di un oggetto, carica quando il gioco inizia se parte della classe del documento.
Chiama le funzioni necessarie per iniziare il gioco. Controlla quelle funzioni nei passaggi successivi.
funzione pubblica finale Livello (): void // Code
Inizieremo mettendo in pausa il gioco; ciò impedirà al motore di aggiungere la grafica mentre lo sprite di Level View è in scena.
funzione pubblica finale Level (): void super (); // codice di installazione predefinito CitrusEngine.getInstance (). playing = false; // in realtà metti in pausa il gioco
Questo aggiungerà lo sprite di Level View allo stage, così come un listener del mouse per rimuoverlo.
override public function initialize (): void / * Level Start View * / addChild (levelView); levelView.addEventListener (MouseEvent.MOUSE_UP, startLevel);
La funzione successiva viene eseguita quando si fa clic sulla Vista livello e si gestisce la logica per avviare il gioco.
funzione finale privata startLevel (e: MouseEvent): void
Questo codice distrugge l'istanza di visualizzazione di livello.
levelView.removeEventListener (MouseEvent.MOUSE_UP, startLevel); removeChild (levelView); levelView = null;
Ora togliamo il gioco e inizializziamo il livello.
super.initialize (); CitrusEngine.getInstance (). Playing = true;
Il seguente codice avvia il motore Box2D che gestisce la fisica di Citrus Engine.
var box2D: Box2D = new Box2D ('Box2d'); aggiungi (Box2D); //box2D.visible = true; // decommenta per vedere la grafica di debug di Box2D Queste linee creeranno l'intero livello, leggere il codice per capire il sistema di istanziazione di Citrus Engine (che è davvero facile!).
(Tutti vista proprietà sono i nomi di classe dei simboli della libreria FLA: bg, TerrainPart1, WaterX3, eccetera.)
var leftWall: Platform = new Platform ('LeftWall', width: 1, height: 280, x: 0, y: 110); aggiungi (leftWall); var rightWall: Platform = new Platform ('RightWall', width: 1, height: 280, x: 726, y: 100); aggiungi (rightWall); var bg: CitrusSprite = new CitrusSprite ('Bg', view: Bg, x: 0, y: 20); aggiungi (bg); var terrain1: Platform = new Platform ('Terrain1', width: 422, height: 32, x: 211, y: 264, view: TerrainPart1); aggiungi (terrain1); var oneWay1: Platform = new Platform ('OneWay1', width: 92, height: 32, x: 184, y: 232, oneWay: true, visualizza: OneWay1); aggiungi (oneWay1); varietà gemma: moneta = nuova moneta ('gemma', larghezza: 11, altezza: 10, x: 186, y: 136, vista: gemma); aggiungi (gioiello); var water: Sensor = new Sensor ('Water', width: 92, height: 32, x: 468, y: 264, view: WaterX3); aggiungere acqua); var terrain2: Platform = new Platform ('Terrain2', width: 214, height: 32, x: 621, y: 264, view: TerrainPart2); aggiungi (terrain2); var baddy: Baddy = new Baddy ('Baddy', x: 300, y: 200, leftBound: 250, rightBound: 350, view: Enemy); aggiungi (baddy); var movingPlatform: MovingPlatform = new MovingPlatform ('MP', width: 32, height: 8, x: 436, y: 232, startX: 436, startY: 232, endX: 500, endY: 232, visualizza: PlatformClip, velocità : 0,9); aggiungi (movingPlatform); var oneWay2: Platform = new Platform ('OneWay2', width: 127, height: 32, x: 663, y: 232, oneWay: true, visualizza: OneWay2); aggiungi (oneWay2); var oneWay3: Platform = new Platform ('OneWay3', width: 64, height: 32, x: 695, y: 200, oneWay: true, visualizza: OneWay3); aggiungi (oneWay3); var door: Sensor = new Sensor ('Door', width: 20, height: 28, x: 695, y: 202, view: Door); aggiungi (porta); hero = new Hero ('Hero', x: 30, y: 234, width: 19, height: 26, view: HeroClip, jumpHeight: 9, maxVelocity: 2, hurtVelocityX: 2); aggiungi (eroe); Come puoi vedere, in ogni caso crei un'istanza del tipo di oggetto che desideri e utilizzi i parametri per specificare la sua posizione, dimensione, grafica o skin (questo è il vista parametro) e altri elementi utili. Quindi lo aggiungiamo allo stadio Citrus usando il Inserisci() metodo.
Fermiamoci qui per fare un test rapido e assicurarci che il nostro codice di gioco funzioni:
Ricorda che le Milestones sono incluse nei file sorgente, quindi se per qualche motivo il tuo file non imita questo, dai un'occhiata alla fonte per vedere cosa può causarlo. (E ricorda che alcune righe devono essere commentate perché alcune funzioni non sono ancora state create).
Citrus Engine utilizza i segnali per gestire l'interazione del tipo di evento. Puoi saperne di più sui segnali di questo tutorial di Activetuts +.
gem.onBeginContact.addOnce (function (e: *) gemSnd.play (); scoreTF.text = String (int (scoreTF.text) + 50);); door.onBeginContact.addOnce (levelComplete); hero.onTakeDamage.add (hurtHero); hero.onGiveDamage.addOnce (killBaddy); hero.onJump.add (function () jumpSnd.play ()); hero.onGiveDamage.addOnce (function () baddySnd.play ());
Il nostro eroe MovieClip verrà riprodotto per impostazione predefinita a meno che non lo impediamo. Questo codice lo gestisce e imparerai anche come accedere al MovieClip che funge da arte per il tuo oggetto Citrus.
this.view.getArt (eroe) .content.stop (); //State(Level).SpriteView.SpriteArt.MovieClip.stop gameListeners (); addIndicators ();
Questo codice aggiunge gli ascoltatori di EnterFrame e tastiera che verranno utilizzati nel nostro gioco. Puoi leggere le funzioni del gestore corrispondente nei passaggi successivi.
private final function gameListeners (action: String = 'add'): void if (action == 'add') stage.addEventListener (Event.ENTER_FRAME, gameLogic); stage.addEventListener (KeyboardEvent.KEY_DOWN, animateWalk); stage.addEventListener (KeyboardEvent.KEY_UP, stopWalk); else stage.removeEventListener (Event.ENTER_FRAME, gameLogic); stage.removeEventListener (KeyboardEvent.KEY_DOWN, animateWalk); stage.removeEventListener (KeyboardEvent.KEY_UP, stopWalk);
I cuori rappresenteranno la salute del nostro eroe. Il prossimo codice aggiunge tre cuori al palco e li memorizza in un vettore per utilizzarli in seguito al di fuori di questa funzione.
funzione finale privata addIndicators (): void / * Hearts * / for (var i: int = 0; i < 3; i++) var heart:Heart = new Heart(); heart.y = 5; heart.x = 5 + (i * heart.width); addChild(heart); hearts.push(heart);
The Score TextField è creato da questo codice. Utilizziamo i filtri per aggiungere il tratto nero attorno alle lettere.
/ * Punteggio * / punteggioTF.x = 320; scoreTF.defaultTextFormat = tf; scoreTF.text = '0'; var filter: BitmapFilter = new GlowFilter (0, 1, 2, 2); var filter2: BitmapFilter = new GlowFilter (0, 1, 1, 1); scoreTF.filters = [filtro, filtro2]; addChild (scoreTF);
Qui impostiamo la telecamera, che seguirà il nostro eroe se la sua posizione è oltre il centro X del palco.
private final function gameLogic (e: Event): void / * Handle Camera * / if (hero.x> = stage.stageWidth * 0.5) view.setupCamera (hero, new MathVector (stage.stageWidth * 0.5, 234), nuovo Rectangle (0, 0, 726, 228), null);
Questo codice controlla se il nostro eroe è caduto in acqua, e in tal caso riproduce il suono perduto e chiama un avviso.
/ * Verifica se l'eroe è caduto * / se (hero.y> stage.stageHeight) loseSnd.play (); alert ( 'perdere');
L'animazione dell'eroe walking viene avviata quando vengono premuti i tasti freccia sinistra o destra.
funzione finale privata animateWalk (e: KeyboardEvent): void if (e.keyCode == 37 || e.keyCode == 39) this.view.getArt (hero) .content.play ();
Quando i tasti vengono rilasciati, l'animazione si interrompe.
funzione finale privata stopWalk (e: KeyboardEvent): void if (e.keyCode == 37 || e.keyCode == 39) this.view.getArt (hero) .content.gotoAndStop (1);
Fermiamoci qui per fare un altro test e controllare che il nostro codice di gioco funzioni:
Ricorda ancora che alcune righe sono state commentate perché non tutte le funzioni sono state ancora create.
Ricorda che i Milestones sono inclusi nei file sorgente, quindi se per qualche motivo il tuo file non imita questo dai un'occhiata alla fonte per vedere cosa potrebbe causare.
L'eroe dovrebbe subire danni se il matto lo tocca; le linee successive rimuovono un cuore e suonano il suono ferito. Viene chiamato un avviso quando l'eroe non è in salute.
funzione finale privata hurtHero (): void removeChild (hearts [hearts.length-1]); hearts.splice (hearts.length-1, 1); hitSnd.play (); if (hearts.length <= 0) loseSnd.play(); alert('lose'); Puoi uccidere un avversario saltandoci sopra. Quando ciò accade il punteggio aumenta.
funzione finale privata killBaddy (): void scoreTF.text = String (int (scoreTF.text) + 100);
Il livello termina quando l'eroe raggiunge la porta. Verrà riprodotto un suono e verrà chiamato un avviso; puoi vedere il codice di avviso nel passaggio successivo.
private final function levelComplete (e: *): void goalSnd.play (); mettere in guardia();
Questa funzione interromperà il gioco e mostrerà il messaggio del gioco, e aggiunge anche un ascoltatore del mouse per reimpostare il gioco quando viene cliccato.
avviso di funzione finale privata (gameState: String = 'win'): void gameListeners ('rmv'); CitrusEngine.getInstance (). Playing = false; this.view.getArt (eroe) .content.gotoAndStop (1); var alert: AlertView = new AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5; alert.scoreTF.text = scoreTF.text; alert.addEventListener (MouseEvent.MOUSE_UP, restart); if (gameState == 'lose') alert.titleTF.text = 'Livello fallito!'; addChild (avviso); TweenNano.from (alert, 0.6, scaleX: 0.2, scaleY: 0.2, facilità: Expo.easeOut); Questo codice ricaricherà il SWF quando viene cliccato il messaggio del gioco sopra, ripristinando tutti i valori iniziali e ritornando alla schermata iniziale.
riavvio della funzione finale privata (e: MouseEvent): void navigateToURL (new URLRequest (stage.loaderInfo.url), '_level0');
Ora siamo pronti a fare un test finale per il nostro gioco e verificare che tutto funzioni come previsto.
Sperimenta con questo potente motore di gioco e crea i tuoi giochi!
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
