Hilo游戏引擎——view视图模块(重点)

所有的模块的基础,有很多模块继承改模块属性

(该模块会有大量的一样的继承属性和方法,要仔细观看)

分为以下模块

  • Bitmap
  • BitmapText
  • Button
  • CacheMixin
  • Container
  • DOMElement
  • Drawable
  • Graphics
  • Sprite
  • Stage
  • Text
  • View

Bitmap

Bitmap类表示位图图像类。
使用示例:

var bmp = new Hilo.Bitmap({image:imgElem, rect:[0, 0, 100, 100]});
stage.addChild(bmp);

属性概览

没有自带属性

继承属性

align:String|Function
可视对象相对于父容器的对齐方式。取值可查看Hilo.align枚举对象。

alpha:Number
可视对象的透明度。默认值为1。

background:Object
可视对象的背景样式。可以是CSS颜色值、canvas的gradient或pattern填充。

boundsArea:Array
可视对象的区域顶点数组。格式为:[{x:10, y:10}, {x:20, y:20}]。

depth:Number
可视对象的深度,也即z轴的序号。只读属性。

drawable:Drawable
可视对象的可绘制对象。供高级开发使用。

height:Number
可视对象的高度。默认值为0。

id:String
可视对象的唯一标识符。

mask:Graphics
可视对象的遮罩图形。

onUpdate:Function
更新可视对象,此方法会在可视对象渲染之前调用。此函数可以返回一个Boolean值。若返回false,则此对象不会渲染。默认值为null。 限制:如果在此函数中改变了可视对象在其父容器中的层级,当前渲染帧并不会正确渲染,而是在下一渲染帧。可在其父容器的onUpdate方法中来实现。

parent:Container
可视对象的父容器。只读属性。

pivotX:Number
可视对象的中心点的x轴坐标。默认值为0。

pivotY:Number
可视对象的中心点的y轴坐标。默认值为0。

pointerEnabled:Boolean
可视对象是否接受交互事件。默认为接受交互事件,即true。

rotation:Number
可视对象的旋转角度。默认值为0。

scaleX:Number
可视对象在x轴上的缩放比例。默认为不缩放,即1。

scaleY:Number
可视对象在y轴上的缩放比例。默认为不缩放,即1。

tint:Number
可视对象的附加颜色,默认0xFFFFFF,只支持WebGL模式。

transform:Matrix
可视对象的transform属性,如果设置将忽略x, y, scaleX, scaleY, rotation.

visible:Boolean
可视对象是否可见。默认为可见,即true。

width:Number
可视对象的宽度。默认值为0。

x:Number
可视对象的x轴坐标。默认值为0。

y:Number
可视对象的y轴坐标。默认值为0。

方法概览

自带方法

Bitmap(properties:Object)
构造函数
properties:Object — 创建对象的属性参数。可包含此类所有可写属性。此外还包括:
image – 位图所在的图像image。必需。
rect – 位图在图像image中矩形区域。

setImage(image:Image|String, rect:Array):Bitmap
设置位图的图片。
image:Image|String — 图片对象或地址。
rect:Array — 指定位图在图片image的矩形区域。
return(返回值)
Bitmap — 位图本身。

继承方法

addTo(container:Container, index:Uint):View
添加此对象到父容器。

fire(type:String, detail:Object):Boolean
发送事件。当第一个参数类型为Object时,则把它作为一个整体事件对象。

getBounds():Array
获取可视对象在舞台全局坐标系内的外接矩形以及所有顶点坐标。

getScaledHeight():Number
返回可视对象缩放后的高度。

getScaledWidth():Number
返回可视对象缩放后的宽度。

getStage():Stage
返回可视对象的舞台引用。若对象没有被添加到舞台,则返回null。

hitTestObject(object:View, usePolyCollision:Boolean)
检测object参数指定的对象是否与其相交。

hitTestPoint(x:Number, y:Number, usePolyCollision:Boolean):Boolean
检测由x和y参数指定的点是否在其外接矩形之内。

off(type:String, listener:Function):Object
删除一个事件监听。如果不传入任何参数,则删除所有的事件监听;如果不传入第二个参数,则删除指定类型的所有事件监听。

on(type:String, listener:Function, once:Boolean):Object
增加一个事件监听。

removeFromParent():View
从父容器里删除此对象。

render(renderer:Renderer, delta:Number)
可视对象的具体渲染逻辑。子类可通过覆盖此方法实现自己的渲染。

toString():String
返回可视对象的字符串表示。

BitmapText

BitmapText类提供使用位图文本的功能。当前仅支持单行文本。

属性概览

自带属性

glyphs:Object
位图字体的字形集合。格式为:{letter:{image:img, rect:[0,0,100,100]}}。

letterSpacing:Number
字距,即字符间的间隔。默认值为0。

text:String
位图文本的文本内容。只读属性。设置文本请使用setText方法。

textAlign:String
文本对齐方式,值为left、center、right, 默认left。只读属性。设置文本对齐方式请使用setTextAlign方法。

继承属性

继承属性和上Bitmap的继承属性一样

方法概览

自带方法

BitmapText(properties:Object)
构造函数
properties:Object — 创建对象的属性参数。可包含此类所有可写属性。

hasGlyphs(str:String):Boolean
返回能否使用当前指定的字体显示提供的字符串。
str:String — 要检测的字符串。
return(返回值)
Boolean — 是否能使用指定字体。

setText(text:String):BitmapText
设置位图文本的文本内容。
text:String — 要设置的文本内容。
return(返回值)
BitmapText — BitmapText对象本身。链式调用支持。

createGlyphs(text:String, image:Image, col:Number, row:Number):BitmapText
简易方式生成字形集合。
text:String — 字符文本。
image:Image — 字符图片。
col:Number — 列数 默认和文本字数一样
row:Number — 行数 默认1行
return(返回值)
BitmapText — BitmapText对象本身。链式调用支持。

继承方法

继承方法和上Bitmap的继承方法一样

Button 按钮

Button类表示简单按钮类。它有弹起、经过、按下和不可用等四种状态。

示例:

var btn = new Hilo.Button({
    image: buttonImage,
    upState: {rect:[0, 0, 64, 64]},
    overState: {rect:[64, 0, 64, 64]},
    downState: {rect:[128, 0, 64, 64]},
    disabledState: {rect:[192, 0, 64, 64]}
});

属性概览

自带属性

disabledState:Object
按钮不可用状态的属性或其drawable的属性的集合。drawable(可拖拽的)

downState:Object
按钮按下状态的属性或其drawable的属性的集合。

enabled:Boolean
指示按钮是否可用。默认为true。只读属性。

overState:Object
按钮经过状态的属性或其drawable的属性的集合。

state:String
按钮的状态名称。它是 Button.UP|OVER|DOWN|DISABLED 之一。 只读属性

upState:Object
按钮弹起状态的属性或其drawable的属性的集合。

useHandCursor:Boolean
当设置为true时,表示指针滑过按钮上方时是否显示手形光标。默认为true。

OVER:String
按钮经过状态的常量值,即:’over’

DOWN:String
按钮按下状态的常量值,即:’down’。

DISABLED:String
按钮不可用状态的常量值,即:’disabled’。

UP:String
按钮弹起状态的常量值,即:’up’。

继承属性

继承属性和上Bitmap的继承属性一样

方法概括

自带方法

Button(properties:Object)
构造函数
properties:Object — 创建对象的属性参数。可包含此类所有可写属性。此外还包括:
image – 按钮图片所在的image对象。

setEnabled(enabled:Boolean):Button
设置按钮是否可用。
enabled:Boolean — 指示按钮是否可用。
return(返回值)
Button — 按钮本身。

setState(state:String):Button
设置按钮的状态。此方法由Button内部调用,一般无需使用此方法。
state:String — 按钮的新的状态。
return(返回值)
Button — 按钮本身。

CacheMixin (隐藏混入)

CacheMixin是一个包含cache功能的mixin。可以通过 Class.mix(target, CacheMixin) 来为target增加cache功能。

方法概览

cache(forceUpdate:Boolean)
缓存到图片里。可用来提高渲染效率。
forceUpdate:Boolean — 是否强制更新缓存

setCacheDirty(dirty:Boolean)
设置缓存是否dirty
dirty:Boolean — 是否dirty

updateCache()
更新缓存

Container 容器

Container是所有容器类的基类。每个Container都可以添加其他可视对象为子级。

属性概览

children:Array
容器的子元素列表。只读。

clipChildren:Boolean
指示是否裁剪超出容器范围的子元素。默认为false。

pointerChildren:Boolean
指示容器的子元素是否能响应用户交互事件。默认为true。

继承属性

继承属性和上Bitmap的继承属性一样

方法概览

Container(properties:Object)
构造函数
properties:Object — 创建对象的属性参数。可包含此类所有可写属性。

addChild(child:View)
在最上面添加子元素。
child:View — 要添加的子元素。

addChildAt(child:View, index:Number)
在指定索引位置添加子元素。
child:View — 要添加的子元素。
index:Number — 指定的索引位置,从0开始

contains(child:View)
返回是否包含参数指定的子元素。
child:View — 指定要测试的子元素。

getChildAt(index:Number)
返回指定索引位置的子元素。
index:Number — 指定要返回的子元素的索引值,从0开始。

getChildById(id:String)
返回指定id的子元素。
id:String — 指定要返回的子元素的id。

getChildIndex(child:View)
返回指定子元素的索引值。
child:View — 指定要返回索引值的子元素。

getNumChildren():Uint
返回容器的子元素的数量。
Uint — 容器的子元素的数量。

getViewAtPoint(x:Number, y:Number, usePolyCollision:Boolean, global:Boolean, eventMode:Boolean)
返回由x和y指定的点下的对象。
x:Number — 指定点的x轴坐标。
y:Number — 指定点的y轴坐标。
usePolyCollision:Boolean — 指定是否使用多边形碰撞检测。默认为false。
global:Boolean — 使用此标志表明将查找所有符合的对象,而不仅仅是第一个,即全局匹配。默认为false。
eventMode:Boolean — 使用此标志表明将在事件模式下查找对象。默认为false。

removeAllChildren():Container
删除所有的子元素。
Container — 容器本身。

removeChild(child:View):View
删除指定的子元素。
child:View — 指定要删除的子元素。
return(返回值)
View — 被删除的对象。

removeChildAt(index:Int):View
在指定索引位置删除子元素。
index:Int — 指定删除元素的索引位置,从0开始。
return(返回值)
View — 被删除的对象。

removeChildById(id:String):View
删除指定id的子元素。
id:String — 指定要删除的子元素的id。
return(返回值)
View — 被删除的对象。

setChildIndex(child:View, index:Number)
设置子元素的索引位置。
child:View — 指定要设置的子元素。
index:Number — 指定要设置的索引值。

sortChildren(keyOrFunction:Object)
根据指定键值或函数对子元素进行排序。
keyOrFunction:Object — 如果此参数为String时,则根据子元素的某个属性值进行排序;
如果此参数为Function时,则根据此函数进行排序。

swapChildren(child1:View, child2:View)
交换两个子元素的索引位置。
child1:View — 指定要交换的子元素A。
child2:View — 指定要交换的子元素B。

swapChildrenAt(index1:Number, index2:Number)
交换两个指定索引位置的子元素。
index1:Number — 指定要交换的索引位置A。
index2:Number — 指定要交换的索引位置B。

DOMElement 对象

DOMElement是dom元素的包装。( 注意:DOMElement 的父容器必须是 stage )
使用示例:

var domView = new Hilo.DOMElement({
    element: Hilo.createElement('div', {
        style: {
            backgroundColor: '#004eff',
            position: 'absolute'
        }
    }),
    width: 100,
    height: 100,
    x: 50,
    y: 70
}).addTo(stage);

属性概览

没有自带属性

继承属性

继承属性和上Bitmap的继承属性一样

方法概览

自带方法

DOMElement(properties:Object)
构造函数
properties:Object — 创建对象的属性参数。可包含此类所有可写属性。特殊属性有:
element – 要包装的dom元素。必需。

继承方法

继承方法和上Bitmap的继承方法一样

Hilo游戏引擎——util模块

TextureAtlas

TextureAtlas纹理集是将许多小的纹理图片整合到一起的一张大图。这个类可根据一个纹理集数据读取纹理小图、精灵动画等。

方法概览

TextureAtlas(atlasData:Object)
构造函数
atlasData:Object — 纹理集数据。它可包含如下数据:
image – 纹理集图片。必需。
width – 纹理集图片宽度。若frames数据为Object时,此属性必需。
height – 纹理集图片高度。若frames数据为Object时,此属性必需。
frames – 纹理集帧数据,可以是Array或Object。必需。
若为Array,则每项均为一个纹理图片帧数据,如:[[0, 0, 50, 50], [0, 50, 50, 50]。
若为Object,则需包含frameWidth(帧宽)、frameHeight(帧高)、numFrames(帧数) 属性。
sprites – 纹理集精灵动画定义,其每个值均定义一个精灵。为Object对象。可选。
若为Number,即此精灵只包含一帧,此帧为帧数据中索引为当前值的帧。如:sprites:{‘foo’:1}。
若为Array,则每项均为一个帧的索引值。如:sprites:{‘foo’:[0, 1, 2, 3]}。
若为Object,则需包含from(起始帧索引值)、to(末帧索引值) 属性。

getFrame(index:Int):Object
获取指定索引位置index的帧数据。
index:Int — 要获取帧的索引位置。
return(返回值)
Object — 帧数据。

getSprite(id:String):Object
获取指定id的精灵数据。
id:String — 要获取精灵的id。
return(返回值)
Object — 精灵数据。

createSpriteFrames(name:String|Array, frames:String, w:Number, h:Number, loop:Boolean, duration:Number, duration)
创建精灵帧数据的快捷方法。(重点方法)
name:String|Array — 动画名称|一组动画数据
frames:String — 帧数据 eg:”0-5″代表第0到第5帧
w:Number — 每帧的宽
h:Number — 每帧的高
loop:Boolean — 是否循环
duration:Number — 每帧间隔 默认单位帧, 如果sprite的timeBased为true则单位是毫秒,默认一帧
duration —持续时间
例子:
//方式一 单个动画
createSpriteFrames(“walk”, “0-5,8,9”, meImg, 55, 88, true, 1);
//方式二 多组动画
createSpriteFrames([
[“walk”, “0-5,8,9”, meImg, 55, 88, true, 1],
[“jump”, “0-5”, meImg, 55, 88, false, 1]
]);

Ticker模块

Ticker是一个定时器类。它可以按指定帧率重复运行,从而按计划执行代码。

方法概览

Ticker(fps:Number)
构造函数
fps:Number — 指定定时器的运行帧率。默认60。

addTick(tickObject:Object)
添加定时器对象。定时器对象必须实现 tick 方法。
tickObject:Object — 要添加的定时器对象。此对象必须包含 tick 方法。

getMeasuredFPS()
获得测定的运行时帧率。

interval(callback:Function, duration:Number):tickObj
指定的时间周期来调用函数, 类似setInterval
callback:Function —回调函数
duration:Number — 时间周期,单位毫秒
return(返回值)
tickObj —标记对象

nextTick(callback:Function):tickObj
下次tick时回调
callback:Function —回调函数
return(返回值)
tickObj —标记对象

pause()
暂停定时器。

removeTick(tickObject:Object)
删除定时器对象。
tickObject:Object — 要删除的定时器对象。

resume()
恢复定时器。

start(userRAF:Boolean)
启动定时器。
userRAF:Boolean — 是否使用requestAnimationFrame,默认为true。

stop()
停止定时器。

timeout(callback:Function, duration:Number):tickObj
延迟指定的时间后调用回调, 类似setTimeout
parameters
callback:Function —回调函数
duration:Number — 延迟的毫秒数
return(返回值)
tickObj —标记对象

browser 浏览器

浏览器特性集合

属性概览

cssVendor
浏览器厂商CSS前缀的css值。比如:-webkit-。

jsVendor
浏览器厂商CSS前缀的js值。比如:webkit。

POINTER_END
鼠标或触碰结束事件。对应touchend或mouseup。

POINTER_MOVE
鼠标或触碰移动事件。对应touchmove或mousemove。

POINTER_START
鼠标或触碰开始事件。对应touchstart或mousedown。

supportTransform
是否支持CSS Transform变换。

supportTransform3D
是否支持CSS Transform 3D变换。

supportDeviceMotion
是否支持检测加速度devicemotion。

ios
是否是ios

firefox
是否是firefox

ie
是否是ie

safari
是否是safari

ipad
是否是ipad

android
是否是android

opera
是否是opera

supportTouch
是否支持触碰事件。

webkit
是否是webkit

supportCanvas
是否支持canvas元素。

supportStorage
是否支持本地存储localStorage。

iphone
是否是iphone

ipod
是否是ipod

chrome
是否是chrome

supportOrientation
static 是否支持检测设备方向orientation。

drag 拖拽模块

drag是一个包含拖拽功能的mixin。可以通过 Class.mix(view, drag)或Hilo.util.copy(view, drag)来为view增加拖拽功能。
使用示例:

var bmp = new Bitmap({image:img});
Hilo.util.copy(bmp, Hilo.drag);
bmp.startDrag([0, 0, 550, 400]);

属性概览

dragNeedTransform
是否需要 transform,父元素有 transform 时需要设置为true
默认值: false

方法概览

startDrag(bounds:Array)
开始拖拽。
bounds:Array — 拖拽范围,基于父容器坐标系,[x, y, width, height], 默认无限制

stopDrag()
停止拖拽。

util模块

工具方法集合

方法概览

copy(target:Object, source:Object, strict:Boolean):Object
简单的浅复制对象。
target:Object — 要复制的目标对象。
source:Object — 要复制的源对象。
strict:Boolean — 指示是否复制未定义的属性,默认为false,即不复制未定义的属性。
return(返回值)
Object — 复制后的对象。

Hilo游戏引擎——Tween

Tween

Tween类提供缓动功能。

使用示例:

ticker.addTick(Hilo.Tween);//需要把Tween加到ticker里才能使用
 
var view = new View({x:5, y:10});
Hilo.Tween.to(view, {
    x:100,
    y:20,
    alpha:0
}, {
    duration:1000,
    delay:500,
    ease:Hilo.Ease.Quad.EaseIn,
    onComplete:function(){
        console.log('complete');
    }
});

属性概览

delay:Int
缓动延迟时间。单位毫秒。

duration:Int
缓动总时长。单位毫秒。

ease:Function
缓动变化函数。默认为null。

loop:Boolean
缓动是否循环。默认为false。

onComplete:Function
缓动结束回调函数。它接受1个参数:tween。默认值为null。

onStart:Function
缓动开始回调函数。它接受1个参数:tween。默认值为null。

onUpdate:Function
缓动更新回调函数。它接受2个参数:ratio和tween。默认值为null。

paused:Boolean
缓动是否暂停。默认为false。

repeat:Int
缓动重复的次数。默认为0

repeatDelay:Int
缓动重复的延迟时长。单位为毫秒。

reverse:Boolean
缓动是否反转播放。默认为false。

target:Object
缓动目标。只读属性。

time:Int
缓动已进行的时长。单位毫秒。只读属性。

方法概览

Tween(target:Object, fromProps:Object, toProps:Object, params:Object)
构造函数
target:Object — 缓动对象。
fromProps:Object — 对象缓动的起始属性集合。
toProps:Object — 对象缓动的目标属性集合。
params:Object — 缓动参数。可包含Tween类所有可写属性。

link(tween:Tween):Tween
连接下一个Tween变换。其开始时间根据delay值不同而不同。当delay值为字符串且以’+’或’-‘开始时,Tween的开始时间从当前变换结束点计算,否则以当前变换起始点计算。
tween:Tween — 要连接的Tween变换。
return(返回值)
Tween — 下一个Tween。可用于链式调用。

pause():Tween
暂停缓动动画的播放。
return(返回值)
Tween — Tween变换本身。可用于链式调用。

resume():Tween
恢复缓动动画的播放。
return(返回值)
Tween — Tween变换本身。可用于链式调用。

seek(time:Number, pause:Boolean):Tween
跳转Tween到指定的时间。
time:Number — 指定要跳转的时间。取值范围为:0 – 持续时间。
pause:Boolean — 是否暂停。
return(返回值)
Tween — Tween变换本身。可用于链式调用。

setProps(fromProps:Object, toProps:Object):Tween
设置缓动对象的初始和目标属性。
fromProps:Object — 缓动对象的初始属性。
toProps:Object — 缓动对象的目标属性。
return(返回值)
Tween — Tween变换本身。可用于链式调用。

start():Tween
启动缓动动画的播放。
return(返回值)
Tween — Tween变换本身。可用于链式调用。

stop():Tween
停止缓动动画的播放。
return(返回值)
Tween — Tween变换本身。可用于链式调用。

tick():Object
更新所有Tween实例。
return(返回值)
Object — Tween。

add(tween:Tween):Object
添加Tween实例。
tween:Tween — 要添加的Tween对象。
return(返回值)
Object — Tween。

remove(tweenOrTarget:Tween|Object|Array):Object
删除Tween实例。
tweenOrTarget:Tween|Object|Array — 要删除的Tween对象或target对象或要删除的一组对象。
return(返回值)
Object — Tween。

removeAll():Object
删除所有Tween实例。
return(返回值)
Object — Tween。

fromTo(target:Object|Array, fromProps, toProps, params):Tween|Array
创建一个缓动动画,让目标对象从开始属性变换到目标属性。
target:Object|Array — 缓动目标对象或缓动目标数组。
fromProps — 缓动目标对象的开始属性。
toProps — 缓动目标对象的目标属性。
params — 缓动动画的参数。
return(返回值)
Tween|Array — 一个Tween实例对象或Tween实例数组。

to(target:Object|Array, toProps, params):Tween|Array
创建一个缓动动画,让目标对象从当前属性变换到目标属性。
target:Object|Array — 缓动目标对象或缓动目标数组。
toProps — 缓动目标对象的目标属性。
params — 缓动动画的参数。
return(返回值)
Tween|Array — 一个Tween实例对象或Tween实例数组。

from(target:Object|Array, fromProps, params):Tween|Array
创建一个缓动动画,让目标对象从指定的起始属性变换到当前属性。
target:Object|Array — 缓动目标对象或缓动目标数组。
fromProps — 缓动目标对象的初始属性。
params — 缓动动画的参数。
return(返回值)
Tween|Array — 一个Tween实例对象或Tween实例数组。

Hilo游戏引擎——Renderer 重点

Renderer模块

渲染器抽象基类。

属性概览

canvas:Object
渲染器对应的画布。它可能是一个普通的DOM元素,比如div,也可以是一个canvas画布元素。只读属性。

renderType:String
渲染方式。只读属性。

stage:Object
渲染器对应的舞台。只读属性。

方法概览

Renderer(properties:Object)
构造函数

clear(x:Number, y:Number, width:Number, height:Number)
清除画布指定区域。需要子类来实现。

draw(target:View)
绘制可视对象。需要子类来实现。

endDraw(target:View)
结束绘制可视对象后的后续处理方法。需要子类来实现。

hide()
隐藏可视对象。需要子类来实现。

remove(target:View)
从画布中删除可视对象。注意:不是从stage中删除对象。需要子类来实现。

resize(width:Number, height:Number)
改变渲染器的画布大小。

startDraw(target:View)
为开始绘制可视对象做准备。需要子类来实现。

transform()
对可视对象进行变换。需要子类来实现。

WebGLRenderer
webgl画布渲染器。所有可视对象将渲染在canvas画布上。

属性概览

自带属性

gl:WebGLRenderingContext
webgl上下文。只读属性。

contextOptions
static WebGL context Options

MAX_BATCH_NUM
最大批渲染数量。

ATTRIBUTE_NUM
顶点属性数。只读属性。

继承属性

canvas:Object
渲染器对应的画布。它可能是一个普通的DOM元素,比如div,也可以是一个canvas画布元素。只读属性。

renderType:String
渲染方式。只读属性。

stage:Object
渲染器对应的舞台。只读属性。

方法概览

自带方法

WebGLRenderer(properties:Object)
properties:Object — 创建对象的属性参数。可包含此类所有可写属性。
构造函数

WebGLRenderer
isSupport()
是否支持WebGL。只读属性。

继承方法

clear(x:Number, y:Number, width:Number, height:Number)
清除画布指定区域。需要子类来实现。

draw(target:View)
绘制可视对象。需要子类来实现。

endDraw(target:View)
结束绘制可视对象后的后续处理方法。需要子类来实现。

hide()
隐藏可视对象。需要子类来实现。

remove(target:View)
从画布中删除可视对象。注意:不是从stage中删除对象。需要子类来实现。

resize(width:Number, height:Number)
改变渲染器的画布大小。

startDraw(target:View)
为开始绘制可视对象做准备。需要子类来实现。

transform()
对可视对象进行变换。需要子类来实现。

Hilo游戏引擎——media(媒体模块)

media(媒体模块)

HTMLAudio


HTMLAudio声音播放模块。此模块使用HTMLAudioElement播放音频。 使用限制:iOS平台需用户事件触发才能播放,很多Android浏览器仅能同时播放一个音频。

构造函数

HTMLAudio(properties:Object)
properties:Object — 创建对象的属性参数。可包含此类所有可写属性。

属性概览

属性概览

autoPlay:Boolean
是否自动播放。默认为false。

duration:Number
音频的时长。只读属性。

loaded:Boolean
音频资源是否已加载完成。只读属性。

loop:Boolean
是否循环播放。默认为false。

muted:Boolean
是否静音。默认为false。

playing:Boolean
是否正在播放音频。只读属性。

src:String
播放的音频的资源地址。

volume:Number
音量的大小。取值范围:0-1。

isSupported
static 浏览器是否支持HTMLAudio。

方法概览

HTMLAudio(properties:Object)
构造函数

load()
加载音频文件。

pause()
暂停音频。

play()
播放音频。如果正在播放,则会重新开始。 注意:为了避免第一次播放不成功,建议在load音频后再播放。

resume()
恢复音频播放

setMute(muted)
设置静音模式。注意: iOS设备无法设置静音模式。
muted —静音

setVolume(volume)
设置音量。注意: iOS设备无法设置音量。
volume —音量

stop()
停止音频播放。

WebAudio(声音播放模块)


WebAudio声音播放模块。它具有更好的声音播放和控制能力,适合在iOS6+平台使用。 兼容情况:iOS6+、Chrome33+、Firefox28+支持,但Android浏览器均不支持。

属性概览

autoPlay:Boolean
是否自动播放。默认为false。

duration:Number
音频的时长。只读属性。

loaded:Boolean
音频资源是否已加载完成。只读属性。

loop:Boolean
是否循环播放。默认为false。

muted:Boolean
是否静音。默认为false。

playing:Boolean
是否正在播放音频。只读属性。

src:String
播放的音频的资源地址。

volume:Number
音量的大小。取值范围:0-1。

isSupported
浏览器是否支持WebAudio。

enabled
浏览器是否已激活WebAudio。

方法概览

WebAudio(properties:Object)
构造函数
properties:Object — 创建对象的属性参数。可包含此类所有可写属性。

load()
加载音频文件。注意:我们使用XMLHttpRequest进行加载,因此需要注意跨域问题。

pause()
暂停音频。

play()
播放音频。如果正在播放,则会重新开始。

resume()
恢复音频播放。

setMute(muted)
设置是否静音。

setVolume(volume)
设置音量。

stop()
停止音频播放。

enable()
激活WebAudio。注意:需用户事件触发此方法才有效。激活后,无需用户事件也可播放音频。

clearBufferCache(url:String)
清除audio buffer 缓存。
url:String — audio的网址,默认清除所有的缓存

WebSound模块

声音播放管理器。
使用示例:

var audio = WebSound.getAudio({
    src: 'test.mp3',
    loop: false,
    volume: 1
}).on('load', function(e){
    console.log('load');
}).on('end', function(e){
    console.log('end');
}).play();

方法概览

enableAudio()
激活音频功能。注意:需用户事件触发此方法才有效。目前仅对WebAudio有效。

WebSound
getAudio(source:String|Object, preferWebAudio:Boolean):WebAudio|HTMLAudio
获取音频对象。默认优先使用 WebAudio

removeAudio(source:String|Object)
删除音频对象。

方法详情

enableAudio()
激活音频功能。注意:需用户事件触发此方法才有效。目前仅对WebAudio有效。

getAudio(source:String|Object, preferWebAudio:Boolean):WebAudio|HTMLAudio
获取音频对象。默认优先使用 WebAudio
source:String|Object — 若source为String,则为音频src地址;若为Object,则需包含src属性。
preferWebAudio:Boolean Optional, Default: true — 是否优先使用WebAudio,默认 true 。
return(返回值)
WebAudio|HTMLAudio — 音频播放对象实例。

removeAudio(source:String|Object)
删除音频对象。
source:String|Object — 若source为String,则为音频src地址;若为Object,则需包含src属性。

renderer 渲染器模块
CanvasRenderer 画布渲染器
canvas画布渲染器。所有可视对象将渲染在canvas画布上。舞台Stage会根据参数canvas选择不同的渲染器,开发者无需直接使用此类。

属性概览

自带属性

context:CanvasRenderingContext2D
canvas画布的上下文。只读属性。

继承属性

canvas:Object
渲染器对应的画布。它可能是一个普通的DOM元素,比如div,也可以是一个canvas画布元素。只读属性。

renderType:String
渲染方式。只读属性。

stage:Object
渲染器对应的舞台。只读属性。

方法概览

自带方法

CanvasRenderer(properties:Object)
构造函数

继承方法

clear(x:Number, y:Number, width:Number, height:Number)
清除画布指定区域。需要子类来实现。
x:Number — 指定区域的x轴坐标。
y:Number — 指定区域的y轴坐标。
width:Number — 指定区域的宽度。
height:Number — 指定区域的高度。

draw(target:View)
绘制可视对象。需要子类来实现。
target:View — 要绘制的可视对象。

endDraw(target:View)
结束绘制可视对象后的后续处理方法。需要子类来实现。
target:View — 要绘制的可视对象。

hide()
隐藏可视对象。需要子类来实现。

remove(target:View)
从画布中删除可视对象。注意:不是从stage中删除对象。需要子类来实现。

resize(width:Number, height:Number)
改变渲染器的画布大小。
width:Number — 指定渲染画布新的宽度。
height:Number — 指定渲染画布新的高度。

startDraw(target:View)
为开始绘制可视对象做准备。需要子类来实现。

transform()
对可视对象进行变换。需要子类来实现。

DOMRenderer
DOM+CSS3渲染器。将可视对象以DOM元素方式渲染出来。舞台Stage会根据参数canvas选择不同的渲染器,开发者无需直接使用此类。

属性概览

它只有继承属性

canvas:Object
渲染器对应的画布。它可能是一个普通的DOM元素,比如div,也可以是一个canvas画布元素。只读属性。

renderType:String
渲染方式。只读属性。

stage:Object
渲染器对应的舞台。只读属性。

方法概览
自带一个构造方法
DOMRenderer(properties:Object)
构造函数
properties:Object — 创建对象的属性参数。可包含此类所有可写属性。

继承方法和canvasRenderer一样

Hilo游戏引擎——loader(加载程序模块)

LoadQueue(加载队列)

LoadQueue是一个队列下载工具

属性概览

maxConnections:Int
同时下载的最大连接数。默认为2

方法概览

构造函数
LoadQueue(source:Object)
parameters
source:Object — 要下载的资源。可以是单个资源对象或多个资源的数组。

add(source:Object|Array):LoadQueue
增加要下载的资源。可以是单个资源对象或多个资源的数组。

source:Object|Array — 资源对象或资源对象数组。每个资源对象包含以下属性:
id – 资源的唯一标识符。可用于从下载队列获取目标资源。
src – 资源的地址url。
type – 指定资源的类型。默认会根据资源文件的后缀来自动判断类型,不同的资源类型会使用不同的加载器来加载资源。
loader – 指定资源的加载器。默认会根据资源类型来自动选择加载器,若指定loader,则会使用指定的loader来加载资源。
noCache – 指示加载资源时是否增加时间标签以防止缓存。
size – 资源对象的预计大小。可用于预估下载进度。
crossOrigin – 是否需要跨域,例如:crossOrigin=’anonymous’ //anonymous(匿名)
return(返回值)
LoadQueue — 下载队列实例本身。

fire(type:String, detail:Object):Boolean
发送事件。当第一个参数类型为Object时,则把它作为一个整体事件对象。
type:String — 要发送的事件类型。
detail:Object — 要发送的事件的具体信息,即事件随带参数。
return(返回值)
Boolean — 是否成功调度事件

get(id:String):Object
根据id或src地址获取资源对象。
id:String — 指定资源的id或src。
return(返回值)
Object — 资源对象。

getContent(id:String):Object
根据id或src地址获取资源内容。
id:String — 指定资源的id或src。
return(返回值)
Object — 资源内容。

getLoaded():Uint
获取已下载的资源数量。
return(返回值)
Uint — 已下载的资源数量。

getSize(loaded:Boolean):Number
获取全部或已下载的资源的字节大小。
loaded:Boolean — 指示是已下载的资源还是全部资源。默认为全部。
return(返回值)
Number — 指定资源的字节大小。

getTotal():Uint
获取所有资源的数量。
return(返回值)
Uint — 所有资源的数量。

off(type:String, listener:Function):Object
删除一个事件监听。如果不传入任何参数,则删除所有的事件监听;如果不传入第二个参数,则删除指定类型的所有事件监听。
type:String — 要删除监听的事件类型。
listener:Function — 要删除监听的回调函数。
return(返回值)
Object — 对象本身。链式调用支持。

on(type:String, listener:Function, once:Boolean):Object
增加一个事件监听
type:String — 要监听的事件类型。
listener:Function — 事件监听回调函数。
once:Boolean — 是否是一次性监听,即回调函数响应一次后即删除,不再响应。
return(返回值)
Object — 对象本身。链式调用支持。

start():LoadQueue
开始下载队列。
return(返回值)
LoadQueue — 下载队列实例本身。

Hilo游戏引擎——geom(几何学模块)

Matrix(矩阵)

Matrix类表示一个转换矩阵,它确定如何将点从一个坐标空间映射到另一个坐标空间。

方法概览

Matrix(a:Number, b:Number, c:Number, d:Number, tx:Number, ty:Number)
构造函数
a:Number — 缩放或旋转图像时影响像素沿 x 轴定位的值。
b:Number — 旋转或倾斜图像时影响像素沿 y 轴定位的值。
c:Number — 旋转或倾斜图像时影响像素沿 x 轴定位的值。
d:Number — 缩放或旋转图像时影响像素沿 y 轴定位的值。
tx:Number — 沿 x 轴平移每个点的距离。
ty:Number — 沿 y 轴平移每个点的距离。

clone():Matrix
clone(每个)
return(返回值)
Matrix —一个Matrix对象。

concat(mtx:Matrix):Matrix
将某个矩阵与当前矩阵连接,从而将这两个矩阵的几何效果有效地结合在一起。
mtx:Matrix — 要连接到源矩阵的矩阵。
return(返回值)
Matrix — 一个Matrix对象。

copy(mat:Matrix):Matrix
复制
mat:Matrix —要复制的一个Matrix对象。
return(返回值)
Matrix — this

identity():Matrix
为每个矩阵属性设置一个值,该值将导致 null 转换。通过应用恒等矩阵转换的对象将与原始对象完全相同。
为每个矩阵属性设置一个值,该值将导致 null 转换。通过应用恒等矩阵转换的对象将与原始对象完全相同。
return(返回值)
Matrix — 一个Matrix对象。

invert():Matrix
执行原始矩阵的逆转换。您可以将一个逆矩阵应用于对象来撤消在应用原始矩阵时执行的转换。
执行原始矩阵的逆转换。您可以将一个逆矩阵应用于对象来撤消在应用原始矩阵时执行的转换。
return(返回值)
Matrix — 一个Matrix对象。

rotate(angle:Number):Matrix
对 Matrix 对象应用旋转转换。
angle:Number — 旋转的角度。
return(返回值)
Matrix — 一个Matrix对象。

scale(sx:Number, sy:Number):Matrix
对矩阵应用缩放转换。
sx:Number — 用于沿 x 轴缩放对象的乘数。
sy:Number — 用于沿 y 轴缩放对象的乘数。
return(返回值)
Matrix — 一个Matrix对象。

set(a:Number, b:Number, c:Number, d:Number, tx:Number, ty:Number)
set
a:Number – 当缩放或旋转图像时,该值会影响x轴旁边的像素定位。
b:Number – 当旋转或倾斜图像时,该值会影响y轴旁边的像素定位。
c:Number – 当旋转或倾斜图像时,该值会影响x轴旁边的像素定位。
d:Number – 当缩放或旋转图像时,该值会影响y轴旁边的像素定位。
tx:Number – 沿x轴移动每个点的距离。
ty:Number – 沿y轴移动每个点的距离。

transformPoint(point:Object, round:Boolean, returnNew:Boolean):Object
返回将 Matrix 对象表示的几何转换应用于指定点所产生的结果。
point:Object — 想要获得其矩阵转换结果的点。
round:Boolean — 是否对点的坐标进行向上取整。
returnNew:Boolean — 是否返回一个新的点。
return(返回值)
Object — 由应用矩阵转换所产生的点。

translate(dx:Number, dy:Number):Matrix
沿 x 和 y 轴平移矩阵,由 dx 和 dy 参数指定。
dx:Number — 沿 x 轴向右移动的量(以像素为单位)。
dy:Number — 沿 y 轴向右移动的量(以像素为单位)。
return(返回值)
Matrix — 一个Matrix对象。

Hilo游戏引擎——开发流程

1.引用独立的hilo的js包。

自己找到这个版本的下载

2.先搭建舞台Stage(得有地方表演)

舞台Stage是一个各种图形、精灵动画等的总载体。所以可见的对象都要添加到舞台或其子容器后,才会被渲染出来。
Stage构造函数接收一个参数properties,此参数包含创建stage的各种属性。
var stage = new Hilo.Stage({
renderType:’canvas’, //类型
container: containerElem, //容器
width: 320, //舞台宽
height: 480 //舞台高
});

3.创建定时器

舞台Stage上的物体的运动等变化,都是通过一个定时器Ticker不断地调用Stage.tick()方法来实现刷新的。
var ticker = new Hilo.Ticker(60);
ticker.addTick(stage);
ticker.start();

4.创建可视对象

舞台上的一切对象都是可视对象,可以是图片、精灵、文字、图形,甚至DOM元素等等。Hilo提供了一些基本的可视类供您使用,比如添加一个图片到舞台上:
var bird = new Hilo.Bitmap({
image: ‘images/bird.png’
}).addTo(stage);

5.创建事件交互

要让它有事件交互,首先为舞台开启DOM事件响应
要想舞台上的图形、精灵动画等对象能响应用户的点击、触碰等交互事件,就必需先为舞台开启DOM事件响应,然后就可以使用View.on()来响应事件。
stage.enableDOMEvent(Hilo.event.POINTER_START, true);
sprite.on(Hilo.event.POINTER_START, function(e){
console.log(e.eventTarget, e.stageX, e.stageY);
});
接下来,您就可以开始利用hilo提供的各种可视类来创建各种图形、精灵动画

注意:现在按照这样来是没东西的
因为你根本没有创建容器
所以会提示报错,没找到

Hilo游戏引擎——开发小知识点

LoadQueue提供了三个事件:

load – 当单个资源下载完成时发生
complete – 当所有资源下载完成时发生
error – 当某一资源下载出错时发生
在这里我们仅监听了complete事件。

onComplete: function(e){
    this.bg = this.queue.get('bg').content;
    this.ground = this.queue.get('ground').content;
    this.birdAtlas = new Hilo.TextureAtlas({
        image: this.queue.get('bird').content,
        frames: [
            [0, 120, 86, 60],
            [0, 60, 86, 60],
            [0, 0, 86, 60]
        ],
        sprites: {
            bird: [0, 1, 2]
        }
    });

    //删除下载队列的complete事件监听
    this.queue.off('complete');
    //发送complete事件
    this.fire('complete');
}

下载完成后会触发onComplete回调方法。我们可以通过queue.get(id).content来获取指定id的图片素材下载完成后的Image对象。 在这里我们创建了游戏中需要用到的素材以及精灵纹理集等。

其中纹理集TextureAtlas实例由三部分组成:

image – 纹理集图片。
frames – 纹理集图片帧序列。每个图片帧由图片在纹理集中的坐标x/y和宽高width/height组成,即[x, y, width, height]。
sprites – 精灵定义。sprites可包含多个精灵定义。每个精灵由多个frames中的图片帧组成,其中数值代表图片帧在frames中的索引位置。比如bird,则由索引为0、1、2的图片帧组成。

initStage();
初始化舞台

Hilo游戏引擎——粒子系统详解

这些继承来的方法,属性基本很多属性很方法都会被其它模块重复继承,理解一遍后其它继承看一下就行。

粒子系统
ParticleSystem

属性概览

下面是初始自带属性

emitNum:Number
每次发射数量
默认值: 0

emitNumVar:Number
每次发射数量变化量
默认值: 0

emitterX:Number
发射器位置x
默认值: 0

emitterY:Number
发射器位置y
默认值: 0

emitTime:Number
发射间隔
默认值: 0.2

emitTimeVar:Number
发射间隔变化量
默认值: 0

gx:Number
重力加速度x
默认值: 0

gy:Number
重力加速度y
默认值: 0

totalTime:Number
总时间
默认值: Infinity(无穷,无限大)

下面是继承来的属性

align:String|Function
可视对象相对于父容器的对齐方式。取值可查看Hilo.align枚举对象。

alpha:Number
可视对象的透明度。默认值为1

background:Object
可视对象的背景样式。可以是CSS颜色值、canvas的gradient或pattern填充。

boundsArea:Array
可视对象的区域顶点数组。格式为:[{x:10, y:10}, {x:20, y:20}]。

children:Array
容器的子元素列表。只读。

clipChildren:Boolean
指示是否裁剪超出容器范围的子元素。默认为false。

depth:Number
可视对象的深度,也即z轴的序号。只读属性。

drawable:Drawable
可视对象的可绘制对象。供高级开发使用。

height:Number
可视对象的高度。默认值为0。

id:String
可视对象的唯一标识符。

mask:Graphics
可视对象的遮罩图形。

parent:Container
可视对象的父容器。只读属性。

pivotX:Number
可视对象的中心点的x轴坐标。默认值为0

pivotY:Number
可视对象的中心点的y轴坐标。默认值为0。

pointerChildren:Boolean
指示容器的子元素是否能响应用户交互事件。默认为true。

pointerEnabled:Boolean
可视对象是否接受交互事件。默认为接受交互事件,即true。

rotation:Number
可视对象的旋转角度。默认值为0。

scaleX:Number
可视对象在x轴上的缩放比例。默认为不缩放,即1。

scaleY:Number
可视对象在y轴上的缩放比例。默认为不缩放,即1。

tint:Number
可视对象的附加颜色,默认0xFFFFFF,只支持WebGL模式。

transform:Matrix
可视对象的transform属性,如果设置将忽略x, y, scaleX, scaleY, rotation.

visible:Boolean
可视对象是否可见。默认为可见,即true。

width:Number
可视对象的宽度。默认值为0。

x:Number
可视对象的x轴坐标。默认值为0。

y:Number
可视对象的y轴坐标。默认值为0。

开始自带方法

ParticleSystem(properties:Object)
构造函数
properties:Object — 创建对象的属性参数。可包含此类所有可写属性。
properties.particle:Object — 粒子属性配置
properties.particle.x:Number Optional, Default: 0 — x位置
properties.particle.y:Number Optional, Default: 0 — y位置
properties.particle.vx:Number Optional, Default: 0 — x速度
properties.particle.vy:Number Optional, Default: 0 — y速度
properties.particle.ax:Number Optional, Default: 0 — x加速度
properties.particle.ay:Number Optional, Default: 0 — y加速度
properties.particle.life:Number Optional, Default: 1 — 粒子存活时间,单位s
properties.particle.alpha:Number Optional, Default: 1 — 透明度
properties.particle.alphaV:Number Optional, Default: 0 — 透明度变化
properties.particle.scale:Number Optional, Default: 1 — 缩放
properties.particle.scaleV:Number Optional, Default: 0 — 缩放变化速度

onUpdate(dt:Number)
更新
dt:Number — 间隔时间 单位ms

reset(cfg:Object)
重置属性

start()
开始发射粒子

stop(clear:Boolean)
停止发射粒子
clear:Boolean — 是否清除所有粒子

继承方法

addChild(child:View)
在最上面添加子元素。
继承于Container

addChildAt(child:View, index:Number)
在指定索引位置添加子元素。
继承于Container

addTo(container:Container, index:Uint):View
添加此对象到父容器。
继承于View

contains(child:View)
返回是否包含参数指定的子元素。
继承于Container

fire(type:String, detail:Object):Boolean
发送事件。当第一个参数类型为Object时,则把它作为一个整体事件对象。
继承于View

getBounds():Array
获取可视对象在舞台全局坐标系内的外接矩形以及所有顶点坐标。
继承于View

getChildAt(index:Number)
返回指定索引位置的子元素。
继承于Container

getChildById(id:String)
返回指定id的子元素。
继承于Container

getChildIndex(child:View)
返回指定子元素的索引值。
继承于Container

getNumChildren():Uint
返回容器的子元素的数量。
继承于Container
getScaledHeight():Number
返回可视对象缩放后的高度。
继承于View

getScaledWidth():Number
返回可视对象缩放后的宽度。
继承于View

getStage():Stage
返回可视对象的舞台引用。若对象没有被添加到舞台,则返回null。
继承于View

getViewAtPoint(x:Number, y:Number, usePolyCollision:Boolean, global:Boolean, eventMode:Boolean)
返回由x和y指定的点下的对象。
继承于Container

hitTestObject(object:View, usePolyCollision:Boolean)
检测object参数指定的对象是否与其相交。
继承于View

hitTestPoint(x:Number, y:Number, usePolyCollision:Boolean):Boolean
检测由x和y参数指定的点是否在其外接矩形之内。
继承于View

off(type:String, listener:Function):Object
删除一个事件监听。如果不传入任何参数,则删除所有的事件监听;如果不传入第二个参数,则删除指定类型的所有事件监听。
继承于View

on(type:String, listener:Function, once:Boolean):Object
增加一个事件监听。
继承于View

removeAllChildren():Container
删除所有的子元素。
继承于Container

removeChild(child:View):View
删除指定的子元素。
继承于Container

removeChildAt(index:Int):View
在指定索引位置删除子元素。
继承于Container

removeChildById(id:String):View
删除指定id的子元素。
继承于Container

removeFromParent():View
从父容器里删除此对象。
继承于View

render(renderer:Renderer, delta:Number)
可视对象的具体渲染逻辑。子类可通过覆盖此方法实现自己的渲染。
继承于View

setChildIndex(child:View, index:Number)
设置子元素的索引位置。
继承于Container

sortChildren(keyOrFunction:Object)
根据指定键值或函数对子元素进行排序。
继承于Container

swapChildren(child1:View, child2:View)
交换两个子元素的索引位置。
继承于Container

swapChildrenAt(index1:Number, index2:Number)
交换两个指定索引位置的子元素。
继承于Container

toString():String
返回可视对象的字符串表示。
继承于View