Creați un App 3D Flight Simulator pentru iOS și Android - crearea de mediu

În această serie de tutori, vom crea o aplicație de simulator de zbor folosind ShiVa3D Suite. Pentru a construi această aplicație, vom acoperi toate subiectele necesare pentru crearea de jocuri 3D, aplicații educaționale și aplicații 3D noutate. Acest tutorial, partea 2 a seriei, va acoperi mediul și crearea de terenuri.

În partea a 1 a acestei serii, am introdus aplicația Simulator de zbor numită Simulator și am explicat procesul de dezvoltare pe care l-am urmat în timpul creării Simulatorului. De asemenea, am descris conținutul arhivei de descărcare care însoțește această serie și manevrele de zbor de bază simulate în aplicație. În acest tutorial, începem să descriem cum să dezvolți jocul folosind Editorul ShiVa. Principalul nostru accent va fi crearea componentelor vizuale ale aplicației.


Disponibile și în această serie:

  1. Creați un App 3D Flight Simulator pentru iOS și Android - Prezentare teoretică
  2. Creați un App 3D Flight Simulator pentru iOS și Android - crearea de mediu
  3. Creați un App 3D Flight Simulator pentru iOS și Android - Programare Simulator
  4. Creați un App 3D Flight Simulator pentru iOS și Android - Project Export

Module editor ShiVa

Să ne dăm mai întâi o prezentare rapidă a diferitelor module disponibile în Editorul ShiVa. Împrumutăm majoritatea acestor informații din documentația Ajutor pentru Editorul ShiVa.

Data Explorer este un manager de resurse care oferă acces la diferite elemente ale jocului, inclusiv jocul propriu-zis, scene, AIModeluri, materiale etc. Interfața sa de utilizator prezintă aceste resurse într-o structură de directoare ierarhică.

Editor de jocuri este modulul principal al editorului care permite dezvoltatorului să editeze resursa jocului. De exemplu, cu editorul de jocuri, un dezvoltator poate defini scenele și AIModelul asociat jocului.

Vizualizatorul de scene permite dezvoltatorului să vizualizeze scenele din joc și modelele din aceste scene.

Scena Explorer este un modul separat independent de vizualizatorul de scenă. Dezvoltatorul va utiliza în principal exploratorul de scenă pentru a găsi și gestiona resursele într-o scenă.

Editor de ambianță este utilizată pentru a edita atributele vizuale ale unei scene, cum ar fi culoarea, iluminarea și diverse efecte vizuale.

Editorul AIModel permite dezvoltatorului să editeze AIModeluri. Cu ajutorul editorului AIModel, puteți defini variabile, funcții, stări și operatori pentru un AIModel.

Script Editor este folosit pentru a edita scripturile unui AIModel.


Prezentare generală pas-cu-pas

Pașii de creare a Simulatorului pot fi organizați după cum urmează:

  • Creați un proiect, un joc și o scenă.
  • Creați un teren.
  • Creați cerul deasupra terenului.
  • Adăugați o sursă de lumină pentru a arunca lumină pe teren.
  • Creați codul și variabilele necesare.
  • Adăugați butoanele de control pe ecran. Facem acest lucru după crearea codului, deoarece butoanele trebuie să fie conectate la scrierea codului.
  • Adăugați un font, care este necesar pentru a afișa un mesaj text către utilizator.
  • În cele din urmă, efectuați un test unitar al Simulatorului.

Pasul 1: Creați jocul și scenă

Porniți editorul ShiVa. Din meniul barei de sus, selectați Principal -> Proiecte -> Adăugați. Introduceți o cale a dosarului pentru a stoca jocul. (Am ales D: \ ShProj \ Projects \ Flight_Simulator.) Acest lucru este arătat mai jos.


Închideți dialogul apăsând pe Închidere.

În Data Explorer, evidențiați dosarul Jocuri și apoi faceți clic dreapta pe meniul Creare -> Joc.


Denumiți jocul Simulator. Apăsați OK.


În Data Explorer, evidențiați directorul Scene și din meniul cu butonul din dreapta Creare -> Scene.


Denumiți scena Scene1. Apăsați OK.


Aduceți Editorul de jocuri și în Data Explorer, în dosarul Jocuri, faceți dublu clic pe Simulator. În Editorul de jocuri, ar trebui să vedeți diferite proprietăți ale jocului Simulator.


În Editorul de jocuri selectați fila Scene. În Exploratorul de date din dosarul Scene selectați Scena1, trageți-o și plasați-o în fila Scene din Editorul de jocuri. Ar trebui să vedeți ceva de genul:


În fila Scene editor de jocuri, faceți dublu clic pe Scene1. Veți vedea un semn verde de verificare sub coloana Loaded.



Pasul 2: Creați terenul

Cel mai important element vizual din simulator este terenul deoarece, altul decât cerul, terenul este ceea ce utilizatorul va vedea în timpul întregii simulări. Editorul ShiVa ne permite să creăm terenuri sofisticate. În scopul acestei serii, vom crea un teren relativ simplu. Pentru mai multe informații despre capacitățile teritoriului ShiVa Editor, consultați Capitolul 16 din Shiva's Shiva Book și acest articol despre Terrain Creation.

Aduceți Editorul Terrain. În Data Explorer, în folderul Scenes, faceți dublu clic pe Scene1. În meniul Terrain Editor, selectați Creare.


În Terrain Editor, selectați meniul Creare.

  • Verificați Creați bucăți goale
  • Selectați Număr de bucăți: 32x32
  • Selectați dimensiunea pachetului: 32x32
  • Selectați dimensiunea unității: 4

Apăsați OK.


Am definit un pătrat ale cărui muchii sunt limite ale terenului. Pe fiecare parte, există 32 de bucăți în care dimensiunea piesei este de 128 (4 x 32). Cu aceste definiții, fiecare parte a terenului este de 4.096 (4 x 32 x 32) unități.

Acum, vom adăuga nereguli, adică dealuri și goluri, pe teren. În editorul Terrain, selectați secțiunea Chunks. Faceți clic pe colțul din stânga sus al terenului (prezentat mai jos):


Țineți apăsat butonul mouse-ului și trageți cursorul până la colțul din dreapta jos pentru a selecta toate bucățile, după cum se arată mai jos.


În timp ce toate bucățile din teren sunt selectate, mergeți la secțiunea Geometrie din Editorul de Terrain și faceți clic pe dreptunghiul din stânga care are o săgeată albastră în jos pe ea.


Din meniul derulant, selectați Zgomot.


Înlocuiți următoarele valori:

  • Operator: Înlocuiți
  • Cantitate: 0,53
  • Barete moi: 0.50
  • Frecvență: 0,008
  • Persistență: 0,411
  • Octaves: 6
  • Amplitudinea: 44

Apăsați OK.


  • Valoarea operatorului "Replace" instruiește Editorul Terrain că stratul curent ar trebui să înlocuiască cel precedent. Pentru că vom avea doar un singur strat, această variabilă nu are implicații semnificative.
  • Suma este un număr între 0 și 1 și ar putea fi considerat un fel de valoare de opacitate. Are importanță atunci când acest strat este combinat cu un strat anterior. Din nou, deoarece există doar un singur strat, această variabilă nu are implicații semnificative.
  • Variabila "Fronturi moi" influențează amestecarea bucăților la limita selecției cu bucățile adiacente. Deoarece am selectat toate bucățile și există doar un singur strat, această variabilă nu ar trebui să aibă semnificație.
  • Celelalte variabile Frecvența, Persistența, Octavele și Amplitudinea determină înălțimea și adâncimea dealurilor și golurilor, determinând, respectiv, cât de des se repetă și cât de ascuțite și ascuțite arată vârfurile.

În acest moment, am creat neregulile terenului. Acum trebuie doar să adăugăm o culoare.

Acum, mergeți la secțiunea Materiale din Editorul Terrain. Bifați casetele de selectare "Primiți luminile dinamice" și "Primiți umbrele dinamice". Asigurați-vă că suma AO este 0,00 iar distanța AO este de 10.


Totuși, în secțiunea Materiale, selectați Ambient. În dialogul Selectare culoare, introduceți:

  • Roșu: 38
  • Verde: 74
  • Albastru: 56

Faceți clic pe "OK".


În secțiunea Materiale, faceți clic pe Diffuse și apoi, în dialogul Selectare culoare, introduceți:

  • Roșu: 15
  • Verde: 77
  • Albastru: 18

Apăsați OK.

În secțiunea Materiale, faceți clic pe Specular, iar în dialogul Selectare culoare introduceți:

  • Roșu: 16
  • Verde: 29
  • Albastru: 22

Apăsați OK.

În cele din urmă, în secțiunea Materiale, faceți clic pe butonul Producere.


La întrebarea "Selectează cu adevărat selecția?" apăsați Da.


Acum, când suprafața terenului a fost creată, în secțiunea Chunks din Terrain Editor trebuie să vedeți ceva de genul de mai jos (deși înălțimea Min și Max pot varia ușor).



Pasul 3: Creați cerul

Apoi, trebuie să creăm cerul deasupra terenului. Acest lucru se va face folosind caracteristica Skybox a Editorului ShiVa. Skybox are șase laturi: partea din față, partea de sus, stânga, dreapta, spate și fund. Terrain se află deasupra fundului, iar axele globale X, Y și Z indică spre dreapta, sus și partea din spate a Skybox-ului. Pentru fiecare parte (cu excepția fundului, deoarece este acoperită de teren) vom oferi o imagine de 512 pixeli x 512 pixeli pentru a construi Skybox-ul nostru. (Vezi mai jos).


Pentru o imagine fără sudură, aceste imagini trebuie să fie astfel încât marginile adiacente ale oricăror două imagini să se potrivească inseparabil împreună, de ex. marginea din dreapta a imaginii din stânga și marginea din stânga a imaginii din față. Pentru a obține acest efect, este mai ușor să creați acele imagini dintr-o imagine panoramică și să aplicați modificări suplimentare după cum este necesar. În timp ce rulează în Simulator, puteți observa o imperfecțiune din cauza marginii din stânga a imaginii din spate, care nu se amestecă cu marginea dreaptă a imaginii din dreapta. Cu toate acestea, ceea ce avem ar trebui să fie suficient pentru scopurile acestei serii.

În meniul Data Explorer, selectați Import -> Textură.


În fereastra de import a unei texturi, faceți clic pe "? "de lângă fișierul pentru a importa și selectați următoarele cinci fișiere din arhiva de cod care însoțește acest tutorial:

  • back-crop.jpg
  • front-crop.jpg
  • stânga-crop.jpg
  • dreapta-crop.jpg
  • top-crop.jpg

Dialogul Import textură va arăta astfel:


Apăsați butonul Import pentru a termina importul. Acum, în Data Explorer, dacă selectați dosarul Texturi, veți vedea fișierele importate (evidențiate mai jos):


Aduceți Editorul de ambianță și în Data Explorer, faceți dublu clic pe Scene1 din dosarul Scene (Dacă vi se solicită salvarea Scene1, alegeți "Da").


Editorul de ambianță va arăta astfel:


În Editorul de ambianță, afișați secțiunea Sky. Sub Skybox, faceți clic pe săgeata de lângă Front (-Z) și selectați front_crop.


În mod similar, selectați right_crop pentru dreapta (-X), back_crop pentru Înapoi (+ Z), left_crop pentru stânga (+ X) și top_crop pentru Top (+ Y). Ar trebui să aveți următoarele lucruri.



Pasul 4: Adăugați sursa de lumină

Acum, vom adăuga o sursă de lumină în scenă1. În editorul ShiVa, există o sursă de lumină dinamică implicită numită DefaultDynamicLightSet, un model încorporat (Notă: Din documentația editorului ShiVa, iluminarea dinamică este utilizată pentru deplasarea luminilor / obiectelor, cu redarea în timp real a luminii, în timp ce lumina statică folosit pentru iluminarea statică și umbrele, pe obiecte statice Pentru scopurile noastre am selectat o sursă de lumină dinamică).

Aduceți scenografia Viewer și Data Explorer una lângă alta. În Data Explorer, în folderul Scene, faceți dublu clic pe Scene1 (dacă vi se solicită salvarea Scene1, alegeți "Yes").

Ar trebui să vedeți ceva similar cu imaginea de mai jos în Vizualizatorul de scene


În Data Explorer, deschideți folderul Modele, care se află direct sub folderul Flight_Simulator de nivel superior. Selectați DefaultDynamicLightSet, trageți-o și plasați-o în Viewer-ul Scene.

În Data Explorer, accesați directorul Scene și faceți dublu clic pe Scene1. Când vi se solicită salvarea scenei 1, alegeți Da. Acum, adu Exploratorul Scenei. În fila Obiecte, ar trebui să vedeți DefaultDynamicSet, precum și o DefaultCamera.


În Exploratorul de scene, în fila Modele, ar trebui să vedeți următoarele.



Pasul 5: Creați AIModel

Acum, vom crea AIModelul pentru joc. Acesta va fi folosit pentru a stoca codul și variabilele pentru Simulator. În Data Explorer, faceți clic dreapta pe dosarul AIModels din dosarul Resurse. Din meniu, selectați Creare -> AIModel.


Denumiți AIModel MainAI. Apăsați OK.


Acum, trebuie să asociem MainAI cu jocul Simulator. Aduceți Editorul de jocuri și Data Explorer una lângă alta. În Data Explorer, în dosarul Jocuri, faceți dublu clic pe Simulator. Simulatorul este acum încărcat în Editorul de jocuri. Deschideți fila Principal din Editorul de jocuri. Veți vedea că secțiunea User AI principal este goală.


În Data Explorer, în folderul Resources -> AIModels, selectați MainAI, trageți-l și plasați-l în secțiunea User Main AIs din Editorul de jocuri. Ar trebui să vedeți următoarele.



Notele de închidere pentru partea 2 a acestei serii

În partea a doua, am început să descriem cum să dezvolți jocul folosind Editorul ShiVa. Principalul nostru obiectiv a fost crearea componentelor vizuale ale aplicației. În partea 3, vom continua cu adăugarea codului și a unității de testare a produsului final.

Cod