Maak een 3D Flight Simulator-app voor iOS en Android - Environment Creation

In deze tutorialserie zullen we een vluchtsimulatortoepassing maken met ShiVa3D Suite. Om deze applicatie te bouwen, behandelen we alle onderwerpen die nodig zijn voor het maken van 3D-games, educatieve toepassingen en nieuwe 3D-apps. Deze zelfstudie, deel 2 van de serie, gaat over het maken van omgevingen en het maken van terreinen.

In deel 1 van deze serie introduceerden we de simulator-applicatie genaamd Simulator en legden we het ontwikkelingsproces uit dat we volgden tijdens het maken van de Simulator. We hebben ook de inhoud beschreven van het downloadarchief bij deze serie en de basisvluchtmanoeuvres die in de app zijn gesimuleerd. In deze tutorial beschrijven we hoe we het spel kunnen ontwikkelen met behulp van de ShiVa-editor. Onze belangrijkste focus zal het maken van de visuele componenten van de applicatie zijn.


Ook verkrijgbaar in deze serie:

  1. Maak een 3D Flight Simulator-app voor iOS en Android - Theoretisch overzicht
  2. Maak een 3D Flight Simulator-app voor iOS en Android - Environment Creation
  3. Maak een 3D Flight Simulator-app voor iOS en Android - Simulator-programmering
  4. Maak een 3D Flight Simulator-app voor iOS en Android - Project Export

ShiVa Editor Modules

Laten we eerst een korte introductie geven van de verschillende modules die beschikbaar zijn in de ShiVa-editor. We lenen het grootste deel van deze informatie uit de helpdocumentatie van ShiVa Editor.

Gegevensverkenner is een resource manager die toegang biedt tot verschillende elementen van het spel, inclusief het spel zelf, scènes, AIModels, materialen, enz. De gebruikersinterface presenteert die bronnen in een hiërarchische mappenstructuur.

Game-editor is de hoofdmodule van de editor die de ontwikkelaar de game-resource laat bewerken. Met de speleditor kan een ontwikkelaar bijvoorbeeld de scènes en het AIModel definiëren die aan het spel zijn gekoppeld.

Scene Viewer stelt de ontwikkelaar in staat om de scènes in het spel en de modellen in die scènes te visualiseren.

Scene Explorer is een afzonderlijke module die onafhankelijk is van de sceneviewer. De ontwikkelaar gebruikt voornamelijk de scènebezoeker om bronnen in een scène te vinden en te beheren.

Sfeereditor wordt gebruikt om visuele kenmerken van een scène, zoals kleur, belichting en verschillende visuele effecten, te bewerken.

AIModel-editor laat de ontwikkelaar AIModels bewerken. Met de AIModel-editor kunt u variabelen, functies, toestanden en handlers definiëren voor een AIModel.

Scripteditor wordt gebruikt om scripts van een AIModel te bewerken.


Stapsgewijs overzicht

De stappen voor het maken van de simulator kunnen als volgt worden georganiseerd:

  • Maak een project, een game en een scène.
  • Maak een terrein.
  • Creëer de hemel boven het terrein.
  • Voeg een lichtbron toe om licht op het terrein te werpen.
  • Maak de nodige code en variabelen.
  • Voeg de bedieningsknoppen toe aan het scherm. We doen dit na het maken van de code omdat de knoppen moeten worden aangesloten wanneer de code wordt geschreven.
  • Voeg een lettertype toe, dat nodig is om een ​​sms-bericht voor de gebruiker weer te geven.
  • Voer tot slot een eenheidscontrole van de Simulator uit.

Stap 1: maak het spel en de scène

Start de ShiVa-editor. Selecteer in het menu bovenaan de balk Hoofd -> Projecten -> Toevoegen. Voer een mappad in om je game op te slaan. (We kozen voor D: \ ShProj \ Projects \ Flight_Simulator.) Dit wordt hieronder getoond.


Sluit het dialoogvenster door op Sluiten te drukken.

Markeer in Gegevensverkenner de map Games en klik met de rechtermuisknop op menu Maken -> Game.


Noem de simulator van het spel. druk op OK.


Markeer in Gegevensverkenner de map Scènes en maak in het menu voor rechtsklikken Maken -> Scène.


Noem de scène Scene1. druk op OK.


Open de Game Editor en dubbelklik in de Data Explorer onder de map Games op de Simulator. In de Games Editor ziet u verschillende eigenschappen van de Simulator-game.


Selecteer in de Game-editor het tabblad Scènes. Selecteer in de Gegevensverkenner onder de map Scènes Scene1, sleep het naar het tabblad Scènes in Game Editor. Je zou zoiets als dit moeten zien:


Op het tabblad Speleditorscènes dubbelklikt u op Scene1. U ziet een groen vinkje onder de kolom met de naam Loaded.



Stap 2: maak het terrein

Het belangrijkste visuele element in de Simulator is het terrein, omdat het terrein, anders dan de lucht, is wat de gebruiker tijdens de hele simulatie ziet. ShiVa Editor laat ons verfijnde terreinen creëren. Voor de doeleinden van deze serie zullen we een relatief eenvoudig terrein creëren. Voor meer informatie over ShiVa Editor terreincapaciteiten, zie hoofdstuk 16 van Shando's Shiva Book en dit artikel over Terrain Creation.

Breng de Terrain Editor aan. Dubbelklik in Gegevensverkenner in de map Scènes op Scène1. Selecteer Maken in het menu Terrain Editor.


Selecteer in Terrain Editor het menu Maken.

  • Vink Lege chunks aan
  • Selecteer Chunk Count: 32x32
  • Selecteer Chunk-grootte: 32x32
  • Selecteer eenheidsgrootte: 4

druk op OK.


We hebben een vierkant gedefinieerd waarvan de randen grenzen van het terrein zijn. Aan elke kant zijn er 32 chunks waarvan de chunk-grootte 128 (4 x 32) is. Met deze definities is aan elke kant van het terrein 4.096 (4 x 32 x 32) eenheden.

Nu voegen we onregelmatigheden, dat wil zeggen heuvels en holtes, toe aan het terrein. Selecteer de sectie Chunks in de Terrain Editor. Klik op de linkerbovenhoek van het terrein (hieronder weergegeven):


Houd de muisknop ingedrukt en sleep de cursor helemaal naar de rechter benedenhoek om alle chunks te selecteren zoals hieronder wordt getoond.


Terwijl alle brokken in het terrein zijn geselecteerd, ga je naar het gedeelte Geometrie in de Terrain Editor en klik je op de rechthoek aan de linkerkant met een blauwe pijl omlaag..


Selecteer Ruis in het vervolgkeuzemenu.


Vervang de volgende waarden:

  • Operator: Vervangen
  • Bedrag: 0,53
  • Zachte randen: 0,50
  • Frequentie: 0.008
  • Persistentie: 0.411
  • Octaven: 6
  • Amplitude: 44

druk op OK.


  • De operatorwaarde "Vervangen" geeft de Terrain Editor de opdracht dat de huidige laag de vorige moet vervangen. Omdat we maar één laag hebben, heeft deze variabele echt geen significante implicatie.
  • Bedrag is een getal tussen 0 en 1 en kan worden beschouwd als een soort waarde voor dekking. Het heeft betekenis wanneer deze laag wordt gecombineerd met een vorige laag. Nogmaals, omdat er maar één laag is, heeft deze variabele geen significante implicatie.
  • De variabele Zachte randen beïnvloedt het mengen van brokken aan de grens van de selectie met de aangrenzende brokken. Omdat we alle chunks hebben geselecteerd en er slechts één laag is, zou deze variabele geen betekenis moeten hebben.
  • De andere variabelen Frequentie, Persistentie, Octaven en Amplitude bepalen de hoogte en diepte van de heuvels en holtes, en bepalen respectievelijk hoe vaak die worden herhaald en hoe scherp en puntig de pieken eruit zien.

Op dit punt hebben we de onregelmatigheden van het terrein gecreëerd. Nu moeten we gewoon wat kleur toevoegen.

Ga nu naar de sectie Materialen in de Terrain Editor. Vink de selectievakjes "Dynamische verlichting ontvangen" en "Dynamische schaduwen ontvangen" aan. Zorg ervoor dat de AO-hoeveelheid 0,00 is en de AO-afstand 10.


Selecteer in het gedeelte Materialen Ambient. Voer in het dialoogvenster Kleur selecteren het volgende in:

  • Rood: 38
  • Groen: 74
  • Blauw: 56

Klik OK".


Klik in het gedeelte Materiaal op Diffuus en voer in het dialoogvenster Kleur selecteren het volgende in:

  • Rood: 15
  • Groen: 77
  • Blauw: 18

druk op OK.

Klik in het gedeelte Materiaal op Spiegelen en voer in het dialoogvenster Kleur selecteren het volgende in:

  • Rood: 16
  • Groen: 29
  • Blauw: 22

druk op OK.

Klik ten slotte in de sectie Materialen op de knop Productie.


Op de vraag "Really render selection?" druk op Ja.


Nu het terreinoppervlak is gecreëerd, zou je in het gedeelte Chunks van Terrain Editor iets moeten zien zoals hieronder (hoewel de hoogte van Min en Max enigszins kan variëren).



Stap 3: Create The Sky

Vervolgens moeten we de lucht boven het terrein creëren. Dit wordt gedaan met behulp van de Skybox-functie van de ShiVa-editor. De Skybox heeft zes zijden: voorkant, bovenkant, links, rechts, achterkant en onderkant. Het terrein ligt over de bodem en de globale X-, Y- en Z-assen wijzen respectievelijk naar de rechter-, boven- en achterkant van de Skybox. Voor elke zijde (behalve de bodem, omdat deze door het terrein wordt bedekt), bieden we een pixelafbeelding van 512 pixels x 512 om onze Skybox te bouwen. (Zie hieronder).


Voor een naadloze weergave moeten die afbeeldingen zo zijn dat de aangrenzende randen van elke twee afbeeldingen onlosmakelijk met elkaar moeten passen, bijvoorbeeld de rechterrand van de linkerafbeelding en de linkerrand van de afbeelding aan de voorzijde. Om dat effect te bereiken, is het eenvoudiger als u die afbeeldingen maakt van een panoramische afbeelding en indien nodig verdere bewerkingen toepast. Tijdens het rennen in de Simulator, kunt u een onvolkomenheid waarnemen omdat de linkerrand van het beeld aan de achterkant niet overgaat in de rechterrand van het rechterbeeld. Wat we hebben moet echter voldoende zijn voor de doeleinden van deze serie.

Selecteer in het menu Gegevensverkenner Importeren -> Textuur.


Klik in het dialoogvenster 'Importeer een textuur' op '? 'naast het te importeren bestand en selecteer de volgende vijf bestanden uit het codearchief bij deze zelfstudie:

  • back-crop.jpg
  • front-crop.jpg
  • linker crop.jpg
  • rechts-crop.jpg
  • top-crop.jpg

Het dialoogvenster Import A Texture ziet er als volgt uit:


Druk op de knop Importeren om het importeren te voltooien. Als u nu in Gegevensverkenner de map Structuren selecteert, ziet u de geïmporteerde bestanden (hieronder gemarkeerd):


Open de Ambience-editor en dubbelklik in de Gegevensverkenner op Scene1 onder de map Scènes (als u wordt gevraagd om Scene1 op te slaan, kiest u "Ja").


De sfeereditor ziet er als volgt uit:


In de Ambience-editor geeft u het gedeelte Sky weer. Klik onder Skybox op de pijl naast Voor (-Z) en selecteer front_crop.


Selecteer op dezelfde manier right_crop voor Rechts (-X), back_crop voor Back (+ Z), left_crop voor Links (+ X) en top_crop voor Top (+ Y). Je zou het volgende moeten hebben.



Stap 4: voeg de lichtbron toe

Nu voegen we een lichtbron toe aan Scene1. In ShiVa Editor is er een standaard dynamische lichtbron met de naam DefaultDynamicLightSet, die een ingebouwd Model is (Opmerking: vanuit de ShiVa Editor-documentatie wordt dynamische verlichting gebruikt voor het verplaatsen van lichten / objecten, met real-time lichtweergave terwijl statisch licht is gebruikt voor statische verlichting en schaduwen, op statische objecten. Voor onze doeleinden hebben we een dynamische lichtbron geselecteerd).

Breng Scene Viewer en Gegevensverkenner naast elkaar tot leven. Dubbelklik in de Gegevensverkenner onder de map Scènes op Scene1 (kies "Ja" als u wordt gevraagd om Scene1 op te slaan).

Je zou iets gelijkaardigs als onderstaand beeld in Scene Viewer moeten zien


Open in Gegevensverkenner de map Modellen, die zich direct onder de map Flight_Simulator op het hoogste niveau bevindt. Selecteer DefaultDynamicLightSet en sleep het naar de Scene Viewer.

Ga in Gegevensverkenner naar de map Scènes en dubbelklik op Scène1. Wanneer u wordt gevraagd om Scene1 op te slaan, kiest u Ja. Breng nu de Scene Explorer naar voren. Op het tabblad Objecten ziet u de DefaultDynamicSet en een DefaultCamera.


In de Scene Explorer ziet u onder het tabblad Modellen het volgende.



Stap 5: Maak het AIModel

Nu gaan we het AIModel voor de game maken. Dit wordt gebruikt om de code en variabelen voor de Simulator op te slaan. Klik in de Gegevensverkenner met de rechtermuisknop op de map AIModels onder de map Bronnen. Selecteer in het menu Create -> AIModel.


Noem de AIModel MainAI. druk op OK.


Nu moeten we de MainAI koppelen aan het Simulator-spel. Breng de Game Editor en de Gegevensverkenner naast elkaar. Dubbelklik in de Gegevensverkenner onder de map Spelletjes op de Simulator. De Simulator is nu geladen in de Game-editor. Open het tabblad Hoofdgroep in de speleditor. U zult zien dat de sectie User Main AI leeg is.


In Gegevensverkenner, onder de map Resources -> AIModels, selecteert u MainAI, sleept u dit naar het gedeelte Gebruikershoofd-AI's in de speleditor. Je zou het volgende moeten zien.



Slotopmerkingen voor deel 2 van deze serie

In deel 2 zijn we begonnen met het beschrijven van hoe het spel te ontwikkelen met behulp van de ShiVa-editor. Onze belangrijkste focus was het creëren van de visuele componenten van de applicatie. In deel 3 gaan we verder met het toevoegen van de code en het testen van het eindproduct.