Game 3-5-7 - A Simple Interface

This tutorial introduces you to the game of 3-5-7 and shows you how to build a simple user interface that is the basis for the game.

Introduction

3-5-7 is a two player game that consists of three rows of buttons or tiles. The first row has three buttons, the second row has five buttons and the third row has seven buttons. The objective of the game is for the winning person to remove the last buttons from the game board. The only rule to be observed is that a user may remove as many tiles from a single row has they like, when it is their turn.

The graphical user interface for this game is simple and requires placing three rows of buttons onto a LiveCode card. A button to reset the tiles is also added.

Creating the Card

When you open LiveCode for the first time, you should be presented with a display that may look something like the one shown here. You have two panels with controls and buttons and a stack on which you can create the game. If you do not have a blank stack on your screen, then you can create one by selecting: File -> New Mainstack.

Next ensure that the Edit (pointer) tool is selected. That is the black arrow with the cross next to it. You use the Edit (pointer) tool to manipulate the content on a card, for example if you want to drag and drop buttons. The Run (browse) tool, the white arrow, is used for running the application you have created.

Dragging the Game Buttons

Dragging the Game Buttons

In Edit (pointer) mode, select a Push Button icon from the left panel and drag it onto your card. You have to repeat this step 15 times, creating three distinct rows of buttons. The first row has three buttons, the second row has five buttons and the third row has seven buttons. It does not matter if the buttons overlap at the moment as we are going to resize them and align them. It does matter that the buttons are separated into three lines.

Resizing the Game Buttons

Resizing the Game Buttons

Right-Click on the background of the card and select the Card Property Inspector. This opens a dialog window with which you can alter properties of items on the card. Then select all of the buttons on the screen. You can do this by moving the mouse to the top left region of the card, pressing and holding the left most button down, and then dragging the mouse to the bottom right hand side of the card. This creates a selection rectangle that surrounds all of the buttons on the card. Notice how this creates little squares around the borders of all the buttons. This indicates that all of the buttons have been selected. Now select Size & Position from the drop down list in the Card Property Inspector. Change the width and height of the buttons to 40, as is indicated in the figure of this step. Notice how the buttons do not appear quite as cluttered as they did in the image from the previous step.

Aligning the Game Buttons

Aligning the Game Buttons

Once the buttons have been resized, you can position the buttons for the game play. You can do this manually or allow LiveCode to help you distribute the buttons for you. Select a row of buttons at a time, using the method described in the previous step. This time you have to create the selection rectangle around the buttons of each line. Then select the Align Options in the Card Property Inspector (1). This allows you to align buttons across the card. First press the horizontal Distribute button and select Across Card from the drop down list (2). This spaces the buttons across the card. Then select the Align Objects Middle button to align the buttons horizontally (3). Repeat this step for each line of buttons.

Naming the Game Buttons

Naming the Game Buttons

Now that the buttons are aligned, it is necessary to name them in such a fashion that they can be identified as game buttons with information regarding the line they are on. Select one button at a time and ensure that the Card Property Inspector shows Basic Property in the drop down list (1). Then name each button in turn Btn X Y, where X specifies the number of the button on a line and Y specifies the line on which the button is placed (2). Then ensure that the buttons you named do not display their name. You hide the name by unticking the selection box Show name (3).

Adding the Reset Button

Adding the Reset Button

The last step in creating the user interface is to add a Reset button. You can place this where you would like and resize it to the dimension of your preference. Use the Card Property Inspector to change the name of the button to Reset.

Further Reading

This tutorial provides you with a game interface that you can use to play the game of 3-5-7. No functionality is currently associated with the buttons. Simple button operations are added in the next tutorial: Game 3-5-7 - Basic Functionality.

0 Comments

Add your comment

E-Mail me when someone replies to this comment