Java J2ME Canvas

1. Mobile Game
and Application with
J2ME
อ.เจนโชค เตชะโกเม
นท์ (เจ)
jenchoke@hotmail.com
สาขาวิชาสือนฤมิต
่
คณะสารสนเทศศาสตร์
มหาวิทยาลัยมหาสารคาม

2. Canvas
 Canvas มี method สำาหรับ handle game
action, key event นั่นคือเราสามารถเขียน
โปรแกรมให้รับรู้การกดปุ่มบนมือถือได้ โดยใช้
Canvas
 นอกจากนั้น Canvas ยังสามารถ regist
CommandListener ได้เหมือนกับ Displayable
อื่นๆ
 แต่ ที่สำาคัญคือ Canvas เป็น abstract class
ดังนัน เราต้องสร้าง class อื่นๆให้ extends
้
Canvas เช่น

3. Canvas

4. public class HelloCanvasMIDlet extends MIDlet {
Display display;
HelloCanvas canvas;
public HelloCanvasMIDlet() {
canvas = new HelloCanvas();
}
protected void destroyApp(boolean arg0) {
}
protected void pauseApp() {
}
protected void startApp() throws MIDletStateChangeException {
display = Display.getDisplay(this);
display.setCurrent(canvas);
canvas.repaint();
}
}
class HelloCanvas extends Canvas{
protected void paint(Graphics g) {
g.setColor(255, 0, 0);
g.fillRect(0, 0, getWidth(), getHeight());
g.setColor(255, 255, 255);
g.drawString("HelloCanvasWorld", 5, 5,Graphics.TOP | Graphics.LEFT);

5. class HelloCanvas extends Canvas{
protected void paint(Graphics g) {
g.setColor(255, 0, 0);
g.fillRect(0, 0, getWidth(), getHeight());
g.setColor(255, 255, 255);
g.drawString("HelloCanvasWorld", 5, 5,
Graphics.TOP | Graphics.LEFT);
}
}

6. import java.io.IOException;
import javax.microedition.midlet.*; GameActionExample.java
import javax.microedition.lcdui.*;
public class GameActionExample extends MIDlet
{
private Display display;
private MyCanvas canvas;
public GameActionExample()
{
display = Display.getDisplay(this);
canvas = new MyCanvas (this);
}
protected void startApp()
{
display.setCurrent(canvas);
}
protected void pauseApp() { }
protected void destroyApp( boolean unconditional ) { }
public void exitMIDlet()
{
destroyApp(true);
notifyDestroyed();
}
}

7. class MyCanvas extends Canvas implements CommandListener
{
private Command exit;
private String message; GameActionExample.java
private GameActionExample gameActionExample;
private int x, y;
public MyCanvas (GameActionExample gameActionExample)
{
x = 5; y = 5; message = "Use Game Keys";
this.gameActionExample = gameActionExample;
exit = new Command("Exit", Command.EXIT, 1);
addCommand(exit);
setCommandListener(this);
}
protected void paint(Graphics graphics)
{
Image img = null;
graphics.setColor(255,255,255);
graphics.fillRect(0, 0, getWidth(), getHeight());
graphics.setColor(255, 0, 0);
try {
img = Image.createImage("/images/0.png");
} catch (IOException e) {
e.printStackTrace();
}
graphics.drawImage(img, x, y, Graphics.TOP | Graphics.LEFT);
graphics.drawString(message, x + 10, y +50, Graphics.TOP | Graphics.LEFT);
}

8. public void
commandAction(Command command,
Displayable displayable)
{
if (command == exit)
{
gameActionExample.exitMIDlet();
}
}

9. protected void keyPressed(int key)
{
switch ( getGameAction(key) ){
case Canvas.UP:
message = "up"; y--; break;
case Canvas.DOWN:
message = "down"; y++; break;
case Canvas.LEFT:
message = "left"; x--; break;
case Canvas.RIGHT:
message = "right"; x++; break;
case Canvas.FIRE:
message = "FIRE"; break;
}
repaint();
}
}

10. // A canvas that illustrates rectangles
class RectanglesCanvas extends Canvas {
public void paint(Graphics g) {
int width = getWidth();
int height = getHeight();
// Create a white background
g.setColor(0xffffff);
g.fillRect(0, 0, width, height);
// Draw a solid rectangle
g.setColor(0);
g.drawRect(width/4, 0, width/2, height/4);
// Draw a dotted rectangle inside
// the solid rectangle.
g.setStrokeStyle(Graphics.DOTTED);
g.drawRect(width/4 + 4, 4, width/2 - 8, height/4 - 8);
// Draw a rounded rectangle
g.setStrokeStyle(Graphics.SOLID);
g.drawRoundRect(width/4, height/2, width/2, height/4, 16, 8);
}
}

11. // A canvas that illustrates filled rectangles
class RectangleFillsCanvas extends Canvas {
public void paint(Graphics g) {
int width = getWidth();
int height = getHeight();
// Create a black background
g.setColor(0);
g.fillRect(0, 0, width, height);
// Draw a filled rectangle with
// a dotted rectangle around it
g.setStrokeStyle(Graphics.DOTTED);
g.setColor(0x00ff00);
g.fillRect(width/4, height/4, width/2, height/2);
g.setColor(0xffff00);
g.drawRect(width/4, height/4, width/2, height/2);
}
}

12. // A canvas that illustrates arcs
class ArcsCanvas extends Canvas {
public void paint(Graphics g) {
int width = getWidth();
int height = getHeight();
// Create a black background
g.setColor(0);
g.fillRect(0, 0, width, height);
g.setColor(0xffffff);
g.drawArc(0, 0, width/2, height/2, 0, 90);
g.setStrokeStyle(Graphics.DOTTED);
g.setColor(0xffff00);
g.drawRect(0, 0, width/2, height/2);
g.setStrokeStyle(Graphics.SOLID);
g.setColor(0xffffff);
g.drawArc(width/2, 0, width/2, height/2, 0, -90);
g.setStrokeStyle(Graphics.DOTTED);
g.setColor(0xffff00);
g.drawRect(width/2, 0, width/2, height/2);
}
}

13. End of AM

14. การสร้างภาพบน Canvas ให้
เคลื่อนไหวด้วย Thread
ในการเขียน application ต่างๆ โดยเฉพาะเกมส์ Thread
(เธรด) จัดเป็น Class ที่สำาคัญมากใน
การควบคุมการเครื่อนไหว อย่างอิสระของ Image/Picture ใน
game ให้ตรงกับที่เราต้อง
นอกจากนี้ยังสามารถควบคุม input / output และอื่นๆ อีกด้วย
เกือบทังหมดของจาวาเกมส์จะใช้
้
Class Thread นี้เป็นหลักในการ Control ฉะนั้นเราจำาเป็นต้อง
ทำาความเข้าใจในเรื่องของ Thread
อย่างลึกซึ้งเพื่อจะสามารภนำาไปใช้งานได้อย่างชำานาญ
Method หลักๆของ
Thread ประกอบด้วย
thread [N] ; เรื่องหรือเหตุการณ์ทให้ ดขึ้นต่อเน
Start() เป็นการสั่ง ี่เกิ
thread เริ่มทำางาน

15. Thread

16. สร้างภาพ Animation บน SimpleGameMIDlet.java
Canvas
import javax.microedition.lcdui.*;
import javax.microedition.midlet.MIDlet;
public class SimpleGameMIDlet extends MIDlet
implements CommandListener {
private Display mDisplay;
private SimpleGameCanvas mCanvas;
private Command mExitCommand;
public void startApp() {
if (mCanvas == null) {
mCanvas = new SimpleGameCanvas();
mCanvas.start();
mExitCommand = new Command("Exit", Command.EXIT, 0);
mCanvas.addCommand(mExitCommand);
mCanvas.setCommandListener(this);
}
mDisplay = Display.getDisplay(this);
mDisplay.setCurrent(mCanvas);
}

17. SimpleGameMIDlet.java
public void pauseApp() {}
public void destroyApp(boolean unconditional) {
mCanvas.stop();
}
public void commandAction(Command c, Displayable s) {
if (c.getCommandType() == Command.EXIT) {
destroyApp(true);
notifyDestroyed();
}
}

18. SimpleGameCanvas.java
import java.util.Timer;
import javax.microedition.lcdui.*;
import javax.microedition.lcdui.game.*;
public class SimpleGameCanvas extends GameCanvas implements Runnable {
private volatile boolean mTrucking;
private long mFrameDelay;
private int mX, mY;
int color_r = 255,color_g = 255,color_b = 255;
private int mState;
Timer timer = new Timer();
Timer tm;
Image img;

19. public SimpleGameCanvas() {
super(true); SimpleGameCanvas.java
mX = getWidth() / 2;
mY = getHeight() / 2;
mState = 0;
mFrameDelay = 20;
}
public void start() {
mTrucking = true;
Thread t = new Thread(this);
t.start();
PrimeThread p = new PrimeThread(143);
p.start();
}
public void stop() { mTrucking = false; }
public void run() {
Graphics g = getGraphics();
while (mTrucking == true) {
tick();
input();
render(g);
try { Thread.sleep(mFrameDelay); }
catch (InterruptedException ie) { stop(); }
}
}

20. private void tick() {
mState = (mState + 1) % 20;
} SimpleGameCanvas.java
private void input() {
int keyStates = getKeyStates();
if ((keyStates & LEFT_PRESSED) != 0)
mX = Math.max (0, mX - 1);
if ((keyStates & RIGHT_PRESSED) != 0)
mX = Math.min (getWidth(), mX + 1);
if ((keyStates & UP_PRESSED) != 0)
mY = Math.max (0, mY - 1);
if ((keyStates & DOWN_PRESSED) != 0)
mY = Math.min (getHeight(), mY + 1);
}
private void render(Graphics g) {
/* background color */
g.setColor(255,255,255);
g.fillRect(0, 0, getWidth(), getHeight());
g.setColor(0,0,255);
/* X point */
g.drawLine(mX, mY, mX - 10 + mState, mY - 10);
g.drawLine(mX, mY, mX + 10, mY - 10 + mState);
g.drawLine(mX, mY, mX + 10 - mState, mY + 10);
g.drawLine(mX, mY, mX - 10, mY + 10 - mState);
flushGraphics();
}

21. SimpleGameCanvas.java
class PrimeThread extends Thread {
long minPrime;
PrimeThread(long minPrime) {
this.minPrime = minPrime;
}
public void run() {
while (true) {
try {
System.out.println(System.currentTimeMillis());
sleep(1000);
} catch (InterruptedException e) { }
}
}
}

22. การทำางานของ
TimerTask
ข้อดีของการใช้ TimerTask คือใช้งานง่ายเพราะมีเมธอด
ให้ใช้งาน เพียงสั่งให้เริ่มต้นทำางานด้วยเมธอด run() และหยุด
การทำางานด้วยเมธอด cancel()
การทำางานของ TimerTask ต้องอาศัยการควบคุมผ่าน
เมธอด schedule() ของ class Timer อีกทีหนึง ่
timer = new Timer(); // กำาหนด Instance ของ Timer
TimerTask task = new TimerTask(Value); // สร้าง class ในส่วนการทำางานในรูปแบบของของ
// TimerTask
timer. Schedule(task,0,500); // timer จะควบคุมการทำางานของ TimerTask ทำางานทุกๆ 0.5
วินาที

23. การทำางานของ
TimerTask
Main Time Task Display
ควบคุม TimerTask.run ทำาหน้าที่ Paint
Time.schedule()
(display) ตามคำาสั่ง random line
มีวิธีการเขียน code j2me แบบง่ายดังนี้
ครับ โดยเริ่มเขียนจาก
Java Class Java Class J2ME Midlet
extends Canvas extends TimerTask Class

24. Timer
Task

25. TimerTask
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
import java.util.*;
Class FieldMover
Class TimerDemo extends TimerTask
extends MIDlet
Class StarField
extends Canvas

26. import javax.microedition.midlet.*; TimerDemo.java
import javax.microedition.lcdui.*;
import java.util.*;
public class TimerDemo extends MIDlet {
Display display;
StarField field = new StarField();
FieldMover mover = new FieldMover();
Timer timer = new Timer();
public TimerDemo() {
display = Display.getDisplay( this );
}
protected void destroyApp( boolean unconditional ) { }
protected void startApp() {
display.setCurrent( field );
timer.schedule( mover, 0, 50 );
}
protected void pauseApp() { }
public void exit(){
timer.cancel(); // stop scrolling
destroyApp( true );
notifyDestroyed();
}

27. class FieldMover extends TimerTask { TimerDemo.java
public void run() {
field.scroll();
}
}
class StarField extends Canvas {
int height; int width; int[] stars;
Random generator = new Random();
boolean painting = false;
private Random genColor = new Random();
public StarField(){
height = getHeight();
width = getWidth();
stars = new int[ height ];
for( int i = 0; i < height; ++i ){
stars[i] = -1;
}
}

28. public void scroll() {
if( painting ) return;
for( int i = height-1; i > 0; --i ){
TimerDemo.java
stars[i] = stars[i-1];
}
stars[0] = ( generator.nextInt() % ( 3 * width ) ) / 2;
if( stars[0] >= width ){
stars[0] = -1;
}
repaint();
}
protected void paint( Graphics g ){
painting = true;
int r_color = genColor.nextInt(255);
int g_color = genColor.nextInt(255);
int b_color = genColor.nextInt(255);
g.setColor( 0, 0, 0 );
g.fillRect( 0, 0, width, height );
g.setColor( r_color, g_color, b_color );
for( int y = 0; y < height; ++y ){
int x = stars[y];
if( x == -1 ) continue;
g.drawLine( x, y, x, y );
}
painting = false;
}

29. TimerDemo.java
protected void keyPressed( int keyCode ){
exit();
}
}
}