Faire un match-3 dans Construct 2 Animations et échange de bloc

Dans le précédent article de cette série, nous avions passé du temps à configurer notre jeu de manière à disposer de toutes les images nécessaires, et à créer de manière aléatoire une grille de blocs pour le joueur. Avec ces systèmes en place, nous allons maintenant travailler sur les fonctionnalités de base et donner au joueur la possibilité de manipuler le terrain de jeu..


Démo finale du jeu

Voici une démonstration du jeu sur lequel nous travaillons tout au long de cette série:




1. Ajouter une animation

Nous avons terminé le didacticiel précédent après que chaque bloc ait été affiché avec une couleur différente. Je pensais qu'il serait bon de prendre cette position et de commencer par ajouter une animation aux blocs afin que les images changent en fonction de ce que le joueur a fait ou a fait. La première animation que nous ajouterons est un événement survolant la souris..

Tout d'abord, ajoutez un Souris objecter à Disposition 1. Ensuite, retournez à Feuille d'événement 1 et ajouter un nouveau un événement.

 Événement: souris> le curseur est sur l'objet objet = action de bloc: bloquer> définir la valeur de l'image = (couleur de bloc-1) * 3 + 2

Maintenant, si vous entrez dans le jeu, l'image des blocs devrait changer lorsque vous les survolez, et revenir en arrière lorsque vous déplacez le curseur..

Nous avons encore un événement d'animation à faire:

 Événement: Block> Est-ce que la variable d'instance booléenne est définie Variable d'instance = IsMatched Action: Block> Définir la valeur de l'image = (Block.Color-1) * 3 + 3

Nous devons également nous assurer que l'image ne change pas lorsque vous survolez un bloc correspondant. Ajoutez donc une autre condition à l'événement de survol de la souris que nous avons créé:

 Condition: Inverser: Bloquer> Est-ce que la variable d'instance booléenne est définie Variable d'instance = IsMatched

Inverser cela signifie que l'image de survol n'est utilisée que si le bloc ne fait pas partie d'une correspondance. Comme nous n’avons pas encore mis en place de système d’appariement, vous ne devriez voir aucun changement, mais à mesure que nous avancerons, cet événement entrera en jeu.

Avec ces trois événements en place, votre feuille d’événement devrait maintenant ressembler à ceci:



2. Échange de deux blocs voisins

La prochaine chose sur laquelle nous allons travailler est de donner au joueur la possibilité d’échanger des blocs voisins. Pour que ce système fonctionne, nous allons utiliser une combinaison de tableaux et de fonctions. Par conséquent, si vous ne les avez pas déjà utilisés dans C2, consultez le manuel pour en savoir plus..

Vers quoi travaillons-nous?

Avant d’expliquer comment créer le système, je veux que vous voyiez ce que nous fabriquions et expliquions brièvement son fonctionnement. Pour voir à quoi ressemblera le système, lancez la démonstration ci-dessous. Pour échanger des blocs, il suffit de cliquer dessus et de les faire glisser au-dessus d'un point voisin dans l'une des quatre directions cardinales..

Cliquez pour charger la démo.

Vous remarquerez que lorsque vous commencez à faire glisser un bloc, quatre carrés de couleur apparaissent au-dessus des blocs qui se trouvent juste à côté. Lorsque vous lâchez le bloc, un événement vérifie si le bloc chevauche l'un de ces carrés colorés..

Si le bloc recouvre l'un des carrés colorés, il échange le bloc que vous avez déplacé avec le bloc sur lequel le carré coloré a été dessiné ou repositionne simplement le bloc déplacé vers le nouvel emplacement. Si votre bloc ne recouvre pas l'un des carrés colorés, il ne fait rien. Cela ne fait rien non plus si le bloc recouvre plusieurs carrés colorés.

La raison pour laquelle nous utilisons ce système, plutôt que de vérifier si le bloc lui-même chevauche un autre bloc, est que nous n'avons pas de moyen facile de vérifier où les deux blocs sont relatifs l'un par rapport à l'autre. En repositionnant les carrés de couleur dans les emplacements valides, puis en les utilisant comme base pour nos contrôles, nous avons une bien meilleure idée de ce que le joueur avait l'intention de faire lorsqu'il tentait d'effectuer un échange..

Ajout des blocs de couleur

Maintenant que nous comprenons ce qui se passe, nous pouvons commencer à le mettre en œuvre. Aller à Disposition 1 et ajouter un Une fonction objet, et un Tableau objet. Quitter le Une fonction nom de l'objet comme Une fonction, mais renommer le Tableau à BlockPositions. le Une fonction objet nous permettra d'utiliser Les fonctions dans notre code, et le Tableau est ce que nous allons utiliser pour stocker les positions des blocs que nous échangeons. Nous devons également définir le la taille et Profondeur du tableau à 2.

Une fois que vous avez fait cela, créez quatre nouveaux sprites à utiliser comme carrés colorés:

  • Un sprite vert, nommé BottomBlock.
  • Un sprite rouge, nommé LeftBlock.
  • Un sprite jaune, nommé RightBlock.
  • Un sprite bleu, nommé TopBlock.

Les couleurs importent peu, mais l’utilisation de ces couleurs les rend différentes, ce qui les rend faciles à identifier et facilite le suivi puisque c’est ce que j’ai fait. Ces sprites doivent être placés en dehors de la mise en page afin que le joueur ne puisse pas les voir..

Vous devez également définir la taille de chacun d’eux 30,30 et leur donner à chacun un Opacité de 0. Dans la démo ci-dessus, ils ne sont que légèrement transparents parce que je voulais que vous puissiez voir ce qui se passait, mais dans le jeu réel, le joueur ne devrait pas pouvoir les voir du tout..

Enfin, sélectionnez votre réelle Bloc objet et ajouter le Drag & Drop comportement à ce.

Revenons maintenant à Feuille d'événement 1 et créer un nouveau un événement avec six actes.

Événement: Bloquer> Sur DragDrop, faites glisser le début de l'action: BlockPositions> Définir à XY X = 0 Y = 0 Valeur = Block.X Action: BlockPositions> Définir à XY X = 0 Y = 1 Valeur = Block.Y Action: BottomBlock> Définir la position X = Block.XY = Block.Y - (Block.Width + 2) Action: TopBlock> Définir la position X = Block.XY = Block.Y + (Block.Width + 2) Action: LeftBlock> Définir la position X = Block. X - (Block.Width + 2) Y = Block.Y Action: RightBlock> Positionner X = Block.X + (Block.Width + 2) Y = Block.Y

Cet événement stocke la position de départ du bloc que vous avez déplacé et déplace les carrés colorés afin qu'ils se trouvent dans les positions correctes par rapport au bloc en cours de déplacement..

Votre événement devrait ressembler à ceci:


Déterminer ce que le joueur fait

Le prochain événement que nous ajouterons effectuera le contrôle pour voir quel échange le joueur tente de faire..

Tout d'abord, l'événement sera à l'écoute lorsque le joueur lâchera le bloc qu'il déplace. Il effectuera ensuite une série de vérifications pour voir quel carré coloré, le cas échéant, entre le bloc entrent en collision, et effectuer le swap approprié ou simplement réinitialiser la position du bloc déplacé..

 Événement: Bloquer> Sur DragDrop, déposez un sous-événement: Bloc> chevauche l'action BottomBlock: BlockPositions> Définie à XY X = 1 Y = 0 Valeur = BottomBlock.X Action: BlockPositions> Définie à XY X = 1 Y = 1 Valeur = BottomBlock .Y Action: Bloquer> Définir la position X = BlockPositions.At (0,0) Y = BlockPositions.At (0,1)

Voici à quoi cela devrait ressembler:


En ce moment, le un événement ne représente que les échanges avec le Bloc en dessous de celui qui est déplacé. Pour ajouter les autres, faites un clic droit sur le sous-événement et ajoutez un Autre. Ensuite, copiez la condition du premier sous-événement dans le Else-event mais changez la cible de BottomBlock à TopBlock.

Maintenant, copiez le actes à partir du sous-événement d'origine dans l'événement Else et modifiez à nouveau les occurrences de BottomBlock à TopBlock. Faites-le deux fois de plus avec LeftBlock et RightBlock, de sorte que vous ayez au total quatre sous-événements et que la configuration de votre événement ressemble à ceci:


Enfin, ajoutez un autre événement Else:

 Sous-événement: Autre action: Bloquer> Définir la position X = BlockPositions.At (0,0) Y = BlockPositions.At (0,1)

En train d'échanger les blocs

À partir de là, nous allons implémenter le mécanisme d’échange. Pour échanger les blocs, nous allons d'abord déplacer le bloc que le joueur a déplacé hors de l'écran.

Nous faisons cela parce que nous devons localiser les blocs en fonction de leur position avant de pouvoir les manipuler - si nous commençions par placer l’un ou l’autre bloc à la position stockée de l’autre, cela placerait les deux au même endroit et les rendrait très difficiles à utiliser. séparés les uns des autres. En déplaçant le bloc vers un emplacement spécifique où aucun autre bloc ne sera inséré, nous évitons qu'un bloc ne se trouve au même emplacement qu'un autre bloc et le système ne puisse pas avoir de problème pour déterminer le bloc souhaité..

Nous allons ensuite déplacer le bloc ils ont échangé le original bloquer avec à l'emplacement du bloc d'origine. Enfin, nous déplacerons le bloc d'origine à l'emplacement du deuxième bloc hors de son emplacement et rétablirons les informations du tableau sur 0.

 Événement: Fonction> Fonction activée Nom: "SwapBlocks" Sous-événement: Condition: Bloc> Comparer XX = BlockPositions.At (0,0) Condition: Bloc> Comparer YY = BlockPositions.At (0,1) Action: Bloquer> Définir position X = -80 Y = -80 Sous-événement: Condition: Bloquer> Comparer XX = BlockPositions.At (1,0) Condition: Bloc> Comparer YY = BlockPositions.At (1,1) Action: Bloquer> Définir la position X = BlockPositions.At (0,0) Y = BlockPositions.At (0,1) Sous-événement: Condition: Bloc> Comparer XX = -80 Condition: Bloc> Comparer YY = -80 Action: Bloc> Positionner X = BlockPositions .At (1,0) Y = BlockPositions.At (1,1) Action: BlockPositions> Définie à XY X = 0 Y = 0 Valeur = 0 Action: BlockPositions> Définie à XY X = 0 Y = 1 Valeur = 0 Action : BlockPositions> Définie à XY X = 1 Y = 0 Valeur = 0 Action: BlockPositions> Définie à XY X = 1 Y = 1 Valeur = 0

Votre un événement La feuille pour cela devrait ressembler à ceci:


Maintenant, revenons aux quatre vérifications que nous avons effectuées précédemment et qui déterminaient le carré de couleur avec lequel le bloc entraîné entrait en collision et ajoutons ceci: action à la fin de la actes liste pour les quatre:

 Action: Fonction> Fonction d'appel Nom: "SwapBlocks"

S'assurer que le joueur était censé le faire

Si vous lancez le jeu maintenant, cela fonctionnera presque parfaitement. La seule chose qu'il ne fait pas encore est de vérifier si le bloc recouvre plusieurs carrés colorés. (Si c'est le cas, nous ne voulons rien qui se passe car cela signifie que le déménagement peut être une erreur.)

Actuellement, il vérifie les carrés de couleur dans l'ordre Bas, Haut, La gauche, Droite, et quoi qu'il trouve en premier, il échange avec. Pour résoudre ce problème, nous devons ajouter deux conditions inversées à chaque vérification..

Au Haut et Bas chèques, ajoutez ces conditions:

 Condition: Inverted: Block> chevauche un autre objet. Object: LeftBlock Condition: Inverted: Block> Chevauche un autre objet. Object: RightBlock

Au Droite et La gauche chèques, ajoutez ces conditions:

 Condition: Inverted: Block> chevauche un autre objet. Object: TopBlock Condition: Inverted: Block> Chevauche un autre objet. Object: BottomBlock.

Étant donné que les carrés ne mesurent que 30 x 30 pixels, il est impossible que le bloc se chevauche en même temps sur deux extrémités opposées. Ces vérifications nous permettent de nous assurer que le mouvement de traînée n'est pas trop biaisé d'un côté ou de l'autre et garantissent que le joueur a un mouvement presque tout droit. Il est donc clair que nous détectons le bon type d'échange..

Votre un événement La feuille devrait maintenant ressembler à ceci:


Et voici une démo de notre jeu dans son état actuel:

Cliquez pour charger la démo.

Conclusion

Nous avons maintenant un mécanicien d'échange entièrement fonctionnel. Dans le prochain tutoriel, nous allons mettre en place un système de détection de match fort et commencer à vraiment voir le gameplay en action.

Si vous souhaitez continuer à travailler par vous-même, vous devriez voir comment vous pouvez détecter lorsque deux blocs ont la même couleur, comment savoir s'ils sont côte à côte et s'ils forment un groupe complet. Un bon endroit pour commencer serait avec un Système> Pour chaque événement avec le Bloc objet, et effectuer une sorte de vérification sur chaque Bloc individuellement.

J'espère que vous avez apprécié ce tutoriel et que vous appréciez la série jusqu'à présent. assurez-vous de revenir bientôt pour le prochain versement.