科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道J2ME中使用Canvas制作简单的游戏菜单

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

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

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

作者:中国IT实验室 来源:中国IT实验室 2007年9月18日

关键字: Canvas J2ME 编程 java

  • 评论
  • 分享微博
  • 分享邮件

  我们知道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]); 
} 
}

查看本文来源

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章