Nokia UI学习范例FishTank研究

作者：mingjava 文章来源：http://www.j2medev.com/Article/ShowArticle.asp?ArticleID=153

由于MIDP1.0中提供的API比较有限，因此Nokia实现了自己的类库来提供补充。其中包括声音的支持、屏幕的背景光和机器震动、图像的翻转、Alpha通道以及对像素的操作支持。学习Nokia UI的使用的最好例子莫过于Nokia官方提供的FishTank了。本文讲主要介绍一下这个范例，其中的一些思路和技巧是值得我们学习的。

FishTank的界面比较简单，只有一个屏幕。池塘里的鱼儿不停的游动，水底的水草也不停的漂浮。这个界面是分层设计的，因此引入了一个变量z，这样就和水平参数x和垂直参数y构成了三维的空间。其中水草处于中间层。鱼的游动是无规律的，其中的算法我们可以参考，当鱼触及到边缘的时候，它会反向游动。通过Nokia UI中提供的水平翻转可以实现。dg.drawImage(img, x, y, (Graphics.LEFT | Graphics.TOP),DirectGraphics.FLIP_HORIZONTAL);水草的游动也是随机的

下面我们看看整个应用的结构

程序总共有四个类组成，其中我们主要关注的是FishTankCanvas、Fish和Weeds。其中Fish和Weeds比较相似，他们代表了两个对象鱼儿和水草。而FishTankCanvas是FullCanvas的子类并且实现了Runnable接口，它是一个独立的线程。每隔一段时间他会更新一下Fish和Weeds的状态，然后重新绘制屏幕。run()方法中的代码如下
public void run()
{
Thread currentThread = Thread.currentThread();

try
{
// This ends when animationThread is set to null, or when
// it is subsequently set to a new thread; either way, the
// current thread should terminate
while (currentThread == animationThread)
{
long startTime = System.currentTimeMillis();

// Only animate when the canvas is visible.
if (isShown())
{
tick();

// Repaint everything above the sand, the fish
// never swim at h > waterHeight.
repaint(0, 0, waterWidth, waterHeight);
serviceRepaints();
}

long timeTaken = System.currentTimeMillis() - startTime;
if (timeTaken < MILLIS_PER_TICK)
{
synchronized (this)
{
wait(MILLIS_PER_TICK - timeTaken);
}
} else
{
currentThread.yield();
}
}
} catch (InterruptedException e)
{
}
}
由于在屏幕的下方有一部分是泥土，因此在这里调用了repaint(0,0,waterWidth,waterLength)。其实FishTankCanvas同时也是一个容器类，它是Fish和Weeds的容器。他去更新Fish和Weeds的状态然后调用各自的draw（）方法来重新绘制。下面我们看看FishTankCanvas是如何绘制的
private synchronized void drawFishTank(Graphics g)
{
// Draw the water
g.setColor(0, 255, 255);
g.fillRect(0, 0, waterWidth, waterHeight);

// Draw the sand
g.setColor(255, 128, 64);
g.fillRect(0, waterHeight, waterWidth, getHeight());

// Draw the weeds and fishes
for (int plane = 0; plane < NUM_PLANES; plane++)
{
if (plane == WEEDS_PLANE)
{
weeds.draw(g);
}

for (int i = 0; i < fishes.size(); i++)
{
Fish fish = (Fish) (fishes.elementAt(i));
if (fish.getZ() == plane)
{
fish.draw(g);
}
}
}
}

接下来我们研究一下Fish和Weeds的代码，它们就是有很多图片构成的。实现的结果和MIDP2.0中的Sprite差不多。Fish和Weeds的图片都是有类型之分的，每个类型又有几个桢。这样才可以构造出不同的对象，并且相同的对象在不同的时刻也有不同的状态。
private static final int TYPE_NUM = 3;

private static final int FRAME_NUM = 2;

private static final Image[][] fishImage;
Fish和Weeds都是采用了静态初始化块的方式来初始化相应的二维数组。例如
static
{
fishImage = new Image[TYPE_NUM][FRAME_NUM];

int i = 0;
int k = 0;
try
{
for (i = 0; i < TYPE_NUM; i++)
{
for (k = 0; k < FRAME_NUM; k++)
{
fishImage[i][k] = Image.createImage("/fish" + i + k
+ ".png");
}
}
} catch (java.io.IOException e)
{
fishImage[i][k] = null;
}

// This MIDlet implicitly assumes that all the Images
// are the same width and height.

fishWidth = fishImage[0][0].getWidth();
fishHeight = fishImage[0][0].getHeight();
}

为了让鱼儿或者水草具有更好的随机性，代码是通过如下的算法来控制他们的方向的，下面以方向x为例说明
// mostly continue as we are, but sometimes randomly change
if ((ticksSinceLastChangeX > 20) && (rand(20) == 0))
{
vx = rand(2) * 2 - 1; // -1 or 1
ticksSinceLastChangeX = 0;
}

// if moving would take us off the left or right of the water,
// reverse
if (((vx < 0) && (x + vx < 0))
|| ((vx > 0) && (x + fishWidth + vx > FishTankCanvas.waterWidth)))
{
vx = -vx;
ticksSinceLastChangeX = 0;
}
当鱼接触到水的边缘的时候，它的速度方向会改变。在此前的代码是为了增加他的随机性。Fish的重新绘制也比较简单，这里用到了Nokia UI中的水平翻转的扩展功能
public void draw(Graphics g)
{
DirectGraphics dg = DirectUtils.getDirectGraphics(g);

Image img = fishImage[type][frame];
if (img != null)
{
if (vx < 0)
{
dg.drawImage(img, x, y, (Graphics.LEFT | Graphics.TOP),
DirectGraphics.FLIP_HORIZONTAL);
} else
{
dg.drawImage(img, x, y, (Graphics.LEFT | Graphics.TOP), 0);
}
}

frame = (frame + rand(2)) % FRAME_NUM;
}

我们可以看到每次绘画结束后都会把frame的编号随机设置一下，这样可以得到鱼儿本身运动的效果。

MIDlet的代码比较简单，直接给出
package example.fishtank;

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;

public class FishTankMIDlet extends MIDlet
{
private final FishTankCanvas canvas;

public FishTankMIDlet()
{
canvas = new FishTankCanvas(this);
}

public void startApp()
{
Display.getDisplay(this).setCurrent(canvas);
canvas.start();
}

public void pauseApp()
{
canvas.stop();
}

public void destroyApp(boolean unconditional)
{
canvas.stop();
}

/*
* On the exit command, cleanup and notify that the MIDlet has been
* destroyed.
*/
void exitRequested()
{
destroyApp(false);
notifyDestroyed();
}
}

总结：我们在本文中可以学到如何使用Nokia UI中提供给我们的扩展功能，比如水平翻转、全屏显示等。更重要的是，FishTank的代码设计比较合理，代码思路清晰。比较容易维护和扩展。另外程序中随机性的算法也可以用于实际工作中。您可以从这里下载全部代码点击浏览该文件