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

80酷酷网    80kuku.com

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

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

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

   我们应该计算菜单的每个条目的高度,这些可以有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.LEFT|Graphics.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.LEFT|Graphics.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]);
}
}

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: