使用Canvas制作简单的游戏菜单

　2007-12-23 12:30:40　来源：WEB开发网　　　

核心提示：我们知道MIDP的图形用户界面分为两类，分别是高级图形用户界面和低级用户界面，使用Canvas制作简单的游戏菜单，一般来讲高级图形用户界面类使用起来比较方便，可移植性强，MenUCanvas的代码如下所示：package com.j2medev.chapter3;import javax.microedition.lc

我们知道MIDP的图形用户界面分为两类，分别是高级图形用户界面和低级用户界面。一般来讲高级图形用户界面类使用起来比较方便，可移植性强，但是程序员对他的控制能力也很低，因为它们的界面表现是由底层控制的，而不是我们控制的。相比高级UI类，低级UI类则使用起来更难一些，但是控制能力更强，可以做出自己需要的界面。

Canvas和Graphics是我们必须熟练使用的两个类，分别代表了画布和画笔（事实上更丰富，姑且这么比喻）。而我们则是画画的人，而指导我们如何下笔的就是java doc了，再加上勤奋努力一定可以画出不错的界面。比如tabbed菜单，二级菜单等。这里我们讲述一个简单菜单的制作方式。

在画菜单的时候，需要考虑两面的问题，第一是计算相对位置，让菜单能够尽可能适应更多的机型，尽量少使用绝对值。例如画下面的菜单的时候

使用Canvas制作简单的游戏菜单

我们应该计算菜单的每个条目的高度，这些可以有Font的高度算出，当然你可以给条目留一些padding的距离。还应该计算条目的最宽值，毕竟每个条目的字数不一样。这样基本知道了整个菜单占的空间。最后还需要计算菜单在屏幕的位置。菜单的绘制如下所示：

　 public void paint(Graphics g){
　　　 //清除屏幕
　　　 int color = g.getColor();
　　　 g.setColor(0xFFFFFF);
　　　 g.fillRect(0,0,getWidth(),getHeight());
　　　 g.setColor(color);
　　　 //计算整个菜单的高度，宽度和（x,y）
　　　 int rectWidth = PReferWidth;
　　　 int rectHeight = preferHeight * LABELS.length;
　　　 int x = (getWidth()-rectWidth)/2;
　　　 int y = (getHeight()-rectHeight)/2;
　　　 //画矩形
　　　 g.drawRect(x,y,rectWidth,rectHeight);
　　　 for(int i = 1;i<LABELS.length;i++){
　　　　　 g.drawLine(x,y+preferHeight*i,x+rectWidth,y+preferHeight*i);
　　　 }
　　　 //画菜单选项，并根据selected的值判断焦点
　　　 for(int j = 0;j<LABELS.length;j++){
　　　　　 if(selected == j){
　　　　　　　 g.setColor(0x6699cc);
　　　　　　　 g.fillRect(x+1,y+j*preferHeight+1,rectWidth-1,preferHeight-1);
　　　　　　　 g.setColor(color);
　　　　　 }
　　　　　 g.drawString(LABELS[j],x+8,y+j*preferHeight+4,Graphics.LEFTGraphics.TOP);
　　　 }
　 }

第二个重要的问题是：焦点的切换，在高级UI类中，这是不需要我们处理的。但是使用Canvas制作菜单需要自己来处理焦点的移动，这里我们定义一个int类型变量selected，来记录焦点所在的菜单条目位置,也就是选择的索引。当用户按键的时候，我们在keyPressed()方法中判断用户的移动方向，对selected进行相关的加减运算，然后repaint()整个屏幕即可。

　 public void keyPressed(int keyCode){
　　　 //根据用户输入更新selected的值，并重新绘制屏幕
　　　 int action = this.getGameAction(keyCode);
　　　 switch(action){
　　　　　 case Canvas.FIRE:
　　　　　　　 printLabel(selected);
　　　　　　　 break;
　　　　　 case Canvas.DOWN:
　　　　　　　 selected = (selected+1)%4;
　　　　　　　 break;
　　　　　 case Canvas.UP:{
　　　　　　　 if(--selected < 0){
　　　　　　　　　 selected+=4;
　　　　　　　 }
　　　　　　　 break;
　　　　　 }
　　　　　 default:
　　　　　　　 break;
　　　 }
　　　 repaint();
　　　 serviceRepaints();
　 }

这样我们就制作出了一个基本的菜单，你还可以发挥想象给被选中的菜单增加动画效果。MenUCanvas的代码如下所示：

package com.j2medev.chapter3;

import javax.microedition.lcdui.*;

public class MenuCanvas extends Canvas{
　
　 //selected变量标记了焦点位置
　 private int selected = 0;
　 private int preferWidth = -1;
　 private int preferHeight = -1;
　 public static final int[] OPTIONS = {0,1,2,3};
　 public static final String[] LABELS={"New Game","Setttings","High Scores","Exit"};
　
　 public MenuCanvas() {
　　　 selected = OPTIONS[0];
　　　 //计算菜单选项的长度和高度值
　　　 Font f = Font.getDefaultFont();
　　　 for(int i = 0;i<LABELS.length;i++){
　　　　　 int temp = f.stringWidth(LABELS[i]);
　　　　　 if(temp > preferWidth){
　　　　　　　 preferWidth = temp;
　　　　　 }
　　　 }
　　　 preferWidth = preferWidth + 2*8;
　　　 preferHeight = f.getHeight()+2*4;
　 }
　
　 public void paint(Graphics g){
　　　 //清除屏幕
　　　 int color = g.getColor();
　　　 g.setColor(0xFFFFFF);
　　　 g.fillRect(0,0,getWidth(),getHeight());
　　　 g.setColor(color);
　　　 //计算整个菜单的高度，宽度和（x,y）
　　　 int rectWidth = preferWidth;
　　　 int rectHeight = preferHeight * LABELS.length;
　　　 int x = (getWidth()-rectWidth)/2;
　　　 int y = (getHeight()-rectHeight)/2;
　　　 //画矩形
　　　 g.drawRect(x,y,rectWidth,rectHeight);
　　　 for(int i = 1;i<LABELS.length;i++){
　　　　　 g.drawLine(x,y+preferHeight*i,x+rectWidth,y+preferHeight*i);
　　　 }
　　　 //画菜单选项，并根据selected的值判断焦点
　　　 for(int j = 0;j<LABELS.length;j++){
　　　　　 if(selected == j){
　　　　　　　 g.setColor(0x6699cc);
　　　　　　　 g.fillRect(x+1,y+j*preferHeight+1,rectWidth-1,preferHeight-1);
　　　　　　　 g.setColor(color);
　　　　　 }
　　　　　 g.drawString(LABELS[j],x+8,y+j*preferHeight+4,Graphics.LEFTGraphics.TOP);
　　　 }
　 }
　
　 public void keyPressed(int keyCode){
　　　 //根据用户输入更新selected的值，并重新绘制屏幕
　　　 int action = this.getGameAction(keyCode);
　　　 switch(action){
　　　　　 case Canvas.FIRE:
　　　　　　　 printLabel(selected);
　　　　　　　 break;
　　　　　 case Canvas.DOWN:
　　　　　　　 selected = (selected+1)%4;
　　　　　　　 break;
　　　　　 case Canvas.UP:{
　　　　　　　 if(--selected < 0){
　　　　　　　　　 selected+=4;
　　　　　　　 }
　　　　　　　 break;
　　　　　 }
　　　　　 default:
　　　　　　　 break;
　　　 }
　　　 repaint();
　　　 serviceRepaints();
　 }
　 //showNotify()在paint()之前被调用
　 public void showNotify(){
　　　 System.out.println("showNotify() is called");
　 }
　 private void printLabel(int selected){
　　　 System.out.println(LABELS[selected]);
　 }
　
}