Faire un match-3 dans Construct 2 Les bases

Bienvenue dans une nouvelle série de didacticiels dans lesquels je vais vous montrer comment construire un jeu de puzzle en Match 3, à partir de zéro, dans Construct 2. Dans cette première partie, nous allons jeter les bases du jeu et obtenir la grille de base. À l'écran.

introduction

Un match 3 est un casse-tête basé sur des blocs dans lequel vous déplacez des blocs dans la zone de jeu pour créer des groupes de trois ou plus partageant un attribut commun (une couleur ou une forme, par exemple). Dans la plupart des matchs de match-3, le joueur reçoit également des bonus pour l'appariement de plus de trois blocs à la fois..

La plupart des jeux de réflexion sont des jeux de type compétition et le but du joueur est généralement d'obtenir le meilleur score possible avant que son temps ne soit écoulé, ou que toute autre condition de perte soit remplie. Pokemon Puzzle League, Bejeweled et le récent hit Candy Crush Saga sont des exemples de matchs de match-3..

Le jeu que nous allons faire

J'ai décidé de baser le jeu de match 3 que nous allons faire sur Pokemon Puzzle League:

Cliquez et faites glisser les blocs adjacents pour les échanger. Essayez de faire correspondre trois dans une ligne ou une colonne. Ne laissez pas les blocs atteindre le sommet!

Si vous ne l'avez jamais joué auparavant, PPL est un match-3 assez simple dans lequel les blocs s'élèvent au bas de l'écran de jeu et le joueur doit créer des matches pour empêcher l'écran de jeu de se remplir. Si les blocs atteignent le sommet, le joueur perd et est obligé de tout recommencer.

Voici une démo du jeu sur lequel nous allons travailler tout au long de la série:

Dans ce premier article, nous allons nous concentrer sur les bases de notre jeu. Cet article se concentrera spécifiquement sur la mise en place du projet et sur la création d'une grille de blocs aléatoires pour le joueur..

Avant que nous commencions

Avant de commencer avec ce tutoriel, vous devez vous assurer d’installer la dernière version de Construct 2 (C2). Quand j'ai construit la version originale du jeu, j'utilisais la version 122, donc tant que vous avez une version plus récente, ça devrait aller. De plus, si vous n’avez jamais utilisé C2 auparavant, vous devriez consulter ce guide qui détaille les bases de l’utilisation de C2 et explique comment créer la plupart des types d’objets..

Vous devez également télécharger le package graphique que j'ai créé pour ce tutoriel. Bien que vous puissiez bien entendu utiliser les graphiques de votre choix, je vais vous donner un positionnement spécifique pour de nombreux éléments de ces tutoriels, et ces positions sont basées sur les images que j'ai utilisées. Si vous utilisez d'autres graphiques, vous devrez tenir compte de toute différence de taille entre ces graphiques lorsque vous suivez ces tutoriels..

Une fois que vous avez tout configuré et que vous avez une bonne compréhension de C2, continuez à lire!

Mise en place du projet

Avant de réellement construire tout le gameplay, nous devons configurer le projet lui-même. Chargez C2 et suivez ces étapes:

Commencer un nouveau projet.
dans le Propriétés du projet, définir la taille de la fenêtre sur 600x600.
Remplissez le prénom et Auteur des champs.
Aller au Couches panneau et ajouter deux nouvelles couches.
Renommez le calque le plus bas en Contexte, la couche intermédiaire à Des blocs, et la couche supérieure à Terrain de jeu.
Entrer dans Disposition 1 et insérer un Fond carrelé objet.
1. Pour le Fond carrelé objet, utilisation BG Images / StandardBGTile.bmp du pack graphique.
2. Aller aux propriétés de l'objet et le renommer GameBG.
3. Définir l'objet Couche à Contexte.
4. Définir l'objet Taille être 650, 650.
5. Positionnez l'objet de sorte qu'il remplisse toute la zone visible de la présentation et ressemble à ceci:
Maintenant, créez un autre Fond carrelé objet.
1. Utilisez l'image Images du terrain de jeu / GameFieldBorder.bmp.
2. Nommez l'objet GameFieldBorder.
3. Met le Position à 9, -12.
4. Met le Taille à 16, 732.
5. Met le Couche à Terrain de jeu.
Créer une copie du GameFieldBorder objet.
1. Met le Position de la copie à 368, -12 .
Ensuite, créez un Lutin objet.
1. Utilisez l'image Jeu de terrain Images / GameFieldBottom.png.
2. Nomme le GameFieldBottom.
3. Met le Position à 197, 625.
4. Met le Taille à 344, 150.
5. Met le Couche à Terrain de jeu.
Faites une copie du GameFieldBottom objet.
1. Met le Position à 196, -30.
2. Met le Angle à 180.

La dernière chose à faire est de créer un fond pour la zone dans laquelle les blocs apparaîtront..

Créer un nouveau Lutin objet.
1. Aller au Pipette à couleurs et mettre le rouge, vert, et Bleu à 0, et le Alpha à 200.
2. Utilisez le Seau de peinture remplir toute l'image avec cette couleur.
3. Fermer l'éditeur d'animation.
4. Met le Taille à 359, 570.
5. Met le Position à 195 294.
6. Met le Couche à Contexte

Le champ de jeu est maintenant terminé, mais nous devons toujours créer un Sprite pouvant être utilisé pour les blocs..

Faire un nouveau Lutin objet.
1. Avec l'éditeur d'animation ouvert, cliquez avec le bouton droit de la souris sur Images d'animation fenêtre et choisissez "Importer des cadres… ".
2. Sélectionnez chaque image dans le Des blocs dossier du pack graphique, et les importer tous.
3. Supprimer le cadre 0, de sorte que l'image du bloc gris soit le cadre 0 et qu'il n'y ait pas de cadre vierge.
4. Vérifiez que vos cadres sont dans le même ordre que mes blocs dans l'image ci-dessous:

Avant de poursuivre, j'aimerais expliquer les images en bloc. Le bloc gris est là pour représenter un bloc "inactif", qui sera implémenté dans un prochain tutoriel. Les images restantes sont regroupées en ensembles de trois pour chaque bloc: la première image correspond au bloc non utilisé, la seconde au lecteur en train de le manipuler et la troisième au bloc correspondant. groupe.

Enfin, prenez le bloc que nous avons créé et placez-le quelque part dans la disposition afin d'empêcher le joueur de le voir pendant une partie réelle. Définissez également la taille du bloc sur 40, 40.

Nous avons maintenant apporté toutes les images dont nous avons besoin pour cet article et pouvons continuer à faire fonctionner le jeu..

Génération d'une grille de bloc aléatoire

Dans la version finale du jeu, les blocs bougeront à tout moment, et de nouveaux blocs pousseront sur l'écran à partir du bas. Pour le moment, cependant, nous devons faire fonctionner les mécanismes de base, nous allons donc créer une grille de blocs 8x8 et en rester là..

Aller à Feuille d'événement 1 et ajoutez ces variables globales pour définir la position initiale de génération des blocs:

 Variable globale: SPAWNX Valeur = 49 Constante = Vrai Variable globale: SPAWNY Valeur = 526 Constante = Vrai

Nous devons également faire autre chose avant de créer le premier événement: nous devons créer une variable d'instance pour le bloc qui indique au bloc sa couleur..

Créez une nouvelle variable d'instance pour l'objet Block, nommez-la Couleur et ne changez aucun autre paramètre.

Maintenant, nous allons faire notre premier événement. Le but de cet événement est de créer une grille statique de blocs à des fins de test:

 Evénement: Condition: Système> Au début de la présentation Condition: Système> Pour Nom: "Y" Index de début = 0 Index de fin = 7 Sous-événement: Système> Pour Nom: "X" Index de début = 0 Index de fin = 7 Action: Système> Créer un objet Objet: Bloc X = (SPAWNX + (loopIndex ("X")) * * (Block.Width + 2)) Y = (SPAWNY - (loopIndex ("Y")) * (Block.Width + 2) )

Ces deux formules disent essentiellement la même chose. Tout d'abord, nous ajoutons 2 à la largeur du bloc afin que chaque bloc dispose d'un tampon 2px entre lui et ses voisins afin d'éviter les faux positifs lors de l'utilisation de la détection de collision. Ensuite, nous multiplions ce nombre par l'index actuel de la boucle for et ajoutons ce chiffre à la position X ou Y de départ. De plus, nous soustrayons de la valeur Y car, en C2, le point 0 de l’axe Y se situe en haut de l’écran de jeu. Ainsi, en diminuant la valeur de la position Y, nous rapprochons un objet du haut de l’écran..

Alors qu'est-ce que cela accomplit? Cela signifie que lorsque les boucles X et Y itèrent et que les valeurs de X et Y augmentent, la position dans laquelle chaque bloc est modifié va changer, ce qui aboutira éventuellement à une grille carrée:

Si vous lancez le jeu à ce stade, vous aurez une grille de blocs - mais, au lieu d'être de couleurs différentes, ils feront tous défiler successivement chaque image de bloc.

Pour résoudre ce problème, nous devons faire deux choses.

Premièrement, nous devons attribuer à chaque bloc une valeur de couleur à l'aide de la variable d'instance créée précédemment. Pour ce faire, ajoutez une autre action:

 Action: Bloquer> Valeur de réglage Couleur = étage (Aléatoire (1,7))

Ceci assignera au bloc une valeur de couleur aléatoire de 1 à 6. (La raison pour laquelle ce n'est pas de 1 à 7 est expliquée dans l'explication de la au hasard une fonction.)

Votre fonction devrait maintenant ressembler à ceci:

Nous devons également ajouter un système qui modifie l'image d'un bloc en fonction de sa valeur. Pour ce faire, commencez par ajouter une nouvelle variable d'instance à l'objet Block:

 Variable d'instance pour le nom du bloc: "IsMatched" Type: Boolean valeur initiale = false

Maintenant, ajoutez un nouvel événement:

 Evénement: Système> Chaque tick Action: Bloquer> Définir la valeur d'image = (Block.Color-1) * 3 + 1

Cette formule soustrait d'abord 1 de la valeur de couleur du bloc pour tenir compte du fait que les valeurs commencent à 1 au lieu de 0. Elle multiplie ensuite ce nombre par 3 pour tenir compte du fait que chaque bloc a 3 images d'animation. Enfin, il ajoute 1 à cette valeur car l'image standard d'un bloc est la première image de l'ensemble des images..

Regardons un exemple rapide avec un bloc ayant une valeur de couleur de 4, pour voir quelle image d'animation il utilisera. Il soustrait d'abord 1 de la valeur de couleur pour obtenir 3. Ensuite, il multiplie ce nombre par 3 pour obtenir 9. Enfin, il ajoute 1 à cette valeur pour en faire 10. Cela signifie qu'un bloc avec une valeur de couleur de 4 utilisera l'image 10 comme son cadre d'animation par défaut, et sera un bloc violet / carré.

Si vous lancez votre jeu maintenant, vous verrez que chaque bloc est d'une couleur différente, mais nous n'avons toujours pas implémenté d'animations lorsque votre souris survole le bloc ou lorsqu'elle est appariée. Ceci sera traité dans le prochain tutoriel, avec la façon d’échanger deux blocs voisins..

Voici une petite démo de ce à quoi le jeu devrait ressembler à ce stade (prenez la source ici):

Cliquez pour charger la démo.

Si vous souhaitez continuer à travailler seul, commencez à modifier le cadre d'animation du bloc en fonction d'un événement "La souris> l'objet est survolé du curseur". Vous pouvez également commencer à utiliser le comportement "glisser-déposer" pour manipuler le bloc et à déterminer comment déterminer ce que le joueur essaie de faire avec le bloc lorsqu'il commence à le faire glisser ou à le laisser tomber..

Conclusion

Merci d'avoir lu cette partie du didacticiel, où nous avons défini les bases du jeu de Match-3. Revenez bientôt pour la prochaine partie de la série! Vous pouvez vous tenir au courant via Facebook, Twitter, Google+, RSS ou par e-mail..

Développement de jeu