Travailler avec les outils 2D de Unity

Dans ce tutoriel, je vais vous montrer comment tirer parti des nouveaux outils 2D inclus dans Unity pour créer un jeu 2D..

1. Aperçu de l'application

Dans ce didacticiel, vous apprendrez à créer un projet Unity 2D et à créer un jeu mobile en utilisant C # et Unity..

L'objectif du jeu est de tirer un rayon de téléporteur sur les vaches avant qu'elles puissent atteindre la sécurité de la grange.

Dans ce projet, vous apprendrez les aspects suivants du développement d’Unity:

  • mettre en place un projet 2D dans Unity
  • se familiariser avec l'interface Unity
  • créer un prefab
  • attacher des scripts à des objets de jeu
  • travailler avec des collisions de physique
  • en utilisant des minuteries

2. Créer un nouveau projet Unity

Ouvrez Unity et sélectionnez Nouveau projet du Fichier menu pour ouvrir la boîte de dialogue nouveau projet. Sélectionnez un répertoire pour votre projet et définissezConfigurer les valeurs par défaut pour en 2D.


3. Paramètres de construction

Dans l'étape suivante, l'interface de Unity vous est présentée. Configurez le projet pour le développement mobile en choisissant Paramètres de construction du Fichier menu et sélection de la plateforme de votre choix.

Unity peut créer pour iOS, Android, BlackBerry et Windows Phone 8, ce qui est excellent si vous envisagez de créer un jeu mobile pour plusieurs plates-formes..


4. Appareils

Comme nous sommes sur le point de créer un jeu en 2D, la première chose à faire après la sélection de la plate-forme ciblée est de choisir la taille de l'illustration que nous utiliserons dans le jeu..

iOS:

  • iPad sans rétine: 1024px x 768px
  • iPad avec rétine: 2048px x 1536px
  • 3.5 "iPhone / iPod Touch sans rétine: 320px x 480px
  • 3.5 "iPhone / iPod avec Retina: 960px x 640px
  • 4 "iPhone / iPod Touch: 1136px x 640px

Android étant une plate-forme ouverte, il existe de nombreux appareils, résolutions d'écran et densités de pixels. Quelques-uns des plus courants sont énumérés ci-dessous.

  • Asus Nexus 7 Tablet: 800px x 1280px, 216 ppi
  • Motorola Droid X: 854 pixels x 480 pixels, 228 pixels
  • Samsung Galaxy SIII: 720px x 1280px, 306 ppi

Et pour Widows Phone et BlackBerry:

  • Blackberry z10: 720px x 1280px, 355 ppi
  • Nokia lumia 520: 400px x 800px, 233 ppi
  • Nokia Lumia 1520: 1080px x 1920px, 367 ppp

Même si nous allons nous concentrer sur la plate-forme iOS dans ce tutoriel, le code peut être utilisé pour cibler l'une des autres plates-formes..


5. Exporter des graphiques

Selon le périphérique que vous ciblez, vous devrez peut-être convertir l'illustration à la taille et à la densité de pixels recommandées. Vous pouvez le faire dans votre éditeur d'image préféré. J'ai utilisé le Ajuster la taille… fonctionner sous la Outils menu sous OS X Aperçu application.


6. Interface de l'unité

Assurez-vous de cliquer sur le bouton 2D dans le Scène panneau. Vous pouvez également modifier la résolution utilisée pour afficher la scène dans le Jeu panneau.


7. Interface de jeu

L'interface utilisateur de notre jeu sera simple. Vous pouvez trouver les illustrations de ce tutoriel dans les fichiers sources de ce tutoriel..


8. Langue

Vous pouvez utiliser l’une des trois langues dans Unity., C #, UnityScript, un langage similaire à JavaScript en termes de syntaxe, et Huer. Chaque langue a ses avantages et ses inconvénients, mais il vous appartient de choisir celle que vous préférez. Ma préférence va à la syntaxe C #, donc c'est le langage que je vais utiliser dans ce tutoriel.

Si vous décidez d'utiliser une autre langue, veillez à consulter le document Script Reference de Unity pour obtenir des exemples..


9. graphiques 2D

Unity s'est bâti un nom pour être une excellente plate-forme pour la création de jeux 3D pour diverses plates-formes, telles que Microsoft Xbox 360, Sony PS3, Nintendo Wii, le Web et diverses plates-formes mobiles..

Bien qu’il ait toujours été possible d’utiliser Unity pour le développement de jeux en 2D, ce n’est que lors de la sortie de Unity 4.3 qu’il a pris en charge la 2D native. Nous allons apprendre à travailler avec des images en tant qu'images-objets au lieu de textures dans les étapes suivantes..


10. effets sonores

Je vais utiliser un certain nombre de sons pour améliorer l'expérience de jeu. Les effets sonores utilisés dans ce tutoriel sont disponibles à l'adresse suivante: Freesound.org.


11. Actifs d'importation

Avant de commencer à coder, nous devons ajouter nos ressources au projet Unity. Il y a plusieurs façons de le faire:

  • sélectionner Importer un nouvel actif du Les atouts menu
  • ajouter les éléments dans le dossier des actifs de votre projet
  • faites glisser les éléments dans la fenêtre du projet

Une fois cette étape terminée, vous devriez voir les actifs dans le projet. Les atouts dossier dans le Projet panneau.

12. Créer une scène

Nous sommes prêts à créer la scène de notre jeu en faisant glisser des objets vers le Hiérarchie ou Scène panneau.


13. Contexte

Commencez par faire glisser l’arrière-plan dans la Hiérarchie panneau. Il devrait alors apparaître dans le Scène panneau.

Parce que le Scène panneau est configuré pour afficher une vue 2D, vous remarquerez la sélection de la Caméra principale dans le Hiérarchie montre un aperçu de ce que la caméra va afficher. Vous pouvez également voir cela dans la vue du jeu. Pour rendre toute la scène visible, changez le Taille valeur de la Caméra principale à 1,6 dans le Inspecteur panneau.


14. Navire

Le vaisseau est également un élément statique avec lequel le joueur ne pourra pas interagir. Placez-le au centre de la scène.


15. Grange

Sélectionnez la grange parmi les Les atouts panneau et faites-le glisser vers la scène. Positionnez-le comme illustré dans la capture d'écran ci-dessous.


16. collisionneur d'étable

Pour s’assurer que le poulailler est averti quand une vache le frappe, il faut y ajouter un composant, un Box Collider 2D pour être précis.

Sélectionnez la grange dans la scène, ouvrez le Inspecteur panneau, et cliquez Ajouter un composant. Dans la liste des composants, sélectionnez Box Collider 2D du Physique 2D section. Assurez-vous de vérifier le Est déclencheur boîte.

Nous voulons que la vache réagisse lorsqu'elle frappe la porte de la grange, nous devons donc réduire un peu le collisionneur. Ouvrez le Inspecteur et changer le Taille et Centre valeurs du collisionneur pour rapprocher la boîte de la porte de la grange.


17. Script de collision de grange

Il est temps d'écrire du code. Nous devons ajouter un script pour que l'application puisse réagir à la collision lorsqu'une vache entre dans l'étable..

Sélectionnez la grange et cliquez sur le bouton Ajouter un composant bouton dans le Inspecteur panneau. Sélectionner Nouveau script et nommez-le OnCollision. N'oubliez pas de changer le langage en C #.

Ouvrez le fichier nouvellement créé et ajoutez l'extrait de code suivant..

utiliser UnityEngine; using System.Collections; public class OnCollision: MonoBehaviour void OnTriggerEnter2D (Collider2D other) if (other.gameObject.name == "vache (Clone)") / * Lit le son de vache de sauvegarde * / audio.Play (); / * Détruit la vache * / Destroy (other.gameObject); 

Le fragment recherche une collision entre l’objet auquel le script est lié, la grange et un objet nommé vache (clone), qui sera une instance de la vache Préfabriqué que nous créerons plus tard. En cas de collision, un son est émis et l'objet vache est détruit..


18. Barn Sound

Pour jouer un son lorsqu'une vache frappe la grange, nous devons d'abord attacher le son à la grange. Sélectionnez-le parmi Hiérarchie ou Scène voir, cliquez sur le Ajouter un composant bouton dans le Inspecteur panneau, et sélectionnez Source audio du l'audio section.

Décocher Jouez sur Awake et cliquez sur le petit point à droite, sous l'icône d'engrenage, pour sélectionner le son de l'étable.

Vous pouvez augmenter la taille des icônes dans l'interface utilisateur de Unity (gizmos) en cliquant sur Gizmos dans le Scène panneau et réglage de la position du curseur.


19. Ray

Faites glisser le graphique de rayon de la Les atouts panneau à la scène et ajoutez-y un collisionneur. Cela est nécessaire pour détecter une collision avec la vache malchanceuse. Vérifier laEst déclencheur option dans le Inspecteur panneau.

20. Ray Script

Créez un nouveau script en répétant les étapes que j'ai décrites il y a quelques instants. Nommez le script Balleet remplacez son contenu par l'extrait de code suivant:

utiliser UnityEngine; using System.Collections; public class Bullet: MonoBehaviour public AudioClip cowSound; // Utiliser ceci pour l'initialisation void Start () renderer.enabled = false; / * Rend l'objet invisible * / // La mise à jour est appelée une fois par image. Void Update () / * Obtenir l'entrée principale * / if (Input.GetButton ("Fire1")) renderer.enabled = true; / * Rend l'objet visible * / / * Lit le son du rayon * / audio.Play ();  if (renderer.enabled == true) transform.position + = Vector3.down * (Time.deltaTime * 2);  / * Vérifier les limites * / if (this.transform.position.y < -1.5)  transform.position = new Vector2(0.08658695f, 0.1924166f); /* Return bullet to original position */ renderer.enabled = false;   void OnTriggerEnter2D(Collider2D other)  if (other.gameObject.name == "cow(Clone)")  AudioSource.PlayClipAtPoint(cowSound, transform.position); /* Destroy the cow */ Destroy(other.gameObject); transform.position = new Vector2(0.08658695f, 0.1924166f); /* Return bullet to original position */ renderer.enabled = false;   

C'est beaucoup de code, mais ce n'est pas compliqué. Voyons ce qui se passe. Tout d'abord, nous créons un Clip audio instance nommée CowSound, que nous utiliserons pour stocker un fichier audio. Ceci est juste une autre technique pour jouer un son si vous ne voulez pas ajouter deux composants audio à l'objet. Nous déclarons la variable publique afin de pouvoir y accéder à partir du Inspecteur. Cliquez sur le petit point à droite de CowSound et sélectionnez le fichier audio.

Nous rendons ensuite le rayon invisible en désactivant son rendu. Nous utilisons le même objet pour économiser des ressources, ce qui représente une optimisation importante pour les appareils moins puissants..

Nous détectons des contacts sur l’écran qui rendent le rayon visible et reproduisons son rayon (voir ci-dessous). Si l'objet est visible, cela signifie qu'il devrait descendre pour frapper une vache.

Il y a aussi du code pour détecter si le rayon est en dehors des limites de la scène. Si tel est le cas, nous le repositionnons, prêt à tirer à nouveau (vérifiez l'état du rayon). X et y valeurs dans le Inspecteur).

La dernière partie vérifie si le rayon frappe une vache. Si c'est le cas, il émet le son de la vache et le détruit. Le rayon est ensuite rendu invisible et repositionné à sa position initiale, prêt à être réactivé.


21. Ray Audio Source

Pour ajouter le son du rayon, sélectionnez-le dans le champ Hiérarchie ou Scène voir et cliquer Ajouter un composant dans le Inspecteur panneau. Sélectionner Source audio du l'audio section. Décocher Jouez sur Awake et cliquez sur le petit point à droite pour sélectionner le fichier son.


22. Ajouter une vache

Faites glisser le graphique pour la vache de la Les atouts panneau et placez-le dans la scène comme indiqué ci-dessous.


23. Corps rigide 2D

Pour détecter une collision, au moins un des objets en collision doit avoir un RigidBody2D composant qui lui est associé. Comme la vache peut entrer en collision avec l'étable et le rayon, il est préférable d'ajouter le composant à la vache..


24. collisionneur de vache

Nous devons également ajouter un collisionneur à la vache afin de pouvoir détecter les collisions avec l'étable et le rayon. Assurez-vous de vérifier le Est déclencheur case à cocher dans le Inspecteur.


25. Déplacer le script de vache

Ajoutez un composant de script à la vache et remplacez son contenu par ce qui suit:

utiliser UnityEngine; using System.Collections; classe publique MoveCow: MonoBehaviour public Vector3 moveSpeed; public float spawnTime = 2f; flottant public spawnDelay = 2f; // Utiliser ceci pour l'initialisation void Start () moveSpeed ​​= Vector3.left * Time.deltaTime; InvokeRepeating ("ChangeSpeed", spawnDelay, spawnTime);  void ChangeSpeed ​​() moveSpeed ​​= new Vector3 (Random.Range (-1, -2), 0, 0) * 0.05f;  // La mise à jour est appelée une fois par image. Void Update () transform.position + = moveSpeed; 

le MoveCow La classe anime la vache sur l’écran à l’aide d’une variable nommée vitesse de déplacement. le InvokeRepeating Cette méthode modifie la vitesse de la vache pour la faire sprinter à partir du moment où elle atteint le centre de la scène. Cela rend le jeu plus difficile.


26. Créer le préfabriqué de vache

Avec les composants nécessaires ajoutés à la vache, il est temps de la convertir en une Préfabriqué. Qu'est-ce qu'un préfabriqué? Consultons le manuel de l'unité:

"Un préfabriqué est un type d'actif, un GameObject réutilisable stocké dans la vue Projet. Les préfabriqués peuvent être insérés dans un nombre quelconque de scènes, plusieurs fois par scène. Lorsque vous ajoutez un préfabriqué à une scène, vous en créez une instance. Tous les préfabriqués les instances sont liées au préfabriqué d’origine et en sont essentiellement des clones. Quel que soit le nombre d’instances présentes dans votre projet, lorsque vous apportez des modifications au préfab, vous verrez les modifications appliquées à toutes les instances.

Si vous venez de Flash et ActionScript, cela devrait vous paraître familier. Pour convertir la vache en préfabriqué, faites-la glisser du Hiérarchie panneau au Les atouts panneau. En conséquence, le nom dans le Hiérarchie deviendra bleu.

La conversion de la vache en un préfabriqué nous permet de la réutiliser, ce qui est pratique car elle contient déjà les composants nécessaires..


27. Script de géniteur

Le script Spawner est responsable de l’apparition des vaches. Ouvrez MonoDevelop, ou votre éditeur C # préféré, et créez un nouveau script:

utiliser UnityEngine; using System.Collections; public class Spawner: MonoBehaviour public float spawnTime = 2f; flottant public spawnDelay = 2f; vache GameObject publique; // Utiliser ceci pour l'initialisation void Start () InvokeRepeating ("Spawn", spawnDelay, spawnTime);  void Spawn () / * Instancier une vache * / GameObject clone = Instancier (vache, transform.position, transform.rotation) sous forme de GameObject; 

Nous appelons le InvokeRepeating méthode pour engendrer des vaches en utilisant les valeurs définies par spawnTime et spawnDelay. le GameObject vache est défini sur public et est créé à l'aide du Inspecteur. Cliquez sur le petit point à droite et sélectionnez le préfabriqué de vache.


28. Objet de jeu Spawner

Pour instancier le préfabriqué vache, nous allons utiliser le graphique de la vache que nous avons ajouté à la scène il y a quelques minutes. Sélectionnez-le et supprimez ses composants. Ajoutez ensuite le script Spawner.


29. essais

Il est temps de tester le jeu. presse Commande + P jouer au jeu dans Unity. Si tout fonctionne comme prévu, vous êtes prêt pour les dernières étapes.


30. Paramètres du joueur

Lorsque vous êtes satisfait de votre jeu, il est temps de sélectionner Paramètres de construction du Fichier menu et cliquez sur le Paramètres du joueur bouton. Cela amène le Paramètres du joueur dans le Inspecteur panneau où vous pouvez ajuster les paramètres pour votre application.


31. Icône d'application

En utilisant les graphiques que vous avez créés précédemment, vous pouvez maintenant créer une belle icône pour votre jeu. Unity vous indique les tailles requises, qui dépendent de la plate-forme pour laquelle vous construisez..


32. Image Splash

L'image de démarrage ou de lancement est affichée au lancement de l'application.

33. Construire

Une fois votre projet correctement configuré, il est temps de revenir sur la Paramètres de construction et cliquez sur le Construire Bouton. C'est tout ce dont vous avez besoin pour créer votre jeu à des fins de test et / ou de distribution..

34. Xcode

Si vous construisez pour iOS, vous avez besoin de Xcode pour générer le binaire de l'application finale. Ouvrez le projet Xcode et choisissez Construire du Produit menu.

Conclusion

Dans ce didacticiel, nous avons découvert les nouvelles fonctionnalités 2D d'Unity, la détection des collisions et d'autres aspects du développement de jeux avec Unity..

Expérimentez avec le résultat et personnalisez-le pour personnaliser le jeu. J'espère que vous avez aimé ce tutoriel et que vous l'avez trouvé utile.