手机游戏的图形设计与动画制作

Size: px

Start display at page:

Download "手机游戏的图形设计与动画制作"

祀侪仲
5 years ago
Views:

1 基于 linux 操作系统的 J2ME 动画制作入门作者 : 刘宁在互联网上经常可以看到的与 J2ME 开发有关的文章都是基于 Windows 系统平台的, 由于我日常的工作基本上是在 Linux 系统下完成的, 所以写这样一篇文章谈谈在 Linux 系统平台开发 J2ME 动画程序的一些心得 ( 一 ) 图形设计 1. 图形格式 J2ME 手机的 MIDP 1.0 标准版本, 只支持 PNG 格式的图像可以显示静态的图像和非静态的图像 (MIDP 2.0 中支持透明的 PNG 图像 ) 因此你必须对 PNG 有足够的了解才能开发出最适合的游戏界面注 : 静态图像 : 是指一经创建, 图像的内容就不再变化的图像非静态图像 : 是指图像可以由 J2ME 绘图语句动态创建什么是 PNG 格式 : PNG 的的英文名称为 Portable Network Graphics, 即便携式网络图片, 它是一种位图文件格式 PNG 格式使用无损压缩, 允许使用类似于 GIF 格式的调色板技术, 支持真彩色图像, 并具备 alpha 信道 ( 半透明 ) 等特性 PNG 格式与其它图像格式相比较 : BMP( 未压缩, 档案大 ), GIF( 非破坏压缩, 但只能存 256 色以下图档 ), JPG( 破坏性压缩, 压缩后的图档与原图不同 ) PNG 提供了一个将图形档案大小压缩到极限以利网络传输, 但又能保留所有与画像品质有关信息的解决方案 PNG 特性 : 支持 256 色调色板技术以产生小体积文件最高支持 48 位真彩色图像以及 16 位灰度图像支持 alpha 信道的半透明特性支持图像亮度的 gamma 校正信息支持存储附加文本信息, 以保留图像名称作者版权创作时间注释等

2 信息使用无损压缩渐近显示和流式读写, 适合在网络传输中快速显示预览效果后再展示全貌使用 CRC 循环冗余编码防止文件出错最新的 PNG 标准允许在一个文件内存储多幅图像缺点 : PNG 虽然有是一个经过深思熟虑而规划出的档案格式, 但它还是有不尽完美的地方 : 1 PNG 不支持单个档案储存多张图片 : 知道动画 GIF89a 模式可以储存多张 GIF 图片在同一个档案中, 如此可以在网页上做出动画效果 PNG 则因为 PNG GROUP 坚持 PNG 是一个 " 单张图片 " 的档案格式而不支持这方面的应用不过 PNG 的 Document 中也有提到应用程序可以藉由自定 chunk 的方式来储存多张图片, 不过这并不是一个标准, 所以不具实用性 2 PNG 不支持 CYMK 模式 : CYMK 色彩模式是应用于印刷出版的图档色泽表示法,PNG 被界定为是一个专门用于跨平台网络传输的档案格式, PNG GROUP 认为 CYMK 对于 device 的依赖性太重, 所以 PNG 不支持 CYMK, 这使得将 CYMK 的图档转为 PNG 格式时, 必须先将色彩模式转成 RGB, 否则便会发生色彩错乱的情形 3 PNG 没有储存 DPI 信息 : DPI 是一种决定图文件打印品质的信息, 例如 300DPI 就表示要将 300 pixel 打印在一英吋的范围间 PNG GROUP 也把这个视为是一种 device 依赖性大的信息, 所以不予储存 2 制作图像图像绘制工具 : 在 Windows 平台下一般使用 Adobe 公司的 PhotoShop 软件, 目前最新的版本是 9.0 在 Linux 桌面平台下我习惯使用 Gimp 这款图形处理软件利用 GIMP 图像处理软件制作图像 : 1. 用 GIMP 加载已经画好的图象如下 :

3 图 2.1: 图像加载 2 然后在图像窗口点击右键, 然后选则 Layer, 再选则透明, 然后选择 Add Alpha Channel 如下 : 图 2.2: 选则图层透明 3. 在工具栏选择魔术棒工具, 选取需要变成透明的图像区域, 然后单击右键, 选择 Edit, 然后选择清除, 如下 :

4 图 2.3: 将选择区域变成透明 4. 存储图像文档, 在菜单栏选择另存为, 在出现的窗口中选择确定文件类型为 PNG 格式, 保存完成图 2.4: 存储图片文档

5 二动画制作在编写程序之前, 我们先要了解 Linux 平台下所使用的开发工具,SUN 官方推荐使用 NetBean 这个开发工具, 所以我们要下载 NetBean 的 Linux 版本, 然后下载 J2ME SDK 的 Linux 版本, 安装过程很简单, 这里不作阐述需要掌握的基础知识 : 1 什么是动画? 动画是游戏开发的基础, 是一定要学习的重要知识基本的动画, 是将显示在画面上的角色等的动作与描绘位置作连续的变化, 以产生动态的效果如果你了解这种连续变化的表现方式, 你就可以通过 J2ME 的相关方法来实现动画 2 什么是线程 : 所谓线程就是指程序的运行单位, 使用线程将可以同时进行复数的处理通过实例了解线程 : 注 : 本文所有实例除特殊需要均未提供 MIDlet 类文件的源代码, 请自行编写 1 需要掌握的 java 相关类及接口 Runnable 接口 ---Runnable 接口 // Runnable 接口非常简单, 就定义了一个方法 run(), 继承 Runnable 并实现这个方法就可以实现多线程了, 但是这个 run() 方法不能自己调用, 必须由系统来调用, 否则就和别的方法没有什么区别了. 主要方法 : ---run() 方法 Thread 类 ---Thread 类

6 // 用于创建线程和启动线程的类主要方法 : ---sleep(long time) 方法 // 时间延迟 ---start() 方法 // 执行 runnable 接口的 run() 方法 Timer 类和 TimerTask 类 ---TimerTask 类 // 是一个起到定时器功能的类主要方法 : --- run() 方法 // 程序运行 2 线程的使用 Java 中实现多线程有两种途径 : 继承 Thread 类实现 Runnable 接口继承 TimerTask 类 ( 一 ) 实现 Runnable 接口来创建线程 : 注 : 将 Runnable 接口作为实现的类, 必须将 Runnable 接口的 run() 方法重新定义在 run() 方法中, 将编写线程处理的内容 1) 线程的创建, 启动, 运行与停止 : 线程的创建和启动运行线程必须用到 Thread 类, 调用 Thread 类的 start() 方法会自动执行 Runnable 接口的 run() 方法来启动线程例 : public class ThreadTestCanvas implements Runnable // 实现 Runnable 接口 private Thread th; // 声明线程对象 ThreadTestCanvas()

7 // 以对象 Runnable 为参数, 实例化 Thread 对象, 创建线程 th = new Thread(this); // 调用 Thread 类的 start() 方法启动线程, 执行 run() 方法 th.start(); 线程的运行 run () 执行代码执行代码执行代码线程的时间等待方法 Thread 类提供了在指定时间内让程序处理等待的功能 Thread.sleep(long mills) // 以毫秒为单位时间延迟例 : Try // 等待 500 毫秒 Thread.sleep(500); // 下一个处理 Catch(Exception e) 注 : 使用 sleep(long mills) 方法是会产生异常线程的停止线程在结束了 Runnable.run() 方法内的处理之后就会停止注 : 在 J2SE 中线程的停止方法, 在 j2me 的配置中已经删除了这个方法

8 由于会在 J2SE 中, 会导致 SecurityException 异常的发生, 所以才不被推荐使用线程的实例 : mythreadtest.java 这个例子实现了利用循环在终端循环打印一个 int 型变量的累加运算 (MIDlet 类省略 ) class mythreadtest extends Canvas implements Runnable private boolean isstopped; int i = 0; mythreadtest() isstopped = false; public void dostart() Thread th = new Thread(this); Th.start(); public void run() // 编写线程的处理部分 While(!isStopped) myprint(); try Thread.sleep(1000); catch(exception e) public void myprint() System.out.println( *** hello thread *** + i ); i++ ; public void paint(graphics g) g.setcolor(255,255,0);

9 g.fillrect(0,0, getwidth(),getheight()); ( 二 ) Timer 类和 TimerTask 类的结合使用 J2ME 中自 MIDPv1.0 开始就提供了对定时器的支持要使用定时器就要需要涉及到 TIMER( 定时器 ) 类和 TimerTask( 定时器任务 ) 类 TimerTask 类是一个虚类, 用于实现一个具体的任务 Timer 类用于通过定期执行由 TimerTask 对象表示的任务要使用定时器功能, 就必须从 TimerTask 类派生新类, 并且重载 void run() 方法, 然后通过 Timer 对象来定时执行任务过程抽象 : 1) import java.util.*; // 导入这个包 2) class Test extends TimerTask // 需要有一个类继承这 TimerTask 类 3) public void run() // 重新定义 TimerTask 类的 run() 方法 4) Timer timer = new Timer(); // 生成一个 Timer 类的对象 5) timer.schedule(timertask task, long delay, long period) // 调用这个方法, 该方法第一个参数是一个 TimerTask 类型的对象, 第二个参数是任务执行前等待的时间, 第三个参数是任务执行时的间隔时间注 :TimerTask 不用使用 while() 方法进行循环, 因为他是定时刷新但这样也有个问题, 就是如果 TimerTask 的 run 方法写得过长, 执行时间超过了设置的线程间隔时间, 就会出现线程重叠的情况线程重叠会造成诸如游戏速度突然加快等 Bug 实例 : 该实例主要实现 Timer 类和 TimerTask 类的结合使用, 程序运行后等待 5 秒钟, 然后定时每隔 2 秒在终端输出一个 int 型变量的累加 MIDlet 类 :TimerMIDlet.java import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class TimerMIDlet extends MIDlet mecanvas mc; /** Creates a new instance of TimerMIDlet */ public TimerMIDlet()

10 mc = new mecanvas(); Display.getDisplay(this).setCurrent(mc); public void startapp() public void pauseapp() public void destroyapp(boolean unconditional) TaskTimer 类 : metasktimer.java import javax.microedition.lcdui.*; import java.util.*; public class metasktimer extends TimerTask int i=0; public metasktimer() public void run() System.out.println("abc"+i); i++; Canvas 类 :mecanvas.java import javax.microedition.lcdui.*; import java.util.*; public class mecanvas extends Canvas Timer timer; metasktimer mtt; mecanvas() mtt = new metasktimer(); timer = new Timer(); timer.schedule(mtt,5000,1000); public void paint(graphics g)

11 g.setcolor(255,0,0); g.fillrect(0,0, getwidth(),getheight()); g.setcolor(0,0,0); g.drawstring("abc"+ i, getwidth()/2, getheight()/2, 0); 利用线程技术实现动画 : ( 一 ) 需要掌握的相关类 Canvas 类 ---Canvas 类 ( 画布 ) // Canvas 类是所有低级用户组件的父类, 我们通过实现 Canvas 类的 paint(graphics g) 方法来绘制屏幕, 主要是使用 Graphics 类提供的各种方法主要方法 : ---panit() 方法 // 用于刷新页面 ---rapaint() 方法 // 用于调用 paint() 方法 Graphics 类及相关类 ---Graphics 类 // 可以把 Graphics 对象想象成一张白纸, 通过调用这个对象的方法我们就可以在这张白纸上描绘出美丽的图画主要方法 : ---setcolor(int red, int green, int blue) ---fillrect(int x, int y, int width, int height) ---drawimage(image img, int x, int y, int anchor)

12 Image 类 ---Image 类 // 加载图像主要方法 : ---static Image createimage(image source)// 通过一张图片创建 1 利用循环运行线程生成动画要进行连续的处理需要使用 while 与 for 语法, 以使用特殊的状态标志来控制 Runnable.run() 方法的循环运行演示动画实例 1:ThreadTestCanvas.java import javax.microedition.lcdui.*; public class ThreadTestCanvas extends Canvas implements Runnable

13 private boolean isstopped; // 循环结束控制变量 private Thread th; // 声明线程对象 private Image imgs[]; // 存放图像的数组 private int j; // 存放图像数组的索引值变量 ThreadTestCanvas() // 构造函数 // 初始化各个属性 j = 0; imgs = new Image[4]; for(int i = 0;i <imgs.length ;i++) try // 注意异常的处理 imgs[i]=image.createimage("/20"+string.valueof(i+1)+".png"); // 分别用四张不同的图片来生成 Image 对象 catch(exception e) public void dostart() isstopped = false; // 赋初值 Thread th = new Thread(this); // 生成一个新的线程 th.start(); // 调用线程的 start() 启动方法, 执行 Runnable 接口的 run() 方 public void dostop() isstopped = true; public void run() // Runnable 接口的 run 方法, 线程的运行部分 while(!isstopped) // 循环控制 repaint(); // Canvas 类的重绘方法, 用来执行 paint() 方法 try // 注意异常的处理 Thread.sleep(500); // 时间延迟 500 毫秒 catch(exception e) if(j>=imgs.length) // 图像数组索引值的重置 j = 0; public void paint(graphics g) // Canvas 类的描绘方法

14 try // 注意异常的处理 g.setcolor(0,0,0); // 设置颜色的方法 g.fillrect(0,0,getwidth(),getheight()); // 画矩形的方法 g.drawimage(imgs[j],getwidth()/2,getheight()/2, Graphics.VCENTER Graphics.HCENTER); // 描绘图像的方法 catch(exception e) j++; // 图像数组索引值的控制 ( 二 ) 利用 MIDP v2.0 相关类制作动画利用 Canvas 类具备的功能可以开发一些简单的游戏动画, 但是从功能和性能方面都比较难以得到保证在 MIDP v2.0 中, 新增加了一个 javax.mircroedition.lcdui.game 包, 这个包里定义了用于游戏开发的各种类这些类主要针对游戏开发的特点提供了独立的功能用于提高游戏性能简要介绍几个与制作动画有关的 MIDP v2.0 中的两个类 :

15 GameCanvas 类 Sprite( 精灵 ) 类 1 GameCanvas 类 GameCanvas( 游戏画布 ) 对象能够提供画布的功能类的定义为 : public abstract class GameCanvas extends Canvas GameCanvas 类是在 Canvas 类的基础上派生的, 增加的功能支持脱机绘制的画布和随时查询按键状态, 由于该类被定义为抽象类, 所以必须要派生新类 GameCanvas 类的构造函数 : protected GameCanvas(boolean suppresskeyevents) 根据 GameCanvas 类的构造函数的定义, 必须在继承了该类的构造函数中应用 Super(true) 传入一个 true 值, 否则无法编译 ---GameCanvas 类

16 主要方法 : ---getgraphics() // 得到画布中脱机屏幕上用于作图的 Graphics 对象 ---flushgraphics() // 要求刷新屏幕, 这时脱机屏幕上的图像会被绘制到真实屏幕上 2 Sprite 类 Sprite 对象主要用来解决物体在游戏中的动画, 移动和检测物体间的碰撞 Sprite 类的定义为 : public class Sprite extends Layer Sprite 类是 Layer 类的派生类注 :Layer 类是一个抽象类, 并不能直接使用, 因此在 MIDP 中还定义 Layer 类的派生类 TiledLayer 类和 Sprite 类处理背景图层和移动的物体使用 Sprite 类时, 需要先了解下面几个概念 : 画面帧, 动画序列,

17 对准点 1 画面帧是一段动画中的一幅图像, 多幅连贯的连续播放就可以产生动画效果 2 动画序列是指播放动画时播放各个帧的顺序 3 对准点是对于一个 Sprite 对象所包含的图像内的一个坐标点, 在旋转时可以这个点为中心, 或者在移动对象时以这个点作为基准点默认情况下, 这个店位于图像的左上角, 也就是图像中的坐标 (0,0) 位置 Sprite 帧用于渲染 Sprite 的原始帧由一个单独的 Image 对象提供, 此 Image 可以是可变的, 也可以是不可变的如果使用多帧, 图像将按照指定的宽度和高度被切割成一系列相同大小的帧, 正如下图所示, 同一序列的帧可以以不同的排列存储, 这取决于游戏开发者是否方便开发

18 每一帧都被赋予一个唯一的索引号左上角的帧被赋予索引号 0 余下的帧按照行的顺序索引号依次递增 ( 索引号从第一行开始, 接着是第二行, 以此类推 ) 帧序列 : Sprite 的帧序列定义了帧以什么样的顺序来显示缺省的帧序列就是所有可用帧的顺序排列, 因此, 帧序列和对应的帧的索引是一致的这表示缺省的帧序列的长度和所有原始帧的总数是相等的如 : 一个 Sprite 有 4 个帧, 缺省的帧序列为 0,1,2,3

19 ---Sprite 类构造函数 : --- Sprite(Image image, int framewidth, int frameheight) 参数 : image : 为需要分割的原始图像 framewidth 和 frameheight 分别指定了原始图像需要按照什么样的宽度和高度来分割主要方法 :

20 --- setframesequence (int[] sequence) // 设置动画序列, 参数 sequence 表示动画序列数组 --- setposition(int x, int y) // 将对象移动到指定位置参数 (x,y) 坐标位置 --- nextframe () // 将下一帧设置为当前帧 --- paint (Graphics g) // 描绘 Sprite --- definereferencepixe (int x,int y) // 把画面帧上的 (x,y) 坐标设置为对准点, 参数 x 和 y 针对的是图像左上角的位置 --- setrefpixelposition(int x,int y) // 以对准点为中心, 将对象移动到指定位置参数 (x,y) 坐标位置 --- setvisible(boolean visible) // 设置精灵是否显示 --- isvisible() // 判断精灵是否为显示状态 --- settransform (int transform) // 对每一帧图像进行旋转

21 参数 transform 为旋转方式, 允许的取值为 : Sprite.TRANS_NONE: 不旋转 Sprite.TRANS_ROT90, Sprite.TRANS_ROT180, Sprite.TRANS_ROT270 顺时针旋转 90 度,180 度,270 度 Sprite.TRANS_MIRROR: 水平翻转 Sprite.TRANS_MIRROR_ROT90, Sprite.TRANS_MIRROR_ROT180, Sprite.TRANS_MIRROR_ROT270 沿水平翻转后再顺时间针旋转 90 度,180 度,270 度 1 实例演示利用 Sprite 帧序列制作动画 : Sprite_Frame.java ( 该实例的动画效果与上一个实例一样 ) import javax.microedition.lcdui.*; import javax.microedition.lcdui.game.*; public class Simple_Frame extends GameCanvas implements Runnable // 继承 CameCanvas 类 private boolean fstate; // 循环控制变量 private Image img; // 图像对象 private Sprite sprite; // 声明 Sprite 对象 public Simple_Frame() // 构造函数

22 super(true); int [] i = 0,1,2,3; // 生成一个整型数组作为帧序列排列顺序 try img = Image.createImage("/b.png"); // 实例化一个图像对象 sprite = new Sprite(img, 50,50); // 实例化一个 Sprite 对象, 这个图像被按照 50 像素点宽,50 像素点高的比例分割成若干画面帧 sprite.setframesequence(i); // 设置动画序列, 按照数组设置的顺序排列 sprite.definereferencepixel(100, 100);// 把画面帧上的 (x,y) 坐标设置为对准点 catch(exception e) public void dostart() fstate = true; Thread t = new Thread(this); // 创建一个线程 t.start(); // 启动线程, 执行 Runnable 接口的 run() 方法 public void stop() fstate = false; public void run() // 线程运行部分 Graphics g = getgraphics(); // 获取 Graphics 对象 while(true) dodraw(g); // 执行自定义的描绘方法 try Thread.sleep(1000); // 时间延迟 1000 毫秒 catch(exception e) public void dodraw(graphics g) // 自定义的描绘方法 g.setcolor(255,0, 0); // 设置颜色 g.fillrect(0,0, getwidth(), getheight()); // 描绘矩形 try

23 sprite.setrefpixelposition(getwidth()/2, getheight()/2); // 将对象移动到指定位置, 这里是屏幕的中心位置 sprite.paint(g); // 描绘 Sprite 对象 sprite.nextframe(); // 将下一帧设置为当前帧 catch(exception e) flushgraphics(); // 将脱机屏幕上的图像会被绘制到真实屏幕上 2 利用对准点作旋转动画 Sprite 包含一个对准点 (reference pixel) 的概念对准点通过指定其在 Sprite 未经变换的帧内的某一点来定义, 使用 definereferencepixel(x,y) 方法缺省的, 参考对准点定义在帧的 (0, 0) 像素点如果有必要, 参考对准点也可以定义在帧区域以外在这个例子中, 参考对准点被定义在猴子悬挂的手上 : 主要方法 : sprite.definereferencepixel(int x, int y);

24 /** 把画面帧上的 (x,y) 坐标设置为对齐点, 参数 x 和 y 针对的是图像左上角的位置 sprite.settransform(int transform); /** 对每一帧图像进行旋转当图像旋转后, 可以引起对象的宽度和高度发生变化此外, 对图像的旋转并不会积累起来, 就是说旋转两次 90 度的结果还是旋转 90 度 */ 实例演示 : Sprite_ReferencePixel.java import javax.microedition.lcdui.*; import javax.microedition.lcdui.game.*; import javax.microedition.lcdui.game.sprite; public class Simple_ReferencePixel extends GameCanvas implements Runnable // 继承 GameCanvas 类 private boolean mtrucking; // 循环控制变量 private Image img; // 声明一个 Image 对象存储动画画面 private Image bg; // 声明一个 Image 对象存储背景画面 private Sprite spritea; // 声明一个 Sprite 对象 private int trans1 ; // 声明一个 int 型变量用于旋转角度的控制 public Simple_ReferencePixel() super(true); try // 初始化各个属性 img = Image.createImage("/a.png"); bg = Image.createImage("/a1.png");

25 spritea = new Sprite(img); trans1 = Sprite.TRANS_NONE; // 旋转角度初始值为没有旋转 catch(exception e) public void start() // 启动线程方法 mtrucking = true; Thread t = new Thread(this); t.start(); public void stop() mtrucking = false; public void run() // 线程运行部分 Graphics g = getgraphics(); // 获取 Graphics 对象 while (mtrucking == true) render(g); // 执行自定义的描绘方法 try Thread.sleep(1000); trans1 += Sprite.TRANS_ROT90; catch (InterruptedException ie) private void render(graphics g) g.setcolor(0,0,0); g.fillrect(0,0, getwidth(), getheight()); try if(trans1 > Sprite.TRANS_ROT90) trans1 = Sprite.TRANS_NONE;

26 g.fillrect(0,0, getwidth(), getheight()); g.drawimage(bg, getwidth()/2,getheight()/2,graphics.vcenter Graphics.HCENTER); // 描绘背景图片在屏幕的中心位置 spritea.definereferencepixel(55, 20); // 设置对准点 spritea.setrefpixelposition(120, 80); // 将 sprite 对象移动到屏幕上指定的位置 spritea.settransform(trans1); // 设置 sprite 对象的旋转角度 spritea.paint(g); // 描绘 Sprite 对象 catch(exception e) flushgraphics(); // 刷新屏幕

Chapter 9: Objects and Classes

Chapter 9: Objects and Classes Java application Java main applet Web applet Runnable Thread CPU Thread 1 Thread 2 Thread 3 CUP Thread 1 Thread 2 Thread 3 ,,. (new) Thread (runnable) start( ) CPU (running) run ( ) blocked CPU sleep(