Créer une application 3D Flight Simulator pour iOS et Android - Création d'environnement

Dans cette série de didacticiels, nous allons créer une application de simulateur de vol utilisant ShiVa3D Suite. Afin de construire cette application, nous allons couvrir tous les sujets nécessaires à la création de jeux 3D, d'applications éducatives et d'applications 3D innovantes. Ce tutoriel, partie 2 de la série, couvrira la création d’environnements et de terrains.

Dans la première partie de cette série, nous avons présenté l’application de simulateur de vol appelée Simulator et expliqué le processus de développement que nous avons suivi lors de la création du simulateur. Nous avons également décrit le contenu des archives de téléchargement accompagnant cette série et les manœuvres de vol de base simulées dans l'application. Dans ce tutoriel, nous commençons à décrire comment développer le jeu à l’aide de l’éditeur ShiVa. Notre objectif principal sera de créer les composants visuels de l'application..


Aussi disponible dans cette série:

  1. Créer une application 3D Flight Simulator pour iOS et Android - Présentation théorique
  2. Créer une application 3D Flight Simulator pour iOS et Android - Création d'environnement
  3. Créer une application 3D Flight Simulator pour iOS et Android - Programmation sur simulateur
  4. Créer une application 3D Flight Simulator pour iOS et Android - Exportation de projet

ShiVa Editor Modules

Commençons par donner une brève introduction aux différents modules disponibles dans l’éditeur ShiVa. Nous empruntons la plupart de ces informations à la documentation d'aide de ShiVa Editor.

Explorateur de données est un gestionnaire de ressources permettant d'accéder à divers éléments du jeu, notamment le jeu lui-même, des scènes, des modèles AIM, des matériaux, etc. Son interface utilisateur présente ces ressources dans une structure de dossiers hiérarchique..

Éditeur de jeu est le module principal de l'éditeur permettant au développeur de modifier la ressource de jeu. Par exemple, avec l'éditeur de jeu, un développeur peut définir les scènes et le modèle AIM associé au jeu..

Visionneuse de scène permet au développeur de visualiser les scènes dans le jeu et les modèles dans ces scènes.

Explorateur de scène est un module séparé indépendant du visualiseur de scène. Le développeur utilisera principalement l'explorateur de scènes pour rechercher et gérer les ressources d'une scène..

Éditeur d'ambiance est utilisé pour éditer les attributs visuels d'une scène tels que la couleur, l'éclairage et divers effets visuels.

AIModel Editor permet au développeur de modifier AIModels. Avec l'éditeur AIModel, vous pouvez définir des variables, des fonctions, des états et des gestionnaires pour un modèle AIModel..

Éditeur de script est utilisé pour éditer les scripts d'un AIModel.


Aperçu pas à pas

Les étapes pour créer le simulateur peuvent être organisées comme suit:

  • Créer un projet, un jeu et une scène.
  • Créer un terrain.
  • Créer le ciel au dessus du terrain.
  • Ajouter une source de lumière pour éclairer le terrain.
  • Créez le code et les variables nécessaires.
  • Ajoutez les boutons de contrôle à l'écran. Nous faisons cela après avoir créé le code car les boutons doivent être connectés lorsque le code est écrit.
  • Ajouter une police, nécessaire pour afficher tout message texte à l'utilisateur.
  • Enfin, effectuez un test unitaire du simulateur.

Étape 1: Créer le jeu et la scène

Lancez l'éditeur ShiVa. Dans le menu du haut, sélectionnez Principal -> Projets -> Ajouter. Entrez un chemin de dossier pour stocker votre jeu. (Nous avons choisi D: \ ShProj \ Projects \ Flight_Simulator.) Ceci est montré ci-dessous.


Fermez la boîte de dialogue en appuyant sur Fermer.

Dans l'explorateur de données, mettez en surbrillance le dossier Jeux puis cliquez avec le bouton droit de la souris sur le menu Créer -> Jeu..


Nommez le simulateur de jeu. appuyer sur OK.


Dans l'explorateur de données, mettez en surbrillance le dossier Scènes et à partir du menu contextuel Créer -> Scène.


Nommez la scène Scene1. appuyer sur OK.


Ouvrez l'éditeur de jeu et dans l'explorateur de données, sous le dossier Jeux, double-cliquez sur le simulateur. Dans l'éditeur de jeux, vous devriez voir différentes propriétés du jeu Simulator..


Dans l'éditeur de jeu, sélectionnez l'onglet Scènes. Dans l'explorateur de données sous le dossier Scènes, sélectionnez Scène1, faites-le glisser vers l'onglet Scènes de l'Editeur de jeu. Vous devriez voir quelque chose comme ça:


Dans l'onglet Scènes de l'éditeur de jeu, double-cliquez sur Scene1. Vous verrez une coche verte sous la colonne nommée Loaded.



Étape 2: Créer le terrain

L'élément visuel le plus important dans le simulateur est le terrain car, mis à part le ciel, il correspond à ce que l'utilisateur verra pendant toute la simulation. ShiVa Editor nous permet de créer des terrains sophistiqués. Pour les besoins de cette série, nous allons créer un terrain relativement simple. Pour plus d'informations sur les capacités de terrain de l'éditeur ShiVa, voir le chapitre 16 du Shiva Book de Shando et cet article sur la création de terrain..

Amenez l'éditeur de terrain. Dans l'explorateur de données, dans le dossier Scenes, double-cliquez sur Scene1. Dans le menu Terrain Editor, sélectionnez Create..


Dans Terrain Editor, sélectionnez le menu Créer..

  • Cochez Créer des morceaux vides
  • Sélectionnez le nombre de morceaux: 32x32
  • Sélectionnez la taille de morceau: 32x32
  • Sélectionnez la taille de l'unité: 4

appuyer sur OK.


Nous avons défini un carré dont les arêtes sont les limites du terrain. De chaque côté, il y a 32 morceaux dont la taille est de 128 (4 x 32). Avec ces définitions, chaque côté du terrain correspond à 4 096 unités (4 x 32 x 32).

Maintenant, nous allons ajouter des irrégularités, c’est-à-dire des collines et des creux, au terrain. Dans l’éditeur de terrain, sélectionnez la section Morceaux. Cliquez sur le coin supérieur gauche du terrain (illustré ci-dessous):


Maintenez le bouton de la souris enfoncé et faites glisser le curseur jusqu'au coin inférieur droit pour sélectionner tous les morceaux, comme indiqué ci-dessous..


Alors que tous les morceaux du terrain sont sélectionnés, allez à la section Géométrie de l’éditeur de terrain et cliquez sur le rectangle de gauche sur lequel figure une flèche bleue vers le bas..


Dans le menu déroulant, sélectionnez Bruit.


Remplacez les valeurs suivantes:

  • Opérateur: Remplacer
  • Montant: 0.53
  • Bordures floues: 0,50
  • Fréquence: 0.008
  • Persistance: 0.411
  • Octaves: 6
  • Amplitude: 44

appuyer sur OK.


  • La valeur d'opérateur "Remplacer" indique à l'éditeur de terrain que le calque actuel doit remplacer le précédent. Comme nous n’avons qu’une couche, cette variable n’a vraiment aucune implication significative.
  • Amount est un nombre compris entre 0 et 1 et peut être considéré comme une sorte de valeur d'opacité. Cela a une signification lorsque cette couche est combinée avec une couche précédente. Encore une fois, puisqu'il n'y a qu'une couche, cette variable n'a aucune implication significative.
  • La variable des marges floues influence le mélange des morceaux à la limite de la sélection avec les morceaux adjacents. Comme nous avons sélectionné tous les morceaux et qu’il n’ya qu’une couche, cette variable ne doit pas avoir de signification..
  • Les autres variables Fréquence, Persistance, Octaves et Amplitude déterminent la hauteur et la profondeur des collines et des creux, en déterminant respectivement la fréquence de répétition de celles-ci et la netteté et la netteté des pics..

À ce stade, nous avons créé les irrégularités du terrain. Il ne reste plus qu’à ajouter de la couleur.

Maintenant, allez à la section Matériaux de l'éditeur de terrain. Cochez les cases "Recevoir un éclairage dynamique" et "Recevoir des ombres dynamiques". Assurez-vous que le montant AO est de 0,00 et que la distance AO est de 10..


Néanmoins, dans la section Matériaux, sélectionnez Ambiant. Dans la boîte de dialogue Sélectionner une couleur, entrez:

  • Rouge: 38
  • Vert: 74
  • Bleu: 56

Cliquez sur OK".


Dans la section Matériaux, cliquez sur Diffuser puis, dans la boîte de dialogue Sélectionner une couleur, entrez:

  • Rouge: 15
  • Vert: 77
  • Bleu: 18

appuyer sur OK.

Dans la section des matériaux, cliquez sur Spéculaire, puis dans la boîte de dialogue Sélectionner une couleur, entrez:

  • Rouge: 16
  • Vert: 29
  • Bleu: 22

appuyer sur OK.

Enfin, dans la section Matériaux, cliquez sur le bouton Production..


Quand on lui demande "rend vraiment la sélection?" appuyez sur Oui.


Maintenant que la surface du terrain a été créée, dans la section Morceaux de Terrain Editor, vous devriez voir quelque chose comme ci-dessous (bien que les hauteurs minimale et maximale puissent légèrement varier).



Étape 3: Créer le ciel

Ensuite, nous devons créer le ciel au-dessus du terrain. Cela sera fait en utilisant la fonctionnalité Skybox de l'éditeur ShiVa. La Skybox a six côtés: avant, haut, gauche, droit, arrière et bas. Le terrain se trouve au-dessus du bas et les axes globaux X, Y et Z pointent vers les côtés droit, haut et arrière de la Skybox, respectivement. Pour chaque côté (sauf le bas, car il est couvert par le terrain), nous fournirons une image de 512 pixels sur 512 pixels pour construire notre Skybox. (Voir ci-dessous).


Pour un aspect homogène, ces images doivent être telles que les bords adjacents de deux images quelconques doivent être parfaitement insérés, par exemple. le bord droit de l'image gauche et le bord gauche de l'image avant. Pour obtenir cet effet, il est plus facile de créer ces images à partir d’une image panoramique et d’appliquer des modifications supplémentaires si nécessaire. Lors de l'exécution dans le simulateur, vous pouvez observer une imperfection due au fait que le bord gauche de l'image arrière ne se confond pas avec le bord droit de l'image de droite. Cependant, ce que nous avons devrait suffire aux fins de cette série.

Dans le menu Explorateur de données, sélectionnez Importer -> Texture..


Dans la boîte de dialogue Importer une texture, cliquez sur '? 'à côté du fichier à importer et sélectionnez les cinq fichiers suivants dans l’archive de code accompagnant ce didacticiel:

  • back-crop.jpg
  • front-crop.jpg
  • left-crop.jpg
  • right-crop.jpg
  • top-crop.jpg

La boîte de dialogue Importer une texture ressemblera à ceci:


Appuyez sur le bouton Importer pour terminer l'importation. Maintenant, dans l'explorateur de données, si vous sélectionnez le dossier Textures, vous verrez les fichiers importés (mis en évidence ci-dessous):


Ouvrez l’Ambience Editor et dans l’explorateur de données, double-cliquez sur Scene1 dans le dossier Scènes (si vous êtes invité à enregistrer Scene1, choisissez «Oui»)..


L'éditeur d'ambiance ressemblera à ceci:


Dans l'éditeur d'ambiance, affichez la section Sky. Sous Skybox, cliquez sur la flèche en regard de Avant (-Z) et sélectionnez front_crop.


De même, sélectionnez right_crop pour Right (-X), back_crop pour le dos (+ Z), left_crop pour Left (+ X) et top_crop pour Top (+ Y). Vous devriez avoir le suivant.



Étape 4: Ajouter la source de lumière

Nous allons maintenant ajouter une source de lumière à Scene1. Dans ShiVa Editor, il existe une source de lumière dynamique par défaut appelée DefaultDynamicLightSet, qui est un modèle intégré. utilisé pour l'éclairage statique et les ombres, sur des objets statiques. Pour nos besoins, nous avons sélectionné une source de lumière dynamique).

Activez la Visionneuse de scènes et l'Explorateur de données côte à côte. Dans l'explorateur de données, sous le dossier Scènes, double-cliquez sur Scene1 (si vous êtes invité à enregistrer Scene1, choisissez "Oui")..

Vous devriez voir quelque chose de similaire à l'image ci-dessous dans la Visionneuse de scènes.


Dans l'explorateur de données, ouvrez le dossier Modèles, qui se trouve directement sous le dossier Flight_Simulator de niveau supérieur. Sélectionnez DefaultDynamicLightSet, puis faites-le glisser dans la visionneuse de scène..

Dans l'explorateur de données, accédez au dossier Scènes et double-cliquez sur Scene1. Lorsque vous êtes invité à enregistrer Scene1, choisissez Oui. Maintenant, ouvrez l'explorateur de scène. Sous l'onglet Objets, vous devriez voir le DefaultDynamicSet, ainsi qu'une DefaultCamera..


Dans l'explorateur de scènes, sous l'onglet Modèles, vous devriez voir ce qui suit.



Étape 5: Créer le modèle AIM

Nous allons maintenant créer le modèle AIM pour le jeu. Ceci sera utilisé pour stocker le code et les variables pour le simulateur. Dans l'explorateur de données, cliquez avec le bouton droit sur le dossier AIModels situé sous le dossier Ressources. Dans le menu, sélectionnez Créer -> AIModel.


Nommez l'AIModel MainAI. appuyer sur OK.


Nous devons maintenant associer MainAI au jeu Simulator. Placez l'éditeur de jeu et l'explorateur de données côte à côte. Dans l'explorateur de données, sous le dossier Jeux, double-cliquez sur le simulateur. Le simulateur est maintenant chargé dans l'éditeur de jeu. Ouvrez l'onglet principal dans l'éditeur de jeu. Vous verrez que la section User Main AI est vide..


Dans l'explorateur de données, sous le dossier Ressources -> AIModels, sélectionnez MainAI, faites-le glisser dans la section User AIs de l'éditeur de jeu. Vous devriez voir ce qui suit.



Mot de la fin de la partie 2 de cette série

Dans la deuxième partie, nous avons commencé à décrire comment développer le jeu à l’aide de l’éditeur ShiVa. Notre objectif principal était de créer les composants visuels de l'application. Dans la troisième partie, nous allons continuer à ajouter le code et à tester le produit final..