starling 笔记 :
基于Stage3Dg开发出来的一个可以使用GPU加速2D应用程序的框架。是一个渲染框架!
特色:直观,轻量,免费。
Starling与Sparrow框架很相近。
驱动关系:
GPU-->OpenGL/ES2-DirectX-->stage3D-->starling
传统使用的Stage使用cup渲染,Starling使用GPU,减少CUP操作可以提升性能和体验。
flash 显示层次结构 :stage video-->stage3D-->Display List。(这里注意的是 原生flash显示对象会覆盖stage3D,因为dispalylist层次结构在前面)
var starling:Starling=new Starling(rootClass,stage);//创建starling以对象
starling.start();//启动(这一步不能忘记了)
Starling的构造函数
public function Starling(rootClass:Class, stage:flash.display.Stage, viewPort:Rectangle=null, stage3D:Stage3D=null, renderMode:String="auto")
rootClass 参数期待被传入一个继承自starling.display.Sprite的类引用(不是对象),这个类引用将作为Starling的入口类,即Starling中的文档类。
第二个参数,一看该参数的类型就知道一定得传入原生Flash的舞台了,由Starling创建的Stage3D对象将位于此stage对象的下一层。
Starling 对象的API:
* enableErrorChecking : 允许你启用或禁用错误检测功能。
启用此功能后Starling将会把渲染器在工作中遇到的错误报告给你的应用程序并输出在控制台上。
当 enableErrorChecking 属性为 true时,Starling 将在内部同步地调用clear()及drawTriangles()方法并可以抛出错误(如果遇到的话)。
若此属性为false(默认值),clear()及drawTriangles()方法将会被异步地调用且在遇到错误时也不会报告。启用错误检测功能将会降低性能,所以你最好只在调试的时候启用一下。
* isStarted :一个标记,用于指示start方法是否被调用过。
* juggler: juggler 是一个用于存储一系列实现了IAnimatable 接口的对象的对象,你可以通过调用juggler对象的advanceTime方法来让它调度其保存的那些实现IAnimatable 接口的对象每一帧的行为。
当一个动画播放完毕后,juggler 会将其剔除。 【PS:你可以把juggler对象作为一个动画管理器,其详细功能稍后会介绍】
* start : 开始渲染并处理事件
* stop : 停止渲染和事件处理,你可以在游戏被置于后台(如将Flash最小化时)时使用此方法来停止渲染,这样可以避免硬件开销上的浪费。
* dispose : 当你想要销毁Starling中全部的渲染内容并释放其在GPU中所占用空间时你可以调用此方法。这个API将会在内部同时销毁着色器程序及事件侦听器(GPU用于绘图的东东)。
Wmodel模式:使用GPU加速,需要设置一个参数,否则会报一个Context3D not availible或者wrong wmodel value;
params.wmode = "direct";
// 可以通过这个来判断是否起用了硬件渲染 ,从而定制不同的渲染策略。
var isHW:Boolean = Starling.context.driverInfo.toLowerCase().indexOf("software") == -1;// software硬件渲染也就是CPU渲染模式。
Starling常用的事件:
* Event.ADDED : 当显示对象被添加到一个容器中抛出
* Event.ADDED_TO_STAGE : 当显示对象被添加到一个已存在于舞台上的容器中时,也就是其变得可见时抛出
* Event.REMOVED : 当显示对象被从一个容器中移除时抛出
* Event.REMOVED_FROM_STAGE : 当显示对象被从一个已存在于舞台上的容器中移除时,也就是其变得不可见时抛出
Starling中DisplayObject类提供的一系列共有方法:
* removeFromParent : 从父对象中移除,如果它有父对象的话
* getTransformationMatrixToSpace : 创建一个用于表现本地坐标系和另一个坐标系转换关系的矩阵
* getBounds : 得到一个以某个坐标系为参考系的能包含该显示对象的最小矩形。
* hitTestPoint : 返回当前坐标系中某个点位置下层次最高(挡在最前面)的显示对象
* globalToLocal : 将一个点由舞台坐标转换为当前坐标系坐标
* localToGlobal : 将一个点由当前坐标系坐标转换为舞台坐标
Starling中DispObject中提供的属性:
* transformationMatrix : 当前显示对象位置相与其父容器的转换矩阵
* bounds : 当前显示对象在其父容器中的矩形(Rectangle)对象
* width、height、root、x、y、scaleX、scaleY、alpha、visible、parent、stage、root
* rotation:当前显示对象绕其注册点的旋转弧度(非角度)
* pivotX、pivotY : 当前显示对象的注册点,默认为(0,0) 如缩放、旋转时的需要
* touchable : 指定当前显示对象是否能够接受Touch事件(相当于原生DisplayObject的mouseEnable,因为在Starling中所有鼠标事件都被定义为Touch事件)
Sprite对象继承自DisplayObjectContainer类,DisplayObjectContainer类中提供的API:
* addChild : 不解释,和原生Flash中的一样,下同
* addChildAt : 略
* dispose : 完全销毁一个对象,释放其在GPU中所占内存,移除其全部事件侦听。
* removeFromParent : 略
* removeChild : 略
* removeChildAt : 略
* removeChildren : 移除一个容器中所有的子对象
* getChildAt : 略
* getChildByName : 根据名称搜索一个子对象
* getChildIndex : 略
* setChildIndex : 略
* swapChildren : 略
* swapChildrenAt : 略
* contains : 略
Starling对象都继承自EventDispatcher类:
addEventListener : 为指定事件添加事件侦听器.
hasEventListener : 为指定事件监测是否具备事件侦听器
removeEventListener : 移除某个事件侦听器
removeEventListeners : 移除一个对象中对某一事件或全部事件添加的侦听器。
Starling中的事件机制保留了事件冒泡阶段,却没有事件捕捉阶段。
Starling中用Touch实现(替代)mouseclick相关事件:
TouchPhase类中的常量(通过这个类型判别触发的是什么类型的事件):
began : 鼠标/手指开始交互(类似于mouseDown)
ended : 鼠标/手指停止交互(类似于mouseClick)
hover : 鼠标/手指悬于物体上(类似于mouseOver)
moved : 鼠标/手指在物体上移动(类似于mouseDown + mouseMove)
stationary : 鼠标/手指停止与物体的交互但仍停留在其上
TouchEvent事件对象中的API:
ctrlKey : 触发Touch事件是是否按住Ctrl键
getTouch: 得到此事件的Touch对象
getTouches : 得到一组Touch对象(用于多点交互)
shiftKey: 触发Touch事件是是否按住Shift键
timestamp : 事件触发时间
touches : 得到同一时间发生的全部Touch对象
Touch对象中的API:
clone : 复制一个副本
getLocation: 得到Touch事件触发的对应于当前坐标系的位置
getPreviousLocation: 得到之前触发的Touch事件对应于当前坐标系的位置
globalX、Y: 得到Touch事件触发的舞台位置
id: 一个Touch对象所拥有的独一无二的标示符
phase : 指示当前事件触发的类型(阶段)
previousGlobalX、Y : 得到之前触发的Touch事件舞台位置
tapCount : 手指轻拍显示对象的次数(用以识别手指双拍)
target : 触发Touch事件的对象
timestamp : 事件触发时间(此时间是从应用程序启动开始计时的)
设置属性:simulateMultiTouch=true; //表示是否是多点触控,按住ctrl模拟
Texture:纹理,用来填充显示对象。
Texture 对象API:
base : 该Texture对象所基于的Stage3D texture对象
dispose : 销毁该Texture对象的潜在纹理数据
empty : 静态方法。创建一个指定大小和颜色的空Texture对象
frame : 一个Rectangle矩形对象,用于指示一个Texture对象的范围
fromBitmap : 静态方法。从一个Bitmap对象创建一个外观与其一致的Texture纹理对象。
fromBitmapData : 静态方法。从一个BitmapData对象创建一个外观与其一致的Texture纹理对象。
fromAtfData : 静态方法。允许运用ATF (Adobe Texture Format)格式创建一个压缩过的材质。经过压缩的材质能让你节省大量空间,尤其是在像移动设备这样对存储空间异常苛刻的环境中尤为有用。
fromTexture : 静态方法。从一个Texture对象创建一个外观与其一致的Texture纹理对象。
height 、width: 我想这两个属性就不用多说了
mipmapping : 此属性用以指示该材质是否包含了mip映射
premultipliedAlpha : 此属性用以指示该texture对象的透明度是否被预乘到了RGB值中(premultiplied into the RGB values).
repeat : 用以指定当前材质是否启用重复平铺模式,就像铺壁纸那样。
Mip映射。
将一个纹理保存多个缩小版本的方式就叫做Mip映射。
注意纹理尺寸必须保证为2的倍数(1, 2, 4, 8, 16, 32, 64, 128, 256,512, 1024, 2048), 但形状不一定必须是矩形。
SpriteSheet:纹理贴图集=texture atlases
Image: 通过它来显示Texture的内容。
例:
[Embed(source = "../media/textures/sausage.png")]
private static const Sausage:Class;
var sausageBitmap:Bitmap = new Sausage();
var texture:Texture = Texture.fromBitmap(sausageBitmap);
var image:Image = new Image(texture);
addChild(image);
smoothing来提供对图像的平滑处理功能:
BILINEAR : 当纹理被缩放时对其应用双线性滤镜(默认值)
NONE : 当纹理被缩放时不使用任何滤镜
TRILINEAR : 当纹理被缩放时对其应用三线性滤镜
image.smoothing = TextureSmoothing.NONE;
像素极碰撞:
在Starling中,材质可由BitmapData来生成,因此我们可用BitmapData对象提供的hitTest这个API来做到像素级碰撞检测
public function hitTest(
firstPoint:Point, //检测源的左上角坐标及其允许的最小检测透明度,255即完全不透明,表示只有完全不透明的像素会被检测到碰撞.
firstAlphaThreshold:uint,
secondObject:Object, //分别表示检测对象、检测对象的左上角坐标及检测对象允许的最小检测透明度。
secondBitmapDataPoint:Point = null,
secondAlphaThreshold:uint = 1
):Boolean
例:在onFrame中进行检查
private function onFrame(event:Event):void {
point1.x = sausageImage1.x;
point1.y = sausageImage1.y;
point2.x = sausageImage2.x;
point2.y = sausageImage2.y;if ( sausageBitmapData1.hitTest(point2, 255, sausageBitmapData1, point1, 255)) {
trace("touched!");
}
}
绘图:
Starling中你可以通过BitmapData的draw方法来把使用绘图API绘制好的原生显示对象画到一个BitmapData对象中,之后用此对象作为Texture的数据源。
例:
var s:flash.display.Sprite = new flash.display.Sprite();
var color:uint = Math.random() * 0xFFFFFF;
s.graphics.beginFill(color,ballAlpha);
var radius:uint = 20;
s.graphics.drawCircle(radius,radius,radius);
s.graphics.endFill();
var bmd:BitmapData = new BitmapData(radius * 2, radius * 2, true, color);
var texture:Texture = Texture.fromBitmapData(buffer);
var image:Image = new Image(texture);
addChild(image);
有点投机的感觉!
Flat Sprites:
每个显示对象都有专属的顶点着色器及索引缓冲区(vertex and index buffer)来进行各自的渲染工作,这样会消耗大量的运算量且在子对象繁多时会显著地影响呈现性能。
然而Starling提供了一种优化方案,具体做法可以理解为将全部子对象的顶点着色器及索引缓冲区集成为一个大的并由它来接管全局的渲染工作
(包括容器及其子对象),且只需要调用一次绘制方法即可完成渲染的工作,就跟完成一个简单的纹理的渲染一样
(如果所有子对象都共享同一个纹理的话,那自然是这样)。
flat sprites特性相关的API:
flatten: 如果你想尽可能地提高存在大量嵌套的Sprite对象的话,调用此方法可以让你达到满意效果。一旦调用了此方法,Starling将会把显示树
(即以一个Sprite对象为顶点,所有子对象为子节点)中的渲染工作全部统一管理,在一次绘制操作中完成全部渲染工作。
如果显示树中某个节点发生了外观改变,那么你需要再次调用此方法才能看见改变。
unflatten: 禁用flat行为.
isFlatenned: 判断是否使用了flat 。
注意:如果子对象所用纹理不一致,那么Starling会对不同的纹理进行独立地绘制工作,这样的话,flatten特性所能带来的性能提升便也不那么明显了
MovieClip:
使用BitmapData来重现了MovieClip的功能。
例:
private var mMovie:MovieClip;
//ML文件来描述spritesheet各帧信息<SubTexture name="running0010" x="0" y="852" width="304" height="284"/>
[Embed(source="../media/textures/running-sheet.xml", mimeType="application/octet-stream")]
public static const SpriteSheetXML:Class;
//spritesheet图片
[Embed(source = "../media/textures/running-sheet.png")]
private static const SpriteSheet:Class;
var bitmap:Bitmap = new SpriteSheet();
var texture:Texture = Texture.fromBitmap(bitmap);
var xml:XML = XML(new spriteSheetXML());
var sTextureAtlas:TextureAtlas = new TextureAtlas(texture, xml);
var frames:Vector.<Texture> = sTextureAtlas.getTextures("running_");
mMovie = new MovieClip(frames, 40);
addChild ( mMovie );
Texture Atlas:
Starling.juggler.add ( mMovie );//加入到 juggler才能播放动画
Starling中的MovieClip对象提供的全部可用API:
currentFrame : 指示当前帧序号
fps : 默认情况下的帧频,即每秒播放的帧数
isPlaying : 判断当前影片剪辑是否正在播放
loop : 判断当前影片剪辑是否会循环播放
numFrames : 当前影片剪辑包含的总帧数
totalTime : 播完一次影片所需时间,单位为秒
addFrame : 为影片剪辑增加一帧至时间轴末尾处,你可以设置该帧的持续时间及播放到该帧时需要发出的声音
addFrameAt : 添加一帧到指定位置
getFrameDuration : 获取某一帧的持续时间(单位为秒)
getFrameSound : 获取某一帧播放的声音
getFrameTexture : 获取某一帧所用纹理
pause : 暂停影片播放
play : 开始播放影片. 不过在此之前你需要确保影片对象被添加到了一个Juggler对象中
removeFrameAt : 移出指定位置处的帧
setFrameDuration : 设置某一帧的持续时间(单位为秒)
setFrameSound : 设置某一帧播放的声音
setFrameTexture : 设置某一帧所用纹理
Juggler:
Juggler类允许我们控制所有实现了IAnimatable接口的对象的动画播放。MovieClip类实现了该接口,你也可以自定义一个动画类在Starling中播放,你所要做的,仅仅是让你的自定义类实现IAnimatable接口,然后重载advanceTime方法即可
Juggler API:
add : 添加一个动画对象到juggler
advanceTime : 如果你需要手动调控Juggler的主循环逻辑的话,调用之.
delayCall : 延迟调用某个对象的某个方法
elapsedTime : 指示一个juggler对象的完整生命周期时间
isComplete : 指示一个Juggler的状态,默认情况下它总是返回flase.
purge : 一次性移除全部子对象
remove : 从juggler中移除一个对象
removeTweens : 移除全部类型为Tween的且存在指定目标的对象
Button:DisplayObjectContainer类的子类
构造函数:
public function Button(upState:Texture, text:String="", downState:Texture=null)
例:图片按钮
[Embed(source = "../media/textures/button_normal.png")]
private static const ButtonTexture:Class;
var buttonSkin:Bitmap = new ButtonTexture();
var texture:Texture = Texture.fromBitmap(buttonSkin);
var myButton:Button = new Button(texture, "Play");
var menuContainer:Sprite = new Sprite();
menuContainer.addChild(myButton);
addChild(menuContainer);
Button对象提供的全部API:
alphaWhenDisabled : 当按钮处于不可用状态时的透明度
downState : 当按钮被按下时的皮肤纹理
enabled : 此属性决定按钮是否可用、可交互
fontBold : 按钮文本是否为粗体
fontColor : 按钮文本的颜色
fontName : 按钮文本所用字体。可以是一个系统字体也可以是一个已经注册了的位图字体
fontSize : 按钮文本大小
scaleWhenDown : 按钮按下时将被缩放到的值。如果你设置了downState,那么按钮在按下后将不会被缩放
text : 按钮显示的文本
textBounds : 按钮文本所在区域
upState : 当按钮未产生交互时的皮肤纹理
TextField:
Starling使用CPU创建了一个原生的Flash TextField对象,在为其设置完文字及格式后,为其拍了个快照或是截了个屏神马的,之后将此图像传至GPU进行渲染.
不是真正的TextField,而是一个TextField的快照被绘制在一个Bitmap之后封装在texture中上传至GPU的产物。
例:
var legend:TextField = new TextField(300, 300, "Here is some text, using an embedded font!", "Verdana", 38, 0xFFFFFF);
addChild(legend);
TextField对象所提供的属性:
alpha : 文本透明度
autoScale : 是否让文本自动缩放以适应TextField的区域
bold : 指定文本是否以粗体显示
border : 允许显示textfield的边框。在对textfield进行显式调试时此属性很有用
bounds : textfield所占区域
color : 文本颜色
fontName : 文本字体名
fontSize : 文本大小
hAlign : 文本水平排列方式
italic : 指定文本是否以斜体显示
kerning : 当你在使用位图字体时(前提是存在可用的位图字体),允许你设置字符间距。此属性默认值为YES.
text : 显示的文本
textBounds : textfield中实际文本所占区域
underline : 指定文本是否显示下划线
vAlign : 文本垂直排列方式
RenderTexture: 着色,绘图。
starling.textures.RenderTexture API允许开发者在Starling中实现无损绘画功能。类似Flash中的BitmapData对象。
每次绘画时不会抹除上一次绘画的结果
var mRenderTexture = new RenderTexture(stage.stageWidth, stage.stageHeight);
var canvas:Image = new Image(mRenderTexture);
addChild(canvas);
mRenderTexture.draw(*);
Tweens:补间
Tween对象中可用的API:
animate : 缓动一个对象的某个属性至指定目标值. 你可以在一个Tween对象中多次调用此方法
currentTime : 补间动画当前播放到的时间
delay : 补间动画开始前需要等待的延迟时间
fadeTo : 缓动一个对象的透明度至指定目标值. 你可以在一个Tween对象中多次调用此方法
isComplete : 此标记用以判断一个补间动画是否播放完毕
moveTo : 同时缓动一个对象的x、y属性至指定目标值
onComplete : 补间动画播放完毕回调函数
onCompleteArgs : 补间动画播放完毕回调函数参数
onStart : 补间动画开始播放回调函数
onStartArgs : 补间动画开始播放回调函数参数
onUpdate : 补间动画每帧更新时都会调用此方法
onUpdateArgs : 需要传入补间动画每帧更新时都会调用的方法的参数
roundToInt :若该标记为true,则所有带小数的属性值都会去掉小数变为整数
scaleTo : 同时将scaleX及scaleY属性值缓动至指定目标值.
target : 缓动目标对象
totalTime : 补间动画所要消耗的总时间(单位为秒).
transition : 指定补间动画所用缓动方程
例:
legend 为需要移动对象实例
var t:Tween = new Tween(legend, 4, Transitions.EASE_IN_OUT_BOUNCE);
t.moveTo(legend.x+300, legend.y);
Starling.juggler.add(t);
设置监听事件
t.onStart = onStart;
t.onUpdate = onProgress;
t.onComplete = onComplete;