Construire un jeu ShiVa3D multiplate-forme étapes finales et export de projet

Le deuxième tutoriel de cette série en trois parties a débuté avec "Game Geometry", axé sur les aspects géométriques sous-jacents du jeu, et a également commencé à présenter les étapes nécessaires à la création du jeu dans l'éditeur ShiVa. Cette dernière étape du didacticiel se poursuivra là où les étapes précédentes de l’éditeur ShiVa se sont arrêtées. Il montrera ensuite comment exporter le jeu sur les plateformes iOS ou Android..


Aussi disponible dans cette série:

  • Construire une série de jeux de puzzle
  • Géométrie du jeu et configuration du projet
  • Étapes finales et export du projet

Ce tutoriel poursuivra la discussion commencée dans la section précédente intitulée "Développer un puzzle avec l'éditeur ShiVa". Ici, nous allons décrire l’importation des composants du HUD et les derniers ajustements sur la progression du jeu jusqu’à présent. Ensuite, nous conclurons la section "Développement de casse-tête avec l'éditeur ShiVa" via un test unitaire. Dans la section "Authoring Tool", nous montrerons comment utiliser l'outil de création ShiVa Authoring Tool pour convertir le Puzzle en deux applications différentes, l'une pour Android OS et l'autre pour iPad. Nous allons terminer la série dans la section intitulée "Conclusions".


Instructions étape par étape suite

Importer le HUD

Nous allons maintenant importer les composants du HUD, y compris les polices, les boutons, les étiquettes, etc. Accédez à votre répertoire local où vous avez stocké l'archive de téléchargement accompagnant cet article. Sélectionnez PuzzleHUD.ste et appuyez sur Importer. Une fois l'importation terminée, vous devriez voir Bell_Gothic_Std_Light et Arial_Unicode_MS dans l'explorateur de données sous Casse-tête - Ressources - Polices.

Figure 43. Vérification des polices

De plus, dans l'explorateur de données sous Puzzle - Ressources - Textures, vous verrez les textures nommées Bell_Gothic_Std_Light et Arial_Unicode_MS..

Figure 44. Vérification des textures de police

En même temps, vous devriez voir les composants HUD importés via PuzzleHUD.ste. Premièrement, sous Puzzle - Ressources - HUD, observez que vous avez PuzzleHUD..

Figure 45. Vérification du HUD

Deuxièmement, affichez l'éditeur de palette et l'explorateur de données côte à côte. Dans l'explorateur de données, double-cliquez sur PuzzleHUD, qui se trouve sous Puzzle - Ressources - HUD. Dans l’éditeur HUD, vous verrez ce qui suit.

Figure 46. Vérification du HUD dans l'éditeur de HUD

Si vous faites défiler dans l'éditeur de HUD, cela devrait ressembler à ceci:

Figure 47. Composants HUD

Une brève explication des composants du HUD est donnée ci-dessous. Pour plus de détails, voir la section "Affichage tête haute" dans le deuxième tutoriel de cette série.

  • Contexte, Temps et Barre d'outils sont les étiquettes pour la couleur d'arrière-plan, la minuterie et la barre d'outils.
  • p11 à travers p69 sont les étiquettes représentant les pièces du puzzle.
  • Redémarrer, Résoudre et Démarrer Pause sont les boutons avec les étiquettes "Nouveau", "Résoudre" et "Démarrer" (ou "Pause", en fonction de l'état), respectivement.
  • restartAction, resolAction et startPauseAction sont les actions déclenchées en appuyant sur Redémarrer, Résoudre et Démarrer Pause, respectivement.
  • Effectuer des ajustements

    Après avoir importé toutes les ressources nécessaires, nous allons maintenant procéder à certains ajustements. Placez Game Editor et Data Explorer côte à côte. Dans l'explorateur de données, sous Puzzle - Jeux, double-cliquez sur Puzzle. L'éditeur de jeu devrait maintenant avoir le jeu de puzzle chargé. Notez que la section AI principale de l'utilisateur est vide sous l'onglet Principal..

    Figure 48. Éditeur de jeu

    Dans l'explorateur de données, sous Puzzle - Ressources - AIModels, sélectionnez PuzzleAI. Glissez-le et déposez-le dans la section "IA principales utilisateurs" de l'éditeur de jeu, sous l'onglet Principal. PuzzleAI est désormais répertorié dans la section User AIs..

    Figure 49. Éditeur de jeu - Onglet principal

    Dans l'éditeur de jeu, cliquez sur l'onglet Ressources. Cela aura l'air vide. Dans l'explorateur de données, sous Puzzle - Ressources - HUD, sélectionnez PuzzleHUD, puis faites-le glisser dans la section Ressources de l'Editeur de jeu. De même, dans l'explorateur de données, sous Puzzle - Ressources - SoundBanks, sélectionnez PuzzleSoundBank et faites-le glisser dans la section Ressources. L'onglet ressources devrait ressembler à ceci.

    Figure 50. Editeur de jeu - Onglet Ressources

    Dans l'explorateur de données, sous Puzzle - Ressources - Textures, sélectionnez les textures p11 à p69 et faites-les glisser dans la section Ressources de Game Editor. L'onglet ressources devrait ressembler à ceci.

    Figure 51. Éditeur de jeu - Textures

    Effectuer des tests unitaires

    Nous sommes maintenant tous ensemble. Pour tester notre jeu, cliquez sur le bouton Aperçu dans la barre d'outils de l'éditeur ShiVa. Dans le menu, sélectionnez Affichage> Taille> iPad> 768x1024..

    Figure 52. Éditeur de jeu - Aperçu

    De plus, dans le menu, sélectionnez Affichage> Mode d'affichage> Exécution..

    Figure 53. Game Editor - Réglage de l'affichage

    Maintenant, dans le menu, appuyez sur Play. Vous devriez voir le jeu commencer.

    Figure 54. Éditeur de jeu - Aperçu de départ

    Maintenant, vous pouvez jouer au jeu en utilisant des clics de souris pour émuler des événements tactiles à l'écran.


    Exporter le jeu pour la création

    Dans cette section, nous verrons comment exporter le jeu depuis l'éditeur ShiVa pour l'importer dans l'outil de création ShiVa..

    Exportation pour Android OS

    Dans l'explorateur de données, dans Puzzle - Ressources - Jeu, sélectionnez Puzzle et dans le menu contextuel, sélectionnez Exporter le jeu..

    Figure 55. Jeu d'exportation

    Pour le champ "Nom d'exportation", tapez Puzzle. Choisissez un dossier local pour générer le fichier d'exportation (par exemple, C: \ exports \). Assurez-vous également de sélectionner "Package d'exécution (.stk)" et Android.

    Figure 56. Jeu d'exportation - Android

    Enfin, appuyez sur Exporter. Si vous exportez une archive pour la première fois à partir d'un projet, son exécution peut prendre plusieurs minutes. Lorsque l'exportation est terminée, vous pouvez appuyer sur OK pour fermer la boîte de dialogue..

    Figure 57. Exportation de jeu - Suppression du dialogue

    Exporter pour iOS

    Exporter pour iOS est très similaire. Dans Explorateur de données, dans Puzzle - Ressources - Jeu, sélectionnez Puzzle et dans le menu contextuel, sélectionnez Exporter le jeu. Pour le champ "Nom d'exportation", tapez Puzzle. Choisissez un dossier local pour générer le fichier d'exportation (par exemple, C: \ exports \). Assurez-vous également de sélectionner "Package d'exécution (.stk)" et iOS (Remarque: si vous souhaitez utiliser le même dossier et les mêmes noms de fichiers d'exportation pour les exportations Android OS et iOS, assurez-vous que ces exportations ne se écrasent pas.).

    Figure 58. Jeu d'exportation - iOS

    Enfin, appuyez sur Exporter. Une fois l'exportation terminée, vous pouvez appuyer sur OK pour fermer la boîte de dialogue..

    Information additionnelle

    Pour des raisons d'espace, nous ne fournissons pas de révision de code explicite pour l'application Puzzle. Toutes les fonctions et tous les gestionnaires fournis avec PuzzleAI.ste ont des commentaires détaillés pour décrire leurs fonctionnalités particulières. Le lecteur intéressé est invité à consulter ces scripts pour plus de détails sur le code..


    Outil de création

    Nous avons développé le jeu Puzzle sans écrire de code spécifique aux plateformes iOS ou Android. Nous allons maintenant utiliser l'outil ShiVa Authoring pour convertir le Puzzle en deux applications différentes, une pour Android OS et une pour iPad..

    Fichiers prérequis à partir de l'archive de téléchargement

    Pour suivre les instructions ci-dessous, vous aurez besoin de ios-icon-72-72.png, ios-splash-768-1024.png, android-icon-48-48.png et android-splash-480-800.png qui font partie des archives de téléchargement accompagnant cet article.

    Plateforme Android

    Affichez l'outil de création ShiVa. Sélectionnez l'onglet Android. Appuyez sur la flèche sous «Ou lancez-vous maintenant…».

    Figure 59. Authoring Tool - Mise en route pour Android

    L'étape 1 de l'outil de création est affichée. Pour "Pack d'application", sélectionnez dans votre système de fichiers le fichier Puzzle.stk exporté à partir de l'éditeur ShiVa pour Android. Pour "Icon", sélectionnez android-icon-48-48.png, qui fait partie de l'archive source accompagnant cet article. Pour "Startup splashscreen", sélectionnez le fichier android-splash-480-800.png, qui fait également partie de l'archive source accompagnant cet article. Observez que ShiVa Authoring Tool affiche un aperçu des fichiers image spécifiés dans les sélections "Icône" et "Écran d'accueil en démarrage". Appuyez sur "Étape 2: Création" au sommet de l'écran..

    Figure 60. Authoring Tool - Step 1 pour Android

    L'étape 2 de l'outil de création est affichée. Nous allons créer ici un fichier exécutable Android pouvant être directement installé sur un appareil Android. Sélectionnez "Type de création" comme "Package APK" (si vous souhaitez créer un projet Eclipse au lieu d'un exécutable, sélectionnez "Projet". L'option Projet n'a pas été testée dans cet article). Pour "Identifiant de paquet", entrez com.shiva3d.test. Soit "Version" et "Code de version" les versions 1.0.0 et 1, respectivement. Appuyez sur "Étape 3: Construire" au sommet de l'écran.

    Figure 61. Authoring Tool - Step 2 pour Android

    L'étape 3 de l'outil de création est affichée. Sélectionnez "Type de construction" comme "Développement". Depuis que je souhaite installer le Puzzle sur mon appareil Android dans le cadre de la construction, j'ai coché la case "Installer sur un appareil connecté"..
    Pour que cette option fonctionne, vous devez avoir terminé les étapes décrites dans "Préparation du périphérique Android en vue de l'installation" ci-dessous. Si la case "Installer sur un périphérique connecté" n'est pas cochée, l'outil de création créera l'exécutable Android de l'application Puzzle dans "Dossier de sortie", qui pourra être installé ultérieurement à l'aide de l'outil ADB sous Android..

    Figure 62. Authoring Tool - Étape 3 pour Android

    Laissez "backend audio" sur "Default". Sélectionnez "Prise en charge minimale du système d'exploitation" en tant que "Android 2.2 (niveau d'API: 8)". Définissez un dossier de sortie pour que l’outil de création stocke les fichiers qu’il génère pendant le processus de construction. Laisser la sélection "Script de post-construction personnalisé" demeurer en tant qu'option "Aucun script". Appuyez sur le bouton Construire.

    Figure 63. Authoring Tool - Étape 3 pour Android (sélections supplémentaires)

    Il faudra un certain temps pour terminer la construction. Une fois la construction terminée, vous verrez une confirmation dans la console indiquant que la construction est terminée avec succès..

    Figure 64. Outil de création - Construire

    Si vous avez sélectionné l'option "Installer sur un appareil connecté", l'application Puzzle est à ce stade installée sur l'appareil connecté. Que cette option soit cochée ou non, un exécutable Android appelé Puzzle-debug.apk a été créé dans le dossier de sortie que vous avez défini à l'étape 3..

    Plateforme iPad

    Affichez l'outil de création ShiVa. Sélectionnez l'onglet iPad. Appuyez sur la flèche sous "Ou commencez maintenant…".

    L'étape 1 de l'outil de création est affichée. Pour le pack d'applications, sélectionnez dans votre système de fichiers le fichier Puuzle.stk exporté à partir de ShiVa Editor pour iOS. Pour Icon, sélectionnez ios-icon-72-72.png qui fait partie de l’archive source accompagnant ce didacticiel. Pour Startup splashscreen, sélectionnez le fichier ios-splash-768-1024.png, qui fait également partie de l’archive source accompagnant ce didacticiel. Appuyez sur Étape 2: Création au sommet de l'écran..

    L'étape 2 de l'outil de création est affichée. Nous allons créer ici un projet Xcode pouvant être utilisé pour créer et installer l’application sur votre iPad. Sélectionnez le type de création en tant que projet. Pour l'identifiant du paquet, entrez com.shiva3d.test. Pour le profil Provision, indiquez le profil de provisionnement de développement de Apple Provisioning Portal. Pour Identité de signature, indiquez le nom du développeur (ou de l'organisation) dans le trousseau associé au certificat dans votre ordinateur de développement Mac OS. Soit Version 1.0.0. Appuyez sur Étape 3: Construisez au sommet de l'écran.

    L'étape 3 de l'outil de création est affichée. Sélectionnez Développement comme type de construction. Fournissez un dossier de sortie pour que l'outil de création puisse créer un dossier de projet xCode. Par exemple, nous définissons le dossier de sortie comme étant / Users / cocoderkatz / Desktop / tmpiPad. Ensuite, l'outil de création créera un dossier nommé /Users/cocoderkatz/Desktop/tmpiPad/Puzzle_iPad.s3dxproj et copiera les fichiers / dossiers du projet Xcode dans ce dossier. Ne changez pas les autres options. Appuyez sur le bouton Construire.

    Une fois la construction terminée, vous verrez un message sur la console indiquant que l'outil de création a créé un dossier de projet Xcode et copié les fichiers associés dans ce dossier. Maintenant, vous pouvez utiliser Xcode pour créer et exécuter le jeu de réflexion sur un appareil iPad comme vous le feriez normalement avec d'autres projets Xcode..


    Conclusions

    Dans cet article, nous avons abordé le développement de jeux multi-plateformes pour tablettes Android et iPad à l'aide de la suite ShiVa3D. Bien que principalement destiné au développement de jeux en 3D, ShiVa3D Suite peut également être utilisé pour créer des jeux en 2D. L'exemple d'application étudié dans ce didacticiel est un jeu 2D construit à l'aide d'éléments HUD (Head Up Display) de ShiVa3D..

    • Bien que nous nous sommes concentrés sur les tablettes, la suite ShiVa3D peut également être utilisée pour développer des jeux pour des appareils avec une taille d'écran inférieure, tels que les téléphones Android, les iPod touch et l'iPhone. Pour les téléphones Android dotés d'un système d'exploitation version 2.2 ou ultérieure, le processus décrit pour l'outil de création s'appliquerait sans aucune modification. Pour l'iPod touch et l'iPhone, choisissez l'iPhone au lieu de l'iPad lorsque vous démarrez l'outil de création. Le jeu de casse-tête est plus adapté aux tablettes car les pièces du casse-tête semblent trop petites, ce qui rend difficile la lecture du jeu sur les téléphones.
    • Lors de la création du jeu pour la plate-forme Android via Authoring Tool, nous avons défini le type Authoring en tant que package APK à l'étape 2. À la place, si nous avions défini le type Authoring en tant que Project, l'outil générerait un projet Eclipse à personnaliser. Par exemple, à l'étape 1 de l'outil de création, les dimensions autorisées pour l'icône de lancement Android et les images d'écran de démarrage sont respectivement 48x48 pixels et 480x800 pixels. En créant un projet Eclipse, on pourrait remplacer ces images par des images mieux adaptées aux tablettes. Dans le projet Eclipse créé par Authoring Tool, ces fichiers images se trouvent dans res et res / drawable Dossiers.
    • Le casse-tête peut être amélioré de plusieurs manières différentes. Par exemple, au lieu d’une seule image avec 6x9 = 54 pièces, incluez des images différentes avec un nombre variable de pièces de puzzle (par exemple une image peu difficile composée de 4x5 = 20 pièces et une autre ayant une difficulté moyenne composée de 5x7 = 35 pièces). Ajouter un écran initial pour permettre à l'utilisateur de choisir quelle image (et donc le niveau de difficulté) il souhaite lire.
    • Rappelez-vous que vous pouvez télécharger gratuitement l'intégralité de la suite ShiVa3D et développer des jeux pour l'auto-apprentissage. Cependant, l'édition gratuite n'est pas sous licence à des fins commerciales et contiendra des marques d'eau..