Collision Detection

1. J2ME
Mobile games

2. การตรวจพบการกระทบกัน
(Collision Detection)
เป็นวิธีการตรวจสอบว่า สไปรต์ (Sprite) เคลื่อนที่
กระทบกับ สไปรต์ (Sprite) ตัวอื่นหรือไม่
มีประโยชน์มากในการนำาไปใช้กับภาพเคลื่อนไหว
ของเกมส์ แต่ละสไปรต์ (Sprite) จะมีขอบเขตเป็น
สีเหลี่ยมมุมฉาก บางส่วนของภาพจะโปร่งแสง
่
เมื่อเคลื่อนที่กระทบกันจะทำาให้มุมของสีเหลี่ยม
่
มุมฉากเหลื่อมลำำากัน ทำาให้ตรวจพบได้ทันทีว่ามี
การกระทบกัน

3. Collision Detection
( ง Work space ชื่อ Sprite)
 สร้าSprite Vs Collision
 สร้าง J2ME Class ชือ
่
SpriteCollideMIDlet.java
 สร้าง GameCanvas โดยให้แสดง sprite สอง
ตัว
 หาก sprite ชน อีกตัว ให้หยุดเดิน

4. SpriteCollideMIDlet.java
import java.io.IOException;
import javax.microedition.lcdui.*;
import javax.microedition.lcdui.game.*;
import javax.microedition.midlet.*;
public class SpriteCollideMIDlet extends MIDlet {
SpriteCollideCanvas canvas = new SpriteCollideCanvas();
public SpriteCollideMIDlet() {}
protected void destroyApp(boolean arg0) throws
MIDletStateChangeException {}
protected void pauseApp() {}
protected void startApp() throws MIDletStateChangeException
{
Display display = Display.getDisplay(this);
canvas.start();
display.setCurrent(canvas);
}
}

5. class SpriteCollideCanvas extends GameCanvas implements Runnable {
static int FRONT_DIRECTION = 0;
static int LEFT_DIRECTION = 1;
static int RIGHT_DIRECTION = 2;
static int BACK_DIRECTION = 3;
Sprite hero,hero2;
boolean running;
int[][] sequence = {{0,1,2,3}, //front
{4,5,6,7}, //left
{8,9,10,11}, //right
{12,13,14,15}}; //back
int s2[] ={8,9,10,11};
int w, h;
Image img_bg = null;
int cx,cy,cx2,cy2;
int currentDirection = FRONT_DIRECTION;

6. protected SpriteCollideCanvas() {
super(true);
Image im = null, hm2 = null;
try {
im = Image.createImage("/sprites/c1.png");
hm2 = Image.createImage("/sprites/c4.png");
img_bg = Image.createImage("/world/roundedbg.png");
} catch (IOException e) {}
hero = new Sprite(im,32,48);
hero2 = new Sprite(hm2,32,48);
w = getWidth();
h = getHeight();
cx = w/2;
cy = h/2;
hero.setFrameSequence(sequence[0]);
hero2.setFrameSequence(s2);
}

7. public void start(){
running = true;
Thread t = new Thread(this);
t.start();
}
public void run() {
Graphics g = getGraphics();
int delay = 100;
while(running) {
moving();
getInput();
hero2.nextFrame();
drawScreen(g);
try {Thread.sleep(delay);}
catch (InterruptedException e) {}
}
}

8. void moving() {
if (cx2 > getWidth()) {
cx2 = 0;
}
if ( ! hero2.collidesWith(hero, false))
cx2++;
}

9. void getInput(){
int keyState = getKeyStates();
int cDirection = currentDirection; // then we know current direction
if(keyState== LEFT_PRESSED) {
if( ! hero.collidesWith(hero2, false)) {
cx = cx - 5; cx = Math.max (0, cx);
currentDirection= LEFT_DIRECTION;
} hero.nextFrame();
} else if(keyState== RIGHT_PRESSED){
cx = cx + 5; cx = Math.min (cx, w-32);
currentDirection= RIGHT_DIRECTION;
hero.nextFrame();
} else if(keyState== UP_PRESSED) {
cy = cy - 5; cy = Math.max (0, cy);
currentDirection= BACK_DIRECTION;
hero.nextFrame();
} else if(keyState== DOWN_PRESSED){
cy = cy + 5; cy = Math.min(cy, h - 50);
currentDirection= FRONT_DIRECTION;
hero.nextFrame();
}
if(cDirection != currentDirection){
hero.setFrameSequence(sequence[currentDirection]);
}

10. void drawScreen(Graphics g){
g.drawImage(img_bg, 0 - cx,0 - cy, Graphics.TOP | Graphics.LEFT);
hero2.setPosition(cx2, cy2 + 20);
hero2.paint(g);
hero.setPosition(cx, cy);
hero.paint(g);
flushGraphics();
}
}

11. LayerManager

12. LayerManager methods
void append(Layer l)
Layer getLayerAt(int index)
int getSize()
void insert(Layer l, int index)
void paint(Graphics g, int x, int y)
void remove(Layer l)
void setViewWindow(int x, int y, int w, int h)
** leyer ท่ี append ก่อน จะอย่่ด้านบนสุด

13. LayerManager and Scrolling
background
 Idea ของการทำา scrolling background คือใช้
method setViewWindow(sx,sy,w,h)
 โดย sx, sy คือตำาแหน่ ง viewpoint บน
background ท่ต้องการแสดงบน screen.
ี

14. LayerManager
 สร้าง work space ชือ LayerManagerDemo
่
 สร้างJ2ME Class ชื่อ
LayerManagerMIDlet.java
โดย มีตัว Sprite เป็น hero 2 ตัวและมี Sprite 1
ตัวเป็น background
และให้ใช้สง setViewWindow ในการเลือนหน้า
ั
จอไปซ้ายและขาว

15. LayerManagerMIDlet.java
import java.io.IOException;
import javax.microedition.lcdui.*;
import javax.microedition.lcdui.game.*;
import javax.microedition.midlet.*;
public class LayerManagerMIDlet extends MIDlet {
CanvasLayerManager canvas = new CanvasLayerManager ();
public LayerManagerMIDlet() {}
protected void destroyApp(boolean arg0) throws
MIDletStateChangeException {}
protected void pauseApp() {}
protected void startApp() throws MIDletStateChangeException {
Display display = Display.getDisplay(this);
canvas.start();
Display.setCurrent(canvas);
}
}

16. class CanvasLayerManager extends
GameCanvas implements Runnable {
Sprite hero;
Sprite hero2;
Sprite bg;
boolean running;
LayerManager layerManager;
int sx,sy;

17. protected CanvasLayerManager() {
super(true);
Image img_boy = null;
Image img_man = null;
Image img_bg = null;
try {
img_boy = Image.createImage("/res/boy.png");
img_man = Image.createImage("/res/man.png");
img_bg = Image.createImage("/res/bg.jpg");
} catch (IOException e) {}
hero = new Sprite(img_boy,img_boy.getWidth()/4,img_boy.getHeight()/4);
hero2 = new
Sprite(img_man,img_man.getWidth()/4,img_man.getHeight()/4);
bg = new Sprite(img_bg);
layerManager = new LayerManager();
layerManager.append(hero);
layerManager.append(hero2);
layerManager.append(bg);
}

18. public void start() {
running = true;
Thread t = new Thread(this);
t.start();
}
public void run() {
Graphics g = getGraphics();
int delay = 50;
while(running){
input();
drawScreen(g);
try {
Thread.sleep(delay);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}

19. private void input() {
int keyState = getKeyStates();
if(keyState== LEFT_PRESSED){
sx = sx - 5;
}else if(keyState== RIGHT_PRESSED){
sx = sx + 5;
}
}
private void drawScreen(Graphics g) {
int w = getWidth();
int h = getHeight();
hero.setPosition(w/2 + sx, h/2 );
hero2.setPosition(w/2 + 50, h/2 - 20);
bg.setPosition(-50, -50);
layerManager.setViewWindow(sx,sy,w,h);
layerManager.paint(g,0,0);
flushGraphics();
}
}

20. ใช้ TiledLayer ทำา background

21. TiledLayer

22. TiledLayer
map[] ={
4,5,5,5,5,5,5,4,4,4,
4,5,5,5,5,5,5,5,5,4,
4,5,5,5,2,2,5,5,5,4,
4,5,5,5,2,2,5,5,5,4,
4,4,5,5,2,2,5,5,5,4,
4,4,4,5,5,2,2,2,5,4,
1,1,3,3,5,5,2,2,5,4,
3,1,3,3,3,5,5,5,5,4,
3,1,1,3,3,3,5,5,1,1,
3,3,1,1,1,1,1,1,1,3,
3,3,3,3,3,3,3,3,3,3}

23. สร้างแผนที่ (world)
 เราสามารถสร้าง world หรือ map โดยใช้
Mappy win32

24. ผลจาก export text file ในรูปแบบ array
const short mymap_map0[10][10] = {
{ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2 },
{ 2, 4, 4, 4, 4, 4, 4, 4, 4, 2 },
{ 2, 4, 4, 3, 5, 5, 5, 3, 4, 2 },
{ 2, 5, 4, 3, 3, 3, 5, 3, 4, 2 },
{ 2, 1, 4, 4, 4, 3, 5, 3, 4, 2 },
{ 2, 1, 1, 1, 4, 3, 5, 3, 4, 2 },
{ 2, 1, 1, 1, 4, 3, 3, 3, 4, 2 },
{ 2, 1, 1, 1, 4, 3, 3, 3, 4, 2 },
{ 2, 1, 1, 1, 4, 4, 5, 4, 4, 2 },
{ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2 }};

25. การใช้งาน TiledLayer
TiledLayer background, land;
int[][] map = {
{ 5, 5, 5, 4, 4, 4, 5, 5, 5, 2, 2, 2, 2, 2, 5, 2,
2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2 },
{ 2, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 2, 2, 2, 5, 2,
2, 2, 2, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 2 },
{ 5, 5, 5, 5, 2, 5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2}}
background = new TiledLayer(30, 30, img_bg,
img_bg.getWidth()/5,img_bg.getHeight());
background.setCell(i, j, map[i][j]);

26. TiledLayerMIDlet
 ให้สร้าง work space ชือว่า TiledLayerDemo
่
 ให้สร้าง J2ME Class ชือว่า
่
TiledLayerMIDlet.java
ใช้ TiledLayer ทำา background

27. TiledLayerMIDlet.java
import java.io.IOException;
import javax.microedition.lcdui.*;
import javax.microedition.lcdui.game.*;
import javax.microedition.midlet.*;
public class TiledLayerMIDlet extends MIDlet {
CanvasTiledLayer canvas = new CanvasTiledLayer();
public TiledLayerMIDlet() {}
protected void destroyApp(boolean arg0) throws
MIDletStateChangeException {}
protected void pauseApp() {}
protected void startApp() throws MIDletStateChangeException {
Display display = Display.getDisplay(this);
canvas.start();
display.setCurrent(canvas);
}
}

28. class CanvasTiledLayer extends GameCanvas implements
Runnable {
static int FRONT_DIRECTION = 0;
static int LEFT_DIRECTION = 1;
static int RIGHT_DIRECTION = 2;
static int BACK_DIRECTION = 3;
Sprite ship;
TiledLayer waster, land;
LayerManager layerManager;
int w, h;
int cx,cy;
int currentDirection = FRONT_DIRECTION;
boolean running;
int[][] sequence = {{0,1,2,3}, //front
{4,5,6,7}, //left
{8,9,10,11}, //right
{12,13,14,15}}; //back

29. int[][] obstruction_land = {
{ 2, 2, 0, 0, 0, 0, 0, 0, 0, 4, 4, 2, 2, 2, 2, 5, 0, 0, 2, 2 },
{ 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 2, 2, 5, 5, 0, 0, 0, 2 },
{ 0, 0, 0, 2, 4, 0, 0, 0, 0, 0, 0, 3, 2, 5, 3, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 2, 5, 5, 3, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 4, 2, 2, 2, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 4, 5, 2, 2, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 4, 4, 4, 0, 0, 0, 0, 5, 2, 2, 2, 2, 5, 5, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 5, 2, 2, 5, 3, 0, 0, 0, 2 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2 },
{ 2, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 2, 4, 5 },
{ 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 4, 4, 3, 0, 0, 0, 0, 2, 2, 4 },
{ 5, 2, 2, 0, 0, 0, 5, 4, 5, 2, 2, 5, 5, 3, 0, 0, 0, 0, 2, 4 },
{ 5, 4, 2, 0, 0, 3, 4, 4, 2, 2, 2, 2, 5, 3, 0, 0, 0, 0, 0, 2 },
{ 5, 4, 2, 0, 0, 0, 0, 4, 4, 5, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0 },
{ 5, 3, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 4, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 5, 2, 2, 2, 2, 2, 2, 2, 0, 0 },
{ 0, 0, 0, 0, 2, 2, 2, 5, 4, 4, 5, 4, 4, 5, 4, 5, 4, 2, 2, 2 }};

30. int[][] waster_map = {
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 }};

31. protected CanvasTiledLayer() {
super(true);
Image img_ship = null; Image img_bg = null;
w = getWidth(); h = getHeight(); cx = w/2; cy = h/2;
try {
img_ship = Image.createImage("/res/Ship.png");
img_bg = Image.createImage("/res/bgtiles.png");
} catch (IOException e) {}
ship = new Sprite(img_ship,img_ship.getWidth()/4,img_ship.getHeight()/4);
land = new TiledLayer(20, 20, img_bg, img_bg.getWidth()/5,img_bg.getHeight());
waster = new TiledLayer(20, 20, img_bg,
img_bg.getWidth()/5,img_bg.getHeight());
for (int i = 0; i < 20;i++) {
for (int j = 0; j <20;j++) {
land.setCell(i, j, obstruction_land[i][j]); }}
for (int i = 0; i < 20;i++) {
for (int j = 0; j < 20;j++) {
waster.setCell(i, j, waster_map[i][j]); }}
ship.setFrameSequence(sequence[0]);
layerManager = new LayerManager();
layerManager.append(ship); layerManager.append(land);
layerManager.append(waster);
}

32. public void run() {
Graphics g = getGraphics();
int delay = 100;
while(running){
getInput();
drawScreen(g);
try {Thread.sleep(delay);} catch (InterruptedException e) {}
}
}
void drawScreen(Graphics g) {
int w = getWidth();
int h = getHeight();
int xpoint = 120;
int ypoint = 70;
g.setColor(0);
g.fillRect(0, 0, w, h);
ship.setPosition((w/2) + xpoint + (cx /2) - 12, (h/2)+ ypoint + (cy/2) - 24 );
layerManager.paint(g, -(xpoint) - (cx/2) , -(ypoint) - (cy/2));
g.setColor(255,255,255);
g.drawString(" ["+cx+","+cy+"]", 0, getHeight()- 20, g.TOP | g.LEFT);
flushGraphics();
}

33. void getInput() {
int keyState = getKeyStates();
int cDirection = currentDirection;
if(keyState== LEFT_PRESSED){
currentDirection= LEFT_DIRECTION;
if(!ship.collidesWith(land, true)){
cx = cx - 10;
} else {cx = cx + 20;}
ship.nextFrame();
}
else if(keyState== RIGHT_PRESSED){
currentDirection= RIGHT_DIRECTION;
if(!ship.collidesWith(land, true)){
cx = cx + 10;
} else {cx = cx - 20;}
ship.nextFrame();
}

34. else if (keyState== UP_PRESSED) {
currentDirection= BACK_DIRECTION;
if(!ship.collidesWith(land, true)){
cy = cy - 10;
}else{cy = cy + 20;}
ship.nextFrame();
}
else if(keyState== DOWN_PRESSED){
currentDirection= FRONT_DIRECTION;
if(!ship.collidesWith(land, true)){
cy = cy + 10;
}else{cy = cy - 20;}
ship.nextFrame();
}
if(cDirection != currentDirection){
ship.setFrameSequence(sequence[currentDirection]);
}
}

35. public void start() {
running = true;
Thread t = new Thread(this);
t.start();
}
}

36. แนะนำาหนังสือ J2ME
 สร้างเกมและโปรแกรมด้วย J2ME คุณก็ทำาได้
 เขียนเกมและโปรแกรมแบบมือถือ J2ME + CD
 J2ME ค่่มือสำาหรับเร่มต้น พัฒนาจาวาบนมือ
ิ
 เก่ง J2ME ให้ครบส่ตร + CD
 เขียนโปรแกรมบนโทรศัพท์เคล่ ือนท่ด้วย J2ME
ี