Namespace: Tiny

Tiny

Classes

Action
AnimatedSprite
Application
BaseRenderTexture
BaseTexture
BinaryLoader
Bounds
Buffer
CanvasMaskManager
CanvasRenderer
CanvasRenderTarget
CanvasTinter
Circle
Container
DisplayObject
Ellipse
EventEmitter
Filter
FilterManager
Graphics
GraphicsData
GraphicsRenderer
GroupD8
MaskManager
Matrix
ObjectRenderer
ObservablePoint
Point
Polygon
Quad
Rectangle
RenderTarget
RenderTexture
ResourceLoader
RoundedRectangle
Sprite
SpriteMaskFilter
Spritesheet
StencilManager
SystemRenderer
Text
TextMetrics
TextStyle
Texture
TextureGarbageCollector
TextureManager
TextureTransform
Transform
TransformBase
TransformStatic
Transition
VideoBaseTexture
WebGLManager
WebGLRenderer
WebGLState

Namespaces

loaders
settings
ticker

Members

staticTiny.base64object

static,constantTiny.BLEND_MODESobject

Various blend modes supported.


IMPORTANT - The WebGL renderer only supports the NORMAL, ADD, MULTIPLY and SCREEN blend modes.
Anything else will silently act like NORMAL.

Properties:
Name Type Description
NORMAL number
ADD number
MULTIPLY number
SCREEN number
OVERLAY number
DARKEN number
LIGHTEN number
COLOR_DODGE number
COLOR_BURN number
HARD_LIGHT number
SOFT_LIGHT number
DIFFERENCE number
EXCLUSION number
HUE number
SATURATION number
COLOR number
LUMINOSITY number
See:

static,constantTiny.configobject

默认配置参数

Properties:
Name Type Default Description
width number window.innerWidth

宽度

height number window.innerHeight

高度

referWidth number 320

基准参考宽度,如:320、375,默认:320

fixSize boolean false

是否固定尺寸为传入的宽高

canvasId string | HTMLCanvasElement 'TinyCanvas'

Canvas 的 DOM id 或对象

orientation boolean 0

横竖屏 [0: 竖屏, 1: 横屏]

dpi number 1

分辨率

fps number 60

[>=1.1.7] 帧频,接受传入:10、20、30、40、50、60

showFPS boolean false

是否显示帧频

viewTouched boolean false

[>=1.2.0] Canvas 的 DOM 对象是否可被点触/滑动

renderType number 0

渲染类型 [0: 自动识别, 1: WEBGL, 2: CANVAS]

renderOptions object

渲染参数,见Tiny.settings.RENDER_OPTIONS

extraContextAttributes object {}

额外的Context参数,更多见https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

autoRender number 1

是否自动渲染 [0: 手动, 1: 自动]

static,constantTiny.DATA_URIRegExp

Regexp for data URI.
Based on: https://github.com/ragingwind/data-uri-regex

Example
data:image/png;base64

static,constantTiny.DEG_TO_RADnumber

角度值转弧度

static,constantTiny.DRAW_MODESobject

Various webgl draw modes. These can be used to specify which GL drawMode to use under certain situations and renderers.

Properties:
Name Type Description
POINTS number
LINES number
LINE_LOOP number
LINE_STRIP number
TRIANGLES number
TRIANGLE_STRIP number
TRIANGLE_FAN number

static,constantTiny.GC_MODESobject

The gc modes that are supported by Tiny.

The Tiny.settings.GC_MODE Garbage Collection mode for Tiny textures is AUTO
If set to GC_MODE, the renderer will occasianally check textures usage. If they are not used for a specified period of time they will be removed from the GPU. They will of course be uploaded again when they are required. This is a silent behind the scenes process that should ensure that the GPU does not get filled up.

Handy for mobile devices!
This property only affects WebGL.

Properties:
Name Type Description
AUTO number

Garbage collection will happen periodically automatically

MANUAL number

Garbage collection will need to be called manually

staticTiny.LoaderTiny.loaders.Loader

A premade instance of the loader that can be used to load resources.

Example
var resources = [..];
Tiny.Loader.run({
  resources: resources,
  onProgress: function (pre) {
    console.log("percent:", pre + "%");
  },
  onAllComplete: function () {
    console.log('all complete');
    Tiny.app.run(new MenuLayer());
  }
});

staticTiny.mixinsobject

static,constantTiny.PI_2number

Math.PI * 2

static,constantTiny.PRECISIONobject

Constants that specify float precision in shaders.

Properties:
Name Type Default Description
LOW string 'lowp'
MEDIUM string 'mediump'
HIGH string 'highp'

static,constantTiny.premultiplyBlendModearray.<Array.<number>>

maps premultiply flag and blendMode to adjusted blendMode

Version:
  • 1.2.0

static,constantTiny.RAD_TO_DEGnumber

弧度值转角度

static,constantTiny.RENDERER_TYPEobject

Constant to identify the Renderer Type.

Properties:
Name Type Description
UNKNOWN number

Unknown render type.

WEBGL number

WebGL render type.

CANVAS number

Canvas render type.

static,constantTiny.RETINA_PREFIXRegExp

The prefix that denotes a URL is for a retina asset.

Example
`@2x`

static,constantTiny.SCALE_MODESobject

The scale modes that are supported.

The Tiny.settings.SCALE_MODE scale mode affects the default scaling mode of future operations.
It can be re-assigned to either LINEAR or NEAREST, depending upon suitability.

Properties:
Name Type Description
LINEAR number

Smooth scaling

NEAREST number

Pixelating scaling

static,constantTiny.SHAPESobject

Constants that identify shapes, mainly to prevent instanceof calls.

Properties:
Name Type Description
POLY number

Polygon

RECT number

Rectangle

CIRC number

Circle

ELIP number

Ellipse

RREC number

Rounded Rectangle

static,constantTiny.SVG_SIZERegExp

Regexp for SVG size.

Example
<svg width="100" height="100"></svg>

static,constantTiny.TEXT_GRADIENTobject

Constants that define the type of gradient on text.

Properties:
Name Type Description
LINEAR_VERTICAL number

Vertical gradient

LINEAR_HORIZONTAL number

Linear gradient

static,constantTiny.TRANSFORM_MODEobject

Constants that specify the transform type.

Properties:
Name Type Description
STATIC number
DYNAMIC number

staticTiny.TWEENobject

static,constantTiny.UPDATE_PRIORITYobject

Represents the update priorities used by internal Tiny classes when registered with the Tiny.ticker.Ticker object. Higher priority items are updated first and lower priority items, such as render, should go later.

Properties:
Name Type Default Description
INTERACTION number 50

Highest priority, used for Tiny.interaction.InteractionManager

HIGH number 25

High priority updating, Tiny.VideoBaseTexture and Tiny.AnimatedSprite

NORMAL number 0

Default priority for ticker events, see Tiny.ticker.Ticker#add.

LOW number -25

Low priority used for Tiny.Application rendering.

UTILITY number -50

Lowest priority used for Tiny.prepare.BasePrepare utility.

staticTiny.urlobject

static,constantTiny.URL_FILE_EXTENSIONRegExp

Regexp for image type by extension.

Example
`image.png`

static,constantTiny.VERSIONstring

String of the current Tiny version.

static,constantTiny.WIN_SIZEobject

主界面尺寸

Properties:
Name Type Description
width number

height number

static,constantTiny.WRAP_MODESobject

The wrap modes that are supported.

The Tiny.settings.WRAP_MODE wrap mode affects the default wrapping mode of future operations.
It can be re-assigned to either CLAMP or REPEAT, depending upon suitability.
If the texture is non power of two then clamp will be used regardless as webGL can only use REPEAT if the texture is po2.

This property only affects WebGL.

Properties:
Name Type Description
CLAMP number

The textures uvs are clamped

REPEAT number

The texture uvs tile and repeat

MIRRORED_REPEAT number

The texture uvs tile and repeat with mirroring

Methods

staticTiny.arrayRemoveObject(arr, delObj)

从数组中移除某个对象

Name Type Description
arr array.<object>
delObj object

staticTiny.Back(action){Tiny.Action}

原动作返回

Name Type Description
action Tiny.Action
Returns:
Type Description
Tiny.Action
Name Type Description
hideDuration number
showDuration number
Returns:
Type Description
Tiny.Action

staticTiny.clearTextureCache()

Removes all textures from cache, but does not destroy them

staticTiny.correctBlendMode(blendMode, premultiplied){number}

changes blendMode according to texture format

Name Type Description
blendMode number

supposed blend mode

premultiplied boolean

whether source is premultiplied

Version:
  • 1.2.0
Returns:
Type Description
number true blend mode for this texture

staticTiny.decomposeDataUri(dataUri){DecomposedDataUri|undefined}

Split a data URI into components. Returns undefined if parameter dataUri is not a valid data URI.

Name Type Description
dataUri string

the data URI to check

Returns:
Type Description
DecomposedDataUri | undefined The decomposed data uri or undefined

staticTiny.deg2radian(deg){number}

角度值转弧度

Name Type Description
deg
Returns:
Type Description
number

staticTiny.destroyTextureCache()

Destroys all texture in the cache

staticTiny.detect(obj, iterator, context, arg1, arg2){boolean}

Looks through each value in the list, returning the first one that passes a truth test (predicate), or undefined if no value passes the test. The function returns as soon as it finds an acceptable element, and doesn't traverse the entire list.

Name Type Description
obj object
iterator function
context object
arg1
arg2
Returns:
Type Description
boolean
Example
var even = Tiny.detect([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
//=> 2

staticTiny.earcut(vertices, holes, dimensions){Array.<number>}

earcut v2.1.3

Name Type Default Description
vertices Array.<number>

A flat array of vertice coordinates

holes Array.<number> optional

An array of hole indices

dimensions number 2 optional

The number of coordinates per vertice in the input array

Version:
  • 1.2.0
See:
Returns:
Type Description
Array.<number> Triangulated polygon

staticTiny.exports.color2hex(color)

转换 color 对象为二进制颜色值

Name Type Description
color
Version:
  • 1.0.2
Example
var color = Tiny.color(255, 255, 0);
var hex = Tiny.color2hex(color);
//=> 16776960
//等于 0xffff00

staticTiny.exports.premultiplyRgba(rgb, alpha, out, premultiply){Float32Array}

combines rgb and alpha to out array

Name Type Default Description
rgb Float32Array | Array.<number>

input rgb

alpha number

alpha param

out Float32Array optional

output

premultiply boolean true optional

do premultiply it

Version:
  • 1.2.0
Returns:
Type Description
Float32Array vec4 rgba

staticTiny.exports.premultiplyTint(tint, alpha){number}

premultiplies tint

Name Type Description
tint number

integet RGB

alpha number

floating point alpha (0.0-1.0)

Version:
  • 1.2.0
Returns:
Type Description
number tint multiplied by alpha

staticTiny.exports.premultiplyTintToRgba(tint, alpha, out, premultiply){Float32Array}

converts integer tint and float alpha to vec4 form, premultiplies by default

Name Type Default Description
tint number

input tint

alpha number

alpha param

out Float32Array optional

output

premultiply boolean true optional

do premultiply it

Version:
  • 1.2.0
Returns:
Type Description
Float32Array vec4 rgba

staticTiny.FadeIn(duration){Tiny.Action}

Name Type Description
duration number
Returns:
Type Description
Tiny.Action

staticTiny.FadeOut(duration){Tiny.Action}

Name Type Description
duration number
Returns:
Type Description
Tiny.Action

staticTiny.FadeTo(duration, to){Tiny.Action}

Name Type Description
duration number
to number
Returns:
Type Description
Tiny.Action

staticTiny.getResolutionOfUrl(url, defaultValue){number}

get the resolution / device pixel ratio of an asset by looking for the prefix used by spritesheets and image urls

Name Type Default Description
url string

the image path

defaultValue number 1 optional

the defaultValue if no filename prefix is set.

Returns:
Type Description
number resolution / device pixel ratio of an asset

staticTiny.getSvgSize(svgString){Size|undefined}

Get size from an svg string using regexp.

Name Type Description
svgString string

a serialized svg element

Returns:
Type Description
Size | undefined image extension

staticTiny.getTime(){number}

高精度获取当前时间,比 Date.now() 的精度高1000倍,为考虑不同性能场景下的时间获取,建议使用此方法来替代 Date.now()

Returns:
Type Description
number

staticTiny.getUrlFileExtension(url){string|undefined}

Get type of the image by regexp for extension. Returns undefined for unknown extensions.

Name Type Description
url string

the image path

Returns:
Type Description
string | undefined image extension

staticTiny.hex2rgb(hex, out){Array.<number>}

Converts a hex color number to an [R, G, B] array

Name Type Default Description
hex number

The number to convert

out Array.<number> [] optional

If supplied, this array will be used rather than returning a new one

Returns:
Type Description
Array.<number> An array representing the [R, G, B] of the color.

staticTiny.hex2string(hex){string}

Converts a hex color number to a string.

Name Type Description
hex number

Number in hex

Returns:
Type Description
string The string color.

staticTiny.isArray(obj){boolean}

判断对象是否是Array类型

Name Type Description
obj object

要判断的对象

Returns:
Type Description
boolean

staticTiny.isFunction(obj){boolean}

判断对象是否是函数类型

Name Type Description
obj object

要判断的对象

Returns:
Type Description
boolean

staticTiny.isMobile(){object}

Returns:
Type Description
object

staticTiny.isNumber(obj){boolean}

判断对象是否是Number类型

Name Type Description
obj object

要判断的对象

Returns:
Type Description
boolean

staticTiny.isObject(obj){boolean}

判断对象是否是Object类型

Name Type Description
obj object

要判断的对象

Returns:
Type Description
boolean

staticTiny.isPixelCollision(first, x, y, isFirstCentred, other, x2, y2, isOtherCentred){boolean}

像素检测判断是否碰撞

Tiny.js 的这个方法用于JavaScript HTML5 Canvas Image 纯像素级的碰撞检测。
作者是:JOE

Name Type Description
first Tiny.DisplayObject
x number
y number
isFirstCentred boolean
other Tiny.DisplayObject
x2 number
y2 number
isOtherCentred boolean
See:
Returns:
Type Description
boolean

staticTiny.isString(obj){boolean}

判断对象是否是String类型

Name Type Description
obj object

要判断的对象

Returns:
Type Description
boolean

staticTiny.isUndefined(obj){boolean}

判断对象是否是Undefined类型

Name Type Description
obj
Returns:
Type Description
boolean

staticTiny.isWebGLSupported(){boolean}

Helper for checking for webgl support

Returns:
Type Description
boolean is webgl supported

staticTiny.JumpTo(duration, to, height, times){Tiny.Action}

Name Type Description
duration number
to object
height number
times number
Returns:
Type Description
Tiny.Action

staticTiny.MoveBy(duration, to){Tiny.Action}

Name Type Description
duration number
to object
Name Type Description
x number
y number
Returns:
Type Description
Tiny.Action

staticTiny.MoveTo(duration, to){Tiny.Action}

Name Type Description
duration number
to object
Name Type Description
x number
y number
Returns:
Type Description
Tiny.Action

staticTiny.pluginTarget(obj)

Mixins functionality to make an object have "plugins".

Name Type Description
obj object

The object to mix into.

Example
function MyObject() {}

pluginTarget.mixin(MyObject);

staticTiny.point(x, y){object}

转化坐标值

Name Type Description
x number
y number

如果不传,则等于 x

Returns:
Type Description
object
Example
Tiny.point(100, 200);
//=> {x: 100, y: 200}

staticTiny.radian2deg(radian){number}

弧度值转角度

Name Type Description
radian
Returns:
Type Description
number

staticTiny.random(min, max){number}

生成数字区间内的随机整型数据

Name Type Description
min
max
Returns:
Type Description
number
Example
Tiny.random(10, 18);
//=> 15

staticTiny.randomBool(chance){boolean}

生成随机的Boolean类型数据

Name Type Description
chance number

生成 true 的几率,默认值:0.5

Returns:
Type Description
boolean

staticTiny.randomFloat(min, max){number}

返回区间内的随机浮点类型数字

Name Type Description
min
max
Returns:
Type Description
number

staticTiny.randomFromArray(arr){object}

随机返回数组中的任意对象

Name Type Description
arr array.<object>
Returns:
Type Description
object

staticTiny.randomInt(){boolean}

Tiny.random 的别名

Returns:
Type Description
boolean

staticTiny.randomPM(chance){number}

随机生成 {-1, 1} 两个值

Name Type Description
chance number

生成 -1 的几率,默认值:0.5

Returns:
Type Description
number
Example
Tiny.randomPM(0.8);
//=> -1

staticTiny.rectContainsPoint(rect, point){boolean}

检测一个点是否在一个显示对象内部

rectContainsPoint

注意:边缘重叠始终返回fasle

Name Type Description
rect Tiny.Rectangle
point Tiny.Point
Returns:
Type Description
boolean
Example
var rect = new Tiny.Rectangle(10, 10, 50, 50);
var p = new Tiny.Point(49, 62);
Tiny.rectContainsPoint(rect, p);
//=> true

staticTiny.rectContainsRect(rect1, rect2){boolean}

检测一个显示对象是否在另一个显示对象内部

rectContainsRect

注意:边缘重叠始终返回fasle

Name Type Description
rect1 Tiny.Rectangle
rect2 Tiny.Rectangle
Returns:
Type Description
boolean
Example
var rect1 = new Tiny.Rectangle(10, 10, 100, 100);
var rect2 = new Tiny.Rectangle(30, 30, 50, 50);
Tiny.rectContainsRect(rect1, rect2);
//=> true

staticTiny.rectGetMaxX(rect){number}

获取显示对象的横向最大值

Name Type Description
rect Tiny.Rectangle
Returns:
Type Description
number

staticTiny.rectGetMaxY(rect){number}

获取显示对象的纵向最大值

Name Type Description
rect Tiny.Rectangle
Returns:
Type Description
number

staticTiny.rectGetMidX(rect){number}

获取显示对象的横向中心值

Name Type Description
rect Tiny.Rectangle
Returns:
Type Description
number

staticTiny.rectGetMidY(rect){number}

获取显示对象的纵向中心值

Name Type Description
rect Tiny.Rectangle
Returns:
Type Description
number

staticTiny.rectGetMinX(rect){number}

获取显示对象的横向最小值

Name Type Description
rect Tiny.Rectangle
Returns:
Type Description
number

staticTiny.rectGetMinY(rect){number}

获取显示对象的纵向最小值

Name Type Description
rect Tiny.Rectangle
Returns:
Type Description
number

staticTiny.rectIntersectsRect(rectA, rectB){boolean}

检测两个显示对象是否相交,一般用于检测碰撞

rectIntersectsRect

注意:边缘重叠始终返回true

Name Type Description
rectA Tiny.Rectangle
rectB Tiny.Rectangle
Returns:
Type Description
boolean
Example
var rect1 = new Tiny.Rectangle(10, 10, 50, 50);
var rect2 = new Tiny.Rectangle(50, 30, 50, 50);
Tiny.rectIntersectsRect(rect1, rect2);
//=> true

staticTiny.rectUnion(rectA, rectB){Tiny.Rectangle}

返回两个显示对象的总区域

rectUnion

Name Type Description
rectA Tiny.Rectangle
rectB Tiny.Rectangle
Returns:
Type Description
Tiny.Rectangle
Example
var rect1 = new Tiny.Rectangle(10, 10, 50, 50);
var rect2 = new Tiny.Rectangle(33, 34, 50, 50);
Tiny.rectUnion(rect1, rect2);
//=> Tiny.Rectangle(10, 10, 73, 74)

staticTiny.removeItems(arr, startIdx, removeCount){object}

Remove a range of items from an array

Name Type Description
arr array.<object>

源数组

startIdx number

起始位

removeCount number

移除的数量

See:
Returns:
Type Description
object
Example
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
removeItems(arr, 3, 4);
//=> [1, 2, 3, 8, 9]

staticTiny.Repeat(times, action, delay){Tiny.Action}

重复

Name Type Description
times number

重复次数

action Tiny.Action

要重复的 Action

delay number

延迟(ms)

Returns:
Type Description
Tiny.Action

staticTiny.RepeatForever(action, delay){Tiny.Action}

永久重复

Name Type Description
action Tiny.Action

要重复的 Action

delay number

延迟(ms)

Returns:
Type Description
Tiny.Action

staticTiny.rgb2hex(rgb){number}

Converts a color as an [R, G, B] array to a hex number

Name Type Description
rgb Array.<number>

rgb array

Returns:
Type Description
number The color number

staticTiny.RotateBy(duration, to){Tiny.Action}

Name Type Description
duration number
to object
Name Type Description
rotation number
Returns:
Type Description
Tiny.Action

staticTiny.RotateTo(duration, to){Tiny.Action}

Name Type Description
duration number
to object
Name Type Description
rotation number
Returns:
Type Description
Tiny.Action

staticTiny.scale(x, y){object}

转化缩放值

Name Type Description
x number
y number

如果不传,则等于 x

Returns:
Type Description
object
Example
Tiny.scale(2, 1.5);
//=> {scaleX: 2, scaleY: 1.5}

staticTiny.ScaleBy(duration, to){Tiny.Action}

Name Type Description
duration number
to object
Name Type Description
scaleX object
scaleY object
Returns:
Type Description
Tiny.Action

staticTiny.ScaleTo(duration, to){Tiny.Action}

Name Type Description
duration number
to object
Name Type Description
scaleX object
scaleY object
Returns:
Type Description
Tiny.Action

staticTiny.sign(n){number}

返回一个数字的符号,即:Math.sign

Name Type Description
n number

任意数字

Returns:
Type Description
number 此函数共有5种返回值, 分别是 1, -1, 0, -0, NaN. 代表的各是正数, 负数, 正零, 负零, NaN

staticTiny.TintBy(duration, color){Tiny.Action}

注意:差值计算时,R、G、B三个通道,无论加减多少,最后的结果最少是0,最多是255。

Name Type Description
duration number
color number | Tiny.color

此处的 color 虽然是 Tiny.color 类型,但是并不代表某个色值,而是色值与色值直接要做的差值

Returns:
Type Description
Tiny.Action
Example
var action = Tiny.TintBy(1000, Tiny.color(-85, 0, 85));
sprite.runAction(action);
//=> sprite.tint 等于 0xaaffff(即:[170, 255, 255])

staticTiny.TintTo(duration, color){Tiny.Action}

Name Type Description
duration number
color number | Tiny.color
Returns:
Type Description
Tiny.Action
Examples
var action = Tiny.TintTo(1000, 0xFFFF00);
sprite.tint = 0xFF0000;
sprite.runAction(action);
// [255, 102, 0] 即橙色(#FF6600)
var action = Tiny.TintTo(1000, Tiny.color(255, 102, 0));
sprite.runAction(action);

staticTiny.uid(){number}

Gets the next unique identifier

Returns:
Type Description
number The next unique identifier to use.
Documentation generated by JSDoc 3.4.3 on Mon Dec 03 2018 17:48:51 GMT+0800 (CST)