Tutorial Downloads

File Size


Know another language? Translate this tutorial!


1,890 visitors
6.6K page views
46 translation visitors
75 translation page views

Rexrainbow Board series tutorial #1 Board basic

Favourite 16 favourites
Tutorial written by jomoOriginally published on 24th, February 2016 - 6 revisions

Chapter 1. About Board
Rexrainbow's <Board> series plugins are perfect solutions for your grid-style games, like: monopoly, SLG, roguelike games and etc. In this tutorial we will teach you how to design a Poptile game with <Board> series plugins.
Firstly, we need to know what is <Board> plugin for and what can it do for our game. Let's take below picture as an example:

Mr. Fu and Ms. Egg are playing "blind" chess which means their eyes are all blindfolded by clothes. So they have to memorize everything on an imaginary board in their mind. The imaginary board is composed of two parts: 1st one is a arithmetic representation, which typically can be expressed by an array. The 2nd part is a geometry representation, which defines the shape of each cell and the connectivity between two cells.
In the following chapters, we will use Rexrainbow's <Board> and <Square Tx> plugin to build the imaginary board for Mr. Fu and Ms. Egg.

Chapter 2. Create a Board
Please install all Rexrainbow plugins before you move on . Now open a new project. Insert a <Board> and a <Square Tx> plugins in your project.


Choose the [Board] object and look at its parameters. In this example, we want a 10 x 7 sized board. Namely it's size in logic should be a 10 x 7 array. So let's fill the parameters as below:

This defines the geometric size of our board. Next we are going to set the parameters of [SqareTx]. We want each cell to be 64px x 64px, so set the width/height to both 64. Besides, we don't want our board to be created at layout origin position, so we give a offset (100, 32) to our board. Set the parameters of [SquareTx] like below:
Next let's add the tile image for our board. Just drag <tile.png> to your layout and C2 will create a [tile] sprite for you. Change the size of [tile] to be (64,64).

Now here comes the most important part of this chapter: we are going to create the visual part for our board corresponding to our arithmetic and geometric settings. Go to <Event sheet 1> and add below codes:
Open full size image

Event1 binds [Board] to [SquareTx], this tolds board that our board is a square board (other possible choices are HEX and Isometric). Event2 & 3 makes an embedded loop structure. In this loop we use <Board>-><Create tile> action to create board tiles. Push <F4> to run layout and you'll see you board is created.
Open full size image

Share and Copy this Tutorial

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


AbelaNET 14.5k rep

Thanks for sharing

Friday, March 25, 2016 at 10:35:27 PM
adalbertojoco 500 rep

Thanks, this is awesome.

Sunday, August 07, 2016 at 2:17:25 AM
Pooya72 933 rep

Wow, wow wow

Saturday, September 10, 2016 at 7:13:13 PM

Leave a comment

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