stage3D 搭建2d图形引擎 (七) 简单纹理动画
2012-12-08 13:01
519 查看
在硬件渲染的基础之上实现动画的方案应该很多,但比较普遍也是很基础的一种做法就是纹理动画,即通过每一帧改变纹理坐标来在同一张纹理上实现画面的切换。
如下的一张精灵图序列,如果我们每一帧将纹理坐标(四个点)向前推进一步,那么就可以让人物动起来:
实现这种动画其实并不难,但前提是你已经实现了静态的纹理贴图,在静态纹理贴图的基础之上我们需要做的就是将每一帧的纹理坐标数据计算并存储起来,然后在每一帧的迭代中,根据当前帧的计数,取得相应的纹理坐标即可。
我们通过扩展之前的Image类来实现这种动画:
在这个类中我们需要知道的是总的帧数,帧动画的宽和高,这样我们就可以根据纹理的尺寸计算出每一帧的纹理坐标数据,并将它存放在_frames字段中。在每一帧到来时(即调用advanceTime()时),我们取出当前帧的纹理坐标更新顶点数据,并累加帧数。
下面是我们得到的动画:
源码
如下的一张精灵图序列,如果我们每一帧将纹理坐标(四个点)向前推进一步,那么就可以让人物动起来:
实现这种动画其实并不难,但前提是你已经实现了静态的纹理贴图,在静态纹理贴图的基础之上我们需要做的就是将每一帧的纹理坐标数据计算并存储起来,然后在每一帧的迭代中,根据当前帧的计数,取得相应的纹理坐标即可。
我们通过扩展之前的Image类来实现这种动画:
package psw2d.display { import flash.display.Bitmap; import flash.display.BitmapData; import flash.geom.Point; import flash.geom.Rectangle; import psw2d.Sparrow; import psw2d.core.Context2D; import psw2d.display.animation.IAnimation; import psw2d.render.RenderMaster; import psw2d.texture.BitmapTexture; import psw2d.texture.Texture; public class SimpleImagePlayer extends Image implements IAnimation { private var totalFrames:int; private var _frames:Vector.<Number>; private var _curentFrame:int; private var _frameWidth:Number; private var _frameHeight:Number; public function SimpleImagePlayer(texture:Texture,w:Number,h:Number,numFrames:int) { super(texture); width = w; height = h; totalFrames = numFrames; setCoords(0,0,0); setCoords(1,width,0); setCoords(2,width,height); setCoords(3,0,height); var numX:int = texture.width /w ; var numY:int = texture.height / h ; var unitX:Number = 1/numX; var unitY:Number = 1/numY; var curFrame:int; _frames = new <Number>[]; for(var i:int=0;i<numY;i++) { for(var j:int=0;j<numX;j++) { curFrame = i * numY +j; _frames.push( unitX * j,unitY * i, unitX * (j+1),unitY * i, unitX * (j+1),unitY * (i+1), unitX * j,unitY * (i+1) ); } } gotoFrame(0); } public function addvanceTime(time:Number):void { gotoFrame(_curentFrame); if(_curentFrame < totalFrames) { _curentFrame++; } else { _curentFrame=0; } } private function gotoFrame(frameNum:int):void { var offset:int = frameNum * 8; for(var i:int=0;i<4;++i) { _vertexData.setTexCoords(i,_frames[offset+2*i],_frames[offset+2*i+1]); } } } }
在这个类中我们需要知道的是总的帧数,帧动画的宽和高,这样我们就可以根据纹理的尺寸计算出每一帧的纹理坐标数据,并将它存放在_frames字段中。在每一帧到来时(即调用advanceTime()时),我们取出当前帧的纹理坐标更新顶点数据,并累加帧数。
下面是我们得到的动画:
源码
相关文章推荐
- stage3D 搭建2d图形引擎 (五)不同纹理的显示对象
- stage3D 搭建2d图形引擎 (八) 动态纹理
- stage3D 搭建2d图形引擎 (六) 显示列表
- stage3D 搭建2d图形引擎 (四)静态文理贴图
- stage3D 搭建2d图形引擎 (三)透明度(alpha混合)
- HTML5 WebGL 2D游戏引擎研发第十章:纹理及动画
- 幻世(OurDream)2D图形引擎使用教程6——使用纹理
- thml5+js 实现简单的2d引擎
- [多媒体、图形、动画] 使用quartz2D绘制阴影的代码
- Vision引擎组件系统中 玩家镜头与简单动画概述
- 幻世(OurDream)2D图形引擎使用教程18——易语言编写幻世程序系列(2)
- cocos2d-x简单动画:处理Texture2D和plist文件处理动画<代码演示>
- 十一、Qt 2D绘图(一)绘制简单图形
- HTML5 2D游戏引擎研发系列 第四章 <Canvas技术篇-画布技术-基于手动切片动画>
- ios Quartz2D使用(画一些简单的图形)(1)
- iOS开发的2D绘制--CoreGraphics的简单使用二(画图形)
- iOS上使用Quartz 2D绘制简单图形
- 用Direct2D和DWM来做简单的动画效果
- 玩转Android---2D图形及动画---View类使用
- 幻世(OurDream)2D图形引擎使用教程14——GUI图形用户界面系统(2)