Créer un jeu d'artillerie à partir de zéro

Dans ce didacticiel, nous allons créer un jeu de tank à deux joueurs dans Multimedia Fusion 2. Il comportera une prise de vue personnalisée à 360 degrés et un terrain destructible. Vous n'avez besoin d'aucune expérience préalable en programmation ou en développement de jeux pour suivre ce didacticiel. Si vous n'avez pas Multimedia Fusion 2, vous pouvez essayer la démo gratuite..


Jouer le jeu

À tour de rôle, tirez sur l’autre tank - le joueur 1 est à gauche et le joueur 2 à droite. Utilisez la souris pour viser. plus le réticule est éloigné de votre tank, plus le tir sera puissant. Le premier joueur à être touché perd.


introduction

Nous allons commencer par configurer notre cadre pour que le jeu se déroule sans accroc, puis nous ajouterons notre premier char. Après cela, nous allons faire tirer des balles qui détruisent le terrain, et finalement un autre char de joueur sera ajouté pour rivaliser avec.


Configuration de l'espace de travail

Commencez par créer une nouvelle application dans Multimedia Fusion 2 (téléchargez la démo ici si vous ne l'avez pas déjà) et nommez-la. Jeu d'artillerie.

Dans les options d'exécution du jeu, définissez le Taux de trame à 60 et le Mode d'affichage à Direct3D 9. Ce sont les paramètres de configuration standard que j'utilise sur la plupart des jeux, car ils fournissent une expérience de jeu fluide et tirent parti de l'accélération matérielle sur l'ordinateur du joueur..

Pour ce tutoriel, nous utilisons également une résolution de 600x480 qui peut être modifié dans les paramètres de la fenêtre. Changer la taille du cadre en 600x480 ainsi que.

Pour rendre les choses un peu plus professionnelles, nous décocherons également Barre de menu pour l'empêcher de s'afficher dans notre jeu.


Étape 1: Créer une scène initiale

Maintenant que nous sommes prêts et prêts à partir, il est temps d'importer des actifs pour notre jeu..

Vous pouvez obtenir tous les graphiques que j'utilise dans ce tutoriel à partir du téléchargement du code source, ou vous pouvez en dessiner vous-même si vous le souhaitez. Les graphiques que j'utilise ont été adaptés à partir de certains graphiques gratuits disponibles sur OpenGameArt.org.

Après avoir enregistré les images sur votre ordinateur, faites-les simplement glisser une à une dans l'image 1. Cela les importera dans notre jeu. Une boîte de dialogue vous invitera à définir le type de chaque objet..

Commencez par importer le terrain. Définissez-le sur un objet d’arrière-plan avec son Type d'obstacle mis à Obstacle.

Importez ensuite le réservoir de Player One en tant qu’objet actif, ainsi que la tourelle de Player One. Nomme les P1Body et Tourelle P1 respectivement. Réglez le point chaud de la tourelle sur (3,3), et le point chaud du réservoir pour (16,14). Cela garantira que lorsque nous plaçons la tourelle au réservoir, elle est correctement placée et tourne correctement.

Pointe: Pour placer le point d'accès, cliquez d'abord sur l'icône avec un oeil sur celui-ci pour le rendre visible, puis faites-le glisser jusqu'au point souhaité..

Importez également la puce et le réticule en tant qu’objets actifs. Nous allons importer l'autre réservoir plus tard. Centrer le point chaud du réticule sur (15,15). Décochez "Créer au début" sur la puce, et centrez son point d'accès. Assurez-vous que la tourelle du char est derrière le corps en ordre de tirage en cliquant dessus avec le bouton droit de la souris et en l'envoyant. Retourner, sous le Ordre option.

Enfin, changez la couleur d'arrière-plan du cadre en bleu clair (cliquez sur le Cadre 1 dans la barre d'outils Espace de travail, puis modifiez la propriété appropriée dans le panneau Propriétés). Utilisation RVB = 115 176 217. Cette couleur sera importante plus tard lorsque nous ajouterons un terrain destructible.

Disposez les objets dans votre cadre afin qu'ils ressemblent à la façon dont je les ai dans cette image..


Étape 2: Tirez sur une balle

Ici, nous allons faire en sorte que notre premier char tire une balle en ligne droite. Nous ajouterons plus tard de la gravité à la balle, ainsi qu'une explosion lorsqu'elle heurtera le sol..

Tout d’abord, créez deux valeurs modifiables pour le réservoir appelé Distance à la souris et AngleToMouse: sélectionnez le réservoir, cliquez sur l'icône "AZ" en haut du panneau Propriétés, puis sur "Nouveau" sous "Valeurs modifiables". Nous les utiliserons pour stocker la distance en pixels et l'angle en degrés à la souris, respectivement.

Ensuite, créez cinq valeurs modifiables pour la puce:

  • TempX
  • Tempy
  • XSpeed
  • YSpeed
  • InitialSpeed

Ces valeurs seront utilisées pour stocker les informations de mouvement de la balle et mettre en œuvre notre mouvement Custom 360 Degrees Movement..

Il est temps d'écrire du code. Nous allons commencer par positionner simplement la tourelle et la faire viser vers la souris.

Ajoutez l’Objet Direction Avancé à votre jeu via Insérer> Nouvel objet. Nous allons l'utiliser pour calculer l'angle et la distance de notre tank à la souris.

Pointe: Si vous utilisez la démo de Multimedia Fusion 2, vous n’avez peut-être pas accès à l’objet Advanced Direction disponible dans Bonus Pack 1. Dans ce cas, vous pouvez utiliser la formule suivante pour calculer l’angle entre deux objets:
360-ATan2 (YMouse-Y ("P1Body"), XMouse-X ("P1Body"))
… au lieu de:
Distance ("Objet de direction avancée", X ("P1Body"), Y ("P1Body"), XMouse, YMouse)

Ajoutez ensuite le code suivant dans l'éditeur d'événements (accédez à ceci via Affichage> Editeur d'événements):

+ Toujours
- [P1Body] Définissez DistanceToMouse sur:
Distance ("Objet de direction avancée", X ("P1Body"), Y ("P1Body"), XMouse, YMouse)
- [P1Body] Définissez AngleToMouse sur:
Direction ("Objet de direction avancée", X ("P1Body"), Y ("P1Body"), XMouse, YMouse)
- [Tourelle P1] Régler la position sur (0,0) à partir de P1Body
- [Tourelle P1] Réglez Angle sur AngleToMouse ("P1Body")
- [Réticule] Définissez la coordonnée X sur XMouse
- [Réticule] Définissez la coordonnée Y sur YMouse

Si vous utilisez votre jeu maintenant, vous devriez voir que la tourelle du char pointe maintenant vers le réticule, et que le réticule est positionné au curseur de la souris.

Maintenant tirons une balle. Ajoutez le code suivant:
+ L'utilisateur clique avec le bouton gauche
- [Créer] Créer une puce à (0,0) à partir de P1Body
- [Bullet] Réglez TempX sur X ("Bullet")
- [Bullet] Réglez TempY sur Y ("Bullet")
- [Bullet] Réglez InitialSpeed ​​sur Min (DistanceToMouse ("P1Body") / 17.0, 15)
- [Bullet] Définissez XSpeed ​​sur Cos (AngleToMouse ("P1Body")) * InitialSpeed ​​("Bullet")
- [Bullet] Définissez YSpeed ​​sur Sin (AngleToMouse ("P1Body")) * InitialSpeed ​​("Bullet") * - 1

+ Toujours
- [Bullet] Ajouter XSpeed ​​("Bullet") à TempX ("Bullet")
- [Bullet] Ajoutez YSpeed ​​("Bullet") à TempY ("Bullet")
- [Bullet] Réglez la position X sur TempX ("Bullet")
- [Bullet] Réglez la position Y sur TempY ("Bullet")

Si vous lancez votre partie (via le menu Exécuter), vous devriez voir le tank tirer une balle en ligne droite sans gravité..

Alors, que fait ce code??

Nous créons d’abord une balle dans le corps du réservoir. Nous utilisons ensuite les valeurs TempX et Tempy pour stocker la position actuelle de la balle. Nous avons réglé la vitesse initiale de la balle à la distance du réservoir à la souris, avec une puissance maximale de 15. (La distance est divisée par 17,0 pour réduire sa force.) Ce ne sont que des valeurs que j'ai simplement inventées après quelques essai. Vous pouvez jouer avec ces deux valeurs vous-même pour changer la vitesse à laquelle la balle se déclenche.

Nous calculons ensuite le XSpeed et YSpeed de l'angle et de la puissance en utilisant la trigonométrie. Ne vous inquiétez pas si vous ne comprenez pas les mathématiques derrière comment cela fonctionne!

Enfin, dans le Toujours événement nous continuellement mettre à jour la position de la balle stockée dans TempX et Tempy en ajoutant la balle XSpeed et YSpeed respectivement.

Pourquoi utiliser TempX et Tempy?

Nous devons stocker nos positions intermédiaires dans des valeurs modifiables pour les mouvements personnalisés, car Multimedia Fusion 2 n’utilise pas des flotteurs (nombres avec des points décimaux) pour ses coordonnées - il utilise des entiers (nombres entiers).

Si vous essayez de régler la position X de la balle sur X ("Bullet") + 0,2 vous verrez qu'il ne bougera nulle part, parce que 0.2 est arrondi à 0, et donc la puce est réglée sur sa position actuelle.


Étape 3: Ajouter de la gravité

Maintenant que nous pouvons tirer une balle, nous devons ajouter de la gravité pour que la balle tombe une fois qu'elle quitte le canon du char.

Premièrement, nous avons besoin d’un emplacement pour stocker certaines valeurs qui seront utilisées tout au long de notre jeu, telles que la force de gravité. Dans un jeu MMF2, il existe de nombreux emplacements pour stocker ce type d'informations. Certaines personnes préfèrent créer un objet spécifique uniquement pour conserver des valeurs. Dans ce tutoriel, nous allons utiliser les valeurs globales - des valeurs disponibles partout dans le jeu - pour conserver nos valeurs importantes..

Accédez aux valeurs globales de votre application (cliquez sur l'application dans la barre d'outils de votre espace de travail, puis sélectionnez l'icône "AZ" dans le panneau Propriétés) et créez une nouvelle valeur: Y_Gravity.

Pointe: Si vous souhaitez rendre votre code plus lisible, vous pouvez également ajouter une autre valeur globale pour Vitesse maximale et l'utiliser au lieu de "15.0" où nous calculons la InitialSpeed pour la balle. Cela vous permettra de modifier facilement la puissance maximale sans avoir à modifier votre code partout où il apparaît..

MMF2 ne vous permet pas de taper des float dans Global Values, et comme nous voulons que notre gravité soit inférieure à un, nous devrons l'indiquer dans le code:

Maintenant, nous devons simplement ajouter cette gravité à la vitesse Y de la balle sur chaque image.

Ajouter la ligne:

+Toujours
- [Bullet] Ajoutez Y_Gravity à YSpeed

Vous pouvez double-cliquer sur n’importe quel événement pour passer en mode Liste et modifier l’ordre des actions. Placez la nouvelle ligne entre les actions existantes comme je l'ai fait ici.

Maintenant, lorsque vous lancez le jeu, votre tank doit tirer une balle qui retombe sur le sol.


Étape 4: Détruire le terrain

Ensuite, nous devons faire en sorte que la balle crée des trous dans le sol lorsqu'elle entre en collision avec elle. Pour ce faire, nous allons tirer parti de la fonction "Ajouter au fond" de Multimedia Fusion..

Ajouter à la toile de fond colle l'image d'un objet actif dans le fond de manière permanente lorsque le jeu est en cours d'exécution. Cela peut affecter le fait qu'une partie particulière du fond enregistre ou non les collisions. Ce que nous allons faire est d'avoir une forme de "trou" qui découpe un cercle dans l'arrière-plan aussi grand que l'animation d'explosion qui l'accompagne.

Ajouter un trou

Importation explosion_hole.png en tant qu'objet actif en le faisant glisser dans le cadre. Centrer son hotspot sur (32,32).

Importation explosion_graphic_1.png comme un autre objet actif. Lorsqu'on vous demande si vous souhaitez importer explosion_graphic_2.png, etc., choisissez Oui.

Centrez également les points chauds sur ces cadres graphiques d'explosion.

Le code pour l'ajout de terrain destructible est assez simple. Quand une balle entre en collision avec le fond, il suffit de créer l'objet trou et de l'ajouter au fond.

Créez le trou lorsque la balle entre en collision avec l'arrière-plan:

Ajoutez le trou au fond comme "Pas un obstacle" (pour que les balles puissent passer à travers):

Créez également une explosion graphique (qui indiquera où le ballon a été touché) et détruisez le ballon à la fin. Nous pouvons également détruire le trou une fois qu'il a été ajouté à la toile de fond:

Enfin, détruisez l’explosion graphique une fois l’animation terminée:

Si vous lancez le jeu, vous devriez maintenant avoir un char capable de viser et de tirer sur le terrain, créant des explosions et laissant des trous.


Étape 5: Ajouter un autre joueur

Enfin, nous allons ajouter un autre joueur à notre jeu. Nous allons copier le code que nous avons déjà pour notre premier réservoir et l'appliquer à un autre. Nous allons également avoir besoin d’une nouvelle variable globale pour savoir à qui le tour s’affiche..

Ajouter les graphiques du joueur deux

Importez le corps et la tourelle du joueur 2 de la même manière qu'avec le joueur 1. Placez le deuxième réservoir sur le côté droit du cadre.

Dans l'éditeur d'événements, copiez le code du premier réservoir dans le second. Vous devrez également créer les valeurs modifiables. Distance à la souris et AngleToMouse dans le réservoir du second joueur. J'ai ajouté des commentaires à mon code pour le rendre plus facile à voir. Si vous êtes bloqué, suivez à nouveau la première partie de ce didacticiel, mais faites-le pour le second réservoir..

Si vous lancez le jeu maintenant, les deux chars tireront en même temps en direction du réticule.

Créer de nouvelles variables

Créez deux nouvelles variables globales appelées CurrentPlayerTurn et TurnCooldown.

TurnCooldown sera utilisé pour empêcher les chars de tirer en même temps. Chaque fois qu'un joueur tire, nous attribuerons à ce temps de recharge une petite valeur, qui sera décomptée jusqu'à zéro, et nous ne permettrons pas à l'autre joueur de tirer jusqu'à ce que cette valeur atteigne zéro..

Nous utiliserons CurrentPlayerTurn = 0 pour représenter le tour du joueur 1 et CurrentPlayerTurn = 1 pour représenter le tour du joueur deux.

Sous le code de tir du joueur 1 avec L'utilisateur clique avec le bouton gauche, ajouter la condition CurrentPlayerCooldown = 0 de sorte qu'un tank ne regarde que la souris et est en mesure de tirer lorsqu'il a le contrôle de son tour. Pour ce faire, utilisez la condition "Comparer à une valeur globale":

Ajoutez également la condition TurnCooldown = 0 pour s'assurer que le tir est refroidi avant d'essayer de tirer.

Ajouter deux autres actions à Ensemble la TurnCooldown à une petite valeur de 3, et le CurrentPlayerTurn à 1-CurrentPlayerTurn. (Cela signifie que si CurrentPlayerTurn est 0 il sera mis à 1, et si c'est 1 il sera mis à 0.)

Après avoir fait tout cela, voici à quoi votre code devrait ressembler:

Dupliquez le même code pour le joueur deux, mais changez la condition pour refléter le tour du joueur deux avec CurrentPlayerTurn = 1

Et enfin, ajoutez une autre condition pour réduire notre délai de récupération chaque fois qu'il est supérieur à zéro:

Si vous jouez au jeu maintenant, vous devriez pouvoir tirer l'un sur l'autre les chars, chaque tir alternant le tour du char actuel..


Étape 6: Ajouter une condition de gain

Maintenant que nous pouvons tirer, il ne nous reste plus qu'à ajouter un moyen de nous faire sauter! C'est assez simple. Nous devons simplement détecter si une explosion recouvre un char, et si c'est le cas, nous le détruisons et nous ne permettons à personne de tirer après..

Ajoutez le code suivant:

+ [Graphique_D'explosion] chevauche [P1Body]
- Détruire [P1Body]
- Détruire [Tourelle P1]
- Définissez CurrentPlayerTurn sur -1

+ [Graphique_D'explosion] chevauche [P2Body]
- Détruire [P2Body]
- Détruire [P2Turret]
- Définissez CurrentPlayerTurn sur -1

Voici à quoi ressemble le code pour Player One:

Détruire les joueurs et leurs tourelles est assez explicite. Nous avons mis le CurrentPlayerTurn à -1 afin que les joueurs ne puissent plus tirer (car les conditions l'exigent CurrentPlayerTurn être égal à 0 ou 1).

Si vous lancez votre jeu, vous devriez être capable de vous tirer à tour de rôle jusqu'à ce que l'un de vous explose.!


Conclusion

Vous avez maintenant un jeu de tank à deux joueurs entièrement fonctionnel que vous pouvez jouer avec vos amis. À partir de là, vous pouvez ajouter des éléments tels que la vitesse du vent aléatoire qui affecte la trajectoire de la balle, de nouvelles armes, des sons, des effets de particules, etc.!

Aie du plaisir avec ça!