Tutorial Downloads

File Size


Know another language? Translate this tutorial!

Rexrainbow Board series tutorial #1 Board basic

Favourite 19 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.9k rep

Thanks for sharing

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

Thanks, this is awesome.

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

Wow, wow wow

Saturday, September 10, 2016 at 7:13:13 PM
okarowarrior 322 rep

HELP! no matter if i use the chess behavior or the "compare board.PXY2LX" my logic chess position keeps jumping very erratic. Jumps two slots or even doesnt make sense

Thursday, April 06, 2017 at 9:56:04 PM
authorities210 208 rep

how to jump horizontal side or vertical side? i try making a game similiar to game board "checkers" i want to move it with horizontal,vertical and horizontal side and vertical side at the same time... plss help

Monday, July 24, 2017 at 9:42:52 AM
authorities210 208 rep

and how to make another chess piece at the same time??? i'm still confused here

Monday, July 24, 2017 at 11:55:13 AM
ChesVCF 1,925 rep

Very cool! Nice tutorial!

Tuesday, May 01, 2018 at 7:12:10 PM

Leave a comment

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