Comment créer Tappy Plane (clone de Flappy Birds)

Introduction :

Bonjour et bienvenue dans le tutoriel pour créer votre propre jeu de style "Flappy Birds" dans hyperPad.

Notre version est légèrement différente, donc nous l'appelons Tappy Plane.

Ce tutoriel est fait pour les débutants qui souhaitent plonger plus profondément dans notre système de comportement et apprendre le codage visuel. Tout au long du tutoriel, vous apprendrez également à naviguer dans l'interface de hyperPad.

Dans ce tutoriel, nous allons créer un jeu simple dans le style de Flappy Bird. Le gameplay consistera à taper sur l'écran pour contrôler l'avion, le faisant monter et descendre tout en le naviguant à travers une série de falaises. Chaque falaise franchie rapportera un point et avec suffisamment de points, les joueurs gagneront une médaille. Les médailles augmentent en valeur plus le score est élevé, jusqu'à atteindre une médaille dorée brillante ! Et qui n'aime pas les choses brillantes !?

Si vous n'avez pas encore hyperPad, vous pouvez le télécharger depuis l'App Store : https://itunes.apple.com/app/apple-store/id886106438?mt=8

Vous pouvez en savoir plus sur hyperPad sur notre site web à http://www.hyperpad.com

Alors, sans plus tarder, commençons !

Partie 1 : Se lancer

Créer le projet :

La première chose que nous devons faire est de commencer un nouveau projet. Lors du chargement de hyperPad, vous devriez voir l'écran de projet. Ici, vous trouverez tous les projets que vous avez réalisés ainsi que ceux que vous avez téléchargés. Pour l'instant, nous souhaitons commencer un nouveau projet. Appuyez sur le bouton Nouveau Projet dans le coin supérieur droit de l'écran comme montré ci-dessous.

Une fois cela fait, vous devriez voir une fenêtre contextuelle apparaître. Ici, nous allons nommer le projet et créer une sauvegarde cloud si désiré. De plus, vous pouvez appuyer sur le bouton "Commencer avec un exemple à la place" pour importer l'un de nos projets de base. Cependant, pour l'instant, nous ne ferons pas cela. Nommez le projet Tappy Plane et appuyez sur le bouton 'Suivant'.

Dans ce nouvel écran, nous allons déterminer l'appareil pour lequel nous concevons et l'orientation. Pour ce projet, réglez l'orientation sur paysage et le support de l'appareil sur l'iPad. Ne vous inquiétez pas si vous devez modifier quelque chose plus tard. Ces paramètres peuvent être ajustés à tout moment dans le menu des Paramètres Globaux.

Enfin, nous pouvons maintenant choisir quel type de jeu nous souhaitons créer. Actuellement, hyperPad prend en charge deux types de modes, vue de dessus et vue de côté. La vue de dessus, ou vue d'oiseau, est généralement utilisée pour des jeux tels que The Legend of Zelda avant qu'il ne passe au 3D, des jeux de puzzle comme Bejeweled et des jeux de tir vus de dessus. La vue de côté est couramment utilisée pour des jeux de plateforme comme Super Mario Bros.

Les deux versions fonctionnent de manière identique avec une petite différence, la vue d'oiseau désactivera les paramètres de gravité (à la place, elle s'appuie sur la résistance de l'air pour simuler la gravité entrant dans l'écran), alors gardez cela à l'esprit en créant votre projet. Vous pouvez toujours modifier cela plus tard dans le menu des Propriétés Globales.

Pour ce tutoriel, nous allons utiliser la vue de côté donc assurez-vous que cela est sélectionné. Ensuite, nous avons les paramètres de gravité et le rapport PTM. Par défaut, la gravité sera réglée sur 0 et -25.

Ce sont les valeurs x et y, ou plus simplement les valeurs horizontales et verticales de notre monde de jeu. X représentant l'horizontal, ou gauche et droite, tandis que Y représente la verticale, ou haut et bas. Les valeurs par défaut de 0 et -25 signifient qu'il n'y aura pas de forces gravitationnelles tirant les objets à gauche et à droite, mais ils tomberont à un rythme de 25 mètres par seconde. Pour ce tutoriel, les valeurs par défaut conviennent telles quelles.

Le rapport PTM signifie Points par Mètre, ou en termes plus simples, combien de pixels (points) se trouvent dans 1 mètre hyperPad. Par défaut, cela est fixé à 32 pt/m ou 32 pixels par mètre. Il est important de savoir cela lors de la création d'assets artistiques et tous les assets artistiques doivent suivre cette échelle. Dans ce tutoriel, nous allons utiliser des assets gratuits de la bibliothèque d'assets de hyperPad donc nous n'avons pas besoin de modifier l'échelle.

Une fois cela fait, appuyez sur le bouton créer et nous allons commencer !

L'éditeur :

Maintenant que nous sommes dans le projet, vous devriez voir un écran qui ressemble à ceci :

Ceci est notre canevas et c'est ici que nous allons construire notre jeu. Au centre de l'écran, vous devriez voir un fin contour vert d'une boîte. Cela représente notre vue d'écran. Tout ce qui est placé dans cette boîte sera immédiatement visible dès le lancement du jeu tandis que tout ce qui est en dehors ne sera pas rendu. Si vous le souhaitez, prenez un moment pour taper autour et voir ce que font les choses avant de passer à l'étape suivante.

Une fois que vous êtes prêt, appuyez sur l'icône du tiroir en bas à droite pour ouvrir le Navigateur d'Assets.

La bibliothèque d'assets :

C'est ici que tous les assets pour notre jeu seront stockés. Par défaut, un nouveau projet hyperPad inclut seulement quelques assets de démarrage. Vous devez importer vos propres ou télécharger un pack depuis la boutique d'assets hyperPad. Dans ce tutoriel, nous allons nous concentrer sur l'utilisation des assets fournis par la boutique d'assets hyperPad. Sur le côté gauche, il y aura une barre avec quatre boutons. Appuyez sur le bouton Obtenir des Assets pour ouvrir la boutique Hyperpad.

Ici, vous trouverez des packs d'assets gratuits mis en place par nous chez Hyperpad pour vous aider à démarrer vos projets. Trouvez et appuyez sur le Pack d'Assets Tappy Plane.

Maintenant, appuyez simplement sur le bouton 'Obtenir' pour commencer l'importation (Remarque : si une erreur se produit, appuyez simplement à nouveau pour redémarrer l'importation). Une fois cela fait, vous obtiendrez un message indiquant que les assets ont été importés avec succès. Appuyez simplement sur Fermer dans le coin supérieur droit de l'écran pour revenir à Hyperpad.

Et c'est aussi simple que cela. Vous devriez maintenant voir un nouveau dossier dans votre Navigateur d'Assets appelé Téléchargements. En appuyant dessus, vous dévoilerez le dossier Pack Tappy Plane et à l'intérieur de celui-ci, nos assets artistiques.

Ensuite, nous allons commencer à assembler notre jeu.

Partie 2 : Gameplay

Si vous êtes familier avec Flappy Bird, alors vous serez familier avec le style de gameplay. Tapez sur l'écran pour garder l'oiseau, ou dans notre cas l'avion, dans les airs tout en essayant de ne pas percuter des obstacles venant en sens inverse. Ces obstacles apparaîtront dans des configurations aléatoires, donc chaque partie sera différente de la précédente. Des points sont attribués pour avoir réussi à éviter des obstacles et votre score maximal est enregistré.

Ajouter l'avion :

Alors maintenant que vous comprenez le gameplay de base, nous pouvons commencer. La première chose que nous devons faire est d'obtenir notre personnage joueur sur l'écran. Allez dans votre Navigateur d'Assets et ouvrez le dossier de téléchargements et naviguez jusqu'à ce que vous voyiez vos assets artistiques. Il devrait y avoir un dossier appelé Avions.

Ouvrez ce dossier et choisissez la couleur qui vous plaît le plus. Ensuite, sélectionnez simplement le premier graphique de l'avion. Cela fermera la bibliothèque d'assets et vous ramènera à l'écran principal de l'éditeur où vous devriez maintenant voir l'avion dans le dock d'objet en bas. Cette section de l'UI est connue sous le nom de Dock d'Objets. Il affichera les 5 derniers assets que vous avez utilisés. Maintenant, pour mettre notre avion dans la zone de jeu, faites simplement glisser l'avion du dock sur le canevas.

Avec notre avion maintenant dans le jeu, nous devons faire un rapide ajustement. Appuyez sur l'avion pour le sélectionner et ouvrez l'onglet des propriétés à droite. Ce que nous voulons faire est de définir l'avion comme un objet mur traversable. C'est assez simple, recherchez simplement le commutateur Traversable et appuyez dessus pour l'activer. Nous faisons cela parce que nous ne voulons pas que l'avion tombe avant que le joueur ait eu la chance de commencer le jeu. Nous l'avons également réglé sur traversable car nous ne voulons pas qu'il ait des collisions pour le moment.

Une fois cela fait, plongeons dans le fait de le rendre jouable.

Avion tombant :

Nous avons besoin d'un moyen de commencer le jeu. Pour cela, nous aurons besoin d'un bouton. Maintenant, nous pourrions utiliser un graphique simple pour indiquer où taper, mais pour notre jeu, nous voulons donner au joueur la possibilité de taper n'importe où sur l'écran. Comment y parvenir ? Nous allons faire de tout l'écran un bouton !

La première chose que nous devons faire pour accomplir cela est de créer une nouvelle couche. Mais pour ce faire, nous devons désélectionner notre avion. Pour cela, appuyez simplement n'importe où il y a de l'espace vide. Une fois désélectionné, les propriétés de l'objet se fermeront et vous devriez voir l'onglet des couches à droite. Si ce n'est pas le cas, faites simplement glisser votre doigt du côté droit de l'écran vers la gauche pour le démasquer.

Comme vous pouvez le voir, il y a actuellement trois couches par défaut. L'UI Globale, l'UI de la Scène puis Principale après une ligne de séparation. Une petite note que tout ce qui se trouve sur la couche UI Globale apparaîtra dans chaque scène de votre jeu. Toutes les autres couches sont spécifiques à leurs scènes individuelles. Pour créer une nouvelle couche, appuyez simplement sur l'icône + en bas de l'onglet des couches. Cela nous invitera à nommer la nouvelle couche. Tapez dans Bouton et appuyez sur OK.

Par défaut, la couche active changera pour celle nouvellement créée. Lors de l'utilisation des couches, seuls les objets de la couche active peuvent être sélectionnés. C'est un excellent moyen de garder les choses organisées lors de la construction de votre jeu, car vous ne déplacerez pas accidentellement des choses que vous ne souhaitez pas. Gardez toujours un œil sur la couche sur laquelle vous travaillez actuellement. Gardez également à l'esprit que les couches placées au-dessus d'une autre seront rendues au-dessus de cette couche. De cette façon, vous pouvez éviter que votre arrière-plan ne couvre la zone de jeu.

Maintenant, pour créer notre bouton, c'est très simple. Appuyez sur le bouton Objets Spéciaux (l'icône du bécher) en bas à droite du Dock d'Objets. Cela fera apparaître un menu pour créer un type d'objet. Nous voulons l'Objet Vide. En cliquant dessus, un petit carré vide apparaîtra au centre de notre projet. Cependant, nous voulons que cela occupe tout l'écran. Appuyez à l'intérieur du carré pour le sélectionner.