PEMROGRAMAN GAME MOBILE

PEMBUATAN GAME TIC TAC TOE

Oleh :

Ranis Cinthianingrum (1104505029)








JURUSAN TEKNOLOGI INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS UDAYANA
2014
1. Jalankan file eclipse.exe yang ada di C:\Android\Eclipse. Akan muncul
splash screen aplikasi seperti berikut ini:

2. Selanjutnya akan muncul dialog box dan isi G:\Android1 atau direktori lain
yang diinginkan yang sudah berisi folder Android1 pada workspace field.
Tampilannya seperti berikut ini:

3. Setelah itu akan muncul tampilan awal aplikasi seperti berikut:


4. Pertama buatlah Android Application Project dengan cara klik File > New >
Android Application Project

5. Setelah itu muncul dialog box seperti berikut:

Isi Application Name dan Project Name dengan TicTacToe. Package
name diberi nama cynthia.ranis.TicTacToe. Tentukan juga Minimum Required
SDK yaitu API 8: Android 2.2 (Froyo), Target SDK dan Compile With API
19: Android 4.4.2 (Kitkat), serta Theme Holo Light with Dark Action Bar.
Kemudian tekan button Next.
6. Selanjutnya hilangkan centang pada Create activity sehingga tampilannya
akan menjadi seperti berikut ini:

7. Selanjutnya memilih icon untuk launcher aplikasi, tekan Finish jika sudah
selesai memilih. Berikut tampilannya:


8. Buat package baru dengan cara klik kanan pada src dari project TicTacToe
> New > Package.

9. Berikan nama pada package yang akan dibuat lalu tekan button finish
seperti gambar berikut:


10. Buatlah class baru dengan cara klik kanan package yang telah dibuat > New
> Class seperti gambar berikut:

11. Berikan nama pada java class yang baru lalu klik button Finish seperti
berikut:

12. Ketikkan kode program dibawah ini pada class TicTacToeModel.java:
package cynthia.ranis.tictactoe;

enum Piece {X,O,_};

public class TicTacToeModel {
private final int GRID_WIDTH = 3;
private final int GRID_HEIGHT = 3;

private Piece[][] board = new
Piece[GRID_WIDTH][GRID_HEIGHT];
private Piece currentPlayer = Piece.X;

public TicTacToeModel(){
reset();
}

public void reset(){
for (int i = 0; i < GRID_WIDTH; i++)
for (int j = 0; j < GRID_HEIGHT; j++)
board[i][j] = Piece._;
}

private void togglePlayer(){
if (currentPlayer == Piece.X)
currentPlayer = Piece.O;
else
currentPlayer = Piece.X;
}

public Piece getCurrentPlayer(){
return currentPlayer;
}

public void setValue(int row, int col, Piece p){
board[row][col] = p;
togglePlayer();
}

public Piece getValue(int row, int col){
return board[row][col];
}

public Piece checkWinner(){
Piece winner = Piece._;

// Check for Rows That Win
for (int i = 0; i < GRID_HEIGHT; i++)
if (winner != Piece._ && board[i][0] ==
board[i][1] && board[i][1] == board[i][2])
winner = board[i][0];

// Check for Columns That Win
for (int i = 0; i < GRID_HEIGHT; i++)
if (winner != Piece._ && board[0][i] ==
board[1][i] && board[1][i] == board[2][i])
winner = board[0][i];

// Check the Two Diagonals
if (winner != Piece._ && board[0][0] == board[1][1] &&
board[1][1] == board[2][2])
winner = board[0][0];
if (winner != Piece._ && board[0][2] == board[1][1] &&
board[1][1] == board[2][0])
winner = board[0][2];

return winner;
}
}
Berikut tampilannya:

13. Selanjutnya klik file > New > Other seperti gambar berikut:


14. Kemudian pilih Android Test Project seperti gambar berikut:

15. Berikan nama untuk Project Name kemudian klik button Next seperti
gambar berikut ini:


16. Selanjutnya pilih target yang akan di test yaitu TicTacToe lalu klik button
Finish.

17. Klik kanan project TicTacToeTest > New > JUnit Test Case seperti berikut:


18. Berikan nama TicTacToeModelTest untuk JUnit Test Case lalu klik
button Finish seperti berikut:

19. Pada dialog box yang muncul, pilih Perform the following action yang
berisi Add JUnit 4 library to the build path seperti pada gambar berikut:


20. Isikan kode program berikut pada TicTacToeModel.java:
package cynthia.ranis.tictactoe;

public class TicTacToeModel {
public enum Piece { X, O, _};
private final int GRID_WIDTH = 3;
private final int GRID_HEIGHT = 3;

private Piece[][] board = new
Piece[GRID_WIDTH][GRID_HEIGHT];
private Piece currentPlayer = Piece.X;

public TicTacToeModel(){
reset();
}

public void reset(){
for (int i = 0; i < GRID_WIDTH; i++)
for (int j = 0; j < GRID_HEIGHT; j++)
board[i][j] = Piece._;
}

private void togglePlayer(){
if (currentPlayer == Piece.X)
currentPlayer = Piece.O;
else
currentPlayer = Piece.X;
}

public Piece getCurrentPlayer(){
return currentPlayer;
}

public void setValue(int row, int col, Piece p){
board[row][col] = p;
togglePlayer();
}

public Piece getValue(int row, int col){
return board[row][col];
}

public Piece checkWinner(){
Piece winner = Piece._;

// Check for Rows That Win
for (int i = 0; i < GRID_HEIGHT; i++)
if (winner != Piece._ && board[i][0] ==
board[i][1] && board[i][1] == board[i][2])
winner = board[i][0];

// Check for Columns That Win
for (int i = 0; i < GRID_HEIGHT; i++)
if (winner != Piece._ && board[0][i] ==
board[1][i] && board[1][i] == board[2][i])
winner = board[0][i];

// Check the Two Diagonals
if (winner != Piece._ && board[0][0] == board[1][1] &&
board[1][1] == board[2][2])
winner = board[0][0];
if (winner != Piece._ && board[0][2] == board[1][1] &&
board[1][1] == board[2][0])
winner = board[0][2];

return winner;
}
}
Berikut tampilannya:

21. Isikan kode program berikut pada TicTacToeModelTest.java:
package cynthia.ranis.tictactoe.test;

import static org.junit.Assert.*;

import org.junit.Test;

import cynthia.ranis.tictactoe.TicTacToeModel;
import cynthia.ranis.tictactoe.TicTacToeModel.Piece;

public class TicTacToeModelTest {

@Test
public void testXWins() {
TicTacToeModel board = new TicTacToeModel();
board.setValue(0, 0, Piece.X);
board.setValue(0, 1, Piece.X);
board.setValue(0, 2, Piece.X);
assertEquals(board.checkWinner(), Piece.X);
}

@Test
public void testOWins() {
TicTacToeModel board = new TicTacToeModel();
board.setValue(1, 0, Piece.O);
board.setValue(1, 1, Piece.O);
board.setValue(1, 2, Piece.O);
assertEquals(board.checkWinner(), Piece.O);
}

@Test
public void testSanity() {
TicTacToeModel board = new TicTacToeModel();
board.setValue(0, 0, Piece.X);
assertEquals(board.getCurrentPlayer(), Piece.O);
}
}
Berikut tampilannya:


22. Selanjutnya klik kanan pada TicTacToeModelTest.java > Run As > 2 JUnit
Test atau tekan Alt+Shift+X, T pada keyboard seperti pada gambar berikut:

23. Centang Use configuration specific settings, pilih Eclipse JUnit Launcher
lalu tekan button OK seperti pada gambar berikut:


24. Jika sudah berhasil di-run maka test ini sudah berhasil

25. Langkah selanjutnya mengecek properties dari project TicTacToe dengan
cara klik kanan project TicTacToe > Properties atau dengan menekan
Alt+Enter pada keyboard seperti pada gambar berikut:


26. Pilih menu Android lalu tekan button Add.

27. Setelah itu pilih AndEngine lalu klik OK.


28. Buat class baru dan beri nama TicTacToeActivity lalu klik button Browse

29. Ketikkan SimpleBaseGameActivity lalu klik OK


30. Klik button Add pada sub menu interface kemudian ketikkan OnClick dan
pilih opsi yang paling bawah atau yang ketiga lalu klik OK dan Finish

31. Kemudian buatlah java class dengan nama TicTacToeActivity seperti
gambar dibawah ini:

32. Isikan kode program berikut dalam java class TicTacToeActivity:
package cynthia.ranis.tictactoe;
import org.andengine.engine.camera.Camera;
import org.andengine.engine.options.EngineOptions;
import org.andengine.engine.options.ScreenOrientation;
import
org.andengine.engine.options.resolutionpolicy.RatioResolutionPolic
y;
import org.andengine.entity.primitive.Line;
import org.andengine.entity.scene.Scene;
import org.andengine.entity.sprite.ButtonSprite;
import org.andengine.entity.sprite.ButtonSprite.OnClickListener;
import
org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlas;
import
org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlasTextur
eRegionFactory;
import
org.andengine.opengl.texture.atlas.bitmap.BuildableBitmapTextureAt
las;
import
org.andengine.opengl.texture.atlas.bitmap.source.IBitmapTextureAtl
asSource;
import
org.andengine.opengl.texture.atlas.buildable.builder.BlackPawnText
ureAtlasBuilder;
import
org.andengine.opengl.texture.atlas.buildable.builder.ITextureAtlas
Builder.TextureAtlasBuilderException;
import org.andengine.opengl.texture.region.ITextureRegion;
import org.andengine.opengl.vbo.VertexBufferObjectManager;
import org.andengine.ui.activity.SimpleBaseGameActivity;
import org.andengine.util.debug.Debug;


public class TicTacToeActivity extends SimpleBaseGameActivity
implements
OnClickListener {

final private int CAMERA_WIDTH = 480;
final private int CAMERA_HEIGHT = 480;

final private int GRID_WIDTH = 3;
final private int GRID_HEIGHT = 3;

final private int STROKE_WIDTH = 4;

private BuildableBitmapTextureAtlas mBitmapTextureAtlas;
private ITextureRegion mBlankTextureRegion;
private ITextureRegion mXTextureRegion;
private ITextureRegion mOTextureRegion;

private ButtonSprite[][]gridSprite = new
ButtonSprite[GRID_WIDTH][GRID_HEIGHT];

@Override
public EngineOptions onCreateEngineOptions() {
final Camera camera = new Camera(0, 0, CAMERA_WIDTH,
CAMERA_HEIGHT);

return new EngineOptions(true,
ScreenOrientation.PORTRAIT_FIXED, new
RatioResolutionPolicy(CAMERA_WIDTH, CAMERA_HEIGHT), camera);
}

@Override
public void onClick(ButtonSprite pButtonSprite, float
pTouchAreaLocalX,
float pTouchAreaLocalY) {
// TODO Auto-generated method stub

}

@Override
protected void onCreateResources() {
// TODO Auto-generated method stub

BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx
/");

this.mBitmapTextureAtlas = new
BuildableBitmapTextureAtlas(this.getTextureManager(), 128, 128);
this.mBlankTextureRegion =
BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mBitma
pTextureAtlas, this, "blankIcon.png");
this.mXTextureRegion =
BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mBitma
pTextureAtlas, this, "xIcon.png");
this.mOTextureRegion =
BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mBitma
pTextureAtlas, this, "oIcon.png");

try {
this.mBitmapTextureAtlas.build(new
BlackPawnTextureAtlasBuilder<IBitmapTextureAtlasSource,
BitmapTextureAtlas>(0, 0, 0));
this.mBitmapTextureAtlas.load();
} catch (TextureAtlasBuilderException e) {
Debug.e(e);
}
}

@Override
protected Scene onCreateScene() {
// TODO Auto-generated method stub
final Scene scene = new Scene();

final VertexBufferObjectManager VBOManager =
this.getVertexBufferObjectManager();

float lineX[] = new float[GRID_WIDTH];
float lineY[] = new float[GRID_HEIGHT];

float touchX[] = new float[GRID_WIDTH];
float touchY[] = new float[GRID_HEIGHT];

float midTouchX = CAMERA_WIDTH / GRID_WIDTH / 2;
float midTouchY = CAMERA_HEIGHT / GRID_HEIGHT / 2;

float halfTouchX = mBlankTextureRegion.getWidth() / 2;
float halfTouchY = mBlankTextureRegion.getHeight() /
2;

float paddingX = midTouchX - halfTouchX;
float paddingY = midTouchY - halfTouchY;

for (int i = 0; i < GRID_WIDTH; i++){
lineX[i] = CAMERA_WIDTH / GRID_WIDTH * i;
touchX[i] = lineX[i] + paddingX;
}
for (int i = 0; i < GRID_HEIGHT; i++){
lineY[i] = CAMERA_HEIGHT / GRID_HEIGHT * i;
touchY[i] = lineY[i] + paddingY;
}

// Draw The Grid Lines
for (int i = 1; i < GRID_WIDTH; i++) {
final Line line = new Line(lineX[i], 0,
lineX[i], CAMERA_HEIGHT, STROKE_WIDTH, VBOManager);
scene.attachChild(line);
}
for (int i = 1; i < GRID_HEIGHT; i++) {
final Line line = new Line(0, lineY[i],
CAMERA_WIDTH, lineY[i], STROKE_WIDTH, VBOManager);
scene.attachChild(line);
}

// Lay Out The ButonSprites
for (int i = 0; i < GRID_WIDTH; i++)
for (int j = 0; j < GRID_HEIGHT; j++){
final ButtonSprite button = new
ButtonSprite(touchX[1],
touchY[0], this.mBlankTextureRegion,
this.mXTextureRegion,
this.mOTextureRegion, VBOManager,
this);
scene.registerTouchArea(button);
scene.attachChild(button);
gridSprite[i][j] = button;
}
return scene;
}

public int getCAMERA_WIDTH() {
return CAMERA_WIDTH;
}
public int getCAMERA_HEIGHT() {
return CAMERA_HEIGHT;
}

public int getGRID_WIDTH() {
return GRID_WIDTH;
}

public int getGRID_HEIGHT() {
return GRID_HEIGHT;
}
}

Berikut tampilan gambar java class TicTacToeActivity:

33. Pilih AndroidManifest.xml pada project TicTacToe di package explorer.
Pilih menu application seperti gambar dibawah ini:


34. Pada Application Nodes tekan butoon Add seperti gambar dibawah ini:

35. Kemudian pilih Activity dan tekan button OK


36. Kemudian pilih item TicTacToeActivity cynthia.ranis.tictactoe lalu kiln
button OK

37. Pada Application Nodes, klik kanan java class Activity lalu klik Add..


38. Pilih Intent Filter lalu klik OK

39. Pada Application Nodes, klik kanan Intent Filter di dalam java class
Activity lalu klik Add..


40. Pilih Action lalu klik OK

41. Pada Attributes for Action pilih android.intent.action.MAIN


42. Pada Application Nodes, klik kanan Intent Filter di dalam java class
Activity lalu klik Add > Category > OK

43. Pada Attributes for Action pilih android.intent.category.LAUNCHER.
Kemudian tekan Ctrl+S untuk menyimpan pengaturan pada
AndroidManifest.xml.


44. Run dengan Android Device Simulator seperti berikut ini:

45. Berikut tampilan awal game sederhana Tic Tac Toe:


46. Jika player 2 menang maka akan muncul tampilan seperti berikut:

47. Jika game berakhir seri, maka akan muncul tampilan seperti berikut:


48. Berikut revisi kode program pada TicTacToeActivity.java:
package cynthia.ranis.tictactoe;

import org.andengine.engine.camera.Camera;
import org.andengine.engine.options.EngineOptions;
import org.andengine.engine.options.ScreenOrientation;
import
org.andengine.engine.options.resolutionpolicy.RatioResolutionPolic
y;
import org.andengine.entity.primitive.Line;
import org.andengine.entity.scene.Scene;
import org.andengine.entity.scene.background.Background;
import org.andengine.entity.sprite.ButtonSprite;
import org.andengine.entity.sprite.ButtonSprite.OnClickListener;
import
org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlas;
import
org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlasTextur
eRegionFactory;
import
org.andengine.opengl.texture.atlas.bitmap.BuildableBitmapTextureAt
las;
import
org.andengine.opengl.texture.atlas.bitmap.source.IBitmapTextureAtl
asSource;
import
org.andengine.opengl.texture.atlas.buildable.builder.BlackPawnText
ureAtlasBuilder;
import
org.andengine.opengl.texture.atlas.buildable.builder.ITextureAtlas
Builder.TextureAtlasBuilderException;
import org.andengine.opengl.texture.region.ITextureRegion;
import org.andengine.opengl.vbo.VertexBufferObjectManager;
import org.andengine.ui.activity.SimpleBaseGameActivity;
import org.andengine.util.debug.Debug;

import cynthia.ranis.tictactoe.TicTacToeModel.Piece;

import android.app.AlertDialog;

public class TicTacToeActivity extends SimpleBaseGameActivity
implements
OnClickListener {
final private int CAMERA_WIDTH = 480;
final private int CAMERA_HEIGHT = 480;

final private int GRID_WIDTH = 3;
final private int GRID_HEIGHT = 3;

final private int STROKE_WIDTH = 4;

private BuildableBitmapTextureAtlas mBitmapTextureAtlas;
private ITextureRegion mBlankTextureRegion;
private ITextureRegion mXTextureRegion;
private ITextureRegion mOTextureRegion;

private ButtonSprite[][] gridSprite = new
ButtonSprite[GRID_WIDTH][GRID_HEIGHT];

private TicTacToeModel board = new TicTacToeModel();
private Piece currentPlayer = board.getCurrentPlayer();

@Override
public EngineOptions onCreateEngineOptions() {
final Camera camera = new Camera(0, 0, CAMERA_WIDTH,
CAMERA_HEIGHT);

return new EngineOptions(true,
ScreenOrientation.PORTRAIT_FIXED, new
RatioResolutionPolicy(CAMERA_WIDTH, CAMERA_HEIGHT), camera);
}

@Override
public void onClick(final ButtonSprite pButtonSprite, float
pTouchAreaLocalX,
float pTouchAreaLocalY) {
runOnUiThread(new Runnable() {
@Override
public void run() {
//button pressed
float x = pButtonSprite.getX();
float y = pButtonSprite.getY();

int gridX = (int)Math.floor(x /
CAMERA_WIDTH * GRID_WIDTH);
int gridY = (int)Math.floor(y /
CAMERA_HEIGHT * GRID_HEIGHT);

if(gridSprite[gridX][gridY] ==
pButtonSprite &&
currentPlayer ==
board.getCurrentPlayer()){
//update model
board.setValue(gridX, gridY,
currentPlayer);

//disable button
pButtonSprite.setEnabled(false);

if(currentPlayer == Piece.X){
//rubah sprite menjadi x
pButtonSprite.setCurrentTileIndex(1);
}
else{
//rubah sprite menjadi o

pButtonSprite.setCurrentTileIndex(2);
}

//cek winner
Piece winner = board.checkWinner();
if(winner != Piece._){
//pop up
AlertDialog.Builder ADBuilder
= new AlertDialog.Builder(TicTacToeActivity.this);
ADBuilder.setMessage(winner +
"wins!!").show();

reset();
board.reset();
}
currentPlayer =
board.getCurrentPlayer();
}

}
});

}

private void reset(){
for(int i = 0; i < GRID_WIDTH; i++)
for(int j = 0; j < GRID_HEIGHT; j++){
gridSprite[i][j].setEnabled(true);
gridSprite[i][j].setCurrentTileIndex(0);
}
}

@Override
protected void onCreateResources() {

BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx
/");

this.mBitmapTextureAtlas = new
BuildableBitmapTextureAtlas(this.getTextureManager(), 512, 512);
this.mBlankTextureRegion =
BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mBitma
pTextureAtlas, this, "blankIcon.png");
this.mXTextureRegion =
BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mBitma
pTextureAtlas, this, "xIcon.png");
this.mOTextureRegion =
BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mBitma
pTextureAtlas, this, "oIcon.png");
try {
this.mBitmapTextureAtlas.build(new
BlackPawnTextureAtlasBuilder<IBitmapTextureAtlasSource,
BitmapTextureAtlas>(0, 0, 0));
this.mBitmapTextureAtlas.load();
} catch (TextureAtlasBuilderException e) {
Debug.e(e);
}

}

@Override
protected Scene onCreateScene() {
final Scene scene = new Scene();

final VertexBufferObjectManager VBOManager =
this.getVertexBufferObjectManager();

float lineX[] = new float[GRID_WIDTH];
float lineY[] = new float[GRID_HEIGHT];

float touchX[] = new float[GRID_WIDTH];
float touchY[] = new float[GRID_HEIGHT];

float midTouchX = CAMERA_WIDTH / GRID_WIDTH / 2;
float midTouchY = CAMERA_HEIGHT / GRID_HEIGHT / 2;

float halfTouchX = mBlankTextureRegion.getWidth() / 2;
float halfTouchY = mBlankTextureRegion.getHeight() /
2;

float paddingX = midTouchX - halfTouchX;
float paddingY = midTouchY - halfTouchY;

for(int i = 0; i < GRID_WIDTH; i++){
lineX[i] = CAMERA_WIDTH / GRID_WIDTH * i;
touchX[i] = lineX[i] + paddingX;
}
for(int i = 0; i < GRID_HEIGHT; i++){
lineY[i] = CAMERA_HEIGHT / GRID_HEIGHT * i;
touchY[i] = lineY[i] + paddingY;
}

scene.setBackground(new Background(0.85f, 0.85f,
0.85f));

//draw grid line
for(int i = 1; i < GRID_WIDTH; i++){
final Line line = new Line(lineX[i], 0,
lineX[i], CAMERA_HEIGHT, STROKE_WIDTH, VBOManager);
line.setColor(0.15f, 0.15f, 0.15f);
scene.attachChild(line);
}
for(int i = 1; i < GRID_HEIGHT; i++){
final Line line = new Line(0, lineY[i],
CAMERA_WIDTH, lineY[i], STROKE_WIDTH, VBOManager);
line.setColor(0.15f, 0.15f, 0.15f);
scene.attachChild(line);
}

//button sprite
for(int i = 0; i < GRID_WIDTH; i++)
for(int j = 0; j < GRID_HEIGHT; j++){
final ButtonSprite button = new
ButtonSprite(touchX[i], touchY[j], this.mBlankTextureRegion,
this.mXTextureRegion, this.mOTextureRegion, VBOManager, this);
scene.registerTouchArea(button);
scene.attachChild(button);
gridSprite[i][j] = button;
}
scene.setTouchAreaBindingOnActionDownEnabled(true);

return scene;
}

}