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,050 visitors
3.9K page views

Rexrainbow Board series tutorial #2 Match Detection

Favourite 10 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 13.6k 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 494 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.