Share
Due volte al mese, rivisitiamo alcuni dei post preferiti dei nostri lettori da tutta la storia di Activetuts +. Questo tutorial è stato pubblicato per la prima volta molto tempo fa nel maggio 2009.
In questo tutorial descriverò come creare una scena 3D di base utilizzando le opzioni native native di Flash Player 10. Quindi spiegherò come aggiungere l'interattività agli elementi e impostare un gioco pong di base. Andiamo?
Prepariamo il palco e creiamo la scena 3D. In un normale gioco pong la palla rimbalza sulla parte superiore e inferiore dello schermo, ma dal momento che stiamo aggiungendo una certa prospettiva al mix, avremo bisogno di fornire anche questi confini. Sono necessari cinque Movie Clip: il pavimento e le quattro pareti (due delle quali sono in realtà dei paddle). I punti di registrazione delle pareti dovrebbero essere posizionati contro il pavimento. È possibile creare tutto ciò semplicemente con lo strumento rettangolo o utilizzare un'immagine bitmap importata (ricordarsi di attivare "Consenti livellamento" nelle proprietà). Crea un clip filmato su ciascuna parete e assegna loro un nome di istanza (li ho nominati "wallTop", "wallBottom", "wallLeft" e "wallRight" e faranno riferimento ad essi in seguito). Assegna un nome allo sfondo "floor".
Seleziona tutti i muri e il pavimento, crea un grande Movie Clip da questi e chiamalo "bg".
Per visualizzare in seguito il punteggio avremo anche bisogno di due campi di testo dinamici. Se li collochi all'interno del MovieClip "bg" avranno anche la prospettiva 3D. Assegna un nome a "scoreLeft" e "scoreRight", quindi incorpora i caratteri.
Crea la palla usando lo strumento ovale e sfumatura sul palco. Non posizionare la pallina all'interno del Movie Clip "bg" altrimenti sarà distorta dalla prospettiva. Non daremo le reali proprietà 3D della palla, ma agiremo come se fosse 3D. Posiziona la pallina al centro dello schermo e assegnagli un nome di istanza come "palla".
Ora imposteremo la scena 3D usando le nuove proprietà rotationX, Y e Z che sono state aggiunte in Flash Player 10. Tuttavia, prima di poter eseguire un codice ActionScript, è necessario creare la classe del documento. Crea un Main.as vuoto e compilalo con il codice sottostante.
package import flash.display.MovieClip; public class Main extends MovieClip public function Main (): void // Sostituisci questo commento con il codice più tardi
Ora per usarlo come classe principale possiamo inserire "Main" nella casella di input "Class:" delle proprietà dei documenti.
Proviamo la rotazione. Aggiungi questa linea alla funzione Main () per dare tutto un po 'di prospettiva:
bg.rotationX = -30;
Come puoi vedere, tutti i clip mobili sono ora ruotati di 30 ° attorno all'asse x.
Ciascuna delle pareti ha bisogno di una rotazione di 90 ° per alzarsi. Come puoi vedere, ho anche modificato la modalità di fusione dei muri in "schermo" in modo che le sfumature risultino migliori. Il seguente codice è solo a scopo di anteprima poiché lo sostituiremo con le interpolazioni nel passaggio successivo (quindi ritiralo dopo il test).
bg.wallTop.rotationX = 90; bg.wallBottom.rotationX = -90; bg.wallRight.rotationY = 90; bg.wallLeft.rotationY = -90;
Per aggiungere un effetto ai muri dovremo prima creare un pulsante di avvio. Crea un Movie Clip con il testo "Fai clic qui per iniziare". Ancora, puoi posizionarlo all'interno di "bg" se vuoi che abbia anche la prospettiva. Dagli un nome di istanza come "startText". Possiamo ora fare riferimento a esso nel codice e aggiungere un eventlistener ad esso. Imposta anche buttonMode su true che restituirà un cursore a forma di mano quando il mouse passa sopra il pulsante. Quando si fa clic, viene chiamata la funzione di avvio e il pulsante è nascosto. Nascondiamo anche il puntatore del mouse perché l'utente controllerà il muro destro con il mouse.
public function Main (): void bg.rotationX = -30; startText.addEventListener (MouseEvent.MOUSE_UP, start); startText.buttonMode = true; inizio funzione privata (_e: Event): void startText.buttonMode = false; startText.visible = false; Mouse.hide (); // Questo conterrà le interpolazioni
Possiamo utilizzare TweenLite per interpolare le pareti da 0 a 90ø di rotazione. Ovviamente qualsiasi motore tweening funzionerà, ma preferisco questo. Il seguente codice interromperà i muri in 2 secondi e utilizzerà la funzione di andamento "Bounce.easeOut". Per interpolare anche il valore alfa dei muri, dobbiamo prima impostare su 0. Puoi farlo in Flash impostando l'alpha su 0 nelle impostazioni del colore. Dopo che queste interpolazioni sono state completate, il gioco dovrebbe iniziare, quindi aggiungi una proprietà "onComplete" a una delle interpolazioni e allega un nome di funzione (puoi lasciare questo fuori per i test poiché la funzione non esiste ancora).
funzione privata start (_e: Event): void startText.buttonMode = false; startText.visible = false; Mouse.hide (); new TweenLite (bg.wallRight, 2, rotationY: 90, alpha: 1, eas: Bounce.easeOut); new TweenLite (bg.wallLeft, 2, rotationY: -90, alpha: 1, ease: Bounce.easeOut); new TweenLite (bg.wallTop, 2, rotationX: 90, alpha: 1, ease: Bounce.easeOut); new TweenLite (bg.wallBottom, 2, rotationX: -90, alpha: 1, facilità: Bounce.easeOut, onComplete: goBall);
Prima di poter effettivamente iniziare il gioco, è necessario aggiungere l'interattività alle pareti sinistra e destra e alla palla. Iniziamo con il paddle del giocatore. Crea una nuova classe "Player.as" e aggiungi il seguente codice.
package import flash.display.MovieClip; import flash.events.MouseEvent; public class Player estende MovieClip public function Player (): void stage.addEventListener (MouseEvent.MOUSE_MOVE, moveAlong); funzione privata moveAlong (_e: MouseEvent): void var mousePos: Number = stage.mouseY - parent.y; se (mousePos < 0 ) y = 0; else if ( mousePos > 340) y = 340; altrimenti y = mousePos;
Nel costruttore (la funzione Player) aggiungiamo un eventlistener allo stage per controllare quando il mouse si muove e chiama la funzione "moveAlong" ogni volta che lo fa. Nella funzione moveAlong calcoliamo la posizione locale del mouse (solo la posizione y dal momento che ci stiamo muovendo solo verticalmente). Quindi controlliamo se il mouse esce dai limiti e resetta la posizione se lo fa. Ho trovato il valore 340 per tentativi ed errori poiché "parent.height - height" non restituisce il valore previsto quando usiamo la prospettiva 3D.
Successivamente cambia le proprietà del wall clip destro; seleziona "Esporta per ActionScript" e imposta la classe su "Player". Lascia vuoto "Base Class".
La creazione dell'IA è molto simile alla creazione del giocatore. Solo questa volta lo faremo spostare verso il valore y della palla, ma con una velocità leggermente inferiore rispetto alla palla. Crea un'altra classe "AI.as":
package import flash.display.MovieClip; import flash.events.Event; la classe pubblica AI estende MovieClip public function AI (): void addEventListener (Event.ENTER_FRAME, followBall); private function followBall (_e: Event): void var ball: MovieClip = MovieClip (parent.parent) .ball; if (ball.xspeed || ball.yspeed) var newy: Number = ball.y - height; se (newy> 345) newy = 345; se (y <= newy ) y += 9; else y -= 9;
Per prima cosa dobbiamo essere in grado di fare riferimento alla palla. Dato che il wall clip di WallLeft si trova all'interno del MovieClip "bg", chiamare "parent" fa riferimento a "bg". Per questo motivo dobbiamo usare "parent.parent". La prima istruzione "if" verifica se la palla ha una x o yspeed. Queste sono variabili pubbliche della palla che imposteremo in seguito. Il controllo impedisce all'IA di muoversi prima dell'inizio del gioco. Il valore "newy" mantiene il valore y della palla meno l'altezza di wallLeft. Questo è il valore a cui dovrebbe muoversi per colpire la palla. Come prima, cambia la classe di wallLeft in "AI".
La palla ha bisogno della massima funzionalità: ha bisogno di muoversi, rimbalzare sui muri, cercare un colpo con i paddle e aggiornare la propria profondità dato che non è un oggetto 3D.
package import flash.display.MovieClip; import flash.events.Event; public class Ball estende MovieClip public var xspeed: Number = 0; public var yspeed: Number = 0; public function Ball (): void public function start (): void xspeed = -12; yspeed = 12; addEventListener (Event.ENTER_FRAME, moveBall); funzione privata moveBall (_e: Event): void depth (); collisione(); x + = xspeed; y + = yspeed; private function depth (): void // Scala la palla in base alla sua posizione y funzione privata collision (): void // Fai rimbalzare la palla
Per prima cosa diamo alla palla un xe yspeed. Questi sono impostati su pubblico in modo da poter controllare da altri oggetti se la palla è in movimento. Quindi aggiungere un eventlistener "onenterframe" alla funzione di avvio. Quando viene chiamata la funzione di avvio, la pallina inizierà a spostare ogni fotogramma. Ho dato alla palla una velocità iniziale di 12 pixel per fotogramma. Puoi cambiarlo per velocizzare il gioco ma potresti anche aumentare il framerate. La funzione moveBall in realtà rafforza i valori xey della palla in base a xe yspeed. Chiama anche le funzioni di profondità e collisione su ogni fotogramma.
Poiché la palla non è un oggetto 3D e non ha un valore z, non apparirà più piccola una volta che il valore y cambia. Più alta è la sfera sullo schermo (basso valore y), più piccola deve apparire. Possiamo cambiare questo semplicemente ridimensionandolo in base alla sua posizione:
funzione privata depth (): void var smaller: Number = ((y / stage.stageHeight) * 0.6) + 0.6; scaleX = scaleY = smaller;
La funzione "collisione" deciderà come e quando la palla rimbalzerà su altri oggetti. Nella prima istruzione "se", controlliamo semplicemente il valore y per scoprire se la palla colpisce la parete superiore o inferiore. Di nuovo ho trovato questi valori per tentativi ed errori perché la palla deve rimbalzare in modo plausibile. Se il controllo è vero, il risultato è cambiare la yspeed in modo che la palla cambi direzione verticale.
collisione di funzione privata (): void if (y> = 463 || y <= 105 ) yspeed *= -1;
Controllare i bordi x non è così facile a causa della prospettiva e dei paddle che si muovono. Possiamo eseguire un "hitTest" con le pareti e inviare la palla indietro se è vero. I HitTests sono un po 'pesanti per la CPU, quindi è meglio non abusarne. Tuttavia, poiché abbiamo a che fare con un semplice gioco pong, non rallenterà sensibilmente il gioco. Ho fatto però un controllo extra; per vedere se il valore x della palla si trova sul lato sinistro o destro del palco e controllare di conseguenza il muro. Questo assicura che ci sia un solo hitTest necessario per frame anziché due.
if ((x> stage.stageWidth / 2 && hitTestObject (MovieClip (parent) .bg.wallRight)) || (x < stage.stageWidth / 2 && hitTestObject( MovieClip(parent).bg.wallLeft)) ) xspeed *= -1;
Infine, dobbiamo scoprire se la palla è ancora sulla piattaforma. Possiamo scoprirlo controllando se un punto sul fondo della palla si trova ancora sul "pavimento". Il punto esatto ha il valore x della palla e il valore y più raggio. Se questo è vero, scopriamo se la pallina è esplosa sul lato sinistro o destro (di nuovo confrontando il valore x con il centro dello schermo) e aggiorna il punteggio in modo indicativo. Alla fine, imposta i valori xey della palla al centro in modo che il gioco possa continuare.
if (! MovieClip (parent) .bg.floor.hitTestPoint (x, y + (height / 2 * scaleY), true)) if (x < stage.stageWidth / 2 ) MovieClip(parent).bg.scoreRight.text = Number(MovieClip(parent).bg.scoreRight.text) + 1; else MovieClip(parent).bg.scoreLeft.text = Number(MovieClip(parent).bg.scoreLeft.text) + 1; y = stage.stageHeight / 2; x = stage.stageWidth / 2;
Cambia la classe della palla in "Palla".
Ora che abbiamo creato sia i paddle che la palla, tutto ciò che serve è mettere il gioco in azione. Aggiungi questa funzione alla classe Main e assicurati che il onComplete che abbiamo usato nel passaggio 6 faccia riferimento a questa funzione.
funzione privata goBall (): void ball.start ();
Dopo che il punteggio è stato aggiornato, la palla ritorna al centro e inizia a rotolare di nuovo. Abbiamo bisogno di animare la palla leggermente quando si torna prima che il gioco ricominci.
Sostituisci questo codice nella funzione di collisione della palla:
y = stage.stageHeight / 2; x = stage.stageWidth / 2;
Di:
xspeed = yspeed = 0; removeEventListener (Event.ENTER_FRAME, moveBall); y = -altezza; x = stage.stageWidth / 2; scala var: Number = (0.5 * 0.6) + 0.6; nuovo TweenLite (questo, 1.5, y: stage.stageHeight / 2, scaleX: scale, scaleY: scale, facilità: Bounce.easeOut, onComplete: start);
Questo impedirà alla palla di muoversi per prima. Quindi imposta la posizione della palla appena sopra lo schermo ma centrata orizzontalmente. Se usiamo la funzione di rallentamento di Bounce, apparirà come se la palla cadesse dall'alto appena prima di riavviare il gioco.
Spero che tu sia stato in grado di seguire senza troppi problemi. Il gioco così com'è ora è molto semplice e può utilizzare alcuni miglioramenti. La palla, ad esempio, rimbalza sempre su angoli di 90 ° che rendono il movimento molto prevedibile.
Se desideri fare un ulteriore passo avanti, puoi provare a variare la xe la velocità in base a dove la palla colpisce la pagaia (confronta i valori di y). Il rilevamento delle collisioni con i paddle non è affatto vicino alla perfezione ma ti mostra un modo basilare per verificare un hit. Infine, se non hai usato i gradienti per le pareti, noterai che la palla sembra rotolare sul muro di fondo invece di scomparire sotto di essa. Per risolvere questo problema, puoi facilmente separare gli oggetti che dovrebbero apparire sulla palla e posizionarli in un nuovo Movie Clip che distorci tanto quanto il Movie Clip "bg" e sistemare più in alto della palla in Flash.
Accentsconagua