Comment construire une 2D Tapping jeu dans l'unité - SitePoint
Dans ce tutoriel, je vais montrer comment créer un jeu simple tapotement 2D dans l'unité. L'idée est similaire aux célèbres jeux de Bugs tarauder. vous tapez sur un insecte en mouvement, il disparaît, et un autre entre.
Je ne vais pas donner trop d'attention à la conception, parce que je voudrais montrer comment cela fonctionne en utilisant un code simple. Ce jeu peut être converti dans un jeu Android, iOS ou WebGL.
Tout d'abord, assurez-vous que vous avez la dernière version de l'unité. J'utilise la version 5.3.
Voici le dossier actif pour ce projet Tapit. ou vous pouvez consulter / télécharger les fichiers complets du projet ici.
Création de scène de jeu, toile et GUI éléments
Plus de cet auteur
Créer un nouveau projet 2D et nommez-le comme vous le souhaitez. Une fois que le nouveau projet est prêt, dans le dossier Assets créer un nouveau dossier appelé Images. Ouvrez ce dossier, faites un clic droit, sélectionnez Importer de nouveaux actifs et importer l'image background.jpg. Faites glisser cette image dans la fenêtre Scène et l'étirer en fonction de la taille de l'écran que vous utilisez. J'utilise un écran de portrait similaire aux écrans mobiles, 800 x 1280px.
Maintenant importer l'image ant_1.png de la même manière. J'escaladai largeur et la hauteur d'un facteur 2 pour le rendre plus visible et plus facile à exploiter. Cliquez sur Ant dans la vue hiérarchique et ajouter un collisionneur Cercle 2D.
Faites un clic droit sur un espace vide dans la vue hiérarchique et aller UI> Canvas.
Dans le menu Canvas, sélectionnez le mode de rendu comme l'espace écran - Caméra. Caméra de rendu devrait être votre appareil photo par défaut, caméra principale. Distance de plan doit être une valeur comprise entre la distance de l'arrière-plan et la caméra principale. La plupart du temps c'est un nombre compris entre 0 et 10. Je l'ai mis à 3.
Dans le menu Canvas Scaler (Script), définissez le mode échelle interface utilisateur à l'échelle avec la taille de l'écran et le mode de match de l'écran pour afficher.
Maintenant, cliquez droit sur la toile et choisissez Afficher la hiérarchie UI> Texte. Que ce nouvel objet de jeu appelé Score. Définir une taille de police de caractère lisible et placez-le à tout coin que vous voulez.
Créer un autre objet de jeu de texte et appeler des vies. Ce texte nous montre le nombre de nos vies restantes. Faire cet objet similaire à l'objet Score et dans un autre coin.
Tout le GUI est maintenant terminée.
A l'intérieur du dossier Assets, créez un nouveau appelé Scripts. Celui-ci contiendra toutes les fonctions nécessaires pour faire courir jeu. Dans la première partie, nous allons créer les variables, en leur donnant un nom et le type.
Donc, le seul joueur dans notre jeu sera appelé fourmi et ce sera un gameobject. En effet, il est un Sprite 2D qui se déplace et le changement de comportement en fonction du code que nous allons voir bientôt.
Dans ce cas, nous utiliserons deux variables entières appelées scoreNumber (pour enregistrer les scores du joueur) et livesNumber (pour le stockage restant la vie du joueur).
Les GameObjects scoreText et livesText affiche des informations sur les résultats et la vie reste à jouer.
Pour déplacer le lecteur sur l'espace 2D, ses coordonnées doivent changer, en fonction de quel axe il se déplace le long. Étant donné que l'espace 2D est un peu petite, nous allons utiliser un petit nombre le long de l'axe.
Sa vitesse sera déterminée par une variable appelée walkingSpeed. Cette variable sera incrémenté par un petit nombre, comme 0,01. Donc, ce type sera double.
Fonction de démarrage ()
Tous ceux qui ont une certaine connaissance de UnityScript sait qu'il a deux fonctions importantes: fonction de démarrage () et mise à jour de la fonction (). La première est appelée une seule fois pendant tout le jeu de scène, et le second est appelé sur chaque cadre de jeu (si MonoBehaviour est activé). Voici ce que la fonction Start () contient:
Dans le premier bloc de code, les variables sont maintenant initialisés. Scripting l'unité a une très bonne méthode pour le référencement des GameObjects. il vous suffit d'écrire GameObject.Find ( "[Name_of_gameobject]") ;.
Le walkingSpeed initial sera 0.0. livesNumber sera 3. et scoreNumber sera normalement 0.
Le deuxième bloc définit le texte aux éléments de l'interface utilisateur que nous initialisés avant.
Dans le troisième bloc nous accéder aux coordonnées x et y de l'objet ant. generateX () et generateY () sont deux fonctions qui renvoient des nombres aléatoires.
generateX () et generateY () Fonctions
Leur code est le suivant:
Ces deux fonctions ont un code similaire, sauf ce qui est contenu dans la gamme (). Dans chaque cas, nous mettons la limite à gauche et à droite.
En fonction de votre taille de l'écran, choisissez la limite gauche et à droite que les positions extrêmes horizontales de la fourmi afin d'être à l'intérieur de l'écran.
La valeur retourne dépend des types de paramètres que vous mettez à l'intérieur des crochets. Dans ce cas, nous mettons à double s il retourne une valeur double. En même temps, ces valeurs représentent le terrain de jeu 2D visible de notre jeu.
Mise à jour de la fonction ()
Cette fonction fait le travail le plus important pendant la course de jeu.
Si la fourmi va au fond alors que le nombre de vies est 0. cet objet est détruit et la fonction GameOver () est appelée. Cette fonction charge la scène GameOver.
Et si la fourmi est pas au bas de l'écran, il descend le long de l'axe Y avec une vitesse de walkingSpeed / cadre.
Fonction OnMouseDown ()
Cette fonction est une fonction interne du moteur. Il est appelé à chaque fois l'objet de jeu parent est cliqué avec le bouton de la souris ou tapé sur un appareil tactile:
L'ensemble du code AntScript.js peut être vu sur GitHub.
Faites glisser ce script et déposer sur l'objet du jeu Ant montré dans la vue Hiérarchie.
A l'intérieur du dossier Scripts créer un nouveau script appelé functions.js. Le code est le suivant:
Maintenant, la scène du jeu est presque terminé. Enregistrer cette scène en cliquant sur Fichier *> Enregistrer la scène et appelez-jeu.
Game Over Scène
Allez dans Fichier> Nouvelle Scène. Créer une nouvelle toile de la même façon que nous avons fait dans la dernière scène. Créer un nouveau panneau à l'intérieur et lui donner la couleur que vous voulez.
A l'intérieur du panneau, placez un nouvel élément de texte qui montre que jeu est terminé.
Créer un nouveau bouton et appelez-le redémarrer. Placez-le au-dessous du jeu sur le texte et choisissez l'image source à l'reload.png du dossier actif.
Cliquez sur Ajouter des composants et choisissez Scripts> Fonctions. Assurez-vous d'appeler Functions.loadGame sur cliquer sur ce bouton.
Vous pouvez également ajouter un autre bouton pour charger la scène du menu.
Sous ce bouton, créez un nouveau bouton et appeler Quitter. Appelez Functions.quit lorsque cela est cliqué.
Nous avons fini avec cette scène, donc enregistrer et mis son nom GameOver.
Scène Menu
Enfin, nous devons créer une nouvelle scène et l'appeler Menu. Ce sera la première scène, l'utilisateur verra une fois que l'application est chargée.
Ajouter une nouvelle toile de la même façon que ci-dessus et ajoutez deux boutons à l'intérieur. Le premier devrait être appelé nouveau jeu et le second Quit.
Appelez les fonctions du script functions.js sur chaque bouton ci-dessous.
Le bouton Nouveau jeu:
Le bouton Quitter:
Conclusion
Ce tutoriel a montré des éléments qui peuvent être utilisés pour toute une gamme d'autres jeux. Comme je l'ai dit au début, l'accent n'a pas été sur la conception, mais vous pouvez facilement remplacer les actifs avec d'autres de votre propre conception. Vous pouvez également obtenir aussi créatifs que vous aimez les scènes de menu.
Encore une fois, vous pouvez télécharger la version intégrale codebase sur GitHub.