Tutorial Downloads

File Size
chess.png12KB
green.png13KB
red.png13KB
tile.png12KB
yellow.png13KB
board2.capx235KB

Translations

Know another language? Translate this tutorial!

Stats

1,705 visitors
5.8K page views
91 translation visitors
176 translation page views

Rexrainbow Board series tutorial #2 Match Detection

Favourite 12 favourites
Tutorial written by jomoOriginally published on 25th, February 2016 - 3 revisions

Chapter 1. Prepare a New Project
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
There are a lot of people asking about "how to make a match-3 game?". Now Rexrainbow <Board> series plugins are the perfect solution for this question. In this tutorial, we will teach you how to detect matched chess in line and in L-shape. And you'll find the power of <Board> series plugins.
Before we start the core lessons, we need a new project. We've done this in last tutorial so now you should be familiar with this. Create a bland project and set its Window size to (480,854). This time we need a portrait window.

Drag <tile.png> into project. This creates a [tile] object which we will take it as the tile for our board. Set its (w, h) to (64, 64).



Drag <chess.png> into project. This creates a [chess] object which we will take it as the chess for our board. Set it (w, h) to (64, 64), too.
Open full size image

Double click on [chess] object to edit its image. Rename its animation name to "blue". Add 3 new animations and name them: green, red, yellow. Load corresponding assets into these animations.
Open full size image

Add a <Flash> behavior for [chess]. Later we'll need this behavior to indicate which chess are matched.
Open full size image


Back to <Layout 1>, add 4 Rexrainbow plugins: <Board>, <SquareTx>, <InstGroup>, and <Matcher>.
Set [Board] parameters. We need a 7 x 12 board.
Set [SquareTx] parameters.
Change to <Event sheet 1> and start to code:
Open full size image

You can see that comparing to last tutorial, we introduced some new instructions here:
In Event#1, we use <Board>-><Fill tiles> actions to fill tile on every grid. This is realy handy.
In Event#2, we use <Board>-><For each cell> condition as an iterator and set direction parameter to <Top to bottom>. This make the interator sweep from top to bottom in row, and left to right in column. In each loop we create a chess at (x, y, z) = (Board.CurLX, Board.CurLX, 1). And we use choose() expression to randomly choose one animation for us.
Push <F4> to run layout, you'll get a beatiful board like below:
As you can see, there are several sets of pattern which would be considered "matched" in a match-3 game. In next chapter, we will teach you how to detect these patterns by <Matcher> plugin.

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

0
AbelaNET 14.7k rep

Thanks for sharing

Friday, March 25, 2016 at 10:42:04 PM
0
miketolsa 3,051 rep

Well written & details tutorial ...........

Thanks for sharing this awesome tutorial, would help me a lot !!!

Saturday, May 14, 2016 at 6:58:01 AM
0
Devilish 352 rep

Thank you!

Thursday, June 16, 2016 at 2:39:55 PM
0
qzflying 644 rep

I finished it, Thank you, Mr Fu!

Thursday, August 04, 2016 at 10:22:08 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.