Defining the Game's Rules

So what’s the game? You “own” the upper-left square (which is yellow in the above picture). You select a color, and the tile you “own” becomes that color. In addition, all adjacent colors that match become yours. So if you select “green”, you’d own two squares. Instead, if you selected “red”, you’d own 4 squares. The goal is to “own” the whole board (also making it all the same color) by making the fewest color changes.

Adding Buttons

Go back into the TGB Editor. Drag a red square to the side of the board.

Then click on the “1/8” to switch to the next sprite. Drag it out. Repeat this for all six colors. Arrange them within your camera’s view (the thicker gray line) like this:

Adding Attributes to the Buttons

Click on the “Edit” tab and select the red square.

Go to the “Scripting” rollout and change the values to this:

Repeat this for the other 5 Buttons. This will treat each object as the same “class” of object: a button. We’ll write one function to handle all the buttons. How do we tell the buttons apart? There is the “clever” way and the “obvious” way.

NOTE: Don’t forget to check “Use Mouse Events”!

Here’s the “obvious” way. Give each button a new dynamic field (like giving it a new variable without having to write C++ code to extend this object).

Hit the “Add”/plus button to add it.

Set the red button to have “color” set to “0”. Give the green button a “color” of “1”. Continue this for all of the colors.

(Skip this if you aren’t concerned with the “clever” way.) So what’s the “clever” way? Each of the buttons is a sprite using the image map SixColorsImageMap. Each also is assigned a frame in that image map. That data is available to us for free! I’ll show the difference in the function we write below.

Save!

Scripting the Buttons

At the bottom of game/gameScripts/game.cs add this code:

function Button::onMouseUp( %this, %modifier, %worldPosition, %clicks )
{
  %color = %this.color;
  TileBoard.setStaticTile( 0, 0, SixColorsImageMap, %color );
}

First, since all of the buttons are of type “Button”, we only need this one function. The exact button that was pressed is passed in as the “%this” parameter. The other parameters let us know if control/shift/alt were pressed, the location in the scene’s world (not the window coordinates), and how many clicks there were.

Second, since we added the dynamic variable called “color” to each button, then we can access that through “%this.color”.

Finally, we set the upper left-hand corner to this color. This is simply so we can see the code working. No point in writing a whole game without figuring out how to change the colors in the first place!

(“Clever” explanation.) So what if we didn’t set the dynamic field “color”? We could have just written the following:

function Button::onMouseUp( %this, %modifier, %worldPosition, %clicks )
{
  %color = %this.getFrame();
  TileBoard.setStaticTile( 0, 0, SixColorsImageMap, %color );
}

The button knows which frame of the sprite sheet it’s using, so we just ask it and use that. This method is slightly superior, because it keeps the frame numbers in sync between the two. In fact, the button knows which sprite sheet made it, so we could modify it to this:

function Button::onMouseUp( %this, %modifier, %worldPosition, %clicks )
{
  %color = %this.getFrame();
  %imageMap = %this.getImageMap();
  TileBoard.setStaticTile( 0, 0, %imageMap, %color );
}

You’ll find your own style with time based upon experience. Feel free to use any way here as all will work throughout this tutorial.

Run the game, click the buttons, and watch the upper left-hand corner change.

Complete!

Return to the Fill Battle Home!