Share
Dans cette série de didacticiels, nous allons nous concentrer sur le développement de jeux multi-plateformes pour iPad et tablettes Android à l’aide du cadre de développement de jeux ShiVa3D Suite. Bien que principalement destiné aux jeux 3D, ShiVa3D Suite peut également être utilisé pour développer des jeux en 2D. "Puzzle", le jeu décrit dans cette série, est un exemple de jeu 2D relativement simple pouvant être créé rapidement avec ShiVa3D..
L'objectif principal du puzzle est très simple. Lorsque le jeu commence, des morceaux d'une image sont positionnés de manière aléatoire sur l'écran. Pour résoudre le casse-tête, l'utilisateur doit placer ces pièces aux emplacements appropriés. Une minuterie indique le temps écoulé depuis le début de la partie. Le chronomètre peut être suspendu si l'utilisateur a besoin d'une pause dans la partie. En appuyant sur un bouton "Résoudre", le jeu peut être automatiquement résolu, une fonctionnalité très utile si l'utilisateur a besoin d'aide pour résoudre le jeu..
Cette série de tutoriels comprend trois parties. La première partie commence par la section suivante, intitulée "Description du jeu", dans laquelle nous donnons plus de détails sur le puzzle, décrivant son comportement à l'aide de captures d'écran. Dans la section suivante, "Images d'écran dans les tablettes Android et iPad 2", nous fournissons des images d'écran du produit final dans une tablette Android avec Android OS 4.0.3 (Ice Cream Sandwich) et un iPad 2 avec iOS 4.3. Viennent ensuite "Processus de développement via la suite Shiva3D", dans lesquels nous présentons les principaux composants de la suite ShiVa3D, l'éditeur ShiVa et l'outil de création ShiVa, puis nous donnons un aperçu du processus de développement du puzzle de manière indépendante de la plateforme. avec ces composants.
Les sections suivantes concernent la mise en œuvre. La partie 2 commence par "Game Geometry", qui se concentre sur les aspects géométriques sous-jacents du jeu et jette les bases du développement de code. Dans "Développer le puzzle dans l'éditeur ShiVa", nous présentons les principales constructions de la base de code qui implémentent les fonctionnalités du jeu, y compris les variables, les fonctions et les gestionnaires d'événements. Cette section fournit également des instructions pas à pas sur la manière de développer le jeu avec l'éditeur ShiVa. Nous décrivons ici la création du projet et du jeu, ainsi que l’importation de textures, du modèle AI et de la banque de sons à partir de l’archive de téléchargement accompagnant le didacticiel. Ceci conclut la partie 2 de la série.
La troisième partie de la série poursuit la discussion dans "Développer le puzzle dans l'éditeur de ShiVa". Nous décrivons l’importation des composants HUD et apportons les derniers ajustements au jeu développés jusqu’à présent. Ensuite, nous concluons "Développement du casse-tête dans l'éditeur ShiVa" via un test unitaire. Dans la section "Outil de création", nous expliquons comment utiliser l'outil de création ShiVa pour convertir le Puzzle en deux applications différentes, une pour Android OS et une pour iPad. Nous concluons l’article avec des "Conclusions", où plusieurs remarques finales sont données.
Certains des documents de référence de cet article ont été empruntés au site Web officiel du produit ShiVa3D..
Les fichiers audio utilisés dans l'application proviennent du jeu d'échantillons installé avec l'éditeur ShiVa (dossier Stonetrip \ ShiVa Editor PLE \ Data \ Samples \ Resources \ Sounds)..
La base de code permettant de faire pivoter la fenêtre d'affichage, de sorte que la barre d'outils reste au sommet lorsque l'utilisateur fait pivoter le périphérique, est basée sur un autre didacticiel ShiVa 3D.
(http://www.stonetrip.com/developer/1704-rotate-the-viewport-according-to-the-device-rotation).
La base de code pour la gestion multipoint prend des idées d'un autre tutoriel ShiVa 3D (http://www.stonetrip.com/developer/1046-multitouch-management).
L’auteur a grandement bénéficié d’un livre sur ShiVa3D intitulé Introduction à la programmation 3D avec ShiVa.
Enfin, les vidéos de ce tutoriel ont été produites à l’aide des outils Open Source FreeStudio Video to Flash Converter et CamStudio..
Dans cette section, nous allons décrire le jeu de puzzle. L'application commence par l'écran de démarrage suivant.
Une fois l'écran de démarrage affiché, le jeu passe à l'état "Initialisé". Cet état commence par les pièces du puzzle provenant du coin inférieur gauche de l’affichage et qui se déplacent vers des emplacements aléatoires de la zone de jeu. Lorsqu'elles se déplacent, la moitié des pièces tourne dans le sens des aiguilles d'une montre et l'autre moitié dans le sens contraire des aiguilles d'une montre (un instantané est fourni ci-dessous).
La courte vidéo ci-dessous montre le jeu en cours d'initialisation.
Une fois que toutes les pièces ont pris leurs positions aléatoires, les boutons Démarrer et Résoudre deviennent activés dans la barre d’outils en haut, comme indiqué dans la figure ci-dessous. Il y a un total de 54 pièces de puzzle placées sur 9 rangées et 6 colonnes. Comme nous le verrons plus tard, le code de l'application peut être facilement étendu pour prendre en charge un nombre quelconque de lignes et de colonnes. Le but du jeu est de positionner les pièces pour construire l'image du puzzle correctement dans les délais les plus brefs. Si une pièce est placée au bon endroit, ses bordures sont surlignées en vert. A titre d'exemple, voir le troisième morceau de la dernière rangée ci-dessous.
Le jeu commence lorsque vous appuyez sur le bouton Démarrer. Cela amène le jeu à l'état "commencé".
Dans cet état, le bouton Démarrer devient un bouton Pause et les boutons Nouveau et Résoudre sont désactivés. La minuterie commence à compter. Lorsque l'utilisateur déplace une pièce vers une autre position, disons la pièce A, la pièce remplacée se déplace automatiquement vers la position d'origine de la pièce A. Ceci est illustré dans la figure ci-dessous. L'utilisateur a déplacé la pièce dans le coin supérieur gauche vers le coin inférieur droit (mouvement indiqué par une ligne verte). La pièce de puzzle qu’elle a remplacée monte dans le coin supérieur gauche pour remplir l’emplacement vide (pièce indiquée par la flèche rouge). Le mouvement automatique de la pièce prend environ 3 secondes. Bien que cela n'apparaisse pas dans les instantanés ci-dessus, la pièce à déplacement automatique tourne dans le sens des aiguilles d'une montre ou dans le sens contraire des aiguilles d'une montre pendant son déplacement. La décision dans le sens des aiguilles d'une montre ou dans le sens inverse dépend de la colonne et de l'index de la pièce..
La vidéo ci-dessous montre que l'utilisateur appuie sur le bouton Démarrer puis déplace une pièce d'un emplacement à un autre et remplace une autre pièce..
Comme mentionné précédemment, il y a 54 pièces de puzzle. Celles-ci sont placées dans des positions fixes composées de 9 rangées et 6 colonnes, comme indiqué dans la figure ci-dessous. Les centres des pièces du puzzle coïncident avec les positions fixes.
Pour déplacer une pièce, l'utilisateur appuie sur la pièce avec le doigt et la déplace à volonté. Lorsque la position cible est atteinte, l'utilisateur relâche son doigt. Si la distance entre la position fixe la plus proche et le centre de la pièce du puzzle est inférieure à une tolérance prédéfinie (paramètre du code de l'application), la pièce s'encliquetera automatiquement dans la position fixe. Sinon, la pièce revient automatiquement à sa position initiale.
Lorsque la pièce déplacée par l'utilisateur s'emboîte dans une position, la pièce remplacée se déplace dans la position d'origine de la pièce déplacée par l'utilisateur. Si la pièce déplacée par l'utilisateur ne s'encliquette pas dans une nouvelle position, elle revient à sa position d'origine. Dans les deux cas, le mouvement est effectué automatiquement par l'application. Quand cette motion commence, le jeu entre dans un nouvel état appelé "Remplacé"..
Il s'agit d'un état dans lequel une pièce de puzzle se déplace automatiquement, en tournant dans le sens des aiguilles d'une montre ou dans le sens contraire pendant le déplacement, pour finalement atteindre un emplacement cible. Le mouvement de la pièce du puzzle est contrôlé par l'application. Lorsque le mouvement est terminé, c'est-à-dire lorsque la pièce atteint sa position, le jeu revient à l'état "Commencé".
Si une pièce de puzzle est placée dans la bonne position, ses contours seront surlignés en vert. Dans l'exemple d'écran ci-dessous, les pièces avec des bordures vertes sont dans les bonnes positions. Ceux qui n'ont pas de frontières vertes ne sont pas dans les bonnes positions.
Si un utilisateur appuie sur le bouton Pause, le jeu passe à l'état "Pause".
En état de pause, la minuterie est suspendue. Le bouton Pause devient le bouton Démarrer et les boutons Nouveau et Résoudre sont activés, comme indiqué ci-dessous..
En état de pause, les pièces du puzzle ne peuvent pas être déplacées.
Dans l'état Pause, si l'utilisateur appuie sur le bouton Nouveau, le jeu sera terminé et l'application redémarrera. Le jeu passera à l'état "Initialized" (voir ci-dessus). Les pièces du puzzle proviendront du coin inférieur gauche de l'écran en se déplaçant vers des emplacements aléatoires de la zone de jeu..
Également dans l'état Pause, si l'utilisateur appuie sur le bouton Démarrer, le jeu reviendra à l'état Démarrer..
Dans l'état Pause, si l'utilisateur appuie sur le bouton Résoudre, le jeu sera terminé en le résolvant automatiquement. Résoudre le jeu de cette façon est utile si l’utilisateur a renoncé à le résoudre lui-même. Les pièces se déplaceront de leurs emplacements actuels aux emplacements appropriés pour construire l'image du puzzle (voir la figure ci-dessous). Le jeu passera à l'état "Résolu".
La vidéo ci-dessous montre le jeu lorsque l'utilisateur appuie sur le bouton de résolution.
À l'état résolu, l'image du casse-tête a été construite. Dans l'image la plus à droite de la figure 9 ci-dessus, observez que les pièces du puzzle ont toutes une bordure verte, car elles sont toutes dans les positions correctes..
À l'état résolu, seul le bouton Nouveau est activé. L'utilisateur peut appuyer sur le bouton Nouveau pour redémarrer le jeu. Cela amènera le jeu à l'état initialisé. Comme décrit précédemment, les pièces du puzzle proviendront du coin inférieur gauche de l'écran et commenceront à se déplacer vers des emplacements aléatoires..
Le diagramme suivant montre les transitions d’états résumant la discussion ci-dessus..
Les images suivantes montrent le jeu de puzzle sur une tablette Android OS 4.0.3 au cours de l'état Initialized. Un nouveau jeu commence, à gauche, et juste après que toutes les pièces du puzzle aient atteint leur emplacement aléatoire, à droite.
Les images suivantes montrent le jeu de puzzle sur une tablette Android OS 4.0.3, juste après que l'utilisateur a appuyé sur le bouton de résolution, à gauche, et après la résolution du jeu, à droite.
L'image suivante montre l'icône de lancement du jeu de puzzle sur une tablette Android OS 4.0.3.
Les images suivantes montrent le jeu de puzzle sur iPad 2 pendant l'état Initialized. Un nouveau jeu commence, à gauche, puis juste après que toutes les pièces du puzzle aient atteint leur emplacement aléatoire, à droite..
Les images suivantes montrent le jeu de puzzle sur iPad 2, juste après que l'utilisateur a appuyé sur le bouton de résolution, à gauche, puis après la résolution du jeu, à droite..
L'image suivante montre l'icône de lancement du jeu de puzzle sur iPad 2.
Dans cette section, nous allons discuter de plusieurs concepts de développement de jeux avec ShiVa3D. La majeure partie de la discussion ici est empruntée à la documentation originale de ShiVa3D. Pour plus d'informations, veuillez consulter http://www.stonetrip.com/developer/doc/ et le manuel d'utilisation fourni avec l'éditeur ShiVa..
Notez que ShiVa3D est principalement un framework de développement de jeux 3D. Cependant, notre jeu ne comporte pas de fonctionnalités 3D et montre comment ShiVa3D pourrait également être utilisé pour développer des jeux en 2D..
Jeu représente un jeu, l'entité principale de l'application. Il encapsule tout le reste de l'application, comme des caméras, des scènes, etc. Un jeu est une unité de déploiement autonome..
AIModel implique «intelligence artificielle» et représente le comportement. Un AIModel peut avoir des fonctions, des gestionnaires, des états et des variables. Dans le casse-tête, nous utiliserons un seul modèle AIModel pour définir les fonctionnalités du jeu..
Scénario contient le code dans un AIModel, par exemple, le code d'une fonction ou d'un gestionnaire. Le langage de script dans ShiVa3D est Lua.
HUD «Head Up Display» signifie «affichage tête haute». Ce terme désigne divers widgets d'interface utilisateur tels que boutons, libellés, listes, curseurs, etc., permettant à l'utilisateur d'interagir avec le jeu..
Pour développer le jeu Puzzle, nous utiliserons la version gratuite de ShiVa3D Suite (http://www.stonetrip.com/download.html), qui comprend ShiVa Editor PLE (édition d'apprentissage personnel) et ShiVa Authoring Tool. Le diagramme ci-dessous donne un aperçu du processus de développement que nous avons utilisé avec ces outils..
Discutons des étapes individuelles de ce processus.
ShiVa Editor propose divers modules permettant de développer et de tester une application 2D ou 3D, généralement un jeu, à partir de zéro. Une caractéristique importante de ShiVa Editor est qu’une application développée avec cet outil peut être déployée (après avoir été créée dans ShiVa Authoring Tool) sur différents périphériques dotés de systèmes d’exploitation différents, par exemple. un PC sous Windows, un téléphone portable sous Android, un iPhone / iPod Touch, un iPad, etc. Certaines des opérations de base que vous pouvez effectuer avec ShiVa Editor sont les suivantes:.
Développer:
Tester: Vous pouvez effectuer un test initial de l'application 2D ou 3D dans l'environnement de développement avant de la déployer sur un périphérique cible. Le test est effectué via la fonctionnalité Animer ou Aperçu de l'éditeur ShiVa. Pendant les tests, vous pouvez modifier les paramètres de la taille de l'écran pour voir comment l'application sera affichée sur le périphérique cible réel. Dans le Puzzle, pour tester les événements de bouton, nous avons utilisé des clics de souris. Pour tester les événements tactiles, nous avons utilisé le glisser-déposer via la souris.
Exportation: Une fois le test terminé, exportez l'application. Cela générera un fichier avec une extension stk. L’application exportée sera utilisée par l’outil de création ShiVa, qui est présenté ci-après..
L’objectif principal de l’outil ShiVa Authoring est de convertir une application, créée via l’éditeur ShiVa, en une application spécifique à la plate-forme pouvant être déployée dans un périphérique particulier, par exemple. iPad ou tablette Android. Certaines restrictions s’appliquent au système d’exploitation de la machine exécutant l’outil ShiVa Authoring et du périphérique cible à convertir. Par exemple, l'outil de création ShiVa s'exécutant sur une machine Windows ne peut pas générer d'application iPad ou iPhone. Lors du développement du Puzzle, nous avons utilisé une machine Windows pour l'éditeur ShiVa. Pour créer l'application Android Puzzle, nous avons également utilisé une machine Windows pour exécuter l'outil de création ShiVa. D'autre part, pour créer l'application iOS Puzzle pour iPad, nous avons utilisé un ordinateur Mac OS pour exécuter l'outil de création ShiVa..
Certaines des actions de base que l’on peut effectuer avec l’outil de création ShiVa sont les suivantes:.
Sélectionnez la plateforme de création: Pour les besoins de cette série, les options de plate-forme qui nous intéressent sont iPad et Android. Notez que pour iPad, vous devez disposer de ShiVa Authoring Tool sur un ordinateur Mac OS..
Importation: Importer l'application (un fichier avec l'extension stk) qui a été exportée via l'éditeur ShiVa.
Construire: Lors de la création pour Android, nous allons configurer l'outil de création ShiVa pour générer un fichier apk Android pouvant être déployé directement sur un appareil Android compatible. Lors de la création pour iPad, nous allons configurer l'outil de création ShiVa pour générer un projet Xcode pour le développement iPad. Ensuite, on peut construire le projet dans Xcode et déployer l'exécutable sur un périphérique connecté (la construction du projet dans Xcode et le déploiement de l'exécutable résultant sur un périphérique connecté ne sont pas couverts par cette série)..
Pour chaque plate-forme, ShiVa Authoring Tool offre des options légèrement différentes pour générer son produit final. Par exemple, lors de la création pour Android, vous pouvez générer un projet Eclipse au lieu d’un exécutable Android. Comme mentionné ci-dessus, nous avons choisi de générer un exécutable Android dans cette série.
De même, pour iPad, on pourrait générer un exécutable à distribuer au lieu de générer un projet Xcode. Comme mentionné précédemment, nous avons choisi de générer un projet Xcode dans cette série. Veuillez consulter le manuel d'utilisation de ShiVa Authoring Tool pour plus de détails..
Voici une liste des configurations que nous avons utilisées lors du développement du jeu Puzzle. Pour plus d'informations sur la configuration requise et les conditions préalables, voir la documentation Shiva3D décrite dans http://www.stonetrip.com/developer/doc/editor/information/hardware et http://www.stonetrip.com/developer/doc/authoringtool/installation..
Système d'exploitation de la machine de développement: Windows 7
Dans la première partie de ce didacticiel, nous avons présenté notre jeu et en avons décrit les détails. Nous avons également résumé le processus de développement de jeux multi-plateformes via Shiva3D Suite. art 2 commencera par "Game Geometry", qui se concentre sur les aspects géométriques sous-jacents du jeu et jette les bases du développement de code. Dans "Développer le puzzle dans l'éditeur ShiVa", nous présenterons les principales constructions de la base de code qui implémentent les fonctionnalités du jeu, y compris les variables, les fonctions et les gestionnaires d'événements. Cette section fournira également des instructions pas à pas sur la façon de développer le jeu dans l'éditeur ShiVa. Nous allons décrire ici la création du projet et du jeu, ainsi que l’importation de textures, de modèles AI et de la banque de sons à partir de l’archive de téléchargement accompagnant le didacticiel..
Accentsconagua