Share
Ce tutoriel vous présentera GameSalad, un moteur de création de jeux permettant de prototyper rapidement des jeux 2D sans avoir à ouvrir Xcode ou Eclipse..
La devise de GameSalad est "La création de jeux pour tous", et cela résume bien ce qu'est GameSalad et pourquoi il existe. Le concept soulève la question suivante: pourquoi la possibilité de créer un jeu devrait-elle être limitée à ceux qui peuvent coder? Bien sûr, beaucoup sont capables de lire quelques tutoriels (dont beaucoup sont disponibles ici sur Mobiletuts +!), Combinés à quelques livres sur le développement de jeux natifs, et parviennent finalement à coder un jeu à partir de zéro. En même temps, il y a beaucoup plus de gens très créatifs qui veulent juste voir leurs idées prendre vie et avoir un peu de contrôle sur leur jeu sans faire appel à un éditeur de code. C'est là que GameSalad vient à la rescousse. Même pour un codeur comme moi, GameSalad me donne l’opportunité de ne pas avoir à penser au code, mais plutôt à me concentrer sur le jeu lui-même..
GameSalad utilise une interface glisser-déposer vous permettant de reconstituer votre jeu, puis d'attribuer des comportements à tous les éléments de votre jeu. Vous pouvez appliquer une grande partie de la personnalisation à votre jeu, avec peu de limitations, puis vous obtiendrez un jeu opérationnel beaucoup plus rapidement que de coder manuellement à la main. Bien que vous n’ayez rien à coder lors de l’utilisation de GameSalad, vous devrez comprendre un peu le fonctionnement des programmes, car le concept de bouclage et d’exécution conditionnelle est essentiel..
Cela signifie-t-il que GameSalad est la fin des jeux de codage à la main? Non pas du tout. Il y a des limites à ce que GameSalad peut réaliser. L'un des plus remarquables est la 3D, car GameSalad ne peut faire que des jeux en 2D pour le moment. Ne vous inquiétez pas cependant, ces restrictions vous obligent à être plus créatif!
Avant de commencer à développer avec GameSalad, vous devez obtenir certaines conditions préalables. Vous aurez besoin au moins des éléments suivants:
Le dernier n’est pas une nécessité absolue, mais il est toujours bon d’avoir un appareil mobile sur lequel effectuer des tests..
Comme vous pouvez le constater à partir des conditions préalables ci-dessus, GameSalad n’est disponible que sur Mac. Cependant, à compter du 17 mai 2012, ils ont annoncé que le créateur du jeu arriverait bientôt sous Windows et que vous pouvez vous inscrire à la version bêta ici. Je n'ai pas encore accédé à la version bêta, donc je ne peux pas expliquer s'il existe un processus différent pour quoi que ce soit. Je soupçonne que le processus sera identique ou similaire, mais vous aurez toujours besoin d'un accès à un Mac (et à un compte de développeur Apple) pour pouvoir être publié sur iOS app store. Heureusement, GameSalad a déclaré que vous pourrez déplacer facilement des fichiers entre Windows et OS X.
La première chose à faire est donc de vous rendre sur le site Web de GameSalad et de cliquer sur le lien Créateur situé en haut de la page. Vous verrez alors un bouton violet en haut à droite du contenu principal. Vous souhaitez cliquer dessus et télécharger le créateur. Si vous avez l'intention de tester sur un appareil, vous pouvez télécharger le lecteur correspondant (iOS ou Android)..
Pendant que vous attendez que vos téléchargements soient terminés, allez-y et ouvrez un compte dans le coin supérieur droit du site. Lors de votre inscription, il vous sera demandé si vous souhaitez passer du compte Free au compte Pro. Au moment de la rédaction, un compte Pro coûte $299. La version Pro vous offre de nombreuses fonctionnalités supplémentaires qui ne figurent pas dans le compte gratuit..
Avec le compte gratuit, vous pouvez créer des jeux avec le créateur, les tester sur votre appareil avec le visualiseur, les publier sur le Web, sur le Mac App Store et sur iOS App Store (en supposant que vous disposiez des certificats Apple correspondants), ainsi que d'un écran de démarrage personnalisé. et obtenez un support technique de base. Le compromis est que la version gratuite affichera des annonces.
Pour le compte Pro, vous bénéficiez de tous les avantages ci-dessus (moins l'annonce) et de la possibilité de publier sur l'Android Market, d'intégration Twitter, d'intégration Game Center, d'options de monétisation supplémentaires, d'achats intégrés, de liens externes, d'iAd et d'un support technique premium. . Cela vaut bien le prix, mais pour le moment, un compte gratuit suffira.
Lorsque vous démarrez le créateur pour la première fois, vous pourrez vous connecter à votre compte et consulter certains des modèles disponibles. Cela vous aidera à voir ce que GameSalad est capable de faire et comment effectuer certaines tâches..
Vous serez sur le nouvel onglet, où vous pouvez créer un nouveau projet (à partir d'un modèle si nécessaire). Les autres onglets sont:
Accueil: une vue Web de base pour de nombreux liens GameSalad.
News: vous montre les dernières mises à jour du blog et les nouveautés de la communauté GameSalad.
Début: didacticiels, wiki, blog et guide de démarrage.
Profil: affiche votre profil GameSalad, vos notifications, vos messages, vos abonnés et autres goûts..
Nouveau: Ceci est l'écran sur lequel vous démarrez.
Récent: affiche tous vos projets récemment enregistrés.
Portfolio: Ceci montre toutes vos applications publiées.
Allons de l'avant et ouvrons le projet Alien Conquest et jetons un coup d'œil à ce qu'est un jeu fini (ou partiellement fini). Lorsque vous double-cliquez sur l'icône du jeu, le premier écran auquel vous accédez est l'écran de synthèse du projet. Quelques informations de base sont présentées ici, toutes assez explicites. Vous avez deux onglets dans cet écran de vue d'ensemble, qui vous amèneront à un aperçu des éléments spécifiques qui composent votre jeu. Les scènes sont vos niveaux et les acteurs sont tous les autres éléments qui font un niveau.
Cliquez sur l'onglet scènes et ouvrez la scène 1.
Sur le côté gauche, nous avons tous nos composants et commandes de la bibliothèque.
L'inspecteur vous permet d'approfondir divers attributs de la scène ou du jeu dans son ensemble. La bibliothèque contient tous les comportements que vous pouvez attribuer à la scène, au jeu ou aux acteurs qui composent le jeu (et dans la version professionnelle, vous contrôlez l’intégration du Game Center et les iAd). Vous pouvez également regarder toutes les images et les sons qui composent le jeu (et c'est là que vous les ajoutez également)..
Sur le côté droit, vous avez votre mise en page de la scène. Allez-y, cliquez sur Aperçu en haut au centre et jouez rapidement le jeu de base. Les contrôles sont à gauche, à droite, et un espace pour tirer.
Une fois que vous avez terminé, revenez à la vue d'ensemble de la scène et double-cliquez sur le vaisseau spatial dans la scène. Au début, on vous présentera un écran grisé avec un cadenas (nous y reviendrons plus tard). Pour l'instant, allez-y et cliquez pour le déverrouiller et vous verrez quelque chose comme ci-dessous:
Ici vous pouvez voir tous les attributs que l'acteur du vaisseau spatial lui a assigné.
Il rebondira quand il entrera en collision avec un acteur ayant une étiquette de murs.
Il existe un ensemble de règles qui ne se produit que lorsque la touche droite est enfoncée OU que l'accéléromètre sur l'axe des X est supérieur à 0,1. Cela déplace l'acteur par rapport à sa position actuelle.
Une règle similaire pour le déplacement à gauche.
Une règle pour lorsque le bouton de la souris est enfoncé ou que le bouton espace est enfoncé. Cela tire une balle (engendre l'acteur de la balle) dans une position par rapport à l'acteur.
Une règle de minuterie.
De ce qui précède, je pense que vous pouvez dire que même si vous ne coderez pas directement le jeu, vous mettez quand même tous les éléments du jeu par programmation..
Continuons et ajoutons quelques attributs à ce jeu..
Le joueur du vaisseau étant toujours ouvert, allez-y et cliquez sur «Créer une règle» dans le coin supérieur droit de la fenêtre. La règle de création est utilisée pour définir une action en fonction de quelque chose d'autre. Vous pouvez configurer la règle pour qu'elle réagisse lorsque "Toutes" ou "Toutes" de vos conditions définies sont remplies. Le réglage sur "Tous" définit que l'action ne peut se produire que si toutes les conditions sont remplies. Le réglage sur "N'importe lequel" laissera l'action se dérouler si l'une des conditions est remplie. Dans GameSalad, l'anglais est votre langage de programmation. Nous allons définir une règle qui fait avancer notre acteur lorsque la touche flèche haut est enfoncée.
Allez-y et créez une règle pour quand l'acteur reçoit l'événement de clé (vous le trouverez dans le menu déroulant) lorsque la touche haut du clavier est enfoncée. Faites ensuite glisser le comportement de déplacement de la bibliothèque vers la zone grise dans les conditions de la règle et définissez la direction sur 90, par rapport à l'acteur et avec le type de déplacement de l'additif. Réglez la vitesse à environ 150. Il est difficile de rédiger des instructions compréhensibles, alors regardez la vidéo ci-dessous..
Maintenant, lorsque vous visualisez le jeu, vous pouvez appuyer sur la touche Haut et avancer. Le seul problème est que nous ne pouvons pas encore revenir en arrière. Revenons en arrière et créons maintenant une autre règle.
Plutôt que de cliquer pour créer une autre règle, puis de faire glisser l’attribut move, nous pouvons utiliser un simple raccourci clavier. Maintenez la touche ALT enfoncée, puis cliquez et maintenez la règle que nous venons de créer avant de la faire glisser légèrement vers le bas. Relâchez le clic de la souris et la règle a été dupliquée. Il suffit maintenant de changer la clé de haut en bas et la direction de déplacement à 270. Appuyez à nouveau sur Aperçu et maintenant nous pouvons faire avancer notre navire à la fois. Mais lorsque nous terminons le niveau, le nouveau navire ne possède pas ces attributs. Nous pourrions aussi établir ces règles pour l'acteur, mais il existe un moyen plus rapide qui nous permet de ne pas répéter le travail déjà effectué, et qui aide également avec des règles réutilisables..
Sélectionnez les deux nouvelles règles (hold-shift et click-to-select), puis cliquez sur créer un groupe. Ces règles sont maintenant regroupées et nous pouvons nommer ce groupe comme bon nous semble.
Le regroupement de règles est pratique lorsque vous pouvez avoir beaucoup de règles à partager ou beaucoup de règles actives sur un attribut.
Maintenant, nous pouvons glisser-déposer notre groupe dans la bibliothèque sous comportements -> Personnalisé. Si nous revenons en arrière de la vue d'ensemble des acteurs et que nous revenons à notre inspecteur du jeu, vous pouvez faire défiler la liste des acteurs jusqu'à voir l'acteur du joueur 2. Cliquez sur cet acteur pour entrer sa vue d'ensemble d'attributs, puis faites simplement glisser votre comportement personnalisé. Maintenant, rejouez le jeu et vous aurez le contrôle de haut en bas pour les deux joueurs. Encore une fois, une autre vidéo pour montrer visuellement l'action:
Revenons maintenant à notre liste d’acteurs et cliquez sur joueur. En faisant défiler les attributs, vous remarquerez qu'il manque la règle d'avancer et de revenir en arrière. Pourquoi? Parce que lorsque nous avons ajouté la règle pour la première fois, nous l'avons ajoutée à l'instance de ce joueur particulier dans cette scène particulière. Ce que nous regardons ici est le prototype de cet acteur. Lorsque vous déposez un acteur dans la scène, il hérite de tous les attributs de son prototype, mais vous pouvez spécifier plus de règles pour un cas particulier. Rappelez-vous le cadenas sur l'écran opaque avant quand nous avons plongé dans les règles? Cela nous rappelait que nous éditions l'instance de l'acteur plutôt que son prototype. Si cet acteur était détruit dans cette scène et que nous générions un clone, il proviendrait du prototype et non de l'instance, il n'aurait donc pas le mouvement aller-retour..
Nous pouvons faire glisser notre comportement personnalisé ici et le déposer dans le prototype. Revenez en arrière et cliquez sur l'acteur dans la scène, puis sur "Revenir au prototype" dans la partie supérieure gauche de la fenêtre. Maintenant, l'instance est la même que le prototype.
Avant de commencer à créer un jeu, nous devons installer le visualiseur GameSalad sur notre appareil. Avec iOS, vous obtenez un projet Xcode que vous devez créer sur votre appareil iOS. Si vous ne savez pas comment faire cela, vous pouvez facilement rechercher dans la documentation de GameSalad la procédure pas à pas pour la construction d'un projet Xcode sur un périphérique. La visionneuse Android est tout simplement un APK que vous pouvez installer directement sur votre appareil..
Une fois que le lecteur est opérationnel et connecté au même réseau Wi-Fi, le créateur de GameSalad le reconnaîtra et vous donnera une option supplémentaire pour prévisualiser sur l'appareil. Le jeu auquel nous jouons ne fonctionne pas avec un appareil pour le moment, alors créons rapidement quelque chose qui fonctionne correctement..
Allez-y, fermez le jeu et cliquez sur l’icône Mon grand projet pour lancer un nouveau projet. Vous pouvez renseigner les informations du projet à tout moment, alors laissez-les pour l'instant et cliquez sur les scènes -> scène initiale.
Clique sur le + dans l'inspecteur pour ajouter un nouvel acteur, puis faites glisser cet acteur dans la scène. Double-cliquez sur le prototype de l'acteur et créez une règle pour le moment où l'acteur reçoit un événement lorsque vous appuyez sur le toucher. Nous allons ensuite glisser-déposer le comportement de l'attribut contraint et le modifier. Cliquez sur les points de suspension et le navigateur d'attributs apparaîtra. C'est ici que nous pouvons accéder à d'autres attributs que nous pourrions utiliser. Nous voulons contraindre l'acteur au toucher (ou à la souris), donc nous allons d'abord contraindre la position X de l'acteur. Définissez Actor 1 -> Position -> X sur: Périphérique -> Souris -> Position -> X. La souris et le toucher sont traités de la même façon dans GameSalad, donc cela fonctionnera correctement. Faites maintenant la même chose pour l’axe Y et prévisualisez soit dans le créateur, soit sur un appareil. Vous pourrez maintenant cliquer sur l'acteur et le faire glisser.
Retournez à l'aperçu initial de la scène, créez un autre acteur et cliquez pour accéder à l'aperçu de son prototype. Rendez cet acteur rouge (vous verrez l’attribut color dans la liste des attributs et utiliserez le sélecteur de couleur pour choisir le rouge). Ajoutez cet acteur à la scène, puis cliquez sur l'acteur 1 pour ajouter une nouvelle règle. Cette règle sera la suivante: lorsque l'acteur reçoit un événement -> se chevauche ou entre en collision -> avec un acteur de type -> acteur 2, faites glisser et déposez l'attribut Afficher le texte et modifiez le texte comme bon vous semble. Prévisualisez le jeu et faites glisser l'acteur 1 sur l'acteur 2.
Nous avons installé GameSalad, vérifié certaines notions de base et lancé un projet. Maintenant, votre créativité est la limite. Découvrez quelques-uns des autres modèles de jeux et voyez quel type de jeux vous pouvez créer..
Si vous souhaitez vous aventurer plus avant dans GameSalad, vous devriez consulter le livre de recettes GameSalad et GSHelper, qui contiennent tous deux des tutoriels sur tous les aspects de la création de jeux avec GameSalad. Si vous souhaitez voir plus de tutoriels sur GameSalad, laissez un commentaire ci-dessous.
Si vous souhaitez contrôler réellement votre code, GameSalad n’est pas fait pour vous, mais si vous ne souhaitez pas vous soucier du code et que vous souhaitez simplement faire preuve de créativité, GameSalad peut être une excellente solution.!
Accentsconagua