COMPS413F Advanced Topics in Computing: Game Development on Mobile Devices
Android – Tutorial 04
Tutorial 04 – Sliding Puzzle
Reference
-
Tutorial
o OLE – Handouts
Android developers
o http://developer.android.com/reference/android/package-summary.html
Please obtain the following files
o Eclipse project file
o SlidingPuzzle.apk file (for testing purpose)
Preamble
-
In the Sliding Puzzle game, the game player needs to move the blocks to an order using
the buffer of an empty space
You can simply click on a neighboring block to move it to the empty space
When you arrange all the numbers in order, the puzzle is solved and a dialog shows the
number of moves and time you used
The following shows the graphical user interface design
o
1
COMPS413F Advanced Topics in Computing: Game Development on Mobile Devices
Android – Tutorial 04
-
After completed this tutorial, you should be able to
o Familiarize with the use of adapter view
 GridView is employed together with ArrayAdapter
 Display and view of Items of GridView is self-defined
o Use alert dialog for notification
User Interface Design
-
A GridView and a button is displayed in the form when the activity (SlidingPuzzle) is first
launched
For the GridView, totally 16 items are arranged in 2D grid (4 row * 4 columns)
o Each item represents a block to be clicked and moved by players
For the button, it is used for starting a new game
Design Structure of the Game Software
-
-
Program source
o SlidingPuzzleActivity.java
 The main Activity class, i.e., the view and controller class
 Implements the GUI and the main game logic
 The “onCreate” method for setting up the view that contains the form
 Create and initialize an ArrayAdapter object for the GridView
 Handler of both GridView and Button are also implemented in
the “onCreate” method
o PuzzleData.java
 The MODEL class that using “ArrayList” for keeping and managing the
state of the blocks
 It provides functions to
 Randomize the puzzle
 Move the blocks to the empty space
 Check whether all blocks are in order
Layout resource
o \layout\main.xml
 The main layout resource file
2
COMPS413F Advanced Topics in Computing: Game Development on Mobile Devices
Android – Tutorial 04

-
-
The blocks of the puzzle are shown using a “GridView”, with the item
view “res/layout/item_view.xml”
o \layout\item_view.xml
 Customized TextView is defined for representing each block of the
puzzle
String resource
o \values\strings.xml
 Resource file for defining different string values used in this game
 E.g., default values for colors, dimensions, and strings
Icon image
o \drawable-hdpi\ic_launcher.png
o \drawable-ldpi\ic_launcher.png
o \drawable-mdpi\ic_launcher.png
Game States
-
-
-
-
The game has two states
o GameActive
o GameComplete
o The state variable is “isComplete”
The state controls:
o The labels of the items (or blocks)
o The handling of the item/button pressed event
When isComplete is false, the state is GameActive
o Blocks of the puzzle are randomly arranged and displayed in a 4x4 container
o The player can rearranged the puzzle by moving the items until they followed
with the correct order
 i.e., 1-15 from top left to bottom right
1
2
3
4
5
6
7
8
9
10 11 12
13 14 15
o For each move, it should check if it is a valid move, as only the items connected
to the free square can be moved
When isComplete is true, the state is GameComplete
o An alert dialog is popped up for notifying the player with his/her number of
moves and time consumed
o It will return to the puzzle game when the “OK” button of the dialog is pressed
3
COMPS413F Advanced Topics in Computing: Game Development on Mobile Devices
Android – Tutorial 04
o
o
The player can play it again by pressing the “Restart” button
The game state changes to GameActive again
o
Experiment 1. Studying the Core of Game System
-
-
The two layout resource files and one string resource file used in this game are already
completed
o In the “main.xml”, for the GridView, the horizontal/vertical space between two
columns/rows are set to 5 pixels
o Each item in the GridView are “item_view”, which is defined in “item_view.xml”
 Each “item_view” contains a TextView
 The associated attributes are defined according to the values specified
in the string resource
o In the “strings.xml” file, in additional to the attribute values, there is a string
named “congratulation_msg”, one integer value and one floating point value
needed to be defined when it is used in application program, e.g.,
 getString(R.string.congratulation_msg, 312, 236.5)
The two program source “PuzzleData.java” and “SlidingPuzzleActivity.java” are partially
completed
To test the game, install the provided .apk file to the Android emulator
o Start the Android emulator with “AVD Manager”
o Open command prompt
4
COMPS413F Advanced Topics in Computing: Game Development on Mobile Devices
Android – Tutorial 04
o
o
o
Go to the “platform-tools” directory of the SDK installation path
 E.g., “C:\Users\kwtse\AppData\Local\Android\sdk\platform-tools”
Type the command “adb install SlidingPuzzle.apk”
Note:
 Reinstall the game if it already existed in the emulator
 “adb install -r SlidingPuzzle.apk”
Experiment 2. Complete the program “PuzzleData.java”
-
Task 1
o Complete the “resetDataList” method
 This method aims to reset the attribute “dataList”
 “dataList” is used to store the 16 item value in String format
 “1” to “15”, empty space (the free square)
o Hint
 It first removes all the element from “dataList”
 Method “clear” can be used
 Then insert the 16 items into “dataList”
 Method “add” can be used
 E.g.,
for (int i = 1; i < size * size; i++) {
dataList.add(String.valueOf(i));
}
dataList.add(EMPTY);
- Task 2
o Complete the “swapItem(int i, int j)”
 This method swaps two elements in the “dataList”
 The input parameters i and j represent the index of the two elements
 The index value at the top left corner is 0 while the one at the
bottom right corner is 15, e.g.,
0
4
8
12
o
Hint

1
5
9
13
2
6
10
14
3
7
11
15
Use “get” method to obtain the item value and perform the swap
String temp = dataList.get(i);
dataList.set(i, dataList.get(j));
dataList.set(j, temp);
5
COMPS413F Advanced Topics in Computing: Game Development on Mobile Devices
Android – Tutorial 04
-
Task 3
o Complete the “validOrder()” method
 This method checks if all the items in the puzzle are already arranged in
order
 Return true if the puzzle is solved
 Otherwise, return false
o Hint
 If first checks the first 15 items, i.e., "1" to "15"
 Return false once label of the item is not in order
for (int i = 0; i < dataList.size() - 1; i++) {
if (!dataList.get(i).equals(String.valueOf(i + 1)))
return false;
}
 Return false if the last element is not an empty space
if (!dataList.get(dataList.size() - 1).equals(EMPTY))
return false;
 Otherwise, all items matched with the specific order, return true
- Task 4
o Complete the method “move(int item)”
 This method tries to move the item to the free square
 The input parameter “item” represents the index of the item going to
be moved
 If it is possible to move the item (i.e., the item is connected to the free
square)
 Swap the selected item and the free square with method
“swapItem”
 Return true
 Otherwise, return false
o Hint
 There are four situations that the item can be moved
 i.e., an empty space is located at its top/bottom/left/right
position
// Check if it is a valid move
// i. Check if the empty space is on the top of the selected item
// Swap the two items
// Return true
if (item >= size && dataList.get(item - size).equals(EMPTY)) {
swapItem(item, item - size);
return true;
}
// ii. Check if the empty space is at left hand side of the selected item
6
COMPS413F Advanced Topics in Computing: Game Development on Mobile Devices
Android – Tutorial 04
// Swap the two items
// Return true
else if (item % size > 0 && dataList.get(item - 1).equals(EMPTY)) {
swapItem(item, item - 1);
return true;
}
// iii. Check if the empty space is at the right hand side of the selected item
// Swap the two items
// Return true
else if (item % size < size - 1 && dataList.get(item + 1).equals(EMPTY)) {
swapItem(item, item + 1);
return true;
}
// iv. Check if the empty space is at the bottom of the selected item
// Swap the two items
// Return true
else if (item < size * (size - 1) && dataList.get(item + size).equals(EMPTY)) {
swapItem(item, item + size);
return true;
}
Experiment 3. Complete the program “SlidingPuzzleActivity.java”
-
-
Task 1
o Complete the “resetGame” method
 This method is used to reset the game
o Hint
 It first resets the value of attribute“numMoves” to 0
 Next, assigns value “NOT_STARTED” to attribute “startTime”
 Thirdly, changes the game state to GameActive by setting
“gameComplete” to false
 Then randomizes the puzzle by invoking the "random" method with the
“PuzzleData” object “puzzleData”
 Finally, updates grid display by calling the "notifyDataSetChanged" with
the “ArrayAdapter” object “adapter”
Task 2
o Complete the “gameCompleted” method
 This method is used to display statistics after completion of game
o Hint
 Obtain the current time
 “System.currentTimeMillis()” can be used to get the current
system time (in ms)
 Evaluate the total time used for solving the puzzle
7
COMPS413F Advanced Topics in Computing: Game Development on Mobile Devices
Android – Tutorial 04
double time = (System.currentTimeMillis() - startTime) / 1000.0;
 Change the game state to GameComplete by setting "gameComplete"
to true
 Create and display an AlertDialog, the corresponding title and message
can be found in the string resource file
-
new AlertDialog.Builder(this)
.setTitle(R.string.congratulation)
.setMessage(getString(R.string.congratulation_msg, numMoves, time))
.setNeutralButton(android.R.string.ok, null)
.show();
Task 3
o Complete the handler of the GridView
 i.e., the “onItemClick(AdapterView<?> parent, View v, int position, long
id)” method
o Hint
 Terminate the method if it is in GameComplete state
 i.e., return if “gameComplete” is true
 Otherwise,
 If it is the first move
o i.e., “startTime” is equal to “NOT_STARTED”
o Assign current system time to "startTime"
 Check if it is a valid move with the “move” method of the
“PuzzleData” object, the index of the item can be obtained from
parameter “id” (i.e., (int) id)
o If it is a valid move
 Update the grid display by invoking the
"notifyDataSetChanged"
with
the
“ArrayAdapter” object “adapter”
 Increase the attribute “numMoves” by 1
 Check if the puzzle has been solved or not by
using the “validOrder” method with the
“PuzzleData” object “puzzleData”
 If puzzle is solved, calls the
"gameCompleted" method
8