Java手机游戏编程之MIDP图形设计篇

Java手机游戏编程之MIDP图形设计篇

作者：http://www.java-cn.com 发文时间：2005.01.13

<!-- <span id=tech_article_ad1></span> --><iframe align="left" marginwidth="0" marginheight="0" src="http://tech.ccidnet.com/pub/html/tech_pip2.html" frameborder="0" noresize width="365" scrolling="no" height="300"></iframe><!-- Copyright 1999-2000 ThruPort Technologies http://www.thruport.com --><!-- end dynamic banner insert --><ccid_nobr></ccid_nobr>一、MIDLET图形 1. MIDlet 图形简述 移动信息设备描述（Mobile Information Device Profile ，MIDP）定义了一套应用编程接口（API），用于运行在MIDP容器中的MIDlet应用程序。这套API本身是建立在有限连接设备配置（Connected Limited Device Configuration ，CLDC）应用编程接口的基础上的。MIDP用户界面应用编程接口类并不是基于Java抽象窗口工具包（Abstract Window Toolkit ，AWT）设计。 它们是专为手机和呼机这样的小型移动信息设备而设计的，这类设备的特点是只有很小的屏幕和键盘。当一个程序员在编写MIDP图形应用程序的时候，他可能只能使用MIDP或CLDC应用编程接口。 MIDP的中心抽象是屏幕，这句话的含义是MIDP的用户界面设计是基于屏幕的(screen-based)。也就是说，Screen类封装了设备特定的图形和用户交互，所有的用户界面组件都位于屏幕上，并且一次只显示一个屏幕，并且只能浏览或使用这个屏幕上的条目。由屏幕来处理所有的用户界面事件。并只把高级事件传送给应用。之所以采取这种面向屏幕（screen-oriented）的方式，主要是因为移动设备的显示屏幕和键盘实是种类太多了，几乎每个厂家都多多少少有所不同。图1是基于屏幕的MIDP图形用户界面的一些例子。 MIDP应用编程接口具有高级用户界面类和低级用户界面类。高级用户界面类（例如Form、List、TextBox、TextField、Alert，及Ticker）可被适配到设备上：支持图像、文本、文本输入域、单选按钮等。低级用户界面类（Canvas类）允许开发者根据需要绘制任意图形。MIDlet可以运行在各种不同尺寸的彩色、不同灰度等级或黑白屏幕的手机上。高级用户界面类是通用用户界面元素的抽象，它的用途在于提高MIDlet跨不同设备的移植性，并且可以使用本地设备的外观表现。低级应用编程接口则能够更直接地控制显示内容，但是MIDlet设计者应该确保其在不同设备（显示尺寸、键盘、色彩等）上的可移植性。上面的例子既用到了高级应用编程接口又用到了低级应用编程接口。所有的MIDP图形用户界面类都是javax.microedition.lcdui程序包的一部分。 2. MIDlet屏幕 MIDP有两种主要的屏幕类型： a) 高级屏幕 它包括简单的高级屏幕类，例如List和TextBox。用户不能添加额外的图形用户界面组件到这种类型的屏幕中。九宫格MIDlet示例程序使用的屏幕是继承于名为ChoosePieceScreen的List类，用于游戏者在游戏开始时选择棋子。 一般的Form屏幕类和List类很相像，但是它允许使用额外的图形元素，例如：图像、只读文本域、可编辑文本域、可编辑数据域、标尺和选项组。Form条目可以任意地被添加或删除。九宫格例程中没有使用Form类。 b) 低级屏幕 Canvas（画布）屏幕（和Graphics、Image类）可以用来编写基于低级应用编程接口的用户界面。这些类给予MIDlet程序员很大程度的绘画灵活性。程序员可以绘制各种类型的图形元素，例如：线、弧、矩形、圆角矩形、圆、文字（不同颜色、字体、大小）、位图剪辑等等。大部分的游戏MIDlet是使用基于画布屏幕类的主图形用户界面元素编写的。 一个MIDlet用户界面通常包含一个或多个屏幕。因为每次只能显示一个屏幕，因此MIDlet具有良好设计的结构是非常重要的进行，这样就能更加容易地处理屏幕之间内容的切换。下面的代码段说明了在一个MIDlet中切换屏幕的方法，基于屏幕类和对应的MIDlet回调。 代码段1： <ccid_nobr></ccid_nobr> <ccid_code></ccid_code>Class MyMIDlet extends MIDlet { private FirstScreen firstScreen; private SecondScreen secondScreen; public MyMIDlet() { … } public void startApp() { Displayable current = Display.getDisplay(this).getCurrent(); if (current == null) { firstScreen = new FirstScreen(this, …); Display.getDisplay(this).setCurrent(firstScreen); //显示应用程序的第一个用户界面屏幕 } else { Display.getDisplay(this).setCurrent(current); } } // FirstScreen 回调切换到下一个屏幕 public void firstScreenDone() { … secondScreen = new SecondScreen(this, …); display.getDisplay(this).setCurrent(secondScreen); } // SecondScreen回调终止应用程序 public void secondScreenQuit() { … destroyApp(false); notifyDestroyed(); } … } 这个MIDlet使用了两个屏幕类（FirstScreen和SecondScreen）作为用户界面。当开始执行MIDlet的时候，它设置当前显示屏幕为FirstScreen。当需要从FirstScreen切换到SecondScreen的时候，FirstScreen调用父MIDlet方法firstScreenDone（参见下面的代码）。firstScreenDone方法创建并设置SecondScreen为当前显示的屏幕。 代码段2: 包含MIDlet回调的FirstScreen示例 <ccid_nobr></ccid_nobr> <ccid_code></ccid_code>Class FirstScreen extends Form implements CommandListener { private MyMIDlet midlet; public FirstScreen(MyMIDlet midlet) { this.midlet = midlet; … } public void commandAction(Command c) { if (c == cmdQuit) { parent.firstScreenDone(); } … } … } 3. MIDP用户界面应用编程接口 保证基于高级应用编程接口类的用户界面对象的可移植性和适用性是MIDP设备的职责。另一方面，像Canvas和Graphics这样的低级类为程序员提供了更大的自由空间让其控制其用户界面的视觉表现，并且监听低级键盘事件。程序员还要负责确保应用程序在不同特性（例如显示尺寸、彩色或黑白，以及不同键盘类型）的移动设备上的可移植性。比如说，有可能需要使用getWidth()和getHeight()方法调节用户界面外观使其适应一个或更多设备的可用Canvas尺寸。 下面的九宫格MIDlet例程将介绍： 简单应用高级应用编程接口； 使用低级应用编程接口来绘制线、弧、字符串和图像等图形； 不同显示尺寸的移动设备之间的MIDlet移植问题 键盘代码与游戏动作之间的映射 二、示例：九宫格（TICTACTOEMIDLET） 这个示例应用程序是一个简单的MIDlet，允许游戏者与MIDlet程序之间玩一种称为九宫格的人机游戏。这个例程说明： 使用高级和低级用户界面组件 在多显示屏幕之间进行切换 处理简单的命令 动态适配显示尺寸 处理键盘事件 游戏者首先选择使用哪种棋子（用圆和叉表示），然后开始游戏。游戏者和MIDlet谁是先手是随机决定的。每走一步棋之后，程序都要检查游戏状态，判断游戏是否已经结束。游戏的几种可能结果是：游戏者赢，MIDlet程序赢，或者平局。在应用程序运行期间，双方的得分都能显示出来。游戏者可以随时开始新游戏或者退出游戏。 当MIDlet启动方法startApp()时，将创建闪烁屏幕和第一个游戏屏幕(ChoosePieceScreen)。闪烁屏幕显示4秒之后，第一个游戏屏幕开始显示。ChoosePieceScreen让游戏者选择使用哪种棋子（圆还是叉）。当游戏者做出选择之后，他可以使用OK键确认。这会使ChoosePieceScreen回调主MIDlet的choicePieceScreenDone()方法。ChoosePieceScreen是使用高级应用编程接口List类实现的。 choosePieceScreenDone()回调创建并显示下一个屏幕，这个屏幕在此应用程序中作为游戏的主屏（GameScreen）。 每当轮到游戏者下棋的时候，游戏者使用GameScreen的箭头键和Select按钮来选择想要走的空格。每一回合之后，应用程序都会检查游戏的状态，检查其是否符合游戏结束条件并显示游戏结果。游戏者通过点击GameScreen的Quit命令结束游戏，或使用New命令开始新一轮游戏。Quit（结束）命令调用TicTacToeMIDlet的quit()方法，然后MIDlet就会调用destroyApp()方法来终止整个MIDlet程序。 游戏程序逻辑被封装在一个单独的Game类中。 GameScreen通过使用低级Canvas和Graphics类来实现。它使用Canvas、Image和Graphics对象来绘制图形。 GameScreen首先初始化基于画布尺寸的显示面板。这可让MIDlet能够运行在不同显示屏幕的移动设备上。在本例中还使用了一个Image对象用来表示游戏面板。然后GameScreen根据游戏者在ChoosePieceScreen中所做的选择为游戏者和MIDlet分配棋子。游戏然后进行初始化（包括随机决定谁是先手），然后游戏就开始了。 为了使GameScreen能够被移植，MIDlet的键盘代码必须被映射到游戏动作上，如：Up、Down、Left、Right和Fire，用于具有不同键盘的移动设备。每当一个键被按下的时候，keyPressed()方法就会判断这是一个方向键还是一个Fire/Select键。如果按下的键是方向键，光标就会相应地移动，帮助游戏者可视化地选择一个空格放入棋子。Select键用来选择一个空格放入棋子。如果探测到满足游戏结束的条件，就会显示一条信息宣布游戏的获胜者和本轮游戏的得分。 3. TicTacToeMIDlet.java TicTacToeMIDlet非常简单：它处理MIDlet的生命周期事件。它根据需要创建屏幕对象并且处理来自屏幕的回调。ChoosePieceScreenDone回调被用来创建GameScreen。quit方法则被GameScreen用来结束游戏。 <ccid_nobr></ccid_nobr> <ccid_code></ccid_code>package example.tictactoe; import java.io.IOException; import javax.microedition.midlet.*; import javax.microedition.lcdui.*; import javax.microedition.io.*; public class TicTacToeMIDlet extends MIDlet { private ChoosePieceScreen choosePieceScreen; private GameScreen gameScreen; public TicTacToeMIDlet() { } public void startApp() { Displayable current = Display.getDisplay(this).getCurrent(); if (current == null) { // first time we′ve been called // Get the logo image Image logo = null; try { logo = Image.createImage("/tictactoe.png"); } catch (IOException e) { // just use null image } Alert splashScreen = new Alert(null, "Tic-Tac-Toe\nForum Nokia", logo, AlertType.INFO); splashScreen.setTimeout(4000); // 4 seconds choosePieceScreen = new ChoosePieceScreen(this); Display.getDisplay(this).setCurrent(splashScreen, choosePieceScreen); } else { Display.getDisplay(this).setCurrent(current); } } public void pauseApp() { } public void destroyApp(boolean unconditional) { } public void quit() { destroyApp(false); notifyDestroyed(); } public void choosePieceScreenDone(boolean isPlayerCircle) { gameScreen = new GameScreen(this, isPlayerCircle); Display.getDisplay(this).setCurrent(gameScreen); } } ChoosePieceScreen.java ChoosePieceScreen是一个基于高级应用编程接口窗体的屏幕， 允许游戏者选择圆或叉作为棋子。当游戏者按下OK键时， 它使用MIDlet的回调方法choosePieceScreenDone 来处理游戏者的选择。 package example.tictactoe; import javax.microedition.midlet.*; import javax.microedition.lcdui.*; import javax.microedition.io.*; public class ChoosePieceScreen extends List implements CommandListener { private static final String CIRCLE_TEXT = "Circle"; private static final String CROSS_TEXT = "Cross"; private final TicTacToeMIDlet midlet; private final Command quitCommand; public ChoosePieceScreen(TicTacToeMIDlet midlet) { super("Choose your piece", List.IMPLICIT); this.midlet = midlet; append(CIRCLE_TEXT, loadImage("/circle.png")); append(CROSS_TEXT, loadImage("/cross.png")); quitCommand = new Command("Quit", Command.EXIT, 2); addCommand(quitCommand); setCommandListener(this); } public void commandAction(Command c, Displayable d) { boolean isPlayerCircle = getString(getSelectedIndex()).equals(CIRCLE_TEXT); if (c == List.SELECT_COMMAND) { midlet.choosePieceScreenDone(isPlayerCircle); } else // quit Command { midlet.quit(); } } private Image loadImage(String imageFile) { Image image = null; try { image = Image.createImage(imageFile); } catch (Exception e) { // Use a ′null′ image in the choice list (i.e. text only choices). } return image; } } 5. GameScreen.java GameScreen使用了一个低级应用编程接口Canvas屏幕，和Image、Graphics类来绘制游戏面板、棋子，以及游戏的最终结果状态。要获取更详细的信息，请参阅各种绘画方法和drawCircle、drawCross、drawPiece、drawPlayerCursor、drawBoard等方法。这个屏幕使用MIDlet的quit回调方法来指示游戏结束。 此屏幕可适应各种可用显示性能(高、宽、色彩等)。此外还要注意到可以使用四向导航键，也可以使用双向导航键来移动光标。它使用了封装了主游戏程序逻辑的Game类。 <ccid_nobr></ccid_nobr> <ccid_code></ccid_code>package example.tictactoe; import java.util.Random; import javax.microedition.midlet.*; import javax.microedition.lcdui.*; class GameScreen extends Canvas implements CommandListener { private static final int BLACK = 0x00000000; private static final int WHITE = 0x00FFFFFF; private static final int RED = 0x00FF0000; private static final int BLUE = 0x000000FF; private static final int NO_MOVE = -1; private final TicTacToeMIDlet midlet; private final Game game; private final Command exitCommand; private final Command newGameCommand; private final Random random = new Random(); private int screenWidth, screenHeight; private int boardCellSize, boardSize, boardTop, boardLeft; private boolean playerIsCircle; private boolean computerIsCircle; private int preCursorPosition, cursorPosition; private int computerMove = NO_MOVE; private int playerMove = NO_MOVE; private int computerGamesWonTally = 0; private int playerGamesWonTally = 0; private boolean isRestart; public GameScreen(TicTacToeMIDlet midlet, boolean playerIsCircle) { this.midlet = midlet; this.playerIsCircle = playerIsCircle; computerIsCircle = !playerIsCircle; game = new Game(random); initializeBoard(); // configure Screen commands exitCommand = new Command("Exit", Command.EXIT, 1); newGameCommand = new Command("New", Command.SCREEN, 2); addCommand(exitCommand); addCommand(newGameCommand); setCommandListener(this); // begin the game play initialize(); } // Initialize the Game and Game screen. Also used for game restarts. private void initialize() { game.initialize(); preCursorPosition = cursorPosition = 0; playerMove = NO_MOVE; boolean computerFirst = ((random.nextInt() & 1) == 0); if (computerFirst) { computerMove = game.makeComputerMove(); } else { computerMove = NO_MOVE; } isRestart = true; repaint(); } public void paint(Graphics g) { if (game.isGameOver()) { paintGameOver(g); } else { paintGame(g); } } private void paintGame(Graphics g) { if (isRestart) { // clean the canvas g.setColor(WHITE); g.fillRect(0, 0, screenWidth, screenHeight); drawBoard(g); isRestart = false; } drawCursor(g); if (playerMove != NO_MOVE) { drawPiece(g, playerIsCircle, playerMove); } if (computerMove != NO_MOVE) { drawPiece(g, computerIsCircle, computerMove); } } private void paintGameOver(Graphics g) { String statusMsg = null; if(game.isComputerWinner()) { statusMsg = "I win !"; computerGamesWonTally++; } else if (game.isPlayerWinner()) { statusMsg = "You win"; playerGamesWonTally++; } else { statusMsg = "Stalemate"; } String tallyMsg = "You:" + playerGamesWonTally + " Me:" + computerGamesWonTally; Font font = Font.getFont(Font.FACE_SYSTEM, Font.STYLE_PLAIN, Font.SIZE_MEDIUM); int strHeight = font.getHeight(); int statusMsgWidth = font.stringWidth(statusMsg); int tallyMsgWidth = font.stringWidth(tallyMsg); int strWidth = tallyMsgWidth; if (statusMsgWidth > tallyMsgWidth) { strWidth = statusMsgWidth; } // Get the { x, y } position for painting the strings. int x = (screenWidth - strWidth) / 2; x = x < 0 ? 0 : x; int y = (screenHeight - 2 * strHeight) / 2; y = y < 0 ? 0 : y; // clean the canvas g.setColor(WHITE); g.fillRect(0, 0, screenWidth, screenHeight); // paint the strings′ text g.setColor(BLACK); g.drawString(statusMsg, x, y, (Graphics.TOP | Graphics.LEFT)); g.drawString(tallyMsg, x, (y + 1 + strHeight), (Graphics.TOP | Graphics.LEFT)); } public void commandAction(Command c, Displayable d) { if (c == exitCommand) { midlet.quit(); } else if (c == newGameCommand) { initialize(); } } private void initializeBoard() { screenWidth = getWidth(); screenHeight = getHeight(); if (screenWidth > screenHeight) { boardCellSize = (screenHeight - 2) / 3; boardLeft = (screenWidth - (boardCellSize * 3)) / 2; boardTop = 1; } else { boardCellSize = (screenWidth - 2) / 3; boardLeft = 1; boardTop = (screenHeight - boardCellSize * 3) / 2; } } protected void keyPressed(int keyCode) { // can′t continue playing until the player restarts if (game.isGameOver()) { return; } int gameAction = getGameAction(keyCode); switch (gameAction) { case FIRE: doPlayerMove(); break; case RIGHT: doMoveCursor(1, 0); break; case DOWN: doMoveCursor(0, 1); break; case LEFT: doMoveCursor(-1, 0); break; case UP: doMoveCursor(0, -1); break; default: break; } } private void doPlayerMove() { if (game.isFree(cursorPosition)) { // player move game. makePlayerMove(cursorPosition); playerMove = cursorPosition; // computer move if (!game.isGameOver()) { computerMove = game.makeComputerMove(); } repaint(); } } private void doMoveCursor(int dx, int dy) { int newCursorPosition = cursorPosition + dx + 3 * dy; if ((newCursorPosition >= 0) && (newCursorPosition < 9)) { preCursorPosition = cursorPosition; cursorPosition = newCursorPosition; repaint(); } } // Draw a CIRCLE or CROSS piece on the board private void drawPiece(Graphics g, boolean isCircle, int pos) { int x = ((pos % 3) * boardCellSize) + 3; int y = ((pos / 3) * boardCellSize) + 3; if (isCircle) { drawCircle(g, x, y); } else { drawCross(g, x, y); } } // Draw blue CIRCLE onto the board image private void drawCircle(Graphics g, int x, int y) { g.setColor(BLUE); g.fillArc(x + boardLeft, y + boardTop, boardCellSize - 4, boardCellSize - 4, 0, 360); g.setColor(WHITE); g.fillArc(x + 4 + boardLeft, y + 4 + boardTop, boardCellSize - 4 - 8, boardCellSize - 4 - 8, 0, 360); } // Draw red CROSS onto the board image private void drawCross(Graphics g, int x, int y) { g.setColor(RED); for (int i = 0; i < 4; i++) { g.drawLine(x + 1 + i + boardLeft, y + boardTop, x + boardCellSize - 4 - 4 + i + boardLeft, y + boardCellSize - 5 + boardTop); g.drawLine(x + 1 + i + boardLeft, y + boardCellSize - 5 + boardTop, x + boardCellSize - 4 - 4 + i + boardLeft, y + boardTop); } } // Visually indicates a Player selected square on the board image private void drawCursor(Graphics g) { // draw cursor at selected Player square. g.setColor(WHITE); g.drawRect(((preCursorPosition % 3) * boardCellSize) + 2 + boardLeft, ((preCursorPosition/3) * boardCellSize) + 2 + boardTop, boardCellSize - 3, boardCellSize - 3); // draw cursor at selected Player square. g.setColor(BLACK); g.drawRect(((cursorPosition % 3) * boardCellSize) + 2 + boardLeft, ((cursorPosition/3) * boardCellSize) + 2 + boardTop, boardCellSize - 3, boardCellSize - 3); } private void drawBoard(Graphics g) { // clean the board g.setColor(WHITE); g.fillRect(0, 0, screenWidth, screenHeight); // draw the board g.setColor(BLACK); for (int i = 0; i < 4; i++) { g.fillRect(boardLeft, boardCellSize * i + boardTop, (boardCellSize * 3) + 2, 2); g.fillRect(boardCellSize * i + boardLeft, boardTop, 2, boardCellSize * 3); } } } 6. Game.java 这个类封装了九宫格游戏的主要的游戏程序逻辑。前面我们也说过，游戏程序逻辑本身并不在本例程重点讨论的范围之内，本文主要是介绍MIDP图形编程的基础知识。 注意游戏程序逻辑是独立于游戏用户界面的，并且可以使用其它实现方法替代。 <ccid_nobr></ccid_nobr> <ccid_code></ccid_code>package example.tictactoe; import java.util.Random; import javax.microedition.midlet.*; import javax.microedition.lcdui.*; // The game logic for TicTacToe class Game { private static final int[] WINS = { // horizontals bit(0) | bit(1) | bit(2), bit(3) | bit(4) | bit(5), bit(6) | bit(7) | bit(8), // verticals bit(0) | bit(3) | bit(6), bit(1) | bit(4) | bit(7), bit(2) | bit(5) | bit(8), // diagonals bit(0) | bit(4) | bit(8), bit(2) | bit(4) | bit(6) } ; private static final int DRAWN_GAME = bit(0) | bit(1) | bit(2) | bit(3) | bit(4) | bit(5) | bit(6) | bit(7) | bit(8); private int playerState; private int computerState; private Random random; Game(Random random) { this.random = random; initialize(); } void initialize() { playerState = 0; computerState = 0; } boolean isFree(int position) { int bit = bit(position); return (((playerState & bit) == 0) && ((computerState & bit) == 0)); } // The ′Contract′ is that caller will always make valid moves. // We don′t check that it′s the player′s turn. void makePlayerMove(int position) { playerState |= bit(position); } // The ′Contract′ is that we will be called only when there is still // at least one free square. int makeComputerMove() { int move = getWinningComputerMove(); if (move == -1) { // can′t win move = getRequiredBlockingComputerMove(); if (move == -1) { // don′t need to block move = getRandomComputerMove(); } } computerState |= bit(move); return move; } boolean isGameOver() { return isPlayerWinner() | isComputerWinner() | isGameDrawn(); } boolean isPlayerWinner() { return isWin(playerState); } boolean isComputerWinner() { return isWin(computerState); } boolean isGameDrawn() { return (playerState | computerState) == DRAWN_GAME; } // Return a winning move if there is at least one, otherwise return -1 private int getWinningComputerMove() { int move = -1; for (int i = 0; i < 9; ++i) { if (isFree(i) && isWin(computerState | bit(i))) { move = i; break; } } return move; } // Return a required blocking move if there is at least one (more // than one and we′ve inevitably lost), otherwise return -1 private int getRequiredBlockingComputerMove() { int move = -1; for (int i = 0; i < 9; ++i) { if (isFree(i) && isWin(playerState | bit(i))) { move = i; break; } } return move; } // Return a random move in a free square, // or return -1 if none are available private int getRandomComputerMove() { int move = -1; // determine how many possible moves there are int numFreeSquares = 0; for (int i = 0; i < 9; ++i) { if (isFree(i)) { numFreeSquares++; } } // if there is at least one possible move, pick randomly if (numFreeSquares > 0) { // shift twice to get rid of sign bit, then modulo numFreeSquares int pick = ((random.nextInt()<<1)>>>1) % numFreeSquares; // now find the chosen free square by counting pick down to zero for (int i = 0; i < 9; ++i) { if (isFree(i)) { if (pick == 0) { move = i; break; } pick--; } } } return move; } private static boolean isWin(int state) { boolean isWinner = false; for (int i = 0; i < WINS.length; ++i) { if ((state & WINS[i]) == WINS[i]) { isWinner = true; break; } } return isWinner; } private static int bit(int i) { return 1 << i; } } 7. TicTacToe.jad 下面是九宫格MIDlet的应用程序描述文件。 <ccid_nobr></ccid_nobr> <ccid_code></ccid_code>MIDlet-Name: TicTacToe MIDlet-Vendor: Forum Nokia MIDlet-Version: 1.1.1 MIDlet-Jar-Size: 11409 MIDlet-Jar-URL: TicTacToe.jar MIDlet-1: TicTacToe, /tictactoe.png, example.tictactoe.TicTacToeMIDlet (T117)