Techniques Unity 2D: Créez un jeu de flipper 2D

Online Coding Courses for Kids

Note de mise à jour: Ben MacKinnon a mis à jour ce didacticiel pour Unity 2019.3. Arai a écrit l’original.

Dans ce didacticiel Unity 2D Techniques, vous découvrirez des conseils et astuces avancés pour la création de jeux 2D dans Unity. Apprenez à appliquer ces techniques tout en créant un jeu de flipper épique à l’ancienne appelé Snap and Strike!

Si vous trouvez ce didacticiel trop avancé, parcourez d’abord ce didacticiel sur les jeux Unity 2D. Comment créer un jeu comme Jetpack Joyride dans Unity 2D? Une fois cela fait, revenez et améliorez vos compétences 2D Unity encore plus.

Le script est minimal dans ce didacticiel, mais il sera plus facile à suivre si vous avez des connaissances de base en programmation C #. Pour parfaire vos compétences, consultez notre tutoriel Introduction à Unity Scripting.

Remarque: Ce didacticiel suppose que vous êtes à l’aise avec Unity et que vous connaissez votre chemin dans l’interface utilisateur d’Unity. Si ce n’est pas le cas, prenez d’abord le temps de lire notre didacticiel Introduction à Unity UI.

Lorsque vous aurez terminé ce didacticiel, vous en saurez plus sur:

  • Groupes de tri
  • Masques de sprite
  • Sprites à 9 tranches
  • Collisionneurs et joints 2D
  • L’éditeur de maillage
  • Types d’effecteurs et matériaux de physique 2D

Il est temps de lancer la (épingle) balle!

Commencer

Tout d’abord, téléchargez le projet de démarrage en cliquant sur le Télécharger les documents en haut ou en bas du didacticiel.

Assurez-vous que vous utilisez la version Unity 2019.3, que vous pouvez télécharger via le Unity Hub.

Décompressez les matériaux et ouvrez le projet de démarrage dans Unity. Lorsque le projet démarre, passez à la Scène afficher et vous assurer que vous utilisez 2D mode.

Où trouver le mode 2D

Explorer le projet de démarrage

Commencez par explorer le projet.

Double-cliquez sur le Magicien de flipper scène dans Actifs / RW / Scènes. Dans la hiérarchie, vous pouvez voir les GameObjects séparés en catégories:

  • SoundObjects
  • Appareil photo principal
  • Hotspots
  • Collisionneurs statiques
  • Panneau statique
  • Des animations

Cliquez sur Jouer et jetez un œil à l’état actuel du flipper.

Couches de flipper non triées

Eh bien, les choses sont certainement animées! Mais les images se battent actuellement pour être affichées à l’écran.

Votre première tâche consiste à ajuster les couches de tri pour les trois derniers groupes afin qu’elles s’affichent dans le bon ordre.

Ajuster vos calques de tri

UNE Groupe de tri est un groupe de composants que vous utilisez pour créer consolidé Tri des calques. Autrement dit, plusieurs instances d’un préfabriqué avec plusieurs objets sur différentes couches de tri.

le Tri des calques dans ce projet doit être dans l’ordre suivant:

  • Panneau (couche la plus basse)
  • Efx
  • Logo
  • Obstacles
  • Haut
  • Couverture (couche la plus haute)

Maintenant, ajustez vos couches de tri comme suit:

  1. Collisionneurs statiques: Ces objets avec collisionneurs forment la structure de collision de base du flipper. Un groupe de tri n’est pas requis ici.

    Les collisionneurs statiques du flipper.

  2. Panneau statique: Le contenu de ce groupe est masqué.

    Pour afficher ce groupe, sélectionnez Panneau statique dans la Hiérarchie. Puis clique Ajouter un composant et sélectionnez Rendu Group Groupe de tri. Dans le composant Groupe de tri nouvellement ajouté, recherchez le Couche de tri déroulant et sélectionnez Panneau.

    Modification de la couche de tri.

  3. Des animations: Sélectionnez Des animations dans la hiérarchie et cliquez sur Ajouter un composant. Sélectionnez ensuite Rendu Group Groupe de tri.

    dans le Couche de tri liste déroulante, sélectionnez Efx et cliquez Jouer.

    Jeu de flipper avec des couches d'animation appropriées

Vous constaterez que la plupart des écrous et boulons pour le jeu de flipper sont déjà dans le projet de démarrage. Il est maintenant temps pour les choses amusantes: ajouter l’action!

Faire rouler la balle

Tout d’abord, vous devez créer un espace vide GameObject pour maintenir votre travail.

Pour ce faire, cliquez avec le bouton droit sur un espace vide dans la hiérarchie et sélectionnez Créer vide. Maintenant, nommez le nouvel objet Pièces interactives.

Dans l’inspecteur, réinitialisez son Transformer valeurs en cliquant sur le Paramètres icône et sélection Réinitialiser.

Ensuite, créez sept autres GameObjects vides en tant qu’enfants de Pièces interactives et nommez-les:

  • ScrollingTrees
  • BillBoard
  • Piston
  • Palmes
  • Zone de pièce flottante
  • Zone du tunnel routier
  • Pièces bosselées

Assurez-vous de réinitialiser tous leurs Transformer valeurs aussi.

Nouveaux GameObjects

Remarque: Créez rapidement ces GameObjects en sélectionnant Pièces interactives GameObject et en appuyant sur Alt-Maj-N pour créer un GameObject enfant. Ensuite, utilisez Contrôle / Commande-D le dupliquer six fois! Il ne vous reste plus qu’à renommer chaque GameObject.

Défilement des arbres

Ensuite, vous allez utiliser un Masque de sprite pour n’afficher qu’une partie d’une animation. Cela ressemblera à ceci:

Techniques 2D Unity 2017

Voici comment procéder:

  1. Aller à Actifs / RW / Sprites, traîne arbres_cercle sur ScrollingTrees dans la hiérarchie et nommez l’instance de sprite TreeCircle.
  2. dans le Inspecteur, met le Transformer la position à (X: -0,7, Y: 2,2, Z: 0) et définissez sa rotation sur (X: 0 Y: 0 Z: 17).
  3. Clic-droit ScrollingTrees dans la hiérarchie, sélectionnez Objet 2D Mask Masque de sprite et nommez-le TreeMask.
  4. Met le Transformer la position à (X: -1,91, Y: 2,58, Z: 0) et définissez Scale sur (X: 1,48, Y: 1,58, Z: 1).
  5. Dans l’inspecteur, accédez au Lutin domaine de la Masque de sprite composant, cliquez sur le cercle icône pour lancer la liste des éléments d’image-objet et sélectionnez arbres_masque.
  6. Sélectionner TreeCircle dans la Hiérarchie. À l’aide de l’inspecteur, recherchez Sprite Renderer et sélectionnez Efx du Couche de tri menu déroulant. Du Interaction de masque liste déroulante, sélectionnez Masque intérieur visible.

Modification du rendu de sprite.

Écriture de l’animation

Avec les graphiques en place, il est temps d’ajouter le script qui contrôle l’animation.

Double-cliquez Actifs / RW / Scripts / AnimateController pour l’ouvrir dans votre éditeur de code.

Ajoutez les variables suivantes sous celles existantes:

public GameObject treeObject;
private float turnSpeed = 30f;

Ajoutez ensuite ce qui suit FixedUpdate:

private void FixedUpdate()
{
    if (treeObject != null)
    {
        treeObject.transform.Rotate(new Vector3(0f, 0f, turnSpeed * Time.fixedDeltaTime));
    }
}

Cela fait tourner le sprite affecté au treeObject variable à une vitesse constante, que la fréquence d’images du lecteur soit de 30 FPS, 60 FPS ou fluctue entre les deux. turnSpeed vous permet de modifier la vitesse de rotation des arbres.

Remarque: Vous pouvez en savoir plus sur FixedUpdate dans les documents officiels Unity.

Cliquez sur sauver et retourner à Unity.

Sélectionner ScrollingTrees dans la hiérarchie, cliquez sur Ajouter un composant et sélectionnez Scripts Controller Animer le contrôleur. Faites ensuite glisser TreeCircle de l’inspecteur sur le Objet arbre champ.

Cliquez sur Jouer pour prévisualiser votre nouvelle animation de travail.

Les arbres se déplaçant sur le flipper.

Ajout du panneau d’affichage

Cela n’a aucun sens de jouer au flipper si vous ne pouvez pas essayer de battre votre dernier score! Pour vous aider, vous allez ajouter un panneau d’affichage animé avec des lumières clignotantes à côté.

Ouvert Actifs / RW / Sprites / ani_billboard et faites glisser aniBillbord0001 dans BillBoard dans la Hiérarchie. Nommez l’instance enfant AniBillboard.

dans le Couche de tri liste déroulante, sélectionnez Haut. Cliquez sur Ajouter un composant et sélectionnez Divers ▸ Animateur.

Dans l’inspecteur, ouvrez le Manette domaine de Animateur et cliquez sur le cercle icône à côté pour lancer la liste des contrôleurs d’animation. Sélectionner ani_Billboard.

Ouvrez le Animation fenêtre de Menu ▸ Fenêtre et cliquez Jouer pour prévisualiser à quoi ressemblera le panneau d’affichage.

Panneau d'affichage animé

le Sprite à 9 tranches est une autre technique 2D utile. Cette fonction préserve les coins et les bordures des éléments graphiques lors du redimensionnement.

Aller à Actifs / RW / Sprites / ani_billboard et sélectionnez l’un des sprites. Dans l’inspecteur, cliquez sur le Éditeur de sprites icône pour modifier les parties extensibles du sprite.

Les images-objets utilisées pour cette animation sont préparées avec une image-objet à 9 tranches, donc leur redimensionnement ne sera plus un problème maintenant. Phew!

Voici ce que vous réalisez en utilisant 9 tranches sur votre panneau d’affichage:

Exemple de 9 tranches

Placer le panneau d’affichage

Maintenant, vous devez placer le panneau d’affichage sur votre flipper.

Aller à AniBillboard dans la Hiérarchie, Transformer valeurs de Position à (X: 1,5, Y: 4,3, Z: 0) et changez son échelle en (X: -3,5, Y: 2, Z: 1).

Visage sceptique

Euh… c’est un peu gros, non? Pour résoudre ce problème, définissez le Mode de dessin dans Sprite Renderer à Carrelé et taille à Largeur: 1 Hauteur: 1. dans le Mode mosaïque liste déroulante, sélectionnez Adaptatif.

Mine réjouie.

Bien mieux!

Ajout de la partition

Ajoutez le score à votre panneau d’affichage en allant à Actifs / RW / Prefabs, en faisant glisser scoreText dans Panneau d’affichage dans la Hiérarchie et en changeant son échelle en (X: 0,41, Y: 0,4, Z: 1).

Cliquez sur Jouer pour prévisualiser votre jeu de flipper avec son nouveau panneau d’affichage animé chic!

Techniques 2D Unity 2017

Ajout du ping!

Avec le «bling» en place, il est temps d’ajouter le «ping» au champ de jeu! En d’autres termes, vous devez ajouter les collisionneurs qui rendent le jeu intéressant.

Jeu de flipper sans suffisamment de collisionneurs

Commencez par vous rendre dans la Hiérarchie et déménagez BumperRamps et CurveRamp de Collisionneurs statiques dans Pièces interactives.

Ajout du piston

La première chose dont vous avez besoin pour jouer au flipper est un piston afin que vous puissiez tirer une balle hors du canon et commencer le jeu!

Dans le monde réel, le joueur tire le piston, qui engage les ressorts. À sa sortie, les ressorts hélicoïdaux propulsent le ballon sur le terrain de jeu. Vous voulez le même sentiment dans votre application.

Pour implémenter ces mécanismes, sélectionnez Piston dans la Hiérarchie. Dans l’inspecteur, ajoutez un Rendu ▸ Sprite Renderer composant.

Sélectionnez le Sprite Renderer Composant, cliquez sur le cercle icône à côté du Lutin champ et attribuer le came atout. Ensemble Couche de tri à Haut et la position de transformation pour (X: 2,66, Y: -4,6, Z: 0).

Souligner les éléments

Maintenant, pensez à la physique du piston. C’est un printemps avec deux éléments à l’œuvre:

  • L’ancre: Ancre la partie mobile de l’articulation, ce qui crée la tension.
  • Le joint à ressort: La partie mobile de l’articulation, qui crée la force.

Ensuite, vous devrez implémenter la physique qui fera que le piston se comportera comme prévu.

Ajout de l’ancre

Aller à Actifs / RW / Prefabs et faites glisser plungerAnchor dans Piston dans la hiérarchie pour créer une instance enfant. Dans l’inspecteur, ajoutez Physique 2D ▸ Rigidbody 2D et définir son Type de corps à Cinématique pour fixer sa position.

Sélection de l'option cinématique

Ajout du joint à ressort

Maintenant que vous avez créé l’ancrage, il est temps de créer le joint à ressort. Cela agit comme un ressort pour reculer et lancer le piston.

Pour ce faire, cliquez sur le La Flèche signer à côté plungerAnchor dans le Hiérarchie pour afficher son contenu imbriqué. Sélectionnez le Joint plongeur-ressort et ajoutez un Spring Joint 2D à lui via l’Inspecteur.

Sélection du joint à ressort 2D

Assurez-vous de sélectionner l’option de joint à ressort 2D!

Remarque: Tous les composants 2D Joint sont livrés avec un Rigidbody 2D obligatoire.

Message d'erreur: impossible de supprimer Rigidbody 2D

Dans Rigidbody 2D, ensemble Type de corps à Dynamique et Masse à 2.

Étendre le Contraintes section et activer Position de gel pour X et Freeze Rotation pour Z.

Modification de la masse et des contraintes

Dans Spring Joint 2D, vérifier Activer la collision. Désactiver Configurer automatiquement la distance. Ensemble Distance à 1 et La fréquence à dix.

Ensemble Ancre connectée à (X: 0, Y: -1) et attribuer plungerAnchor comme composant Corps rigide connecté.

Modification de Spring Joint 2D.

Dans la hiérarchie, faites glisser Actifs / RW / Prefabs / plongeur dans le Piston objet. Cela crée une instance d’objet enfant.

Ajout du script Plunger

Enfin, il est temps de contrôler la physique que vous avez ajoutée au joint plongeur et ressort.

Dans l’inspecteur, avec Joint plongeur-ressort toujours sélectionné, cliquez sur Ajouter un composant et sélectionnez Scripts ▸ Lanceur. Double-cliquez pour le lancer dans l’éditeur de code.

Déclarez les variables suivantes en dessous des variables existantes:

private SpringJoint2D springJoint;
private Rigidbody2D rb;
private float force = 0f;          // current force generated
public float maxForce = 90f;

Puis, à la fin de Start, ajoutez ce qui suit:

springJoint = GetComponent();
springJoint.distance = 1f; 
rb = GetComponent();

Après // #1 dans Update, ajoutez la ligne suivante:

// calculates current force of exertion
force = powerIndex * maxForce;

Enfin, ajoutez ce qui suit FixedUpdate à la fin du cours:

private void FixedUpdate()
{
    // When force is not 0
    if (force != 0)
    {
        // release springJoint and power up
        springJoint.distance = 1f;
        rb.AddForce(Vector3.up * force);
        force = 0;
    }

    // When the plunger is held down
    if (pressTime != 0)
    {
        // retract the springJoint distance and reduce the power
        springJoint.distance = 0.8f;
        rb.AddForce(Vector3.down * 400);
    }
}

sauver le fichier et revenez à Unity.

Attribuer plongeurEfxZoom et plungerEfxLight du plongeurEffets par exemple aux champs du composant. Ensemble Force max à 200.

Modification du piston

Testez votre travail

Vous êtes maintenant prêt à tester votre nouveau piston de flipper.

Faites glisser un Actifs / RW / Prefabs / boule dans la hiérarchie pour créer une instance. Définissez son Transformer la position à (X: 2,84, Y: -1,08, Z: 0). Cliquez sur Jouer et testez votre piston en appuyant et en relâchant la barre d’espace.

Jeu de flipper avec piston de travail

Maintenant vous roulez!

Ajout des palmes

En ce moment, la balle sort du canon dans la zone de jeu, puis tombe du fond et dans l’espace.

Il est temps d’ajouter palmes – les principales armes pour la victoire au flipper! Vous commencerez par le flipper gauche.

Dans la hiérarchie, cliquez avec le bouton droit sur Palmes et sélectionnez Créer vide. Renommer le GameObject FlipLeft-hingejoint. Dans l’inspecteur, définissez Transformer la position à (X: -1,26, Y: -3,8, Z: 0) et Échelle à (X: 1,05, Y: 1,05, Z: 1).

Pour le flipper droit, dupliquez celui de gauche et renommez-le FlipRight-hingejoint. Définissez sa position sur (X: 0,46, Y: -3,8, Z: 0).

Encore une fois, pensez au fonctionnement des nageoires. C’est comme le piston, mais cette fois, vous devez faire pivoter la nageoire à l’aide des composants suivants:

  • Joints de charnière: Ancrez une pièce mobile à son point de rotation.
  • Flipper: La partie mobile, flipper-y.

Ensuite, allez à Actifs / RW / Prefabs et faites glisser le flipperLeft préfabriqué en FlipLeft-hingejoint et le flipperRight préfabriqué en FlipRight-hingejoint.

Emplacement des éléments articulés

Les articulations de charnière

Sélectionner FlipLeft-hingejoint dans la Hiérarchie. Accédez à l’inspecteur et ajoutez un Joint de charnière 2D. Définissez le Rigidbody Type de corps à Cinématique. Cela fait de ce joint le point de rotation fixe pour la nageoire.

Dans Joint de charnière 2D, attribuez le flipperLeft par exemple comme son Corps rigide connecté.

Activer Utiliser les limites, puis définissez Limites d’angle à -30 pour Inférieur et 30 pour Plus haut.

Modification du joint de charnière 2D

Pop Quiz! Étant donné que la limite de rotation pour le HingeJoint gauche est comprise entre -30 et 30 degrés, quelle devrait être, selon vous, la limite de rotation pour le HingeJoint droit?

[spoiler title=”Steps for Right Flipper”]
Créer un nouveau Joint de charnière 2D composant pour FlipRight-hingejoint. Réglez son Rigidbody 2D Type de corps à Cinématique.

le Limites d’angle pour la charnière droite Inférieur: 30 et Supérieur: -30.

N’oubliez pas d’attribuer le flipperRight par exemple comme Corps rigide connecté.

Réglage de la bonne nageoire
[/spoiler]

Ajout d’un script à retourner

Maintenant, ajoutez le script pour faire fonctionner les nageoires.

Ouvert FlipControlLeft.cs de Actifs / RW / Scripts.

Déclarez les variables suivantes sous les variables existantes:

public float speed = 0f;
private HingeJoint2D hingeJoint2D;
private JointMotor2D jointMotor;

Prenez vos références dans Start en ajoutant:

hingeJoint2D = GetComponent();
jointMotor = hingeJoint2D.motor;

Ensuite, dans le if déclaration en FixedUpdate, ajoutez le code pour engager le moteur du joint:

// set motor speed to max
jointMotor.motorSpeed = speed;
hingeJoint2D.motor = jointMotor;

Enfin, ajoutez un else instruction dans le même bloc:

else
{
    // snap the motor back again
    jointMotor.motorSpeed = -speed;
    hingeJoint2D.motor = jointMotor;
}

Essayez de répéter le code ci-dessus pour le flipper droit:

  1. Déclarez les variables requises pour accéder à la HingeJoint2D et JointMotor2D Composants.
  2. Créez une variable qui stocke la valeur de vitesse du moteur.
  3. Écoutez l’interaction de l’utilisateur dans FixedUpdate et déclencher sa vitesse du moteur.

[spoilertitle=”Miseàjourducodepour[spoilertitle=”CodeUpdateforFlipControlRight“]
La seule différence ici est que vous inversez la variable de vitesse parce que vous tournez le flipper dans l’autre sens.

Dans FlipControlRight.cs, déclarez les mêmes variables:

public float speed = 0f;
private HingeJoint2D hingeJoint2D;
private JointMotor2D jointMotor;

Stockez vos références dans Start encore:

hingeJoint2D = GetComponent();
jointMotor = hingeJoint2D.motor;

Ensuite, dans le if déclaration en FixedUpdate, ajouter:

// set motor speed to max
jointMotor.motorSpeed = -speed;
hingeJoint2D.motor = jointMotor;

Enfin, ajoutez ce qui suit else déclaration à ce même bloc:

else
{
    // snap the motor back again
    jointMotor.motorSpeed = speed;
    hingeJoint2D.motor = jointMotor;
}

[/spoiler]

sauver les fichiers et revenez à Unity.

Attachez le composant de script FlipControlLeft à FlipLeft-hingejoint et FlipControlRight à FlipRight-hingejoint. Définissez leur La vitesse valeurs à 1700.

Réglage de la valeur de vitesse

Cliquez sur Jouer et essayez vos palmes en utilisant les touches fléchées gauche et droite.

Jeu de flipper avec palmes fonctionnelles

Zone du tunnel routier

L’orbite incurvée au sommet du terrain de jeu augmente les chances pour le ballon d’entrer dans le CurveRamp pour plus de points – si vous êtes en mesure de faire entrer le ballon!

Dans cette étape, vous allez créer un vortex à l’entrée pour aspirer la balle dans le tunnel et la recracher à l’autre extrémité. Whee!

Champ de force avec effecteur de zone 2D

Définissez l’instance de balle Transformer la position à (X: -2,28, Y: 1, Z: 0). Dans la hiérarchie, cliquez avec le bouton droit sur Zone du tunnel routier et sélectionnez Créer vide. Nommez cet objet Champ de force.

Cliquez sur Ajouter un composant et sélectionnez Physique 2D ider Polygon Collider 2D.

Dans l’inspecteur, cliquez sur le Modifier le collisionneur et déplacez les vecteurs vers la zone située à l’extérieur de l’entrée du tunnel. Activer Est un déclencheur et Utilisé par Effector.

Réglage de la taille de Polygon Collider 2D.

Cliquez sur Ajouter un composant et sélectionnez Physique 2D ▸ Effecteur de zone 2D. Activer Utiliser l’angle global. Ensuite, définissez Angle de force à 90 et Ampleur de la force à 20. dans le Force Target liste déroulante, sélectionnez Corps rigide.

Frappé Jouer et testez votre nouveau vortex.

Test du vortex.

Remarque: En augmentant Ampleur de la force à 200 envoie également le ballon à travers le tunnel. Mais vous ne pourriez pas utiliser Effecteurs de surface 2D, donc pour ce tutoriel, faites-en un vortex faible.

Un chemin guidé avec effecteur de surface 2D

Le vortex «faible» n’a que suffisamment de puissance pour pousser votre balle à l’entrée du tunnel. Ensuite, vous allez créer un chemin pour guider la balle à travers le reste du tunnel.

  1. Clic-droit Zone du tunnel routier dans la hiérarchie et sélectionnez Créer vide. Nommez ce nouvel objet Surface de la route.
  2. Dans l’inspecteur, cliquez sur Ajouter un composant et sélectionnez Physique 2D ▸ Edge Collider 2D.
  3. Clique le Modifier le collisionneur et déplacez les vecteurs en conséquence.
  4. Activer Utilisé par Effector et augmenter Rayon de bord à 0,03.

Réglage du collisionneur de bord 2D.

Ensuite, cliquez sur Ajouter un composant et sélectionnez Physique 2D ▸ Effecteur de surface 2D. Ensemble Force Force à 15 et Échelle de force à 1. Cliquez sur Jouer.

Jeu de flipper avec ballon qui se comporte mal

Attendez, que fait cette balle? Vous allez corriger ce comportement dans la section suivante.

Édition de maillage dans Unity

À ce stade, lorsque vous prévisualisez votre travail, vous verrez que la balle agit bizarrement.

Accédez à la hiérarchie, sélectionnez Collisionneurs statiques / WallBoard et activer Sprite Renderer dans l’inspecteur. Ici, vous trouverez le coupable – certains vecteurs bloquent l’entrée du tunnel.

Pour résoudre ce problème, accédez à Polygon Collider 2D, clique sur le Modifier le collisionneur icône et déplacez les vecteurs incriminés. Ne faites pas l’écart trop large.

Réglage du collisionneur de polygones 2D

Remarque: Pour une édition de maillage plus rapide:

  • Tenir Alt et faites un clic gauche pour changer le curseur en icône de main pour déplacer le canevas.
  • presse Commander (Mac) ou Contrôle (Windows) pour mettre en surbrillance les sommets, puis cliquez avec le bouton gauche pour supprimer.

Cliquez sur Jouer encore. Voilà, c’est mieux!

Balle entrant correctement dans le tunnel

Blocage avec Platform Effector 2D

Maintenant, le ForceField pousse le ballon sur la surface de la route, qui guide ensuite le ballon le long du tunnel et le ramène directement au tireur, puis…

Que…? Il remonte directement dans la goulotte jusqu’au piston.

Jeu de flipper avec ballon retournant au piston

Ce n’est pas tout à fait juste.

Vous avez besoin d’un collisionneur pour empêcher la balle de retomber dans le Piston. Mais en même temps, vous devez permettre au ballon de sortir du tireur après le lancement.

Dans le passé, vous pourriez avoir if-else«D» votre moyen d’en sortir. Mais maintenant, Platform Effector 2D est là pour sauver la situation!

Clic-droit Zone du tunnel routier dans la hiérarchie, sélectionnez Créer vide et nommez le nouvel objet Block Platform.

Dans l’inspecteur, cliquez sur Ajouter un composant et sélectionnez Physique 2D ▸ Edge Collider 2D. ensuite Modifier le collisionneur pour déplacer les vecteurs qui bloqueront la sortie. Activer Utilisé par Effector Et mettre Rayon de bord à 0,03.

Blocage de la chute du piston

Ensuite, cliquez sur Ajouter un composant et sélectionnez Physique 2D ▸ Plate-forme Effecteur 2D. Désactiver Utiliser un masque de collision. Ensuite, définissez la valeur de Décalage rotationnel à 90 et la valeur de Arc de surface à 130. Activer Utilisez One Way.

Cliquez sur Jouer… Vous avez résolu le problème!

La balle est maintenant bloquée pour entrer dans la chute du piston

Zone de pièce flottante

Un autre endroit idéal où le joueur peut marquer plus de points est dans la zone flottante.

Pour l’implémenter:

  1. Met le Transformer la position du Balle par exemple pour (X: -2,2, Y: -0,5, Z: 0).
  2. Aller à Actifs / RW / Sprites et faites glisser flotteur dans Zone de pièce flottante objet dans la hiérarchie.
  3. Nommez l’instance enfant Zone flottante.
  4. Dans l’inspecteur, définissez Transformer la position à (X: -2,63, Y: 0,18, Z: 0) et sélectionnez Logo comme son Couche de tri.
  5. Cliquez sur Ajouter un composant et sélectionnez Physique 2D ider Polygon Collider 2D. Activer Est un déclencheur et Utilisé par Effector.
  6. Ajouter un autre composant de Physique 2D ▸ Flotteur Effecteur 2D. Ensemble Densité à 50. Sous Amortissement, ensemble Traînée linéaire et Drag angulaire à dix.
  7. Ensemble Variation de débit à -5 pour donner un peu de mouvement à l’effet flottant.

Réglage de l'effectif de flottabilité 2D

Cliquez sur Jouer pour vérifier l’effet flottant.

Balle dans la zone flottante

Codez le flotteur

Vous allez maintenant définir la durée du flottant. Dans Actifs / RW / Scripts, double-cliquez Floatpiece.cs pour lancer le fichier dans l’éditeur de code.

Déclarez les variables suivantes sous les variables existantes:

private BuoyancyEffector2D floatEffector;
public float floatingTime = 0f; // floating duration
private float runningTime = 0f; // the current duration since startTime
private float startTime = 0f;

Au bout du Start, ajouter:

floatEffector = GetComponent(); // assign component to this instance

Remplacez le code à l’intérieur du if bloquer OnTriggerEnter2D avec les éléments suivants:

// on enter zone, start float
floatEffector.density = 50;
// start timer
if (startTime == 0f)
{
    startTime = Time.time;
    sound.bonus.Play();
    scoreBoard.gamescore += 10;
    golightRenderer.sprite = golightAniController.spriteSet[0];
    StartCoroutine(BeginFloat());
}

Et remplacer l’ensemble BeginFloat avec les éléments suivants:

IEnumerator BeginFloat()
{
    while (true) 
    {
        // calculate current duration
        runningTime = Time.time - startTime; 

        // play animation loop
        int index = (int)Mathf.PingPong(handcamAniController.fps * 
                    Time.time, handcamAniController.spriteSet.Length);
        handcamRenderer.sprite = handcamAniController.spriteSet[index];
        yield return new WaitForSeconds(0.1f);
        
        // when time is up            
        if (runningTime >= floatingTime)  
        {
            // stop float and reset timer
            floatEffector.density = 0;    
            runningTime = 0f;
            startTime = 0f;
  
            // stop sound & animation 
            sound.bonus.Stop();
            golightRenderer.sprite = golightAniController.spriteSet[1];
            handcamRenderer.sprite = handcamAniController.spriteSet 
                          [handcamAniController.spriteSet.Length - 1];
            break;
        }
    } 
}

Cliquez sur sauver et retourner à Unity.

C’était le plus de code que vous aurez besoin d’écrire dans tout ce tutoriel! Beaucoup appelaient des choses déjà définies pour vous.

Tout d’abord, vous avez déclaré certaines variables, une référence à la FlottabilitéEffecteur2D composant que vous avez ajouté dans la scène et certains minuteries.

Vous appellerez OnTriggerEnter quand le ballon entre Zone flottante. Vous démarrez le chronomètre, lancez des effets sonores et d’animation et attribuez des points au joueur. Ensuite, vous démarrez le BeginFloat coroutine.

Dans BeginFloat, vous gardez une trace de combien de temps la balle a été dans le Zone flottante et exécutez des animations de sprites.

Lorsque le temps est écoulé, vous réinitialisez tous les minuteurs, arrêtez toutes les animations et les effets sonores et réduisez le BuoyancyEffector2D.density à 0. Cela fait tomber la balle du Zone flottante et de nouveau en jeu!

Mise en œuvre de la zone flottante

Aller à Actifs / RW / Prefabs et faites glisser floatEffects dans le Zone de pièce flottante dans la hiérarchie pour créer une instance enfant. Clique le La Flèche icône à côté floatEffects pour développer le contenu.

Sélectionner Zone flottante dans la Hiérarchie. Cliquez sur Ajouter un composant et sélectionnez Scripts ▸ Floatpiece. Dans l’inspecteur, affectez floatEffects à Handcam Obj et StaticLight à Golight Obj. Met le Temps flottant valeur à 2.

Modification du flotteur.

Maintenant, appuyez sur Jouer à nouveau pour tester.

Techniques 2D Unity 2017

Pare-chocs triangulaires

Vous avez presque terminé votre jeu de flipper! Il ne reste plus qu’à améliorer le gameplay avec effecteurs ponctuels et un matériel de physique.

Pour ce faire, vous allez ajouter des pare-chocs à votre jeu. Si la balle frappe l’un de ces pare-chocs, elle tirera dans la direction opposée.

Pour créer ces pare-chocs, accédez à Actifs / RW / Prefabs et faites glisser bumperTriangleLeft dans Pièces cahoteuses dans la Hiérarchie. Placer le Balle par exemple devant le pare-chocs.

Cliquez sur Jouer pour voir comment la balle roule sur la pente.

Jeu de flipper avec des pare-chocs triangulaires qui ne heurtent pas

Matériau physique 2D versus effecteur ponctuel 2D

Dans Unity, pour donner un élan aux objets animés en cas de collision, vous avez deux options:

  • Matériel physique 2D: La vitesse reste constante sur toute la surface de l’objet, quel que soit le point d’impact.

    Utilisation de matériaux physiques 2D

  • Effecteur ponctuel 2D: La vitesse dépend du centre de masse de l’objet et de son point d’impact.

    Utilisation de Point Effector 2D.

N’hésitez pas à jouer avec les deux options. Expérimentez avec différents paramètres pour trouver l’impact optimal pour les différents éléments en collision dans le jeu.

Sélectionner bumperTriangleLeft dans la Hiérarchie. Trouver Polygon Collider 2D dans l’inspecteur et activer Est un déclencheur et Utilisé par Effector.

Ensuite, cliquez sur Ajouter un composant et sélectionnez Physique 2D ▸ Effecteur ponctuel 2D. Ensemble Ampleur de la force à 500 et ajustez le Amortissement paramètres à Glisser: 5000 et Traînée angulaire: 1000.

Modification de l’effecteur de points 2D.

Maintenant, faites glisser bumperTriangleRight de Actifs / RW / Prefabs dans Pièces bosselées. Installez-le exactement de la même manière que le pare-chocs gauche.

Ensuite, définissez l’instance de balle Transformer la position à (X: -1,6, Y: -1,6, Z: 0). Cliquez sur Jouer pour tester vos nouveaux pare-chocs.

Techniques 2D Unity 2017

Regardez! La balle est si rapide que vous ne pouvez pas la voir.

Ajouter plus de pare-chocs

Il existe deux autres préfabriqués que vous pouvez essayer d’explorer davantage du moteur de physique 2D: bumperCircles et pare-chocs. Pour les ajouter à votre jeu de flipper, faites-les glisser dans Pièces bosselées dans le Hiérachie.

Le projet de démarrage les a déjà configurés pour vous. Cependant, vous pouvez modifier l’impact de la collision à l’aide de Point Effectors 2D ou Physics Material 2D.

Enfin, définissez la position du Balle par exemple pour (X: 2,8, Y: -1, Z: 0).

Cliquez sur Jouer et profitez de jouer à Snap and Strike!

Jeu de flipper terminé

Où aller en partant d’ici?

Téléchargez les fichiers finaux du projet en cliquant sur le Télécharger les documents en haut ou en bas du didacticiel.

Pour étendre ce jeu, vous pouvez créer un système de menus et limiter le joueur à seulement trois balles pour obtenir un score élevé. Ou vous pouvez le connecter avec Facebook et mettre en place un tableau des meilleurs scores pour défier vos amis.

J’espère que ce tutoriel vous a été utile. Si vous avez des questions ou des commentaires, ou si vous avez mis en place d’autres effets sympas en utilisant les techniques 2D d’Unity, parlez-nous d’eux dans la section commentaires ci-dessous!

Close Menu