Crea un gioco di artiglieria From Scratch

In questo tutorial costruiremo un gioco di carri armati a due giocatori in Multimedia Fusion 2. Sarà caratterizzato da riprese a 360 gradi personalizzate e terreni distruttibili. Non hai bisogno di alcuna programmazione precedente o esperienza di sviluppo del gioco da seguire insieme a questo tutorial, e se non hai Multimedia Fusion 2 puoi provare la demo gratuita.


Giocare il gioco

Prendilo a turno per sparare all'altro serbatoio: il giocatore uno è a sinistra e il giocatore due è a destra. Usa il mouse per mirare; più lontano il mirino viene dal tuo serbatoio, più potente sarà lo sparo. Il primo giocatore a essere colpito perde.


introduzione

Inizieremo impostando la nostra cornice in modo che il gioco funzioni senza intoppi e quindi aggiungeremo il nostro primo serbatoio. Dopo di che lo faremo sparare alcuni proiettili che distruggono il terreno, e alla fine un altro carro armato sarà aggiunto per competere contro.


Impostazione dello spazio di lavoro

Inizia creando una nuova applicazione in Multimedia Fusion 2 (scarica la demo qui se non la hai già) e nominala Gioco di artiglieria.

Sotto le opzioni di Runtime del gioco Impostare il Frequenza dei fotogrammi a 60 e il Modalità display a Direct3D 9. Queste sono le impostazioni di configurazione standard che uso sulla maggior parte dei giochi poiché offrono un'esperienza di gioco fluida e sfruttano l'accelerazione hardware sul computer del giocatore.

Per questo tutorial utilizziamo anche una risoluzione di 600x480 che può essere modificato nelle impostazioni della finestra. Cambia le dimensioni della cornice in 600x480 anche.

Per rendere le cose un po 'più professionali, anche noi non toccheremo Barra dei menu per impedirne la visualizzazione nel nostro gioco.


Passaggio 1: crea una scena iniziale

Ora che siamo pronti per partire, è tempo di importare alcune risorse per il nostro gioco.

Puoi ottenere tutta la grafica che sto usando in questo tutorial dal download di origine, oppure puoi disegnare la tua se lo desideri. La grafica che sto usando è stata adattata da alcuni gratuiti disponibili su OpenGameArt.org

Dopo aver salvato le immagini sul tuo computer, trascinali semplicemente uno alla volta nel fotogramma 1. Questo li importerà nel nostro gioco, chiedendo una finestra di dialogo per impostare il tipo di ogni oggetto.

Inizia importando il terreno. Impostalo su un oggetto di sfondo con il suo Tipo di ostacolo impostato Ostacolo.

Successivamente importa il Tank di Player One come oggetto attivo, così come la torretta di Player One. Nominali P1Body e P1Turret rispettivamente. Imposta l'hotspot della torretta su (3,3), e l'hotspot del serbatoio a (16,14). Questo assicurerà che quando posizioniamo la torretta nel serbatoio, è posizionata correttamente e ruota correttamente.

Mancia: Per posizionare l'hotspot, prima fai clic sull'icona con un occhio per renderlo visibile, quindi trascina l'hotspot sul punto desiderato.

Importare anche il punto elenco e il mirino come oggetti attivi. Importeremo l'altro serbatoio più tardi. Centra l'hotspot del mirino su (15,15). Deselezionare "Crea all'avvio" sul punto elenco e centrare l'hotspot. Assicurati che la torretta del serbatoio si trovi dietro il corpo in ordine di estrazione facendo clic con il pulsante destro del mouse e inviandolo Ritorno, sotto il Ordine opzione.

Infine, cambia il colore di sfondo del riquadro in blu chiaro (fai clic sul fotogramma 1 nella barra degli strumenti dell'area di lavoro, quindi modifica la proprietà appropriata dal pannello Proprietà). Uso RGB = 115,176,217. Questo colore sarà importante più tardi quando aggiungiamo terreno distruttibile.

Disporre gli oggetti nella cornice in modo che siano simili a come li ho in questa immagine.


Passaggio 2: sparare un proiettile

Qui faremo il nostro primo carro armato sparare un proiettile in linea retta. Aggiungiamo gravità al proiettile più tardi, così come un'esplosione quando collide con il terreno.

In primo luogo, creare due valori modificabili per il serbatoio chiamato DistanceToMouse e AngleToMouse: seleziona il serbatoio, fai clic sull'icona "A-Z" nella parte superiore del pannello Proprietà e fai clic su "Nuovo" sotto "Alterable Values". Li useremo per memorizzare rispettivamente la Distanza in pixel e Angolo in gradi rispetto al mouse.

Quindi, crea cinque valori modificabili per il proiettile:

  • TempX
  • TempY
  • xspeed
  • yspeed
  • InitialSpeed

Questi valori verranno utilizzati per memorizzare le informazioni sul movimento del proiettile e implementare il nostro Movimento personalizzato 360 gradi.

È tempo di scrivere del codice. Inizieremo semplicemente posizionando la torretta e puntandola verso il mouse.

Aggiungi l'oggetto Direzione avanzata al tuo gioco tramite Inserisci> Nuovo oggetto. Lo useremo per calcolare l'angolo e la distanza dal mouse dal nostro serbatoio.

Mancia: Se stai usando la demo di Multimedia Fusion 2 potresti non avere accesso all'oggetto Direction Advanced che è disponibile nel Bonus Pack 1. In questo caso, per calcolare l'angolo tra due oggetti, puoi semplicemente usare questa formula:
360-ATan2 (YMouse-Y ("P1Body"), XMouse-X ("P1Body"))
… invece di:
Distanza ("Oggetto direzione avanzata", X ("P1Body"), Y ("P1Body"), XMouse, YMouse)

Quindi aggiungi il seguente codice nell'Event Editor (accedi a questo tramite Visualizza> Event Editor):

+ Sempre
- [P1Body] Imposta DistanceToMouse su:
Distanza ("Oggetto direzione avanzata", X ("P1Body"), Y ("P1Body"), XMouse, YMouse)
- [P1Body] Imposta AngleToMouse su:
Direzione ("Oggetto direzione avanzata", X ("P1Body"), Y ("P1Body"), XMouse, YMouse)
- [P1Turret] Imposta la posizione su (0,0) da P1Body
- [P1Turret] Imposta angolo su AngleToMouse ("P1Body")
- [Crosshair] Imposta X Coordinate su XMouse
- [Crosshair] Imposta la coordinata Y su YMouse

Se esegui il tuo gioco ora dovresti vedere che la torretta serbatoio ora punta verso il mirino e che il mirino è posizionato sul cursore del mouse.

Ora spariamo un proiettile. Aggiungi il seguente codice:
+ L'utente fa clic con il pulsante sinistro
- [Crea] Crea Bullet a (0,0) da P1Body
- [Bullet] Imposta TempX su X ("Bullet")
- [Bullet] Imposta da TempY a Y ("Bullet")
- [Bullet] Imposta InitialSpeed ​​su Min (DistanceToMouse ("P1Body") / 17.0, 15)
- [Bullet] Impostare XSpeed ​​su Cos (AngleToMouse ("P1Body")) * InitialSpeed ​​("Bullet")
- [Bullet] Imposta YSpeed ​​su Sin (AngleToMouse ("P1Body")) * InitialSpeed ​​("Bullet") * - 1

+ Sempre
- [Bullet] Aggiungi XSpeed ​​("Bullet") a TempX ("Bullet")
- [Bullet] Aggiungi YSpeed ​​("Bullet") a TempY ("Bullet")
- [Bullet] Imposta la posizione X su TempX ("Bullet")
- [Bullet] Imposta la posizione Y su TempY ("Bullet")

Se esegui il tuo gioco (tramite il menu Esegui) dovresti vedere il carro armato sparare un proiettile in linea retta senza gravità.

Quindi, cosa sta facendo questo codice?

Per prima cosa creiamo un proiettile nel corpo del serbatoio. Quindi usiamo i valori TempX e TempY per memorizzare la posizione corrente del proiettile. Impostiamo la velocità iniziale del proiettile alla distanza dal serbatoio al mouse, con una potenza massima di 15. (La distanza è divisa per 17.0 per ridurne la forza.) Questi sono solo i valori che ho appena inventato dopo alcuni test. Puoi giocare tu stesso con questi due valori per cambiare la velocità con cui il proiettile si attiva.

Quindi calcoliamo il xspeed e yspeed dall'angolo e dalla potenza usando la trigonometria. Non preoccuparti se non capisci la matematica dietro a come funziona!

Finalmente, nel Sempre evento aggiorniamo continuamente la posizione del proiettile memorizzato in TempX e TempY aggiungendo il proiettile xspeed e yspeed rispettivamente.

Perché usare TempX e TempY?

Dobbiamo memorizzare le posizioni intermedie in valori modificabili per i movimenti personalizzati poiché Multimedia Fusion 2 non viene utilizzato galleggianti (numeri con punti decimali) per le sue coordinate - utilizza numeri interi (numeri interi).

Se provi ad impostare la posizione X del proiettile su X ("Bullet") + 0,2 vedrai che non si muoverà da nessuna parte, perché 0.2 è arrotondato a 0, quindi il Bullet è impostato sulla sua posizione corrente.


Passaggio 3: aggiungi gravità

Ora che possiamo sparare a un proiettile, dobbiamo aggiungere gravità per far cadere il proiettile una volta lasciato il cannone del carro armato.

Per prima cosa, abbiamo bisogno di un posto dove archiviare alcuni valori che saranno usati nel nostro gioco come la forza di gravità. In un gioco MMF2 ci sono numerosi posti dove archiviare questo tipo di informazioni. Alcune persone preferiscono creare un oggetto specifico solo per contenere i valori. In questo tutorial utilizzeremo i valori globali, valori disponibili ovunque nel gioco, per mantenere i nostri valori importanti.

Vai ai valori globali per la tua applicazione (fai clic sull'applicazione nella barra degli strumenti dell'area di lavoro, quindi seleziona l'icona "A-Z" nel pannello Proprietà) e crea un nuovo valore: Y_Gravity.

Mancia: Se desideri rendere più leggibile il tuo codice, potresti anche aggiungere un altro valore globale Massima velocità e usarlo invece di "15.0" dove calcoliamo il InitialSpeed per il proiettile. Ciò ti consentirà di modificare facilmente la potenza massima senza dover modificare il codice ovunque appaia.

MMF2 non ti permette di digitare float in Global Values, e dal momento che vogliamo che la nostra gravità sia inferiore a uno dovremo impostarlo nel codice:

Ora dobbiamo semplicemente aggiungere questa gravità alla YSpeed ​​del proiettile su ciascun fotogramma.

Aggiungi la linea:

+Sempre
- [Bullet] Aggiungi Y_Gravity a YSpeed

È possibile fare doppio clic su qualsiasi evento per accedere alla modalità Elenco e modificare l'ordine delle azioni degli eventi. Posiziona la nuova linea tra le azioni esistenti come ho fatto qui.

Ora quando corri il gioco, il tuo carro armato dovrebbe sparare a un proiettile che cade verso il terreno.


Step 4: Distruggi il terreno

Quindi dobbiamo fare in modo che il proiettile crei dei buchi nel terreno quando si scontra con esso. Per fare questo sfrutteremo la funzione "Aggiungi allo sfondo" di Multimedia Fusion.

Aggiungi allo sfondo incolla permanentemente l'immagine di un oggetto attivo sullo sfondo quando il gioco è in esecuzione. Può influire sul fatto che una determinata parte dello sfondo registri o meno le collisioni. Quello che faremo è avere una forma a "buco" che taglia un cerchio sullo sfondo grande quanto l'animazione dell'esplosione che lo accompagna.

Aggiungi un buco

Importare explosion_hole.png come oggetto attivo trascinandolo nella cornice. Centra il suo hotspot a (32,32).

Importare explosion_graphic_1.png come un altro oggetto attivo. Quando ti viene chiesto se desideri importare explosion_graphic_2.png, ecc., scegliere .

Centra anche gli hotspot su questi frame grafici di esplosione.

Il codice per aggiungere terreno distruttibile è abbastanza semplice. Quando un proiettile entra in collisione con lo sfondo, è sufficiente creare l'oggetto foro e aggiungerlo allo sfondo.

Crea il foro quando il proiettile entra in collisione con lo sfondo:

Aggiungi il foro sullo sfondo come "Non un ostacolo" (in modo che i proiettili possano passarci attraverso):

Crea anche un'esplosione grafica (una che mostri dove colpisce il proiettile) e distruggi il proiettile alla fine. Possiamo anche distruggere il foro una volta aggiunto allo sfondo:

Infine, distruggi l'esplosione grafica quando ha finito di riprodurre la sua animazione:

Se esegui il gioco, ora dovresti avere un carro armato in grado di mirare e sparare al terreno, creando esplosioni e lasciando buchi.


Passaggio 5: aggiungi un altro giocatore

Alla fine aggiungeremo un altro giocatore al nostro gioco. Copieremo il codice che abbiamo già ricevuto per il nostro primo serbatoio e lo applichiamo a un altro. Avremo anche bisogno di una nuova variabile globale per tenere traccia di chi è il turno.

Aggiungi la grafica di Player Two

Importa il corpo e la torretta del carro armato di Two Player come hai fatto con Player One. Posiziona il secondo serbatoio sul lato destro del telaio.

Nell'editor di eventi, copiare il codice per il primo serbatoio nel secondo, sarà inoltre necessario creare i valori modificabili DistanceToMouse e AngleToMouse nel serbatoio del secondo giocatore. Ho aggiunto commenti al mio codice per renderlo più facile da vedere. Se rimani bloccato, segui di nuovo la prima parte di questo tutorial, ma fallo per il secondo serbatoio.

Se esegui il gioco ora, entrambi i carri armati spareranno contemporaneamente verso il mirino.

Crea nuove variabili

Crea due nuove variabili globali chiamate CurrentPlayerTurn e TurnCooldown.

TurnCooldown sarà usato per impedire che i carri armati di entrambi sparino contemporaneamente. Ogni volta che un giocatore spara, impostiamo questo cooldown su un valore basso, che conterà fino a zero e non consentiremo all'altra giocatore di sparare finché questo valore non raggiungerà lo zero.

Noi useremo CurrentPlayerTurn = 0 rappresentare il turno del giocatore uno e CurrentPlayerTurn = 1 rappresentare il turno del giocatore due.

Sotto il codice di tiro di Player One con L'utente fa clic con il pulsante sinistro, aggiungi la condizione CurrentPlayerCooldown = 0 in modo che un carro armato guardi solo il mouse e sia in grado di sparare quando ha il controllo del turno. Per fare ciò, utilizzare la condizione "Confronta con un valore globale":

Aggiungi anche la condizione TurnCooldown = 0 per assicurarsi che il colpo si sia raffreddato prima di provare a sparare.

Aggiungi altre due azioni a Impostato il TurnCooldown ad un piccolo valore di 3, e il CurrentPlayerTurn a 1-CurrentPlayerTurn. (Questo significa che se CurrentPlayerTurn è 0 sarà impostato a 1, e se è 1 sarà impostato a 0.)

Dopo aver fatto tutto questo, ecco come dovrebbe apparire il tuo codice:

Duplica lo stesso codice per il giocatore due, ma cambia la condizione per riflettere il turno del giocatore due con CurrentPlayerTurn = 1

E infine aggiungi un'altra condizione per abbassare il cooldown ogni volta che è maggiore di zero:

Se giochi ora dovresti essere in grado di sparare a entrambi i carri armati l'uno con l'altro, con ogni colpo che alterna il turno del tank corrente.


Passaggio 6: Aggiungi condizione di vincita

Ora che possiamo sparare, tutto ciò che dobbiamo fare è aggiungere un modo per saltare a vicenda! Questo è piuttosto semplice. Abbiamo semplicemente bisogno di rilevare se un'esplosione si sta sovrapponendo a un serbatoio, e se lo è, distruggiamo il serbatoio e non permettiamo a nessuno di sparare dopo.

Aggiungi il seguente codice:

+ [Explosion_Graphic] si sovrappone [P1Body]
- Distruggi [P1Body]
- Distruggi [P1Turret]
- Imposta CurrentPlayerTurn su -1

+ [Explosion_Graphic] si sovrappone [P2Body]
- Distruggi [P2Body]
- Distruggi [P2Turret]
- Imposta CurrentPlayerTurn su -1

Ecco come il codice cerca Giocatore 1:

Distruggere i giocatori e le loro torrette è abbastanza auto-esplicativo. Abbiamo impostato il CurrentPlayerTurn a -1 in modo che i giocatori non possano più sparare (come richiesto dalle condizioni CurrentPlayerTurn essere uguale a 0 o 1).

Se gestisci il tuo gioco, dovresti essere in grado di fare a turno a spararsi a vicenda finché uno di voi non esplode!


Conclusione

Ora hai un gioco di bombe a due giocatori completamente funzionale che puoi giocare con i tuoi amici. Da qui puoi aggiungere cose come la velocità del vento casuale che influenza la traiettoria del proiettile, nuove armi, suoni, effetti particellari e altro!

Divertiti con esso!