Skip to content

F
fyge_for_tb
Commit 51e82c40 authored by wjf's avatar wjf
Browse files
Options

2.0.24

parent 24e2e305
Hide whitespace changes
Inline Side-by-side
Showing with 1236 additions and 1918 deletions
build/FYGE.d.ts
View file @ 51e82c40
declare namespace FYGE{export const VERSION = "2.0.23";
declare namespace FYGE{export const VERSION = "2.0.24";
export const osType: "ios" | "android" | "pc";
......@@ -423,7 +423,7 @@ export class EventDispatcher extends HashObject {
* @param context thisObject
* @param {boolean} useCapture true 捕获阶段 false 冒泡阶段 默认 true
* @example
* this.addEventListener(Event.ADD_TO_STAGE,function(e){trace(this);},this);
* this.addEventListener(Event.ADD_TO_STAGE,function(e){console.log(this);},this);
*/
addEventListener(type: string, listener: Function, context?: any, useCapture?: boolean): this;
/**
......@@ -456,9 +456,9 @@ export class EventDispatcher extends HashObject {
* @example
* var mySprite=new Sprite(),
* yourEvent=new Event("yourCustomerEvent");
* yourEvent.data='false2x';
* yourEvent.data='aaa';
* mySprite.addEventListener("yourCustomerEvent",function(e){
* trace(e.data);
* console.log(e.data);
* })
* mySprite.dispatchEvent(yourEvent);
*/
......@@ -843,11 +843,11 @@ export class Matrix extends HashObject {
*/
getRotation(): number;
/**
* Creates an array from the current Matrix object.与glsl中的mat3对应,注意行列主序执行transpose;
*
* @param {boolean} transpose - Whether we need to transpose the matrix or not
* @param {Float32Array} [out=new Float32Array(9)] - If provided the array will be assigned to out
* @return {number[]} the newly created array which contains the matrix
* 输出数组.与glsl中的mat3对应,注意行列主序执行transpose;
* 参数与3d的区别很大
* @param {boolean} transpose - 是否转置,默认false,glsl中传入需要true
* @param {Float32Array} [out=new Float32Array(9)] - 输出数组,如不传使用自身的array
* @return {number[]} 返回数组
*/
toArray(transpose?: boolean, out?: any): any;
/**
......@@ -856,15 +856,13 @@ export class Matrix extends HashObject {
*/
decompose(transform: Transform): Transform;
/**
* A default (identity) matrix
*
* 获取一个初始化矩阵，返回新的实例
* @static
* @const
*/
static get IDENTITY(): Matrix;
/**
* A temp matrix
*
* 获取一个临时矩阵，返回新的实例
* @static
* @const
*/
......@@ -926,19 +924,19 @@ export class Rectangle extends HashObject {
*/
height: number;
/**
* returns the left edge of the rectangle
* 左边界
*/
get left(): number;
/**
* returns the right edge of the rectangle
* 右边界
*/
get right(): number;
/**
* returns the top edge of the rectangle
* 上边界
*/
get top(): number;
/**
* returns the bottom edge of the rectangle
* 下边界
*/
get bottom(): number;
/**
......@@ -1265,21 +1263,27 @@ export class RoundedRectangle {
isPointIn(point: Point): boolean;
}
export function mapPremultipliedBlendModes(): any[];
export function getEnv(): "tb" | "web";
export function setEnv(e: "tb" | "web"): void;
export function createCanvas(): HTMLCanvasElement;
export function initedByTbCanvas(canvas: any): void;
export function initedByCanvas(canvas: any): void;
export function destroyTbCanvas(): void;
export function destroyCanvasContent(): void;
export function createImage(): HTMLImageElement;
export function getRequestAnimationFrame(): any;
export function requestAnimationFrame(callback: any): any;
export function cancelAnimationFrame(id: number): void;
export function getCancelAnimationFrame(): any;
export function getRequestAnimationFrame(): void;
export const INT_BITS1 = 32;
......@@ -1908,6 +1912,8 @@ export class GLShader {
export function generateMultiTextureShader(gl: any, maxTextures: any): GLShader;
export const premultiplyBlendMode: any[];
export class BatchRenderer extends ObjectRenderer {
vertSize: number;
vertByteSize: number;
......@@ -2284,6 +2290,8 @@ export class TextureGarbageCollector {
unload(displayObject: any): void;
}
export function mapWebGLBlendModes(gl: WebGLRenderingContext, array?: any[]): any[];
export class WebGLState {
blendModes: any;
/**
......@@ -3396,65 +3404,63 @@ export class StencilManager {
export class BaseRenderTexture extends BaseTexture {
/**
* A map of renderer IDs to webgl renderTargets
* webgl帧缓存列表，键值为渲染器的id
* 画在他的帧缓存中
* @private
* @member {object<number, WebGLTexture>}
*/
_glRenderTargets: {};
/**
* A reference to the canvas render target (we only need one as this can be shared across renderers)
* 画在他的上下文中canvas中
* 离屏canvas，多canvas渲染器可共享，所以不需要列表
* @private
* @member {object<number, WebGLTexture>}
* @member {CanvasRenderTarget}
*/
_canvasRenderTarget: any;
/**
* This will let the renderer know if the texture is valid. If it's not then it cannot be rendered.
* 是否可用
*/
valid: boolean;
/**
* @param {number} [width=100] - The width of the base render texture
* @param {number} [height=100] - The height of the base render texture
* @param {number} [scaleMode=SCALE_MODES.LINEAR] - See {@link SCALE_MODES} for possible values
* @param {number} [width=100] - 宽度
* @param {number} [height=100] - 高度
* @param {number} [scaleMode=SCALE_MODES.LINEAR] - {@link SCALE_MODES}
*/
constructor(width?: number, height?: number, scaleMode?: number);
/**
* Resizes the BaseRenderTexture.
*
* @param {number} width - The width to resize to.
* @param {number} height - The height to resize to.
* 重置尺寸
* @param {number} width - 宽度
* @param {number} height - 高度
*/
resize(width: number, height: number): void;
/**
* Destroys this texture
*
* 销毁
*/
destroy(): void;
}
export class RenderTexture extends Texture {
/**
* 它的基础纹理变成了BaseRenderTexture
*/
baseTexture: BaseRenderTexture;
/**
* @param {BaseRenderTexture} baseRenderTexture - The renderer used for this RenderTexture
* @param {Rectangle} [frame] - The rectangle frame of the texture to show
* @param {BaseRenderTexture} baseRenderTexture
* @param {Rectangle} [frame]
*/
constructor(baseRenderTexture: BaseRenderTexture, frame?: Rectangle);
/**
* Resizes the RenderTexture.
*
* @param {number} width - The width to resize to.
* @param {number} height - The height to resize to.
* @param {boolean} doNotResizeBaseTexture - Should the baseTexture.width and height values be resized as well?
* 重置尺寸
* @param {number} width - 宽度
* @param {number} height - 高度
* @param {boolean} doNotResizeBaseTexture - 是否不重置基础纹理的尺寸，默认false，表示也重置
*/
resize(width: number, height: number, doNotResizeBaseTexture?: boolean): void;
/**
* A short hand way of creating a render texture.
*
* @param {number} [width=100] - The width of the render texture
* @param {number} [height=100] - The height of the render texture
* @param {number} [scaleMode=settings.SCALE_MODE] - See {@link SCALE_MODES} for possible values
* @return {RenderTexture} The new render texture
* 创建renderTexture快捷静态方法
* @param {number} [width=100] - 宽度
* @param {number} [height=100] - 高度
* @param {number} [scaleMode=settings.SCALE_MODE] - {@link SCALE_MODES}
* @return {RenderTexture}
*/
static create(width: number, height: number, scaleMode?: number): RenderTexture;
}
......@@ -3521,7 +3527,7 @@ export class WebglRenderer extends SystemRenderer {
*/
rootRenderTarget: RenderTarget;
/**
* 直接传入的尺寸
* 只传入上下文和尺寸，canvas标签在stage上处理
* @param gl
* @param width
* @param height
......@@ -3613,24 +3619,28 @@ export class WebglRenderer extends SystemRenderer {
handleContextRestored(): void;
/**
* webgl上下文丢失时
* @private
* @param {WebGLContextEvent} event - The context lost event.
* @param {WebGLContextEvent} event - 事件
*/
handleContextLost(event: any): void;
/**
* 初始化插件
* @protected
* @param {object} staticMap - The dictionary of statically saved plugins.
* @param {object} staticMap - 静态属性里存的插件列表
*/
initPlugins(staticMap: any): void;
/**
* 销毁插件
*/
destroyPlugins(): void;
/**
* 插件列表
*/
static __plugins: any;
/**
* Adds a plugin to the renderer.
*
* 添加插件，用于initPlugins时生成所有插件实例，webgl渲染器估计插件可扩展多，所以加静态方法
* @method
* @param {string} pluginName - The name of the plugin.
* @param {Function} ctor - The constructor function or class for the plugin.
* @param {string} pluginName - 插件名，用于区分键值
* @param {Function} ctor - 插件类
*/
static registerPlugin(pluginName: any, ctor: any): void;
}
......@@ -3829,6 +3839,10 @@ export class Sprite extends Container {
static fromFrame(frameId: string): Sprite;
}
export function canUseNewCanvasBlendModes(): boolean;
export function getTintedTexture(texture: Texture, color: number): HTMLCanvasElement;
export class CanvasSpriteRenderer {
renderer: CanvasRenderer;
/**
......@@ -3908,8 +3922,7 @@ export class Mesh extends Container {
*/
set blendMode(value: BLEND_MODES);
/**
* The texture of the Mesh
*
* 纹理
* @member {Texture}
* @default Texture.EMPTY
* @private
......@@ -3930,10 +3943,8 @@ export class Mesh extends Container {
*/
_vertexData: Float32Array;
/**
* 传入批处理的永远是上面三个，上面三个的计算需要记录dirty
* 传入批处理的永远是上面三个，上面三个的计算需要记录dirty，标记修改_vertexDirty++
* 但是每次都需要传Gpu,性能再说吧
* Version of mesh verticies are dirty or not
* 原来是dirty，
* @member {number}
*/
protected _vertexDirty: number;
......@@ -3953,16 +3964,12 @@ export class Mesh extends Container {
*/
private _transformID;
/**
* Triangles in canvas mode are automatically antialiased, use this value to force triangles
* to overlap a bit with each other.
*
* canvas模式下下三角形重合量，默认0
* @member {number}
*/
canvasPadding: number;
/**
* 色值调色
* The tint applied to the mesh. This is a [r,g,b] value. A value of [1,1,1] will remove any
* tint effect.
* 色值调色，十六进制，和Sprite的一样
*/
private _tint;
/**
......@@ -3970,38 +3977,32 @@ export class Mesh extends Container {
*/
private _tintRGB;
/**
* transform that is applied to UV to get the texture coords
* its updated independently from texture uvTransform
* updates of uvs are tied to that thing
*
* 二次纹理坐标矩阵
* @member {TextureMatrix}
* @private
*/
private _uvTransform;
/**
* @param {Texture} texture - The texture to use
* @param {Float32Array} [vertices] - if you want to specify the vertices
* @param {Float32Array} [uvs] - if you want to specify the uvs
* @param {Uint16Array} [indices] - if you want to specify the indices
* @param {Texture} texture - 纹理
* @param {Float32Array} [vertices] - 顶点，类型化数组，默认[0,0, 100,0, 100,100, 0,100]
* @param {Float32Array} [uvs] - uv坐标，类型化数组，[0,0, 1,0, 1,1, 0,1]
* @param {Uint16Array} [indices] - 索引，类型化数组，默认[0, 1, 3, 2]
*/
constructor(texture?: Texture, vertices?: Float32Array, uvs?: Float32Array, indices?: Uint16Array);
/**
* Renders the object using the WebGL renderer
*
* webgl渲染自身方法
* @private
* @param {WebGLRenderer} renderer - a reference to the WebGL renderer
* @param {WebGLRenderer} renderer
*/
_renderWebGL(renderer: WebglRenderer): void;
/**
* Renders the object using the Canvas renderer
*
* canvas渲染自身方法
* @private
* @param {CanvasRenderer} renderer - The canvas renderer.
* @param {CanvasRenderer} renderer
*/
_renderCanvas(renderer: CanvasRenderer): void;
/**
* When the texture is updated, this event will fire to update the scale and frame
*
* 纹理更新时触发
* @private
*/
private _onTextureUpdate;
......@@ -4010,10 +4011,8 @@ export class Mesh extends Container {
*/
multiplyUvs(): void;
/**
* Refreshes uvs for generated meshes (rope, plane)
* sometimes refreshes vertices too
*
* @param {boolean} [forceUpdate=false] if true, matrices will be updated any case
* 就是为了_refresh
* @param {boolean} [forceUpdate=false] 是否强制更新，默认false
*/
refresh(forceUpdate?: boolean): void;
/**
......@@ -4026,8 +4025,7 @@ export class Mesh extends Container {
*/
calculateVertices(): void;
/**
* Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account.
*
* 计算自己全局包围盒
*/
_calculateBounds(): void;
/**
......@@ -4043,8 +4041,7 @@ export class Mesh extends Container {
hitTestPoint(point: Point, isMouseEvent?: boolean): DisplayObject;
private hitTestPointAccuratly;
/**
* The texture that the mesh uses.
*
* 纹理
* @member {Texture}
*/
get texture(): Texture;
......@@ -4052,8 +4049,7 @@ export class Mesh extends Container {
get tint(): number;
set tint(value: number);
/**
* Destroys the Mesh object.
*
* 销毁
*/
destroy(): void;
}
......@@ -4066,9 +4062,9 @@ export class Plane extends Mesh {
verticesX: number;
verticesY: number;
/**
* @param {Texture} texture - The texture to use on the Plane.
* @param {number} [verticesX=10] - The number of vertices in the x-axis
* @param {number} [verticesY=10] - The number of vertices in the y-axis
* @param {Texture} texture - 纹理
* @param {number} [verticesX=10] - x轴顶点数
* @param {number} [verticesY=10] - y轴顶点数
*/
constructor(texture: Texture, verticesX?: number, verticesY?: number);
/**
......@@ -4106,7 +4102,7 @@ export class NineSlicePlane extends Mesh {
*/
private _bottomHeight;
/**
* @param {Texture} texture - The texture to use on the NineSlicePlane.
* @param {Texture} texture 纹理
* @param {int} [leftWidth=10] size of the left vertical bar (A)
* @param {int} [topHeight=10] size of the top horizontal bar (C)
* @param {int} [rightWidth=10] size of the right vertical bar (B)
......@@ -4114,32 +4110,28 @@ export class NineSlicePlane extends Mesh {
*/
constructor(texture: Texture, leftWidth?: number, topHeight?: number, rightWidth?: number, bottomHeight?: number);
/**
* Updates the horizontal vertices.
*
* 更新水平顶点
*/
private updateHorizontalVertices;
/**
* Updates the vertical vertices.
*
* 更新垂直顶点
*/
private updateVerticalVertices;
/**
* Renders the object using the Canvas renderer
* canvas渲染
* 考虑是否用缓存，不然每次相当于9次绘制，到时应该是集成到一个插件里的
* @private
* @param {CanvasRenderer} renderer - The canvas renderer to render with.
* @param {CanvasRenderer} renderer
*/
_renderCanvas(renderer: CanvasRenderer): void;
/**
* Renders one segment of the plane.
* to mimic the exact drawing behavior of stretching the image like WebGL does, we need to make sure
* that the source area is at least 1 pixel in size, otherwise nothing gets drawn when a slice size of 0 is used.
*
* 绘制某块平面
* 至少1像素
* @private
* @param {CanvasRenderingContext2D} context - The context to draw with.
* @param {CanvasImageSource} textureSource - The source to draw.
* @param {number} w - width of the texture
* @param {number} h - height of the texture
* @param {CanvasRenderingContext2D} context - 上下文
* @param {CanvasImageSource} textureSource - 图片标签
* @param {number} w - 图片宽度
* @param {number} h - 图片高度
* @param {number} x1 - x index 1
* @param {number} y1 - y index 1
* @param {number} x2 - x index 2
......@@ -4147,21 +4139,22 @@ export class NineSlicePlane extends Mesh {
*/
private drawSegment;
/**
* The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane
*
* 宽度
* @member {number}
*/
get width(): number;
/**
* 不再修改缩放，修改uv和顶点
* 不再修改缩放，设置后会修改uv和顶点
*/
set width(value: number);
/**
* The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane
*
* 高度
* @member {number}
*/
get height(): number;
/**
* 不再修改缩放，设置后会修改uv和顶点
*/
set height(value: number);
/**
* The width of the left column
......@@ -4192,7 +4185,7 @@ export class NineSlicePlane extends Mesh {
get bottomHeight(): number;
set bottomHeight(value: number);
/**
* Refreshes NineSlicePlane coords. All of them.
* 刷新所有坐标
*/
_refresh(): void;
}
......@@ -4235,6 +4228,8 @@ export class CanvasMeshRenderer {
destroy(): void;
}
export function mapCanvasBlendModes(array?: any[]): any[];
export class CanvasRenderer extends SystemRenderer {
/**
* 主屏幕渲染上下文
......@@ -4249,9 +4244,13 @@ export class CanvasRenderer extends SystemRenderer {
*/
maskManager: CanvasMaskManager;
/**
* 插件，暂时只有图形和图片的
* 插件，暂时只有图形、图片和网格，以后有需要再加
*/
plugins: any;
plugins: {
sprite: CanvasSpriteRenderer;
graphics: CanvasGraphicsRenderer;
mesh: CanvasMeshRenderer;
};
/**
* 当前使用的混色模式
*/
......@@ -4285,16 +4284,6 @@ export class CanvasRenderer extends SystemRenderer {
destroyPlugins(): void;
}
export function canUseNewCanvasBlendModes(): boolean;
export function getTintedTexture(texture: Texture, color: number): HTMLCanvasElement;
export function mapWebGLBlendModes(gl: WebGLRenderingContext, array?: any[]): any[];
export function mapCanvasBlendModes(array?: any[]): any[];
export const premultiplyBlendMode: any[];
export function uid(): number;
export function getBackupCanvasCtx(): CanvasRenderingContext2D;
......@@ -4406,12 +4395,6 @@ export class Loader extends EventDispatcher {
* @param url
*/
loadImage(callback: (s: boolean, image?: HTMLImageElement) => void, url: string): void;
/**
* 加载小程序的音频，暂时不用，完全废弃
* @param callback
* @param url
*/
loadAudio(callback: (s: boolean, audio?: any) => void, url: any): void;
/**
* 淘宝加载方式
* @param callback
......@@ -4515,22 +4498,19 @@ export class BaseTexture extends EventDispatcher {
*/
textureCacheIds: string[];
/**
*
* 小程序里用得是imageData，文本多数用这个，改成canvas;
* {
* data:Uint8Array,
* width:number,
* height:number,
* type:string,
* path:string
* }
* 或者是canvas.createImage()对象，用source.data区分
* 加一个离屏的canvas
* image对象，canvas对象，或者imageData（canvas渲染模式用不了，是否考虑去掉），以后类型增多后再说
* {
* data:Uint8Array,
* width:number,
* height:number,
* type:string,
* path:string
* }
*/
source: any;
/**
* @param {} [source] - 源数据
* @param {number} - possible values
* @param {SCALE_MODES}
*/
constructor(source?: any, scaleMode?: SCALE_MODES);
/**
......@@ -4553,7 +4533,7 @@ export class BaseTexture extends EventDispatcher {
*/
dispose(): void;
/**
* 根据路径
* 根据路径，会缓存baseTexture
* @param {string} url 路径
*/
static fromUrl(url: string): any;
......@@ -4563,7 +4543,7 @@ export class BaseTexture extends EventDispatcher {
*/
static fromData(data: any): BaseTexture;
/**
* 从离屏canvas创建的
* 从离屏canvas创建的，会给canvas加唯一标识_canvasId，并缓存
*/
static fromCanvas(canvas: HTMLCanvasElement, origin?: string): any;
/**
......@@ -4571,9 +4551,14 @@ export class BaseTexture extends EventDispatcher {
* @param image
*/
static fromImage(image: HTMLImageElement): any;
/**
* 所有形式，图片路径，canvas标签，图片标签，或者数据
* @param anything
* @returns
*/
static from(anything: string | HTMLCanvasElement | HTMLImageElement): any;
/**
* 加入缓存
* 加入全局基础纹理缓存
* @static
* @param {BaseTexture} baseTexture
* @param {string} id
......@@ -4585,7 +4570,7 @@ export class BaseTexture extends EventDispatcher {
* @param {string|BaseTexture} baseTexture id或者BaseTexture
* @return {BaseTexture|null} 移除的BaseTexture或null
*/
static removeFromCache(baseTexture: string | BaseTexture): BaseTexture | null;
static removeFromCache(baseTexture: string | BaseTexture): BaseTexture;
}
export class TextureUvs {
......@@ -4699,7 +4684,6 @@ export class Texture extends EventDispatcher {
* @param {Rectangle} [trim] - Trimmed rectangle of original texture
* @param {number} [rotate] - indicates how the texture was rotated by texture packer. See {@link GroupD8}
* @param {Point} [anchor] - Default anchor point used for sprite placement / rotation
* 暂时不需要rotate
*/
constructor(baseTexture: BaseTexture | Texture, frame?: Rectangle, orig?: Rectangle, trim?: Rectangle, rotate?: number, anchor?: Point);
/**
......@@ -4729,14 +4713,12 @@ export class Texture extends EventDispatcher {
*/
clone(): Texture;
/**
*
* Updates the internal WebGL UV cache. Use it after you change `frame` or `trim` of the texture.
* 更新uv，比如在frame改变或trim改变之后
*/
updateUvs(): void;
/**
* The frame specifies the region of the base texture that this texture uses.
* Please call `updateUvs()` after you change coordinates of `frame` manually.
*
* 手动修改frame时，而不是set赋值，比如frame.x=111,frame.width=333,需要手动调用updateUvs，不推荐这种方式修改
* @member {Rectangle}
*/
get frame(): Rectangle;
......@@ -4753,39 +4735,41 @@ export class Texture extends EventDispatcher {
get rotate(): number;
set rotate(rotate: number);
/**
* 宽高都是贴图真实的宽高，不管trim
* The width of the Texture in pixels.
*
* 宽高都是纹理真实的宽高，不管trim
* @member {number}
*/
get width(): number;
/**
* The height of the Texture in pixels.
*
* 宽高都是纹理真实的宽高，不管trim
* @member {number}
*/
get height(): number;
/**
* 会缓存
* 会缓存进全局纹理
* @param {string} url
*/
static fromUrl(url: string): any;
static fromCanvas(canvas: HTMLCanvasElement, origin?: string): Texture;
static fromData(data: any): Texture;
static fromImage(image: HTMLImageElement): Texture;
/**
* 图片路径，canvas标签，图片标签，图片数据
* @param anything
* @returns
*/
static from(anything: string | HTMLCanvasElement | HTMLImageElement): any;
/**
* 加入全局缓存，TextureCache[name]调用
* 加入全局纹理缓存，TextureCache[name]调用
* @static
* @param {Texture} texture - The Texture to add to the cache.
* @param {string} id - The id that the Texture will be stored against.
* @param {Texture} texture
* @param {string} id
*/
static addToCache(texture: Texture, id: string): void;
/**
* 从全局缓存中移除
* @static
* @param {string|Texture} texture - id of a Texture to be removed, or a Texture instance itself
* @return {Texture|null} The Texture that was removed
* @param {string|Texture} texture - 纹理的id或纹理自身
* @return {Texture} 返回移除的纹理
*/
static removeFromCache(texture: any): Texture;
}
......@@ -5003,10 +4987,10 @@ export class Graphics extends Container {
*/
graphicsData: GraphicsData[];
/**
* 是否用作mask
* 标记是否作为遮罩，作为遮罩时不会被当作hittest检测对象，默认false，内部逻辑处理用，外部不建议修改
* @member {boolean}
*/
isUsedToMask: boolean;
_isUsedToMask: boolean;
/**
* 计算包围盒的时的偏移，默认0
* @member {number}
......@@ -5248,7 +5232,7 @@ export class Graphics extends Container {
* @private
* @param {CanvasRenderer} renderer - The renderer
*/
_renderCanvas(renderer: any): void;
_renderCanvas(renderer: CanvasRenderer): void;
/**
* _boundsId不知道怎么改，暂时不管，少用
* 计算全局bounds，_localBoundsSelf做个全局转换就行
......@@ -5257,7 +5241,7 @@ export class Graphics extends Container {
_calculateBounds(): void;
/**
* 碰撞检测方法重写
* @param {Point} point - the point to test
* @param {Point} point - 全局坐标点
*/
hitTestPoint(point: Point, isMouseEvent?: boolean): DisplayObject;
/**
......@@ -5275,24 +5259,21 @@ export class Graphics extends Container {
* 生成离屏canvas纹理
* 不包括变形的，只根据图形数据产生的原生贴图，经过变形的，考虑，是否新建方法，这个暂时只为canvas缓存
* 也不考虑遮罩
* @param {number} scaleMode - The scale mode of the texture.
* @param {number} resolution - The resolution of the texture.
* @return {Texture} The new texture.
* @param {SCALE_MODES} scaleMode 纹理缩放模式
* @return {Texture} 离屏纹理
*/
private generateCanvasTexture;
/**
*
* 销毁
*/
destroy(): void;
/**
* 设置会影响缩放
* @member {number}
*/
get width(): number;
set width(value: number);
/**
* 设置会影响缩放
* @member {number}
*/
get height(): number;
set height(value: number);
......@@ -5381,7 +5362,7 @@ export class MouseEvent extends Event {
*/
static MOUSE_OUT: string;
/**
* mouse或touch事件时rootDiv坐标x点
* mouse或touch事件时canvas实际尺寸坐标x点
* @property clientX
* @public
* @since 1.0.0
......@@ -5389,7 +5370,7 @@ export class MouseEvent extends Event {
*/
clientX: number;
/**
* mouse或touch事件时rootDiv坐标y点
* mouse或touch事件时canvas实际尺寸坐标y点
* @property clientY
* @public
* @since 1.0.0
......@@ -5397,7 +5378,7 @@ export class MouseEvent extends Event {
*/
clientY: number;
/**
* mouse或touch事件时全局坐标x点
* mouse或touch事件时stage上坐标x点
* @property stageX
* @public
* @since 1.0.0
......@@ -5405,7 +5386,7 @@ export class MouseEvent extends Event {
*/
stageX: number;
/**
* mouse或touch事件时全局坐标y点
* mouse或touch事件时stage上坐标y点
* @property stageY
* @public
* @since 1.0.0
......@@ -5413,7 +5394,7 @@ export class MouseEvent extends Event {
*/
stageY: number;
/**
* mouse或touch事件时本地坐标x点
* mouse或touch事件时显示对象本地坐标x点
* @property localX
* @public
* @since 1.0.0
......@@ -5421,7 +5402,7 @@ export class MouseEvent extends Event {
*/
localX: number;
/**
* mouse或touch事件时本地坐标y点
* mouse或touch事件时显示对象本地坐标y点
* @property localY
* @public
* @since 1.0.0
......@@ -5453,12 +5434,8 @@ export class MouseEvent extends Event {
*/
constructor(type: string);
/**
* 事件后立即更新显示列表状态
* @method updateAfterEvent
* @since 1.0.9
* @public
* 销毁
*/
updateAfterEvent(): void;
destroy(): void;
}
......@@ -5584,17 +5561,19 @@ export class Stage extends Container {
private _stageCenter;
/**
* 建立舞台
* 注意淘宝小程序canvas实际宽高/显示宽高必须是dpr，要么传dpr（参数resolution），要么外部自行设置实际宽高（canvas.width）及显示宽高（样式）
* @param canvas canvas标签
* @param desWidth 舞台设计宽
* @param desHeight 舞台设计高
* @param divWidth canvas显示宽
* @param divHeight canvas显示高
* @param desWidth 舞台设计宽，为了直接在舞台加东西不需要考虑缩放
* @param desHeight 舞台设计高，为了直接在舞台加东西不需要考虑缩放
* @param divWidth canvas显示宽，或视图宽度，或样式宽度，全屏就是屏幕宽度document.body.clientWidth(web环境)或my.getSystemInfoSync().windowWidth(淘宝小程序)
* @param divHeight canvas显示高，或视图高度，或样式高度，全屏就是屏幕宽度document.body.clientHeight(web环境)或my.getSystemInfoSync().windowHeight(淘宝小程序)
* @param renderType 渲染类型,默认canvas
* @param stageCenter 舞台是否根据设计尺寸居中,默认false(左上角置顶)
* @param fixedHeight 是否定高,默认false(定宽)
* @param resolution 分辨率，一般传设备的devicePixelRatio，不传意味着外部自行处理了canvas的实际宽高及显示宽高
* @param resolution 分辨率，一般传设备的devicePixelRatio，不传意味着外部自行处理了canvas的实际宽高及显示宽高（注意淘宝小程序实际宽高/显示宽高必须是dpr，要么传dpr，要么外部设置）
* @param webglOptions 获取webgl上下文时需要的参数，一般用默认的，默认alpha:true,antialias:false,premultipliedAlpha:true,stencil:true,preserveDrawingBuffer:false
*/
constructor(canvas: HTMLCanvasElement, desWidth: number, desHeight: number, divWidth: number, divHeight: number, renderType?: RENDERER_TYPE, stageCenter?: boolean, fixedHeight?: boolean, resolution?: number);
constructor(canvas: HTMLCanvasElement, desWidth: number, desHeight: number, divWidth: number, divHeight: number, renderType?: RENDERER_TYPE, stageCenter?: boolean, fixedHeight?: boolean, resolution?: number, webglOptions?: WebGLContextAttributes);
/**
* 暂时不存在外部调用的情况
*/
......@@ -5822,6 +5801,10 @@ export class DisplayObject extends EventDispatcher {
*/
getLocalBounds(rect?: Rectangle): Rectangle;
calculateBounds(): void;
/**
* 手动调用calculateBounds或getBounds或getLocalBounds时如果发现包围盒计算有误，可以尝试前置调用needUpdateBounds
*/
needUpdateBounds(): void;
/**
*将全局坐标转换到本地坐标值
* @method globalToLocal
......@@ -5860,7 +5843,7 @@ export class DisplayObject extends EventDispatcher {
*/
renderCanvas(renderer: any): void;
/**
* 根据常规属性，设置矩阵属性，挺少用，自己赋值也完全一样，考虑废弃
* 根据常规属性，设置矩阵属性，挺少用，自己赋值也完全一样，可用于初始化所有数据，考虑废弃
* @param {number} [x=0] - 位置x
* @param {number} [y=0] - 位置y
* @param {number} [scaleX=1] - 缩放x
......@@ -6321,8 +6304,6 @@ export class FloatDisplay extends DisplayObject {
destroy(): void;
}
export const GDispatcher: EventDispatcher;
export class Shape extends Sprite {
canvas: HTMLCanvasElement;
context: CanvasRenderingContext2D;
......@@ -6577,6 +6558,10 @@ export class Shape extends Sprite {
* @since 1.0.0
*/
endFill(): this;
/**
* 标记是否作为遮罩，作为遮罩时不会被当作hittest检测对象，默认false，内部逻辑处理用，外部不建议修改
*/
_isUsedToMask: boolean;
/**
* 结束画线
* @method endStroke
......@@ -8360,16 +8345,6 @@ export class ScrollList extends ScrollPage {
destroy(): void;
}
export class ShowWord extends TextField {
/**
*
* @param text 文本 例子：这里是生命值，闯关失败后\n都会扣除一点生命值
* @param deltaTime 文字间隔时间，毫秒计
* @param callback 播放完后的回调
*/
playWords(text: string, deltaTime?: number, callback?: Function): void;
}
export class MovieClip extends Container {
/**
* 原始数据，接口在解析类上，不搞先
......@@ -10906,6 +10881,10 @@ export class DrawOrderAniTrack extends BaseTrack {
times: IDrawOrderAniData[];
constructor(slots: Slot[], drawOrder: Slot[], times: IDrawOrderAniData[]);
setValue(time: number, alpha?: number, blend?: MixBlend, direction?: MixDirection): void;
/**
* 层级需要加个重置方法，因为部分动画并没有层级时间轴，会导致当前动画层级根据上一个动画来
*/
resetValue(): void;
}
export class SpineAniClip extends AnimationClip {
......@@ -10928,7 +10907,9 @@ export class SpineAniClip extends AnimationClip {
export class SpineAniManager extends AnimationManager {
currentClip: SpineAniClip;
/**
*
* 切换动画
* 有切换闪帧问题时尝试setTimeout延时0后执行showAni，
* 因为resetState更新的部分插槽初始值并不是0时间，所以延时到本帧结束，下帧开始前，利用下帧逻辑覆盖显示
* @param name
* @param loops
* @param callback
......
build/fyge.min.js
View file @ 51e82c40
This source diff could not be displayed because it is too large. You can view the blob instead.
build/fyge.min.js.map
View file @ 51e82c40
This source diff could not be displayed because it is too large. You can view the blob instead.
build/types.d.ts
View file @ 51e82c40
export const VERSION = "2.0.23";
export const VERSION = "2.0.24";
export const osType: "ios" | "android" | "pc";
......@@ -423,7 +423,7 @@ export class EventDispatcher extends HashObject {
* @param context thisObject
* @param {boolean} useCapture true 捕获阶段 false 冒泡阶段 默认 true
* @example
* this.addEventListener(Event.ADD_TO_STAGE,function(e){trace(this);},this);
* this.addEventListener(Event.ADD_TO_STAGE,function(e){console.log(this);},this);
*/
addEventListener(type: string, listener: Function, context?: any, useCapture?: boolean): this;
/**
......@@ -456,9 +456,9 @@ export class EventDispatcher extends HashObject {
* @example
* var mySprite=new Sprite(),
* yourEvent=new Event("yourCustomerEvent");
* yourEvent.data='false2x';
* yourEvent.data='aaa';
* mySprite.addEventListener("yourCustomerEvent",function(e){
* trace(e.data);
* console.log(e.data);
* })
* mySprite.dispatchEvent(yourEvent);
*/
......@@ -843,11 +843,11 @@ export class Matrix extends HashObject {
*/
getRotation(): number;
/**
* Creates an array from the current Matrix object.与glsl中的mat3对应,注意行列主序执行transpose;
*
* @param {boolean} transpose - Whether we need to transpose the matrix or not
* @param {Float32Array} [out=new Float32Array(9)] - If provided the array will be assigned to out
* @return {number[]} the newly created array which contains the matrix
* 输出数组.与glsl中的mat3对应,注意行列主序执行transpose;
* 参数与3d的区别很大
* @param {boolean} transpose - 是否转置,默认false,glsl中传入需要true
* @param {Float32Array} [out=new Float32Array(9)] - 输出数组,如不传使用自身的array
* @return {number[]} 返回数组
*/
toArray(transpose?: boolean, out?: any): any;
/**
......@@ -856,15 +856,13 @@ export class Matrix extends HashObject {
*/
decompose(transform: Transform): Transform;
/**
* A default (identity) matrix
*
* 获取一个初始化矩阵，返回新的实例
* @static
* @const
*/
static get IDENTITY(): Matrix;
/**
* A temp matrix
*
* 获取一个临时矩阵，返回新的实例
* @static
* @const
*/
......@@ -926,19 +924,19 @@ export class Rectangle extends HashObject {
*/
height: number;
/**
* returns the left edge of the rectangle
* 左边界
*/
get left(): number;
/**
* returns the right edge of the rectangle
* 右边界
*/
get right(): number;
/**
* returns the top edge of the rectangle
* 上边界
*/
get top(): number;
/**
* returns the bottom edge of the rectangle
* 下边界
*/
get bottom(): number;
/**
......@@ -1265,21 +1263,27 @@ export class RoundedRectangle {
isPointIn(point: Point): boolean;
}
export function mapPremultipliedBlendModes(): any[];
export function getEnv(): "tb" | "web";
export function setEnv(e: "tb" | "web"): void;
export function createCanvas(): HTMLCanvasElement;
export function initedByTbCanvas(canvas: any): void;
export function initedByCanvas(canvas: any): void;
export function destroyTbCanvas(): void;
export function destroyCanvasContent(): void;
export function createImage(): HTMLImageElement;
export function getRequestAnimationFrame(): any;
export function requestAnimationFrame(callback: any): any;
export function cancelAnimationFrame(id: number): void;
export function getCancelAnimationFrame(): any;
export function getRequestAnimationFrame(): void;
export const INT_BITS1 = 32;
......@@ -1908,6 +1912,8 @@ export class GLShader {
export function generateMultiTextureShader(gl: any, maxTextures: any): GLShader;
export const premultiplyBlendMode: any[];
export class BatchRenderer extends ObjectRenderer {
vertSize: number;
vertByteSize: number;
......@@ -2284,6 +2290,8 @@ export class TextureGarbageCollector {
unload(displayObject: any): void;
}
export function mapWebGLBlendModes(gl: WebGLRenderingContext, array?: any[]): any[];
export class WebGLState {
blendModes: any;
/**
......@@ -3396,65 +3404,63 @@ export class StencilManager {
export class BaseRenderTexture extends BaseTexture {
/**
* A map of renderer IDs to webgl renderTargets
* webgl帧缓存列表，键值为渲染器的id
* 画在他的帧缓存中
* @private
* @member {object<number, WebGLTexture>}
*/
_glRenderTargets: {};
/**
* A reference to the canvas render target (we only need one as this can be shared across renderers)
* 画在他的上下文中canvas中
* 离屏canvas，多canvas渲染器可共享，所以不需要列表
* @private
* @member {object<number, WebGLTexture>}
* @member {CanvasRenderTarget}
*/
_canvasRenderTarget: any;
/**
* This will let the renderer know if the texture is valid. If it's not then it cannot be rendered.
* 是否可用
*/
valid: boolean;
/**
* @param {number} [width=100] - The width of the base render texture
* @param {number} [height=100] - The height of the base render texture
* @param {number} [scaleMode=SCALE_MODES.LINEAR] - See {@link SCALE_MODES} for possible values
* @param {number} [width=100] - 宽度
* @param {number} [height=100] - 高度
* @param {number} [scaleMode=SCALE_MODES.LINEAR] - {@link SCALE_MODES}
*/
constructor(width?: number, height?: number, scaleMode?: number);
/**
* Resizes the BaseRenderTexture.
*
* @param {number} width - The width to resize to.
* @param {number} height - The height to resize to.
* 重置尺寸
* @param {number} width - 宽度
* @param {number} height - 高度
*/
resize(width: number, height: number): void;
/**
* Destroys this texture
*
* 销毁
*/
destroy(): void;
}
export class RenderTexture extends Texture {
/**
* 它的基础纹理变成了BaseRenderTexture
*/
baseTexture: BaseRenderTexture;
/**
* @param {BaseRenderTexture} baseRenderTexture - The renderer used for this RenderTexture
* @param {Rectangle} [frame] - The rectangle frame of the texture to show
* @param {BaseRenderTexture} baseRenderTexture
* @param {Rectangle} [frame]
*/
constructor(baseRenderTexture: BaseRenderTexture, frame?: Rectangle);
/**
* Resizes the RenderTexture.
*
* @param {number} width - The width to resize to.
* @param {number} height - The height to resize to.
* @param {boolean} doNotResizeBaseTexture - Should the baseTexture.width and height values be resized as well?
* 重置尺寸
* @param {number} width - 宽度
* @param {number} height - 高度
* @param {boolean} doNotResizeBaseTexture - 是否不重置基础纹理的尺寸，默认false，表示也重置
*/
resize(width: number, height: number, doNotResizeBaseTexture?: boolean): void;
/**
* A short hand way of creating a render texture.
*
* @param {number} [width=100] - The width of the render texture
* @param {number} [height=100] - The height of the render texture
* @param {number} [scaleMode=settings.SCALE_MODE] - See {@link SCALE_MODES} for possible values
* @return {RenderTexture} The new render texture
* 创建renderTexture快捷静态方法
* @param {number} [width=100] - 宽度
* @param {number} [height=100] - 高度
* @param {number} [scaleMode=settings.SCALE_MODE] - {@link SCALE_MODES}
* @return {RenderTexture}
*/
static create(width: number, height: number, scaleMode?: number): RenderTexture;
}
......@@ -3521,7 +3527,7 @@ export class WebglRenderer extends SystemRenderer {
*/
rootRenderTarget: RenderTarget;
/**
* 直接传入的尺寸
* 只传入上下文和尺寸，canvas标签在stage上处理
* @param gl
* @param width
* @param height
......@@ -3613,24 +3619,28 @@ export class WebglRenderer extends SystemRenderer {
handleContextRestored(): void;
/**
* webgl上下文丢失时
* @private
* @param {WebGLContextEvent} event - The context lost event.
* @param {WebGLContextEvent} event - 事件
*/
handleContextLost(event: any): void;
/**
* 初始化插件
* @protected
* @param {object} staticMap - The dictionary of statically saved plugins.
* @param {object} staticMap - 静态属性里存的插件列表
*/
initPlugins(staticMap: any): void;
/**
* 销毁插件
*/
destroyPlugins(): void;
/**
* 插件列表
*/
static __plugins: any;
/**
* Adds a plugin to the renderer.
*
* 添加插件，用于initPlugins时生成所有插件实例，webgl渲染器估计插件可扩展多，所以加静态方法
* @method
* @param {string} pluginName - The name of the plugin.
* @param {Function} ctor - The constructor function or class for the plugin.
* @param {string} pluginName - 插件名，用于区分键值
* @param {Function} ctor - 插件类
*/
static registerPlugin(pluginName: any, ctor: any): void;
}
......@@ -3829,6 +3839,10 @@ export class Sprite extends Container {
static fromFrame(frameId: string): Sprite;
}
export function canUseNewCanvasBlendModes(): boolean;
export function getTintedTexture(texture: Texture, color: number): HTMLCanvasElement;
export class CanvasSpriteRenderer {
renderer: CanvasRenderer;
/**
......@@ -3908,8 +3922,7 @@ export class Mesh extends Container {
*/
set blendMode(value: BLEND_MODES);
/**
* The texture of the Mesh
*
* 纹理
* @member {Texture}
* @default Texture.EMPTY
* @private
......@@ -3930,10 +3943,8 @@ export class Mesh extends Container {
*/
_vertexData: Float32Array;
/**
* 传入批处理的永远是上面三个，上面三个的计算需要记录dirty
* 传入批处理的永远是上面三个，上面三个的计算需要记录dirty，标记修改_vertexDirty++
* 但是每次都需要传Gpu,性能再说吧
* Version of mesh verticies are dirty or not
* 原来是dirty，
* @member {number}
*/
protected _vertexDirty: number;
......@@ -3953,16 +3964,12 @@ export class Mesh extends Container {
*/
private _transformID;
/**
* Triangles in canvas mode are automatically antialiased, use this value to force triangles
* to overlap a bit with each other.
*
* canvas模式下下三角形重合量，默认0
* @member {number}
*/
canvasPadding: number;
/**
* 色值调色
* The tint applied to the mesh. This is a [r,g,b] value. A value of [1,1,1] will remove any
* tint effect.
* 色值调色，十六进制，和Sprite的一样
*/
private _tint;
/**
......@@ -3970,38 +3977,32 @@ export class Mesh extends Container {
*/
private _tintRGB;
/**
* transform that is applied to UV to get the texture coords
* its updated independently from texture uvTransform
* updates of uvs are tied to that thing
*
* 二次纹理坐标矩阵
* @member {TextureMatrix}
* @private
*/
private _uvTransform;
/**
* @param {Texture} texture - The texture to use
* @param {Float32Array} [vertices] - if you want to specify the vertices
* @param {Float32Array} [uvs] - if you want to specify the uvs
* @param {Uint16Array} [indices] - if you want to specify the indices
* @param {Texture} texture - 纹理
* @param {Float32Array} [vertices] - 顶点，类型化数组，默认[0,0, 100,0, 100,100, 0,100]
* @param {Float32Array} [uvs] - uv坐标，类型化数组，[0,0, 1,0, 1,1, 0,1]
* @param {Uint16Array} [indices] - 索引，类型化数组，默认[0, 1, 3, 2]
*/
constructor(texture?: Texture, vertices?: Float32Array, uvs?: Float32Array, indices?: Uint16Array);
/**
* Renders the object using the WebGL renderer
*
* webgl渲染自身方法
* @private
* @param {WebGLRenderer} renderer - a reference to the WebGL renderer
* @param {WebGLRenderer} renderer
*/
_renderWebGL(renderer: WebglRenderer): void;
/**
* Renders the object using the Canvas renderer
*
* canvas渲染自身方法
* @private
* @param {CanvasRenderer} renderer - The canvas renderer.
* @param {CanvasRenderer} renderer
*/
_renderCanvas(renderer: CanvasRenderer): void;
/**
* When the texture is updated, this event will fire to update the scale and frame
*
* 纹理更新时触发
* @private
*/
private _onTextureUpdate;
......@@ -4010,10 +4011,8 @@ export class Mesh extends Container {
*/
multiplyUvs(): void;
/**
* Refreshes uvs for generated meshes (rope, plane)
* sometimes refreshes vertices too
*
* @param {boolean} [forceUpdate=false] if true, matrices will be updated any case
* 就是为了_refresh
* @param {boolean} [forceUpdate=false] 是否强制更新，默认false
*/
refresh(forceUpdate?: boolean): void;
/**
......@@ -4026,8 +4025,7 @@ export class Mesh extends Container {
*/
calculateVertices(): void;
/**
* Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account.
*
* 计算自己全局包围盒
*/
_calculateBounds(): void;
/**
......@@ -4043,8 +4041,7 @@ export class Mesh extends Container {
hitTestPoint(point: Point, isMouseEvent?: boolean): DisplayObject;
private hitTestPointAccuratly;
/**
* The texture that the mesh uses.
*
* 纹理
* @member {Texture}
*/
get texture(): Texture;
......@@ -4052,8 +4049,7 @@ export class Mesh extends Container {
get tint(): number;
set tint(value: number);
/**
* Destroys the Mesh object.
*
* 销毁
*/
destroy(): void;
}
......@@ -4066,9 +4062,9 @@ export class Plane extends Mesh {
verticesX: number;
verticesY: number;
/**
* @param {Texture} texture - The texture to use on the Plane.
* @param {number} [verticesX=10] - The number of vertices in the x-axis
* @param {number} [verticesY=10] - The number of vertices in the y-axis
* @param {Texture} texture - 纹理
* @param {number} [verticesX=10] - x轴顶点数
* @param {number} [verticesY=10] - y轴顶点数
*/
constructor(texture: Texture, verticesX?: number, verticesY?: number);
/**
......@@ -4106,7 +4102,7 @@ export class NineSlicePlane extends Mesh {
*/
private _bottomHeight;
/**
* @param {Texture} texture - The texture to use on the NineSlicePlane.
* @param {Texture} texture 纹理
* @param {int} [leftWidth=10] size of the left vertical bar (A)
* @param {int} [topHeight=10] size of the top horizontal bar (C)
* @param {int} [rightWidth=10] size of the right vertical bar (B)
......@@ -4114,32 +4110,28 @@ export class NineSlicePlane extends Mesh {
*/
constructor(texture: Texture, leftWidth?: number, topHeight?: number, rightWidth?: number, bottomHeight?: number);
/**
* Updates the horizontal vertices.
*
* 更新水平顶点
*/
private updateHorizontalVertices;
/**
* Updates the vertical vertices.
*
* 更新垂直顶点
*/
private updateVerticalVertices;
/**
* Renders the object using the Canvas renderer
* canvas渲染
* 考虑是否用缓存，不然每次相当于9次绘制，到时应该是集成到一个插件里的
* @private
* @param {CanvasRenderer} renderer - The canvas renderer to render with.
* @param {CanvasRenderer} renderer
*/
_renderCanvas(renderer: CanvasRenderer): void;
/**
* Renders one segment of the plane.
* to mimic the exact drawing behavior of stretching the image like WebGL does, we need to make sure
* that the source area is at least 1 pixel in size, otherwise nothing gets drawn when a slice size of 0 is used.
*
* 绘制某块平面
* 至少1像素
* @private
* @param {CanvasRenderingContext2D} context - The context to draw with.
* @param {CanvasImageSource} textureSource - The source to draw.
* @param {number} w - width of the texture
* @param {number} h - height of the texture
* @param {CanvasRenderingContext2D} context - 上下文
* @param {CanvasImageSource} textureSource - 图片标签
* @param {number} w - 图片宽度
* @param {number} h - 图片高度
* @param {number} x1 - x index 1
* @param {number} y1 - y index 1
* @param {number} x2 - x index 2
......@@ -4147,21 +4139,22 @@ export class NineSlicePlane extends Mesh {
*/
private drawSegment;
/**
* The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane
*
* 宽度
* @member {number}
*/
get width(): number;
/**
* 不再修改缩放，修改uv和顶点
* 不再修改缩放，设置后会修改uv和顶点
*/
set width(value: number);
/**
* The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane
*
* 高度
* @member {number}
*/
get height(): number;
/**
* 不再修改缩放，设置后会修改uv和顶点
*/
set height(value: number);
/**
* The width of the left column
......@@ -4192,7 +4185,7 @@ export class NineSlicePlane extends Mesh {
get bottomHeight(): number;
set bottomHeight(value: number);
/**
* Refreshes NineSlicePlane coords. All of them.
* 刷新所有坐标
*/
_refresh(): void;
}
......@@ -4235,6 +4228,8 @@ export class CanvasMeshRenderer {
destroy(): void;
}
export function mapCanvasBlendModes(array?: any[]): any[];
export class CanvasRenderer extends SystemRenderer {
/**
* 主屏幕渲染上下文
......@@ -4249,9 +4244,13 @@ export class CanvasRenderer extends SystemRenderer {
*/
maskManager: CanvasMaskManager;
/**
* 插件，暂时只有图形和图片的
* 插件，暂时只有图形、图片和网格，以后有需要再加
*/
plugins: any;
plugins: {
sprite: CanvasSpriteRenderer;
graphics: CanvasGraphicsRenderer;
mesh: CanvasMeshRenderer;
};
/**
* 当前使用的混色模式
*/
......@@ -4285,16 +4284,6 @@ export class CanvasRenderer extends SystemRenderer {
destroyPlugins(): void;
}
export function canUseNewCanvasBlendModes(): boolean;
export function getTintedTexture(texture: Texture, color: number): HTMLCanvasElement;
export function mapWebGLBlendModes(gl: WebGLRenderingContext, array?: any[]): any[];
export function mapCanvasBlendModes(array?: any[]): any[];
export const premultiplyBlendMode: any[];
export function uid(): number;
export function getBackupCanvasCtx(): CanvasRenderingContext2D;
......@@ -4406,12 +4395,6 @@ export class Loader extends EventDispatcher {
* @param url
*/
loadImage(callback: (s: boolean, image?: HTMLImageElement) => void, url: string): void;
/**
* 加载小程序的音频，暂时不用，完全废弃
* @param callback
* @param url
*/
loadAudio(callback: (s: boolean, audio?: any) => void, url: any): void;
/**
* 淘宝加载方式
* @param callback
......@@ -4515,22 +4498,19 @@ export class BaseTexture extends EventDispatcher {
*/
textureCacheIds: string[];
/**
*
* 小程序里用得是imageData，文本多数用这个，改成canvas;
* {
* data:Uint8Array,
* width:number,
* height:number,
* type:string,
* path:string
* }
* 或者是canvas.createImage()对象，用source.data区分
* 加一个离屏的canvas
* image对象，canvas对象，或者imageData（canvas渲染模式用不了，是否考虑去掉），以后类型增多后再说
* {
* data:Uint8Array,
* width:number,
* height:number,
* type:string,
* path:string
* }
*/
source: any;
/**
* @param {} [source] - 源数据
* @param {number} - possible values
* @param {SCALE_MODES}
*/
constructor(source?: any, scaleMode?: SCALE_MODES);
/**
......@@ -4553,7 +4533,7 @@ export class BaseTexture extends EventDispatcher {
*/
dispose(): void;
/**
* 根据路径
* 根据路径，会缓存baseTexture
* @param {string} url 路径
*/
static fromUrl(url: string): any;
......@@ -4563,7 +4543,7 @@ export class BaseTexture extends EventDispatcher {
*/
static fromData(data: any): BaseTexture;
/**
* 从离屏canvas创建的
* 从离屏canvas创建的，会给canvas加唯一标识_canvasId，并缓存
*/
static fromCanvas(canvas: HTMLCanvasElement, origin?: string): any;
/**
......@@ -4571,9 +4551,14 @@ export class BaseTexture extends EventDispatcher {
* @param image
*/
static fromImage(image: HTMLImageElement): any;
/**
* 所有形式，图片路径，canvas标签，图片标签，或者数据
* @param anything
* @returns
*/
static from(anything: string | HTMLCanvasElement | HTMLImageElement): any;
/**
* 加入缓存
* 加入全局基础纹理缓存
* @static
* @param {BaseTexture} baseTexture
* @param {string} id
......@@ -4585,7 +4570,7 @@ export class BaseTexture extends EventDispatcher {
* @param {string|BaseTexture} baseTexture id或者BaseTexture
* @return {BaseTexture|null} 移除的BaseTexture或null
*/
static removeFromCache(baseTexture: string | BaseTexture): BaseTexture | null;
static removeFromCache(baseTexture: string | BaseTexture): BaseTexture;
}
export class TextureUvs {
......@@ -4699,7 +4684,6 @@ export class Texture extends EventDispatcher {
* @param {Rectangle} [trim] - Trimmed rectangle of original texture
* @param {number} [rotate] - indicates how the texture was rotated by texture packer. See {@link GroupD8}
* @param {Point} [anchor] - Default anchor point used for sprite placement / rotation
* 暂时不需要rotate
*/
constructor(baseTexture: BaseTexture | Texture, frame?: Rectangle, orig?: Rectangle, trim?: Rectangle, rotate?: number, anchor?: Point);
/**
......@@ -4729,14 +4713,12 @@ export class Texture extends EventDispatcher {
*/
clone(): Texture;
/**
*
* Updates the internal WebGL UV cache. Use it after you change `frame` or `trim` of the texture.
* 更新uv，比如在frame改变或trim改变之后
*/
updateUvs(): void;
/**
* The frame specifies the region of the base texture that this texture uses.
* Please call `updateUvs()` after you change coordinates of `frame` manually.
*
* 手动修改frame时，而不是set赋值，比如frame.x=111,frame.width=333,需要手动调用updateUvs，不推荐这种方式修改
* @member {Rectangle}
*/
get frame(): Rectangle;
......@@ -4753,39 +4735,41 @@ export class Texture extends EventDispatcher {
get rotate(): number;
set rotate(rotate: number);
/**
* 宽高都是贴图真实的宽高，不管trim
* The width of the Texture in pixels.
*
* 宽高都是纹理真实的宽高，不管trim
* @member {number}
*/
get width(): number;
/**
* The height of the Texture in pixels.
*
* 宽高都是纹理真实的宽高，不管trim
* @member {number}
*/
get height(): number;
/**
* 会缓存
* 会缓存进全局纹理
* @param {string} url
*/
static fromUrl(url: string): any;
static fromCanvas(canvas: HTMLCanvasElement, origin?: string): Texture;
static fromData(data: any): Texture;
static fromImage(image: HTMLImageElement): Texture;
/**
* 图片路径，canvas标签，图片标签，图片数据
* @param anything
* @returns
*/
static from(anything: string | HTMLCanvasElement | HTMLImageElement): any;
/**
* 加入全局缓存，TextureCache[name]调用
* 加入全局纹理缓存，TextureCache[name]调用
* @static
* @param {Texture} texture - The Texture to add to the cache.
* @param {string} id - The id that the Texture will be stored against.
* @param {Texture} texture
* @param {string} id
*/
static addToCache(texture: Texture, id: string): void;
/**
* 从全局缓存中移除
* @static
* @param {string|Texture} texture - id of a Texture to be removed, or a Texture instance itself
* @return {Texture|null} The Texture that was removed
* @param {string|Texture} texture - 纹理的id或纹理自身
* @return {Texture} 返回移除的纹理
*/
static removeFromCache(texture: any): Texture;
}
......@@ -5003,10 +4987,10 @@ export class Graphics extends Container {
*/
graphicsData: GraphicsData[];
/**
* 是否用作mask
* 标记是否作为遮罩，作为遮罩时不会被当作hittest检测对象，默认false，内部逻辑处理用，外部不建议修改
* @member {boolean}
*/
isUsedToMask: boolean;
_isUsedToMask: boolean;
/**
* 计算包围盒的时的偏移，默认0
* @member {number}
......@@ -5248,7 +5232,7 @@ export class Graphics extends Container {
* @private
* @param {CanvasRenderer} renderer - The renderer
*/
_renderCanvas(renderer: any): void;
_renderCanvas(renderer: CanvasRenderer): void;
/**
* _boundsId不知道怎么改，暂时不管，少用
* 计算全局bounds，_localBoundsSelf做个全局转换就行
......@@ -5257,7 +5241,7 @@ export class Graphics extends Container {
_calculateBounds(): void;
/**
* 碰撞检测方法重写
* @param {Point} point - the point to test
* @param {Point} point - 全局坐标点
*/
hitTestPoint(point: Point, isMouseEvent?: boolean): DisplayObject;
/**
......@@ -5275,24 +5259,21 @@ export class Graphics extends Container {
* 生成离屏canvas纹理
* 不包括变形的，只根据图形数据产生的原生贴图，经过变形的，考虑，是否新建方法，这个暂时只为canvas缓存
* 也不考虑遮罩
* @param {number} scaleMode - The scale mode of the texture.
* @param {number} resolution - The resolution of the texture.
* @return {Texture} The new texture.
* @param {SCALE_MODES} scaleMode 纹理缩放模式
* @return {Texture} 离屏纹理
*/
private generateCanvasTexture;
/**
*
* 销毁
*/
destroy(): void;
/**
* 设置会影响缩放
* @member {number}
*/
get width(): number;
set width(value: number);
/**
* 设置会影响缩放
* @member {number}
*/
get height(): number;
set height(value: number);
......@@ -5381,7 +5362,7 @@ export class MouseEvent extends Event {
*/
static MOUSE_OUT: string;
/**
* mouse或touch事件时rootDiv坐标x点
* mouse或touch事件时canvas实际尺寸坐标x点
* @property clientX
* @public
* @since 1.0.0
......@@ -5389,7 +5370,7 @@ export class MouseEvent extends Event {
*/
clientX: number;
/**
* mouse或touch事件时rootDiv坐标y点
* mouse或touch事件时canvas实际尺寸坐标y点
* @property clientY
* @public
* @since 1.0.0
......@@ -5397,7 +5378,7 @@ export class MouseEvent extends Event {
*/
clientY: number;
/**
* mouse或touch事件时全局坐标x点
* mouse或touch事件时stage上坐标x点
* @property stageX
* @public
* @since 1.0.0
......@@ -5405,7 +5386,7 @@ export class MouseEvent extends Event {
*/
stageX: number;
/**
* mouse或touch事件时全局坐标y点
* mouse或touch事件时stage上坐标y点
* @property stageY
* @public
* @since 1.0.0
......@@ -5413,7 +5394,7 @@ export class MouseEvent extends Event {
*/
stageY: number;
/**
* mouse或touch事件时本地坐标x点
* mouse或touch事件时显示对象本地坐标x点
* @property localX
* @public
* @since 1.0.0
......@@ -5421,7 +5402,7 @@ export class MouseEvent extends Event {
*/
localX: number;
/**
* mouse或touch事件时本地坐标y点
* mouse或touch事件时显示对象本地坐标y点
* @property localY
* @public
* @since 1.0.0
......@@ -5453,12 +5434,8 @@ export class MouseEvent extends Event {
*/
constructor(type: string);
/**
* 事件后立即更新显示列表状态
* @method updateAfterEvent
* @since 1.0.9
* @public
* 销毁
*/
updateAfterEvent(): void;
destroy(): void;
}
......@@ -5584,17 +5561,19 @@ export class Stage extends Container {
private _stageCenter;
/**
* 建立舞台
* 注意淘宝小程序canvas实际宽高/显示宽高必须是dpr，要么传dpr（参数resolution），要么外部自行设置实际宽高（canvas.width）及显示宽高（样式）
* @param canvas canvas标签
* @param desWidth 舞台设计宽
* @param desHeight 舞台设计高
* @param divWidth canvas显示宽
* @param divHeight canvas显示高
* @param desWidth 舞台设计宽，为了直接在舞台加东西不需要考虑缩放
* @param desHeight 舞台设计高，为了直接在舞台加东西不需要考虑缩放
* @param divWidth canvas显示宽，或视图宽度，或样式宽度，全屏就是屏幕宽度document.body.clientWidth(web环境)或my.getSystemInfoSync().windowWidth(淘宝小程序)
* @param divHeight canvas显示高，或视图高度，或样式高度，全屏就是屏幕宽度document.body.clientHeight(web环境)或my.getSystemInfoSync().windowHeight(淘宝小程序)
* @param renderType 渲染类型,默认canvas
* @param stageCenter 舞台是否根据设计尺寸居中,默认false(左上角置顶)
* @param fixedHeight 是否定高,默认false(定宽)
* @param resolution 分辨率，一般传设备的devicePixelRatio，不传意味着外部自行处理了canvas的实际宽高及显示宽高
* @param resolution 分辨率，一般传设备的devicePixelRatio，不传意味着外部自行处理了canvas的实际宽高及显示宽高（注意淘宝小程序实际宽高/显示宽高必须是dpr，要么传dpr，要么外部设置）
* @param webglOptions 获取webgl上下文时需要的参数，一般用默认的，默认alpha:true,antialias:false,premultipliedAlpha:true,stencil:true,preserveDrawingBuffer:false
*/
constructor(canvas: HTMLCanvasElement, desWidth: number, desHeight: number, divWidth: number, divHeight: number, renderType?: RENDERER_TYPE, stageCenter?: boolean, fixedHeight?: boolean, resolution?: number);
constructor(canvas: HTMLCanvasElement, desWidth: number, desHeight: number, divWidth: number, divHeight: number, renderType?: RENDERER_TYPE, stageCenter?: boolean, fixedHeight?: boolean, resolution?: number, webglOptions?: WebGLContextAttributes);
/**
* 暂时不存在外部调用的情况
*/
......@@ -5822,6 +5801,10 @@ export class DisplayObject extends EventDispatcher {
*/
getLocalBounds(rect?: Rectangle): Rectangle;
calculateBounds(): void;
/**
* 手动调用calculateBounds或getBounds或getLocalBounds时如果发现包围盒计算有误，可以尝试前置调用needUpdateBounds
*/
needUpdateBounds(): void;
/**
*将全局坐标转换到本地坐标值
* @method globalToLocal
......@@ -5860,7 +5843,7 @@ export class DisplayObject extends EventDispatcher {
*/
renderCanvas(renderer: any): void;
/**
* 根据常规属性，设置矩阵属性，挺少用，自己赋值也完全一样，考虑废弃
* 根据常规属性，设置矩阵属性，挺少用，自己赋值也完全一样，可用于初始化所有数据，考虑废弃
* @param {number} [x=0] - 位置x
* @param {number} [y=0] - 位置y
* @param {number} [scaleX=1] - 缩放x
......@@ -6321,8 +6304,6 @@ export class FloatDisplay extends DisplayObject {
destroy(): void;
}
export const GDispatcher: EventDispatcher;
export class Shape extends Sprite {
canvas: HTMLCanvasElement;
context: CanvasRenderingContext2D;
......@@ -6577,6 +6558,10 @@ export class Shape extends Sprite {
* @since 1.0.0
*/
endFill(): this;
/**
* 标记是否作为遮罩，作为遮罩时不会被当作hittest检测对象，默认false，内部逻辑处理用，外部不建议修改
*/
_isUsedToMask: boolean;
/**
* 结束画线
* @method endStroke
......@@ -8360,16 +8345,6 @@ export class ScrollList extends ScrollPage {
destroy(): void;
}
export class ShowWord extends TextField {
/**
*
* @param text 文本 例子：这里是生命值，闯关失败后\n都会扣除一点生命值
* @param deltaTime 文字间隔时间，毫秒计
* @param callback 播放完后的回调
*/
playWords(text: string, deltaTime?: number, callback?: Function): void;
}
export class MovieClip extends Container {
/**
* 原始数据，接口在解析类上，不搞先
......@@ -10906,6 +10881,10 @@ export class DrawOrderAniTrack extends BaseTrack {
times: IDrawOrderAniData[];
constructor(slots: Slot[], drawOrder: Slot[], times: IDrawOrderAniData[]);
setValue(time: number, alpha?: number, blend?: MixBlend, direction?: MixDirection): void;
/**
* 层级需要加个重置方法，因为部分动画并没有层级时间轴，会导致当前动画层级根据上一个动画来
*/
resetValue(): void;
}
export class SpineAniClip extends AnimationClip {
......@@ -10928,7 +10907,9 @@ export class SpineAniClip extends AnimationClip {
export class SpineAniManager extends AnimationManager {
currentClip: SpineAniClip;
/**
*
* 切换动画
* 有切换闪帧问题时尝试setTimeout延时0后执行showAni，
* 因为resetState更新的部分插槽初始值并不是0时间，所以延时到本帧结束，下帧开始前，利用下帧逻辑覆盖显示
* @param name
* @param loops
* @param callback
......
examples/3d.html
View file @ 51e82c40
......@@ -73,7 +73,11 @@
1624,//设计高度
sysInfo && sysInfo.windowWidth || document.body.clientWidth,
sysInfo && sysInfo.windowHeight || document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL
FYGE.RENDERER_TYPE.WEBGL,
false,
false,
null,
{antialias:true}
);
//鼠标事件
var mouseEvent = stage.onMouseEvent.bind(stage);
......@@ -85,6 +89,7 @@
canvas.addEventListener('mousemove', mouseEvent, false);
canvas.addEventListener('mouseup', mouseEvent, false);
stage.webMouseEventPreventDefault =true
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, async () => {
//加个2d矢量背景
......@@ -363,7 +368,7 @@
}
FYGE.Tween.flush()
FYGE.getRequestAnimationFrame()(loop);
requestAnimationFrame(loop);
}
})
</script>
......
examples/cc.js
View file @ 51e82c40
......@@ -205,4 +205,47 @@ class LightBgCanvas {
}
return canvas
}
}
/**
* 文字一个一个出现
*/
export class ShowWord extends FYGE.TextField {
/**
*
* @param text 文本 例子：这里是生命值，闯关失败后\n都会扣除一点生命值
* @param deltaTime 文字间隔时间，毫秒计
* @param callback 播放完后的回调
*/
playWords(text, deltaTime = 100, callback) {
var spiltStrs = text.split("\n");
//拆分文本
let strs = []
for (var i = 0; i < spiltStrs.length; i++) {
var spiltStr = spiltStrs[i];
var ori = "";
var index = 0;
while (index < i) {
ori += spiltStrs[index];
ori += "\n";
index++;
}
for (var j = 0; j < spiltStr.length; j++) {
var str = "" + ori;
str += spiltStr.substring(0, j + 1)
strs.push(str)
}
}
// console.log(strs)
//轮流替换文本
for (let m = 0; m < strs.length; m++) {
let str = strs[m];
setTimeout(() => {
this.text = str;
if (m == strs.length - 1) {
callback && callback();
}
}, deltaTime * m)
}
}
}
\ No newline at end of file
examples/previewLottie.html → examples/previewLottieSvga.html
View file @ 51e82c40
......@@ -20,7 +20,7 @@
overflow-y: auto;
}
</style>
<script src="//yun.duiba.com.cn/db_games/libs0924/svgaParser.minWeb.js" crossorigin="anonymous"></script>
<script src="../build/fyge.min.js"></script>
</head>
......@@ -72,14 +72,23 @@
var src = URL.createObjectURL(files[0]);
//清空
stage.removeAllChildren()
// console.log(files)
//加载
FYGE.GlobalLoader.loadJson((s, json) => {
var l = stage.addChild(new FYGE.Lottie(json))
l.position.set((750 - json.w) / 2, (stage.viewRect.height - json.h) / 2);
l.play();
}, src)
if (name.indexOf(".svga") >= 0) {
SvgaParser.loadSvga(src, (v) => {
console.log(v)
stage.addChild(new FYGE.MovieClip(v))
// .position.set(
// (750 - v.videoSize.width) / 2,
// (stage.viewRect.height - v.videoSize.height) / 2,
// )
})
} else {
//加载
FYGE.GlobalLoader.loadJson((s, json) => {
var l = stage.addChild(new FYGE.Lottie(json))
// l.position.set((750 - json.w) / 2, (stage.viewRect.height - json.h) / 2);
l.play();
}, src)
}
}
})
</script>
......
examples/previewSpine.html
View file @ 51e82c40
......@@ -27,9 +27,14 @@
color: #fff;
text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
}
input::-webkit-input-placeholder {
color: #000000;
}
</style>
<script src="../build/fyge.min.js"></script>
<!-- <script src="//yun.duiba.com.cn/db_games/libs0924/fyge2023.min.js"></script> -->
</head>
......@@ -41,10 +46,13 @@
</div>
<div id="skins" style="position: absolute;z-index: 999;top:5%;right:0%;width: 5%;">
</div>
<input type="text" id="key0" value="x" style="position: absolute;z-index: 999;width: 10%;left:35%;top:5%">
<input type="text" id="val0" value="y" style="position: absolute;z-index: 999;width: 10%;right:35%;top:5%">
<input type="text" id="x" value="" placeholder="x坐标"
style="position: absolute;z-index: 999;width: 10%;left:35%;top:5%">
<input type="text" id="y" value="" placeholder="y坐标"
style="position: absolute;z-index: 999;width: 10%;right:35%;top:5%">
<script>
window.addEventListener("load", async function () {
//舞台
var stage = new FYGE.Stage(
document.getElementById("canvas"),
......@@ -130,7 +138,7 @@
},
URL.createObjectURL(getFile(files, "json")),
)
}else{
} else {
console.error("文件有误")
}
......@@ -150,6 +158,20 @@
createAnis(spine)
createSkins(spine)
//添加输入框xy
var inputX = document.getElementById("x");
inputX.oninput = () => {
var x = parseInt(inputX.value)
if (x) {
spine.x = x;
}
}
var inputY = document.getElementById("y");
inputY.oninput = () => {
var y = parseInt(inputY.value)
if (y) {
spine.y = y;
}
}
}
})
......
examples/为了ppt.html
View file @ 51e82c40
......@@ -12,7 +12,7 @@
<meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" />
<!-- 加载svga文件用 npm svga-parser-->
<script src="./js/svgaParser.min.js"></script>
<!-- <script src="./js/svgaParser.min.js"></script> -->
<!-- 主引擎 -->
<script src="../build/fyge.min.js"></script>
<style>
......@@ -54,7 +54,7 @@
FYGE.RENDERER_TYPE.WEBGL,
);
//监听窗口缩放,按需,一般移动端的不需要
window.addEventListener('resize', () => { stage.resize() });
// window.addEventListener('resize', () => { stage.resize() });
//鼠标事件
var mouseEvent = stage.onMouseEvent.bind(stage);
canvas.addEventListener("touchstart", mouseEvent, false);
......@@ -85,10 +85,12 @@
// FYGE.Tween.get(f1,{loop:true})
// .to({x:300}, 2000)
// .to({x:175}, 2000)
var tex = await new Promise((r) => {
FYGE.GlobalLoader.loadImage((s, image) => { r(FYGE.Texture.fromImage(image)) }, "res/11.png")
})
//好多图
for (var i = 0; i < 20000; i++) {
let a = stage.addChild(FYGE.Sprite.fromUrl("res/11.png"))
let a = stage.addChild(new FYGE.Sprite(tex))
.addEventListener(FYGE.Event.ENTER_FRAME, () => {
a.rotation += 3
})
......
package.json
View file @ 51e82c40
{
"name": "fyge",
"version": "2.0.23",
"version": "2.0.24",
"description": "canvas渲染引擎",
"main": "./build/fyge.min.js",
"types": "./build/types.d.ts",
......
record.txt
View file @ 51e82c40
......@@ -312,9 +312,38 @@
Spine添加ik约束
Spine的findSlot方法变成公共的，为了显示隐藏插槽，这样做不保险，后续考虑优化
新增IkConstraint
2.0.24 删除sound文件夹
删除ShowWord
GDispatcher不往外导出,只在内部使用（虽然内部也没在用）,有需要自行实例
矢量图Graphics和Shape属性名isUsedToMask修改为_isUsedToMask（Shape里原先isUsedToMask被注释了），还涉及Container,DisplayObject,ScrollPage.
DisplayObject添加方法needUpdateBounds
Stage销毁方法多一个web环境且webgl模式时移除上下文丢失事件
MouseEvent删除updateAfterEvent方法，没地方用到
Loader删除loadAudio方法
Plane的构造传参verticesX，verticesY直接加public，文件最后加了例子Ripple
CanvasRenderer的plugins添加了类型声明，构造函数里赋值形式改了
WebglRenderer构造函数handleContextLost和handleContextRestored打开注释，还涉及Stage上的上下文丢失事件监听
WebglRenderer的render方法里this.textureGC.update()打开注释，待测试有啥影响
TextureManager的destroyTexture方法判断了是否为事件触发
RenderTexture导出
Texture.WHITE改回离屏canvas方式，待测试
ShowWord删除
ScrollPage的ENTER_FRAME监听里在触发下拉和上拉后添加s.addSpeed = 0;
ScrollPage的onMouseEvent方法里其他鼠标事件里添加if (!s.isMouseDownState) return;
utils的index里不再往外导出getTintedTexture，mapWebGLBlendModes，mapCanvasBlendModes，premultiplyBlendMode，具体其他影响搜索
mapPremultipliedBlendModes直接导出修正后的premultiplyBlendMode
tbminiAdapte全部修改，具体自行对比，原来的注释了
删除sound文件夹
Geometry构造函数里colors默认值从map方法改成for
AdvancedBloomFilter构造函数里assign替换成...
extractUniformsFromSrc返回值assign替换成...
DrawOrderAniTrack添加resetValue重置方法
Stage构造函数添加webglOption参数，以防webgl需要一些特殊属性时无法传入，比如抗锯齿antialias等
现在不改，索引数据过大时得用Uint32Array，同时开扩展gl.getExtension( "OES_element_index_uint" )和drawElements改参数类型为gl.UNSIGNED_INT
//现在不改，DisplayObject的getLocalBounds最后是否考虑计算一次updateTransform(不用计算自己的,为了计算子级的)
现在不改，D3Renderer里的aSkinIndex传值用了Uint8Array，类型是gl.UNSIGNED_BYTE，估计那个外星头是因为这个
......@@ -394,4 +423,6 @@ FloatDisplay现在是body上面的。以后有时间取canvas的父级
文本以后按照bottom来，但是真实高度怎么拿
gltf加载考虑怎么变成加载数据，通过数据初始化一个显示对象，或者用paser生成个新的对象
\ No newline at end of file
gltf加载考虑怎么变成加载数据，通过数据初始化一个显示对象，或者用paser生成个新的对象
有时间兼容下微信小游戏
\ No newline at end of file
src/2d/const.ts
View file @ 51e82c40
......@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export const VERSION = "2.0.23";
export const VERSION = "2.0.24";
/**
......
src/2d/display/Container.ts
View file @ 51e82c40
......@@ -407,7 +407,7 @@ export default class Container extends DisplayObject {
for (var i = length - 1; i >= 0; i--) {
child = children[i];
//当作遮罩的不作为检测，跳过
if (child.isUsedToMask) continue;
if (child._isUsedToMask) continue;
//有遮罩，但是不在遮罩内，跳过
if (child.mask && !child.mask.hitTestPoint(globalPoint, isMouseEvent)) continue;
//检测
......
src/2d/display/DisplayObject.ts
View file @ 51e82c40
......@@ -275,7 +275,12 @@ export class DisplayObject extends EventDispatcher {
if (this._lastBoundsID == this._boundsID) return
this._lastBoundsID = this._boundsID
}
/**
* 手动调用calculateBounds或getBounds或getLocalBounds时如果发现包围盒计算有误，可以尝试前置调用needUpdateBounds
*/
needUpdateBounds() {
this._lastBoundsID = -1;
}
/**
*将全局坐标转换到本地坐标值
......@@ -347,7 +352,7 @@ export class DisplayObject extends EventDispatcher {
}
/**
* 根据常规属性，设置矩阵属性，挺少用，自己赋值也完全一样，考虑废弃
* 根据常规属性，设置矩阵属性，挺少用，自己赋值也完全一样，可用于初始化所有数据，考虑废弃
* @param {number} [x=0] - 位置x
* @param {number} [y=0] - 位置y
* @param {number} [scaleX=1] - 缩放x
......@@ -653,7 +658,7 @@ export class DisplayObject extends EventDispatcher {
if (this._mask) {
//原先有的遮罩,重置属性
this._mask.renderable = true;
this._mask.isUsedToMask = false;
this._mask._isUsedToMask = false;
// if (this._mask.parent) {
// this._mask.parent.removeChild(this._mask)
// //是否销毁
......@@ -664,7 +669,7 @@ export class DisplayObject extends EventDispatcher {
if (this._mask) {
this._mask.renderable = false;
this._mask.isUsedToMask = true;
this._mask._isUsedToMask = true;
//保证更新包围盒
this._boundsID++;
......
src/2d/display/Stage.ts
View file @ 51e82c40
......@@ -161,15 +161,17 @@ export class Stage extends Container {
private _stageCenter: boolean;
/**
* 建立舞台
* 注意淘宝小程序canvas实际宽高/显示宽高必须是dpr，要么传dpr（参数resolution），要么外部自行设置实际宽高（canvas.width）及显示宽高（样式）
* @param canvas canvas标签
* @param desWidth 舞台设计宽
* @param desHeight 舞台设计高
* @param divWidth canvas显示宽
* @param divHeight canvas显示高
* @param desWidth 舞台设计宽，为了直接在舞台加东西不需要考虑缩放
* @param desHeight 舞台设计高，为了直接在舞台加东西不需要考虑缩放
* @param divWidth canvas显示宽，或视图宽度，或样式宽度，全屏就是屏幕宽度document.body.clientWidth(web环境)或my.getSystemInfoSync().windowWidth(淘宝小程序)
* @param divHeight canvas显示高，或视图高度，或样式高度，全屏就是屏幕宽度document.body.clientHeight(web环境)或my.getSystemInfoSync().windowHeight(淘宝小程序)
* @param renderType 渲染类型,默认canvas
* @param stageCenter 舞台是否根据设计尺寸居中,默认false(左上角置顶)
* @param fixedHeight 是否定高,默认false(定宽)
* @param resolution 分辨率，一般传设备的devicePixelRatio，不传意味着外部自行处理了canvas的实际宽高及显示宽高
* @param resolution 分辨率，一般传设备的devicePixelRatio，不传意味着外部自行处理了canvas的实际宽高及显示宽高（注意淘宝小程序实际宽高/显示宽高必须是dpr，要么传dpr，要么外部设置）
* @param webglOptions 获取webgl上下文时需要的参数，一般用默认的，默认alpha:true,antialias:false,premultipliedAlpha:true,stencil:true,preserveDrawingBuffer:false
*/
public constructor(
canvas: HTMLCanvasElement,
......@@ -180,7 +182,8 @@ export class Stage extends Container {
renderType: RENDERER_TYPE = RENDERER_TYPE.CANVAS,
stageCenter: boolean = false,
fixedHeight: boolean = false,
resolution?: number
resolution?: number,
webglOptions?: WebGLContextAttributes
) {
super();
this.canvas = canvas;
......@@ -232,8 +235,9 @@ export class Stage extends Container {
antialias: false,//抗锯齿尽量别开，耗性能
premultipliedAlpha: true, //一般png图片都不会预乘alpha，所以必为true,除非有些图集工具选择了premultipliedAlpha
stencil: true,
// preserveDrawingBuffer: this.options.preserveDrawingBuffer,//需要toDataUrl时要开
// preserveDrawingBuffer: true,//需要toDataUrl时要开，不开的话渲染一次后马上toDataUrl也能截到
// powerPreference: this.options.powerPreference,
...webglOptions
};
let context = canvas.getContext("webgl", contextOptions) || canvas.getContext("experimental-webgl", contextOptions) as WebGLRenderingContext;
s.renderObj = new WebglRenderer(context, canvas.width, canvas.height);
......@@ -241,12 +245,12 @@ export class Stage extends Container {
if (getEnv() == "web") {
canvas.addEventListener(
'webglcontextlost',
(s.renderObj as WebglRenderer).handleContextLost.bind(s.renderObj),
(s.renderObj as WebglRenderer).handleContextLost,
false
);
canvas.addEventListener(
'webglcontextrestored',
(s.renderObj as WebglRenderer).handleContextRestored.bind(s.renderObj),
(s.renderObj as WebglRenderer).handleContextRestored,
false
);
}
......@@ -689,6 +693,20 @@ export class Stage extends Container {
public destroy(): void {
let s = this;
// if (getEnv() == "tb") clearInterval(s.offsetTimeId);
//web环境下，渲染方式webgl模式时，移除webgl上下文丢失事件
if (getEnv() == "web" && s.renderObj.type == RENDERER_TYPE.WEBGL) {
s.canvas.removeEventListener(
'webglcontextlost',
(s.renderObj as WebglRenderer).handleContextLost,
false
);
s.canvas.removeEventListener(
'webglcontextrestored',
(s.renderObj as WebglRenderer).handleContextRestored,
false
);
}
//然后销毁渲染器
s.renderObj.destroy();
s.renderObj = null;
s.viewRect = null;
......
src/2d/events/Event.ts
View file @ 51e82c40
......@@ -7,9 +7,6 @@ import { HashObject } from "../HashObject";
* @since 1.0.0
*/
export class Event extends HashObject {
// public static IMAGE_LOADED: string = "onImageLoaded"
/**
* 舞台尺寸发生变化时触发
* @Event
......
src/2d/events/EventDispatcher.ts
View file @ 51e82c40
......@@ -2,7 +2,7 @@
import { HashObject } from "../HashObject";
import { Event } from "./Event";
/**
* 事件触发基类 功能简单，如果需全能的，到时用EventEmitter3，现成库，事件名，事件，once否集合成实例
* 事件触发基类 功能简单
* @class EventDispatcher
* @extends HashObject
* @public
......@@ -71,7 +71,7 @@ export class EventDispatcher extends HashObject {
* @param context thisObject
* @param {boolean} useCapture true 捕获阶段 false 冒泡阶段 默认 true
* @example
* this.addEventListener(Event.ADD_TO_STAGE,function(e){trace(this);},this);
* this.addEventListener(Event.ADD_TO_STAGE,function(e){console.log(this);},this);
*/
public addEventListener(type: string, listener: Function, context?: any, useCapture: boolean = true): this {
if (!type) {
......@@ -173,9 +173,9 @@ export class EventDispatcher extends HashObject {
* @example
* var mySprite=new Sprite(),
* yourEvent=new Event("yourCustomerEvent");
* yourEvent.data='false2x';
* yourEvent.data='aaa';
* mySprite.addEventListener("yourCustomerEvent",function(e){
* trace(e.data);
* console.log(e.data);
* })
* mySprite.dispatchEvent(yourEvent);
*/
......
src/2d/events/MouseEvent.ts
View file @ 51e82c40
......@@ -63,7 +63,7 @@ export class MouseEvent extends Event {
*/
public static MOUSE_OUT: string = "onMouseOut";
/**
* mouse或touch事件时rootDiv坐标x点
* mouse或touch事件时canvas实际尺寸坐标x点
* @property clientX
* @public
* @since 1.0.0
......@@ -71,7 +71,7 @@ export class MouseEvent extends Event {
*/
public clientX: number = 0;
/**
* mouse或touch事件时rootDiv坐标y点
* mouse或touch事件时canvas实际尺寸坐标y点
* @property clientY
* @public
* @since 1.0.0
......@@ -79,7 +79,7 @@ export class MouseEvent extends Event {
*/
public clientY: number = 0;
/**
* mouse或touch事件时全局坐标x点
* mouse或touch事件时stage上坐标x点
* @property stageX
* @public
* @since 1.0.0
......@@ -87,7 +87,7 @@ export class MouseEvent extends Event {
*/
public stageX: number = 0;
/**
* mouse或touch事件时全局坐标y点
* mouse或touch事件时stage上坐标y点
* @property stageY
* @public
* @since 1.0.0
......@@ -95,7 +95,7 @@ export class MouseEvent extends Event {
*/
public stageY: number = 0;
/**
* mouse或touch事件时本地坐标x点
* mouse或touch事件时显示对象本地坐标x点
* @property localX
* @public
* @since 1.0.0
......@@ -103,7 +103,7 @@ export class MouseEvent extends Event {
*/
public localX: number = 0;
/**
* mouse或touch事件时本地坐标y点
* mouse或touch事件时显示对象本地坐标y点
* @property localY
* @public
* @since 1.0.0
......@@ -138,14 +138,8 @@ export class MouseEvent extends Event {
this._instanceType = "MouseEvent";
}
/**
* 事件后立即更新显示列表状态
* @method updateAfterEvent
* @since 1.0.9
* @public
* 销毁
*/
public updateAfterEvent() {
this.target.stage._cp = true;
}
public destroy(): void {
//清除相应的数据引用
let s = this;
......
src/2d/events/index.ts
View file @ 51e82c40
export * from "./Event";
export * from "./EventDispatcher";
export * from "./GDispatcher";
// export * from "./GDispatcher";//不往外导了，因为引擎内部也没有用到，外部如果需要，自行new
export * from "./MouseEvent";
\ No newline at end of file
src/2d/filter/advanced-bloom/AdvancedBloomFilter.ts
View file @ 51e82c40
......@@ -63,7 +63,18 @@ export class AdvancedBloomFilter extends Filter {
options = { threshold: options };
}
options = Object["assign"]({
// options = Object["assign"]({
// threshold: 0.5,
// bloomScale: 1.0,
// brightness: 1.0,
// kernels: null,
// blur: 8,
// quality: 4,
// pixelSize: 1,
// resolution: 1,
// }, options);
//替换成...
options = {
threshold: 0.5,
bloomScale: 1.0,
brightness: 1.0,
......@@ -72,7 +83,11 @@ export class AdvancedBloomFilter extends Filter {
quality: 4,
pixelSize: 1,
resolution: 1,
}, options);
...options,
}
/**
* To adjust the strength of the bloom. Higher values is more intense brightness.
......
src/2d/filter/extractUniformsFromSrc.ts
View file @ 51e82c40
......@@ -4,7 +4,8 @@ import { defaultValue } from "../../glCore";
export default function extractUniformsFromSrc(vertexSrc, fragmentSrc) {
const vertUniforms = extractUniformsFromString(vertexSrc);
const fragUniforms = extractUniformsFromString(fragmentSrc);
return Object["assign"](vertUniforms, fragUniforms);
// return Object["assign"](vertUniforms, fragUniforms);
return { ...vertUniforms, ...fragUniforms };
}
function extractUniformsFromString(string) {
......
src/2d/filter/index.ts
View file @ 51e82c40
/**
*
* filter模块基本延用pixi模块
* {@link http://pixijs.io/pixi-filters/tools/demo/}
* This namespace contains WebGL-only display filters that can be applied
* to DisplayObjects using the {@link DisplayObject#filters filters} property.
......
src/2d/graphics/Graphics.ts
View file @ 51e82c40
......@@ -41,9 +41,9 @@ fillCommands[SHAPES.RREC] = buildRoundedRectangle;
/**
* @class Graphics
* 不继承container，不然缓存时太麻烦了
* 自身matrix无效，暂时不用
* style的纹理matrix无效，暂时不用
* 最终都会按照三角形数据存储，包括画面和画线
*/
export default class Graphics extends Container {
/**
......@@ -141,10 +141,10 @@ export default class Graphics extends Container {
graphicsData: GraphicsData[];
/**
* 是否用作mask
* 标记是否作为遮罩，作为遮罩时不会被当作hittest检测对象，默认false，内部逻辑处理用，外部不建议修改
* @member {boolean}
*/
isUsedToMask: boolean;
_isUsedToMask: boolean;
/**
* 计算包围盒的时的偏移，默认0
* @member {number}
......@@ -205,7 +205,7 @@ export default class Graphics extends Container {
this._currentPath = null;
this.graphicsData = [];
this.isUsedToMask = false;
this._isUsedToMask = false;
this.boundsPadding = 0;
this.dirty = 0;
this.boundsDirty = -1;
......@@ -235,7 +235,7 @@ export default class Graphics extends Container {
clone._fillStyle = this._fillStyle;
clone._lineStyle = this._lineStyle;
clone.isUsedToMask = this.isUsedToMask;
clone._isUsedToMask = this._isUsedToMask;
clone.boundsPadding = this.boundsPadding;
clone.dirty = 0;
......@@ -1091,7 +1091,7 @@ export default class Graphics extends Container {
* @private
* @param {CanvasRenderer} renderer - The renderer
*/
_renderCanvas(renderer/*: CanvasRenderer*/) {
_renderCanvas(renderer: CanvasRenderer) {
//以防没有end，
this.finishPoly();
if (this.cacheAsBitmap) {
......@@ -1143,7 +1143,7 @@ export default class Graphics extends Container {
/**
* 碰撞检测方法重写
* @param {Point} point - the point to test
* @param {Point} point - 全局坐标点
*/
hitTestPoint(point: Point, isMouseEvent: boolean = false): DisplayObject {
//不可见，直接返回
......@@ -1337,9 +1337,8 @@ export default class Graphics extends Container {
* 生成离屏canvas纹理
* 不包括变形的，只根据图形数据产生的原生贴图，经过变形的，考虑，是否新建方法，这个暂时只为canvas缓存
* 也不考虑遮罩
* @param {number} scaleMode - The scale mode of the texture.
* @param {number} resolution - The resolution of the texture.
* @return {Texture} The new texture.
* @param {SCALE_MODES} scaleMode 纹理缩放模式
* @return {Texture} 离屏纹理
*/
private generateCanvasTexture(scaleMode: number = SCALE_MODES.LINEAR): Texture {
this.updateLocalBoundsSelf();
......@@ -1378,7 +1377,7 @@ export default class Graphics extends Container {
}
/**
*
* 销毁
*/
destroy() {
super.destroy();
......@@ -1403,14 +1402,13 @@ export default class Graphics extends Container {
/**
* 设置会影响缩放
* @member {number}
*/
get width() {
get width(): number {
this.updateLocalBoundsSelf()
return Math.abs(this.scale.x) * this._localBoundsSelf.width;
}
set width(value) {
set width(value: number) {
this.updateLocalBoundsSelf();
const width = this._localBoundsSelf.width;
if (width !== 0) {
......@@ -1424,14 +1422,13 @@ export default class Graphics extends Container {
/**
* 设置会影响缩放
* @member {number}
*/
get height() {
get height(): number {
this.updateLocalBoundsSelf()
return Math.abs(this.scale.y) * this._localBoundsSelf.height;
}
set height(value) {
set height(value: number) {
this.updateLocalBoundsSelf()
const height = this._localBoundsSelf.height;
if (height !== 0) {
......
src/2d/graphics/Shape.ts
View file @ 51e82c40
......@@ -6,15 +6,14 @@ import { hex2string, getRGBA, getGradientColor, getBackupCanvasCtx, getCanvasBit
import Sprite from "../display/Sprite";
/**
* 容器级的shape，和shape区别，继承sprite，hittest重写
* 继承sprite，hittest重写
* 矢量对象，
* 记录指令，对于复杂的不常绘制的图形，用canvas上下文的指令比较方便，比如消消乐项目时的格子地图
* 复杂路径，自己没法确定哪些区域该填充的时候，用canvas的api
* 支持pattern和渐变填充，与Graphic的纹理填充区分，不一致
* 不能用于webgl遮罩，暂不与gra做兼容，canvas形式可以
* 待测试
* anchorTexture被使用，尽量不手动修改
* 如要改锚点，用anchor
* anchorTexture被使用，尽量不手动修改，如要改锚点，用anchor
* 作为Webgl模式的遮罩时，需要注意：
* 遮罩绘制指令不变的且有矩阵变化的（比如自身或父级的位置有改变），需要shape._boundsID++，为了重新计算包围盒
* @class Shape
* @extends Sprite
*/
......@@ -340,7 +339,7 @@ export class Shape extends Sprite {
public beginFill(color: number | string = 0, alpha: number = 1): this {
//颜色做个兼容
if (typeof (color) == "string") color = string2hex(color);
var sColor = getRGBA(hex2string(color), alpha);
this._fill(sColor);
return this;
......@@ -500,7 +499,10 @@ export class Shape extends Sprite {
}
return s;
}
// protected isUsedToMask: boolean = false;
/**
* 标记是否作为遮罩，作为遮罩时不会被当作hittest检测对象，默认false，内部逻辑处理用，外部不建议修改
*/
_isUsedToMask: boolean = false;
/**
* 结束画线
* @method endStroke
......
src/2d/loader/Loader.ts
View file @ 51e82c40
......@@ -10,6 +10,8 @@ import { createImage, getEnv } from "../utils";
* 感觉没必要集成EventDispatcher
* 加载方法都是回调方式
* 无特殊要求的直接用GlobalLoader
* 这里所有load方法参数都是（回调函数，路径）
* 兼容了web和tb环境
*/
export class Loader extends EventDispatcher {
/**
......@@ -176,31 +178,6 @@ export class Loader extends EventDispatcher {
if (url.indexOf('data:') !== 0) img.crossOrigin = "anonymous";
img.src = url;
}
/**
* 加载小程序的音频，暂时不用，完全废弃
* @param callback
* @param url
*/
loadAudio(callback: (s: boolean, audio?) => void, url) {
//@ts-ignore
const innerAudioContext = my.createInnerAudioContext()
// innerAudioContext.autoplay = true
innerAudioContext.src = url;
innerAudioContext.onCanplay(() => {
callback(true, innerAudioContext)
})
// innerAudioContext.onPlay(() => {
// console.log('开始播放')
// })
innerAudioContext.onError((res) => {
// console.log(res.errMsg)
callback(false)
})
// innerAudioContext.onEnded(() => {
// console.log('播放结束')
// })
}
/**
* 淘宝加载方式
* @param callback
......@@ -281,7 +258,9 @@ export class Loader extends EventDispatcher {
}
/**
* 一个全局加载器实例
*/
export const GlobalLoader = new Loader();
//https://yun.duiba.com.cn/db_games/activity/yilian0726/1565580040/resource/result/resultAlta1.json
//"https://yun.duiba.com.cn/db_games/activity/etc/optionImages/%E5%8D%8E%E4%B8%BAP30.jpg"
\ No newline at end of file
src/2d/math/Matrix.ts
View file @ 51e82c40
......@@ -421,11 +421,11 @@ export class Matrix extends HashObject {
}
/**
* Creates an array from the current Matrix object.与glsl中的mat3对应,注意行列主序执行transpose;
*
* @param {boolean} transpose - Whether we need to transpose the matrix or not
* @param {Float32Array} [out=new Float32Array(9)] - If provided the array will be assigned to out
* @return {number[]} the newly created array which contains the matrix
* 输出数组.与glsl中的mat3对应,注意行列主序执行transpose;
* 参数与3d的区别很大
* @param {boolean} transpose - 是否转置,默认false,glsl中传入需要true
* @param {Float32Array} [out=new Float32Array(9)] - 输出数组,如不传使用自身的array
* @return {number[]} 返回数组
*/
public toArray(transpose = false, out?) {
if (!this.array) {
......@@ -498,8 +498,7 @@ export class Matrix extends HashObject {
return transform;
}
/**
* A default (identity) matrix
*
* 获取一个初始化矩阵，返回新的实例
* @static
* @const
*/
......@@ -508,8 +507,7 @@ export class Matrix extends HashObject {
}
/**
* A temp matrix
*
* 获取一个临时矩阵，返回新的实例
* @static
* @const
*/
......
src/2d/math/Rectangle.ts
View file @ 51e82c40
......@@ -93,28 +93,28 @@ export class Rectangle extends HashObject {
public height: number = 0;
/**
* returns the left edge of the rectangle
* 左边界
*/
get left(): number {
return this.x;
}
/**
* returns the right edge of the rectangle
* 右边界
*/
get right(): number {
return this.x + this.width;
}
/**
* returns the top edge of the rectangle
* 上边界
*/
get top(): number {
return this.y;
}
/**
* returns the bottom edge of the rectangle
* 下边界
*/
get bottom(): number {
return this.y + this.height;
......
src/2d/mesh/Mesh.ts
View file @ 51e82c40
......@@ -4,7 +4,7 @@ import Container from "../display/Container";
import Texture from "../texture/Texture";
import { BLEND_MODES } from "../const";
import TextureMatrix from "../texture/TextureMatrix";
import {CanvasRenderer} from "../renderers/CanvasRenderer";
import { CanvasRenderer } from "../renderers/CanvasRenderer";
import { WebglRenderer } from "../renderers/WebglRenderer";
import { DisplayObject } from "../display";
......@@ -34,8 +34,7 @@ export class Mesh extends Container {
// if (value != this._blendMode) this._blendMode = value
}
/**
* The texture of the Mesh
*
* 纹理
* @member {Texture}
* @default Texture.EMPTY
* @private
......@@ -58,10 +57,8 @@ export class Mesh extends Container {
*/
_vertexData: Float32Array;
/**
* 传入批处理的永远是上面三个，上面三个的计算需要记录dirty
* 传入批处理的永远是上面三个，上面三个的计算需要记录dirty，标记修改_vertexDirty++
* 但是每次都需要传Gpu,性能再说吧
* Version of mesh verticies are dirty or not
* 原来是dirty，
* @member {number}
*/
protected _vertexDirty: number;
......@@ -82,16 +79,12 @@ export class Mesh extends Container {
*/
private _transformID: number
/**
* Triangles in canvas mode are automatically antialiased, use this value to force triangles
* to overlap a bit with each other.
*
* canvas模式下下三角形重合量，默认0
* @member {number}
*/
canvasPadding: number;
/**
* 色值调色
* The tint applied to the mesh. This is a [r,g,b] value. A value of [1,1,1] will remove any
* tint effect.
* 色值调色，十六进制，和Sprite的一样
*/
private _tint: number;
/**
......@@ -99,19 +92,16 @@ export class Mesh extends Container {
*/
private _tintRGB: number;
/**
* transform that is applied to UV to get the texture coords
* its updated independently from texture uvTransform
* updates of uvs are tied to that thing
*
* 二次纹理坐标矩阵
* @member {TextureMatrix}
* @private
*/
private _uvTransform: TextureMatrix;
/**
* @param {Texture} texture - The texture to use
* @param {Float32Array} [vertices] - if you want to specify the vertices
* @param {Float32Array} [uvs] - if you want to specify the uvs
* @param {Uint16Array} [indices] - if you want to specify the indices
* @param {Texture} texture - 纹理
* @param {Float32Array} [vertices] - 顶点，类型化数组，默认[0,0, 100,0, 100,100, 0,100]
* @param {Float32Array} [uvs] - uv坐标，类型化数组，[0,0, 1,0, 1,1, 0,1]
* @param {Uint16Array} [indices] - 索引，类型化数组，默认[0, 1, 3, 2]
*/
constructor(texture?: Texture, vertices?: Float32Array, uvs?: Float32Array, indices?: Uint16Array) {
super();
......@@ -157,10 +147,9 @@ export class Mesh extends Container {
}
/**
* Renders the object using the WebGL renderer
*
* webgl渲染自身方法
* @private
* @param {WebGLRenderer} renderer - a reference to the WebGL renderer
* @param {WebGLRenderer} renderer
*/
_renderWebGL(renderer: WebglRenderer) {
//刷一次
......@@ -172,10 +161,9 @@ export class Mesh extends Container {
}
/**
* Renders the object using the Canvas renderer
*
* canvas渲染自身方法
* @private
* @param {CanvasRenderer} renderer - The canvas renderer.
* @param {CanvasRenderer} renderer
*/
_renderCanvas(renderer: CanvasRenderer) {
this.refresh();
......@@ -183,8 +171,7 @@ export class Mesh extends Container {
}
/**
* When the texture is updated, this event will fire to update the scale and frame
*
* 纹理更新时触发
* @private
*/
private _onTextureUpdate() {
......@@ -200,10 +187,8 @@ export class Mesh extends Container {
}
/**
* Refreshes uvs for generated meshes (rope, plane)
* sometimes refreshes vertices too
*
* @param {boolean} [forceUpdate=false] if true, matrices will be updated any case
* 就是为了_refresh
* @param {boolean} [forceUpdate=false] 是否强制更新，默认false
*/
refresh(forceUpdate: boolean = false) {
//贴图不可用，返回
......@@ -258,8 +243,7 @@ export class Mesh extends Container {
/**
* Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account.
*
* 计算自己全局包围盒
*/
_calculateBounds() {
// TODO - we can cache local bounds and use them if they are dirty (like graphics)
......@@ -337,8 +321,7 @@ export class Mesh extends Container {
}
/**
* The texture that the mesh uses.
*
* 纹理
* @member {Texture}
*/
get texture() {
......@@ -369,8 +352,7 @@ export class Mesh extends Container {
}
/**
* Destroys the Mesh object.
*
* 销毁
*/
destroy() {
super.destroy();
......
src/2d/mesh/NineSlicePlane.ts
View file @ 51e82c40
import { Plane, calculatePlaneIndices } from './Plane';
import { Texture } from '../texture';
import {CanvasRenderer} from '../renderers/CanvasRenderer';
import { CanvasRenderer } from '../renderers/CanvasRenderer';
import { Mesh } from './Mesh';
//提前计算好的索引
......@@ -62,7 +62,7 @@ export class NineSlicePlane extends Mesh {
private _bottomHeight: number;
/**
* @param {Texture} texture - The texture to use on the NineSlicePlane.
* @param {Texture} texture 纹理
* @param {int} [leftWidth=10] size of the left vertical bar (A)
* @param {int} [topHeight=10] size of the top horizontal bar (C)
* @param {int} [rightWidth=10] size of the right vertical bar (B)
......@@ -97,8 +97,7 @@ export class NineSlicePlane extends Mesh {
}
/**
* Updates the horizontal vertices.
*
* 更新水平顶点
*/
private updateHorizontalVertices() {
const vertices = this._vertices;
......@@ -112,8 +111,7 @@ export class NineSlicePlane extends Mesh {
}
/**
* Updates the vertical vertices.
*
* 更新垂直顶点
*/
private updateVerticalVertices() {
const vertices = this._vertices;
......@@ -127,10 +125,10 @@ export class NineSlicePlane extends Mesh {
}
/**
* Renders the object using the Canvas renderer
* canvas渲染
* 考虑是否用缓存，不然每次相当于9次绘制，到时应该是集成到一个插件里的
* @private
* @param {CanvasRenderer} renderer - The canvas renderer to render with.
* @param {CanvasRenderer} renderer
*/
_renderCanvas(renderer: CanvasRenderer) {
const context = renderer.context;
......@@ -162,15 +160,13 @@ export class NineSlicePlane extends Mesh {
}
/**
* Renders one segment of the plane.
* to mimic the exact drawing behavior of stretching the image like WebGL does, we need to make sure
* that the source area is at least 1 pixel in size, otherwise nothing gets drawn when a slice size of 0 is used.
*
* 绘制某块平面
* 至少1像素
* @private
* @param {CanvasRenderingContext2D} context - The context to draw with.
* @param {CanvasImageSource} textureSource - The source to draw.
* @param {number} w - width of the texture
* @param {number} h - height of the texture
* @param {CanvasRenderingContext2D} context - 上下文
* @param {CanvasImageSource} textureSource - 图片标签
* @param {number} w - 图片宽度
* @param {number} h - 图片高度
* @param {number} x1 - x index 1
* @param {number} y1 - y index 1
* @param {number} x2 - x index 2
......@@ -209,8 +205,7 @@ export class NineSlicePlane extends Mesh {
}
/**
* The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane
*
* 宽度
* @member {number}
*/
get width() {
......@@ -218,7 +213,7 @@ export class NineSlicePlane extends Mesh {
}
/**
* 不再修改缩放，修改uv和顶点
* 不再修改缩放，设置后会修改uv和顶点
*/
set width(value) {
this._width = value;
......@@ -226,14 +221,15 @@ export class NineSlicePlane extends Mesh {
}
/**
* The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane
*
* 高度
* @member {number}
*/
get height() {
return this._height;
}
/**
* 不再修改缩放，设置后会修改uv和顶点
*/
set height(value) {
this._height = value;
this._needRefresh = true;
......@@ -296,7 +292,7 @@ export class NineSlicePlane extends Mesh {
}
/**
* Refreshes NineSlicePlane coords. All of them.
* 刷新所有坐标
*/
_refresh() {
......
src/2d/mesh/Plane.ts
View file @ 51e82c40
......@@ -2,30 +2,19 @@ import { Mesh } from './Mesh';
import { Texture } from '../texture';
/**
* The Plane allows you to draw a texture across several points and them manipulate these points
*
*```js
* for (let i = 0; i < 20; i++) {
* points.push(new Point(i * 50, 0));
* };
* let Plane = new Plane(Texture.fromImage("snake.png"), points);
* ```
*
* @class
* @extends Mesh
*
*/
export class Plane extends Mesh {
verticesX: number;
verticesY: number;
/**
* @param {Texture} texture - The texture to use on the Plane.
* @param {number} [verticesX=10] - The number of vertices in the x-axis
* @param {number} [verticesY=10] - The number of vertices in the y-axis
* @param {Texture} texture - 纹理
* @param {number} [verticesX=10] - x轴顶点数
* @param {number} [verticesY=10] - y轴顶点数
*/
constructor(texture: Texture, verticesX: number = 10, verticesY: number = 10) {
constructor(texture: Texture, public verticesX: number = 10, public verticesY: number = 10) {
super(texture);
this.verticesX = verticesX || 10;
this.verticesX = verticesX || 10;//先留着吧，万一有传null，或0的
this.verticesY = verticesY || 10;
this.refresh();
}
......@@ -61,7 +50,7 @@ export class Plane extends Mesh {
// console.log(indices)
this._vertices = new Float32Array(verts);
this._uvs = new Float32Array(uvs);
this._indices = calculatePlaneIndices(this.verticesX,this.verticesY);
this._indices = calculatePlaneIndices(this.verticesX, this.verticesY);
this._vertexDirty++;
......@@ -93,3 +82,148 @@ export function calculatePlaneIndices(verticesX: number, verticesY: number): Uin
}
return new Uint16Array(indices);
}
// new Ripple(texutre, 50, 108, 3)
// class Ripple extends Plane {
// /**
// * 波源影响半径
// */
// private radius: number;
// private oldNew: boolean;
// private heightOld: number[][];
// private heightNew: number[][];
// private _verticesOri
// /**
// * 分段数
// * @param segX
// * @param segY
// */
// constructor(texture: Texture, segX: number = 10, segY: number = 10, radius: number = 5) {
// super(texture, segX, segY)
// this.radius = radius;
// this.oldNew = false;
// this.heightOld = [];
// this.heightNew = [];
// for (var i = 0; i < this.verticesX; i++) {
// this.heightOld[i] = [];
// this.heightNew[i] = [];
// for (var j = 0; j < this.verticesY; j++) {
// this.heightOld[i][j] = 0;
// this.heightNew[i][j] = 0;
// }
// }
// //拷贝一个源数据
// this._verticesOri = this._vertices.slice();
// let fun = (a, e) => {
// var x1 = Math.round(e.localX / (texture.width / (this.verticesX - 1)));
// var y1 = Math.round(e.localY / (texture.height / (this.verticesY - 1)));
// // console.log(x1,y1)
// this.disturb(x1, y1, a);
// }
// this.addEventListener(MouseEvent.MOUSE_MOVE, fun.bind(this, "m"), this)
// this.addEventListener(MouseEvent.MOUSE_DOWN, fun.bind(this, "d"), this)
// }
// getEnergy(e, r, d) {
// return e * (1 - d / r);
// };
// refractionOff(i, j, rect) {
// var xl = i - 1;
// var xr = i + 1;
// if (i == 0) xl = 0;
// if (i == this.verticesX - 1) xr = this.verticesX - 1;
// var yu = j - 1;
// var yd = j + 1;
// if (j == 0) yu = 0
// if (j == this.verticesY - 1) yd = this.verticesY - 1
// var xoff = rect[i][yu] - rect[i][yd];
// var yoff = rect[xr][j] - rect[xl][j];
// return { xoff: xoff, yoff: yoff }
// };
// distance(a, b) {
// var x = b.x - a.x, y = b.y - a.y;
// return Math.sqrt(x * x + y * y);
// };
// getAmplitude(i, j, rect) {
// var xl = i - 1;
// var xr = i + 1;
// if (i == 0) xl = 0;
// if (i == this.verticesX - 1) xr = this.verticesX - 1;
// var yu = j - 1;
// var yd = j + 1;
// if (j == 0) yu = 0;
// if (j == this.verticesY - 1) yd = this.verticesY - 1
// return (rect[i][yu] + rect[i][yd] + rect[xl][j] + rect[xr][j]) / 2
// };
// disturb(i, j, type = "d") {
// var rectsv = this.heightOld;
// var rectsNewv = this.heightNew;
// var xmin = i - this.radius;
// if (xmin < 0) xmin = 0;
// var xmax = i + this.radius;
// if (xmax > this.verticesX - 1) xmax = this.verticesX - 1;
// var ymin = j - this.radius;
// if (ymin < 0) ymin = 0;
// var ymax = j + this.radius;
// if (ymax > this.verticesY - 1) ymax = this.verticesY - 1;
// for (var m = xmin; m <= xmax; m++) {
// for (var n = ymin; n <= ymax; n++) {
// var dist = this.distance({ x: i, y: j }, { x: m, y: n });
// if (dist <= this.radius) {
// if (type == "d") {
// rectsv[m][n] += this.getEnergy(64, this.radius, dist);
// rectsNewv[m][n] += this.getEnergy(64, this.radius, dist);
// } else {
// rectsv[m][n] += this.getEnergy(16, this.radius, dist);
// rectsNewv[m][n] += this.getEnergy(16, this.radius, dist);
// }
// }
// }
// }
// };
// update() {
// super.update();
// for (var i = 0; i < this.verticesX; i++) {
// for (var j = 0; j < this.verticesY; j++) {
// var rectsv = this.heightOld;
// var rectsNewv = this.heightNew;
// var d;
// var off;
// if (this.oldNew) {
// d = this.getAmplitude(i, j, rectsv);
// d -= rectsNewv[i][j];
// d -= d / 64;
// rectsNewv[i][j] = d;
// off = this.refractionOff(i, j, this.heightNew);
// } else {
// d = this.getAmplitude(i, j, rectsNewv);
// d -= rectsv[i][j];
// d -= d / 64;
// rectsv[i][j] = d;
// off = this.refractionOff(i, j, this.heightOld);
// }
// var index = j * this.verticesX + i;
// this._vertices[index * 2] = this._verticesOri[index * 2] - off.xoff;
// this._vertices[index * 2 + 1] = this._verticesOri[index * 2 + 1] - off.yoff;
// // this.vets[index].z = d;
// }
// }
// this.oldNew = !this.oldNew;
// //确保会更新
// this._vertexDirty++
// };
// }
\ No newline at end of file
src/2d/renderers/CanvasRenderer.ts
View file @ 51e82c40
......@@ -8,8 +8,8 @@ import RenderTexture from "../texture/RenderTexture";
import { Matrix } from "../math";
import { SystemRenderer } from "./SystemRenderer";
import CanvasRenderTarget from "./renderTarget/CanvasRenderTarget";
import { mapCanvasBlendModes } from "../utils";
import { CanvasMeshRenderer } from "./plugins/CanvasMeshRenderer";
import { mapCanvasBlendModes } from "../utils/mapCanvasBlendModes";
/**
......@@ -29,9 +29,13 @@ export class CanvasRenderer extends SystemRenderer {
*/
maskManager: CanvasMaskManager;
/**
* 插件，暂时只有图形和图片的
* 插件，暂时只有图形、图片和网格，以后有需要再加
*/
plugins;
plugins: {
sprite: CanvasSpriteRenderer,
graphics: CanvasGraphicsRenderer,
mesh: CanvasMeshRenderer,
};
/**
* 当前使用的混色模式
......@@ -57,12 +61,10 @@ export class CanvasRenderer extends SystemRenderer {
// this.initPlugins();
this.plugins = {
sprite: null,
graphics: null,
sprite: new CanvasSpriteRenderer(this),
graphics: new CanvasGraphicsRenderer(this),
mesh: new CanvasMeshRenderer(this)
}
this.plugins.sprite = new CanvasSpriteRenderer(this);
this.plugins.graphics = new CanvasGraphicsRenderer(this);
this.plugins.mesh = new CanvasMeshRenderer(this);
this.blendModes = mapCanvasBlendModes();
this._activeBlendMode = null;
......@@ -209,6 +211,7 @@ export class CanvasRenderer extends SystemRenderer {
destroyPlugins() {
this.plugins.sprite.destroy();
this.plugins.graphics.destroy();
this.plugins.mesh.destroy();
}
}
src/2d/renderers/WebglRenderer.ts
View file @ 51e82c40
import { EventDispatcher } from "../events/EventDispatcher";
import BatchRenderer from "./plugins/BatchRenderer";
// import { RendererOptions } from "./RendererOptions";
import { BatchRenderer } from "./plugins/BatchRenderer";
import { SystemRenderer } from "./SystemRenderer";
import { RENDERER_TYPE, BLEND_MODES } from "../const";
import { createContext, GLShader, VertexArrayObject } from "../../glCore";
......@@ -24,7 +22,7 @@ import FilterManager from "./managers/FilterManager";
let CONTEXT_UID = 0;
//渲染方式基本用了pixi的方式
export class WebglRenderer extends SystemRenderer {
/**
* 所有插件列表，目前只有batch
......@@ -88,7 +86,7 @@ export class WebglRenderer extends SystemRenderer {
rootRenderTarget: RenderTarget;
/**
* 直接传入的尺寸
* 只传入上下文和尺寸，canvas标签在stage上处理
* @param gl
* @param width
* @param height
......@@ -98,22 +96,22 @@ export class WebglRenderer extends SystemRenderer {
this._instanceType = "WebglRenderer";
this.type = RENDERER_TYPE.WEBGL;
// this.handleContextLost = this.handleContextLost.bind(this);
// this.handleContextRestored = this.handleContextRestored.bind(this);
//修改下函数this指向，stage里直接用
this.handleContextLost = this.handleContextLost.bind(this);
this.handleContextRestored = this.handleContextRestored.bind(this);
//在stage里处理
// this.htmlElement.addEventListener('webglcontextlost', this.handleContextLost, false);
// this.htmlElement.addEventListener('webglcontextrestored', this.handleContextRestored, false);
//The options passed in to create a new webgl context.
var contextOptions = {
alpha: true,
antialias: false,
premultipliedAlpha: true, //一般png图片都不会预乘alpha，所以必为true,除非有些图集工具选择了premultipliedAlpha
stencil: true,
preserveDrawingBuffer: false,
// powerPreference: this.options.powerPreference,
};
//stage上处理了
// var contextOptions = {
// alpha: true,
// antialias: false,
// premultipliedAlpha: true, //一般png图片都不会预乘alpha，所以必为true,除非有些图集工具选择了premultipliedAlpha
// stencil: true,
// preserveDrawingBuffer: false,
// // powerPreference: this.options.powerPreference,
// };
this._backgroundColorRgba[3] = this.transparent ? 0 : 1;
// this.gl = createContext(this.htmlElement, contextOptions);
......@@ -136,11 +134,6 @@ export class WebglRenderer extends SystemRenderer {
this.renderingToScreen = true;
/**
* Holds the current shader
*
* @member {Shader}
*/
this._activeShader = null;
this._activeVao = null;
......@@ -219,7 +212,7 @@ export class WebglRenderer extends SystemRenderer {
}
//回收纹理,回收长时间不用的纹理,从gpu移除,对于很多场景,很多图片的时候很有用,否则gpu容易崩溃
// this.textureGC.update();
this.textureGC.update();//20210601打开注释，忘了为啥之前一直注释
//触发onPostRender
this.dispatchEvent('onPostRender');
......@@ -424,16 +417,16 @@ export class WebglRenderer extends SystemRenderer {
destroy() {
//插件销毁
this.destroyPlugins();
// remove listeners
// remove listeners，这部分逻辑放舞台里，注意舞台先移除监听，再销毁渲染器
// this.htmlElement.removeEventListener('webglcontextlost', this.handleContextLost);
// this.htmlElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
//纹理管理器销毁
this.textureManager.destroy();
// call base destroy
//父级销毁方法
super.destroy();
// destroy the managers
// 销毁所有管理器
this.maskManager.destroy();
this.stencilManager.destroy();
this.filterManager.destroy();
......@@ -445,7 +438,7 @@ export class WebglRenderer extends SystemRenderer {
this.handleContextLost = null;
this.handleContextRestored = null;
//小程序内会有问题，这样执行
//淘宝小程序内会有问题，这样执行，暂时先注释，如果web环境出问题再修改
// this.gl.useProgram(null);
// if (this.gl.getExtension('WEBGL_lose_context')) {
......@@ -470,8 +463,7 @@ export class WebglRenderer extends SystemRenderer {
/**
* webgl上下文丢失时
* @private
* @param {WebGLContextEvent} event - The context lost event.
* @param {WebGLContextEvent} event - 事件
*/
handleContextLost(event) {
event.preventDefault();
......@@ -480,14 +472,16 @@ export class WebglRenderer extends SystemRenderer {
/**
* 初始化插件
* @protected
* @param {object} staticMap - The dictionary of statically saved plugins.
* @param {object} staticMap - 静态属性里存的插件列表
*/
initPlugins(staticMap) {
for (const o in staticMap) {
this.plugins[o] = new (staticMap[o])(this);
}
}
/**
* 销毁插件
*/
destroyPlugins() {
for (const o in this.plugins) {
this.plugins[o].destroy();
......@@ -495,14 +489,15 @@ export class WebglRenderer extends SystemRenderer {
}
this.plugins = null;
}
/**
* 插件列表
*/
static __plugins;
/**
* Adds a plugin to the renderer.
*
* 添加插件，用于initPlugins时生成所有插件实例，webgl渲染器估计插件可扩展多，所以加静态方法
* @method
* @param {string} pluginName - The name of the plugin.
* @param {Function} ctor - The constructor function or class for the plugin.
* @param {string} pluginName - 插件名，用于区分键值
* @param {Function} ctor - 插件类
*/
static registerPlugin(pluginName, ctor) {
WebglRenderer.__plugins = WebglRenderer.__plugins || {};
......@@ -510,6 +505,6 @@ export class WebglRenderer extends SystemRenderer {
}
}
//注册所有插件，当前只有batch
//注册2d批处理插件，不放这里BatchRenderer文件里，因为不往外引，不会执行，
WebglRenderer.registerPlugin('batch', BatchRenderer);
src/2d/renderers/managers/TextureManager.ts
View file @ 51e82c40
......@@ -280,6 +280,11 @@ export default class TextureManager {
* @param {boolean} [skipRemove=false] - Whether to skip removing the texture from the TextureManager.
*/
destroyTexture(texture, skipRemove) {
//如果是事件返回的
if (texture.instanceType === "Event") {
//选择它的target
texture = texture.target;
}
texture = texture.baseTexture || texture;
if (!texture.hasLoaded) {
......
src/2d/renderers/plugins/BatchRenderer.js deleted 100644 → 0
View file @ 24e2e305
import BatchDrawCall from '../webgl/BatchDrawCall';
import { osType } from "../../const"
// import State from '../state/State';
import ObjectRenderer from '../webgl/ObjectRenderer';
import { checkMaxIfStatementsInShader } from '../../../glCore/checkMaxIfStatementsInShader';
import { BatchBuffer } from '../webgl/BatchBuffer';
import { generateMultiTextureShader } from '../webgl/generateMultiTextureShader';
import { WebglRenderer } from '../WebglRenderer';
import { GLShader, GLBuffer, VertexArrayObject } from '../../../glCore';
import { nextPow2, log2, premultiplyTint } from '../../utils';
import { DisplayObject } from '../../display/DisplayObject';
import { Texture } from '../../texture/Texture';
let TICK = 0;
/**
* 批处理核心渲染插件
*
* @class
* @extends ObjectRenderer
*/
export default class BatchRenderer extends ObjectRenderer {
vertSize;
vertByteSize;
size;
/**
* 当前顶点数量
*/
currentSize;
/**
* 当前索引数量
*/
currentIndexSize;
/**
* 顶点数据
*/
aBuffers;
/**
* 索引数据
*/
iBuffers;
/**
* The default shaders that is used if a sprite doesn't have a more specific one.
* there is a shader for each number of textures that can be rendered.
* These shaders will also be generated on the fly as required.
*/
shader;
/**
* 当前累计的绘制对象数量
*/
currentIndex;
/**
* BatchDrawCall[]
*/
groups;
/**
* 绘制对象数组
* 包括图片的和矢量图的
* @param batchElementInterface[]
*/
elements;
/**
* @param VertexArrayObject[]
*/
vaos;
vaoMax;
vertexCount;
MAX_TEXTURES;
/**
* @param GLBuffer[]
*/
vertexBuffers;
indexBuffers;
constructor(renderer) {
super(renderer);
/**
* 每个点
* Number of values sent in the vertex buffer.
* aVertexPosition(2), aTextureCoord(2), aColor(1), aTextureId(1) = 6
*
* @member {number}
*/
this.vertSize = 6;
/**
* The size of the vertex information in bytes.
*
* @member {number}
*/
this.vertByteSize = this.vertSize * 4;
/**
* The number of images in the SpriteRenderer before it flushes.
*
* @member {number}
*/
this.size = 2000 * 4;// settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop
this.currentSize = 0;
this.currentIndexSize = 0;
// the total number of bytes in our batch
// let numVerts = this.size * 4 * this.vertByteSize;
this.aBuffers = {};
this.iBuffers = {};
this.shader = null;
this.currentIndex = 0;
this.groups = [];
for (let k = 0; k < this.size / 4; k++) {
this.groups[k] = new BatchDrawCall();
}
this.elements = [];
this.vertexBuffers = [];
this.indexBuffers = [];
this.vaos = [];
this.vaoMax = 2;
this.vertexCount = 0;
this.renderer.addEventListener('onPreRender', this.onPreRender, this);
// this.state = State.for2d();深度检测去掉
}
/**
* Sets up the renderer context and necessary buffers.
*/
onContextChange() {
const gl = this.renderer.gl;
if (false /*传统方式*/) {
this.MAX_TEXTURES = 1;
}
else {
// step 1: first check max textures the GPU can handle.
this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), 16);
// step 2: check the maximum number of if statements the shader can have too..
this.MAX_TEXTURES = checkMaxIfStatementsInShader(this.MAX_TEXTURES, gl);
}
// generate generateMultiTextureProgram, may be a better move?
this.shader = generateMultiTextureShader(gl, this.MAX_TEXTURES);
// we use the second shader as the first one depending on your browser may omit aTextureId
// as it is not used by the shader so is optimized out.
this.renderer.bindVao(null);
const attrs = this.shader.attributes;
for (let i = 0; i < this.vaoMax; i++) {
/* eslint-disable max-len */
const vertexBuffer = this.vertexBuffers[i] = GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW);
const indexBuffer = this.indexBuffers[i] = GLBuffer.createIndexBuffer(gl, null, gl.STREAM_DRAW);
// build the vao object that will render..
const vao = this.renderer.createVao()
.addIndex(indexBuffer)
.addAttribute(vertexBuffer, attrs.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0)
// .addAttribute(vertexBuffer, attrs.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4)
// .addAttribute(vertexBuffer, attrs.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4);
.addAttribute(vertexBuffer, attrs.aTextureCoord, gl.FLOAT, true, this.vertByteSize, 2 * 4)
.addAttribute(vertexBuffer, attrs.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 4 * 4)
.addAttribute(vertexBuffer, attrs.aTextureId, gl.FLOAT, false, this.vertByteSize, 5 * 4);
// if (attrs.aTextureId)
// {
// vao.addAttribute(vertexBuffer, attrs.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4);
// }
this.vaos[i] = vao;
}
}
/**
* Called before the renderer starts rendering.
*
*/
onPreRender() {
this.vertexCount = 0;
}
/**
* Renders the sprite object.
* element必须的属性
*
* _texture 里面有.BaseTexture
* _vertexData
* _indices
* _worldAlpha
* _tintRGB
* _uvs
*
* @param batchElementInterface
*/
render(element) {
if (!element._texture || !element._texture.valid) {
return;
}
if (this.currentSize + (element._vertexData.length / 2) > this.size) {
this.flush();
}
this.elements[this.currentIndex++] = element;
this.currentSize += element._vertexData.length / 2;
this.currentIndexSize += element._indices.length;
}
/**
* 获得索引buffer
* @param size
*/
getIndexBuffer(size) {
// 12 indices is enough for 2 quads
const roundedP2 = nextPow2(Math.ceil(size / 12));
const roundedSizeIndex = log2(roundedP2);
const roundedSize = roundedP2 * 12;
// if (this.iBuffers.length <= roundedSizeIndex) {
// this.iBuffers.length = roundedSizeIndex + 1;
// }
let buffer = this.iBuffers[roundedSizeIndex];
if (!buffer) {
this.iBuffers[roundedSizeIndex] = buffer = new Uint16Array(roundedSize);
}
return buffer;
}
/**
* 获取相应的顶点数据buffer
* @param size
*/
getAttributeBuffer(size) {
// 8 vertices is enough for 2 quads
const roundedP2 = nextPow2(Math.ceil(size / 8));
const roundedSizeIndex = log2(roundedP2);
const roundedSize = roundedP2 * 8;
// if (this.aBuffers.length <= roundedSizeIndex) {
// this.iBuffers.length = roundedSizeIndex + 1;
// }
let buffer = this.aBuffers[roundedSize];
if (!buffer) {
this.aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertByteSize);
}
return buffer;
}
/**
* Renders the content and empties the current batch.
*
*/
flush() {
if (this.currentSize === 0) {
return;
}
const gl = this.renderer.gl;
const MAX_TEXTURES = this.MAX_TEXTURES;
const buffer = this.getAttributeBuffer(this.currentSize);
const indexBuffer = this.getIndexBuffer(this.currentIndexSize);
const elements = this.elements;
const groups = this.groups;
const float32View = buffer.float32View;
const uint32View = buffer.uint32View;
const touch = this.renderer.textureGC.count;
let index = 0;
let indexCount = 0;
let nextTexture;
let currentTexture;
let groupCount = 1;
let textureCount = 0;
let currentGroup = groups[0];
//let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode];
currentGroup.textureCount = 0;
currentGroup.start = 0;
// currentGroup.blend = blendMode;
TICK++;
let i;
for (i = 0; i < this.currentIndex; ++i) {
// upload the sprite elements...
// they have all ready been calculated so we just need to push them into the buffer.
const sprite = elements[i];
elements[i] = null;
nextTexture = sprite._texture.baseTexture;
// const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode];
// if (blendMode !== spriteBlendMode) {
// blendMode = spriteBlendMode;
// // force the batch to break!
// currentTexture = null;
// textureCount = MAX_TEXTURES;
// TICK++;
// }
if (currentTexture !== nextTexture) {
currentTexture = nextTexture;
if (nextTexture._enabledId !== TICK) {
if (textureCount === MAX_TEXTURES) {
TICK++;
textureCount = 0;
currentGroup.size = indexCount - currentGroup.start;
currentGroup = groups[groupCount++];
currentGroup.textureCount = 0;
// currentGroup.blend = blendMode;
currentGroup.start = indexCount;
}
nextTexture._touchedId = touch;
nextTexture._enabledId = TICK;
nextTexture._id = textureCount;
currentGroup.textures[currentGroup.textureCount++] = nextTexture;
textureCount++;
}
}
// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, indexCount);
this.packGeometry(sprite, float32View, uint32View, indexBuffer, index, indexCount);
// push a graphics..
index += (sprite._vertexData.length / 2) * this.vertSize;
indexCount += sprite._indices.length;
}
currentGroup.size = indexCount - currentGroup.start;
// this.indexBuffer.update();
if (osType == "ios") {
//可能有一帧，在多个地方执行flush
// this is still needed for IOS performance..
// it really does not like uploading to the same buffer in a single frame!
if (this.vaoMax <= this.vertexCount) {
this.vaoMax++;
const attrs = this.shader.attributes;
/* eslint-disable max-len */
const vertexBuffer = this.vertexBuffers[this.vertexCount] = GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW);
const indexBufferAdd = this.indexBuffers[this.vertexCount] = GLBuffer.createIndexBuffer(gl, null, gl.STREAM_DRAW);
// build the vao object that will render..
const vao = this.renderer.createVao()
.addIndex(indexBufferAdd)
.addAttribute(vertexBuffer, attrs.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0)
.addAttribute(vertexBuffer, attrs.aTextureCoord, gl.FLOAT, true, this.vertByteSize, 2 * 4)
.addAttribute(vertexBuffer, attrs.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 4 * 4)
.addAttribute(vertexBuffer, attrs.aTextureId, gl.FLOAT, false, this.vertByteSize, 5 * 4);
this.vaos[this.vertexCount] = vao;
// console.log(this.vertexCount)
}
this.renderer.bindVao(this.vaos[this.vertexCount]);
this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0, false);
this.indexBuffers[this.vertexCount].upload(indexBuffer, 0, false);
this.vertexCount++;
}
else {
// lets use the faster option, always use buffer number 0
this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0, true);
this.indexBuffers[this.vertexCount].upload(indexBuffer, 0, true);
}
// this.renderer.state.set(this.state);
const textureManager = this.renderer.textureManager;
// const stateSystem = this.renderer.state;
// e.log(groupCount);
// / render the groups..
for (i = 0; i < groupCount; i++) {
const group = groups[i];
const groupTextureCount = group.textureCount;
for (let j = 0; j < groupTextureCount; j++) {
if (group.textures[j] != textureManager.boundTextures[j]) {
//location已经和sampleId固定了，就算原先boundsTextures有，也要重新绑定位置
// console.log("bindTexture")
textureManager.bindTexture(group.textures[j], j, true);
}
group.textures[j] = null;
}
//混色模式暂不用
// this.state.blendMode = group.blend;
// this.state.blend = true;
// this.renderer.state.setState(this.state);
// set the blend mode..
// stateSystem.setBlendMode(group.blend);
gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2);
}
// reset elements for the next flush
this.currentIndex = 0;
this.currentSize = 0;
this.currentIndexSize = 0;
}
packGeometry(element, float32View, uint32View, indexBuffer, index, indexCount) {
const p = index / this.vertSize;// float32View.length / 6 / 2;
const uvs = element._uvs;
const indicies = element._indices;// geometry.getIndex().data;// indicies;
const vertexData = element._vertexData;
const textureId = element._texture.baseTexture["_id"];
var _tintRGB = element._tintRGB == undefined ? 16777215 : element._tintRGB
const alpha = Math.min(element._worldAlpha, 1.0);
// we dont call extra function if alpha is 1.0, that's faster
const argb = alpha < 1.0 && element._texture.baseTexture.premultipliedAlpha ? premultiplyTint(_tintRGB, alpha)
: _tintRGB + (alpha * 255 << 24);
// lets not worry about tint! for now..
for (let i = 0; i < vertexData.length; i += 2) {
float32View[index++] = vertexData[i];
float32View[index++] = vertexData[i + 1];
float32View[index++] = uvs[i];
float32View[index++] = uvs[i + 1];
uint32View[index++] = argb;
float32View[index++] = textureId;
}
for (let i = 0; i < indicies.length; i++) {
indexBuffer[indexCount++] = p + indicies[i];
}
}
/**
* Starts a new sprite batch.
*/
start() {
//暂时不考虑2d专门的状态机属性
// this.renderer.state.setState(this.state);
this.renderer.bindShader(this.shader);
if (osType != "ios") {
this.renderer.bindVao(this.vaos[this.vertexCount]);
this.vertexBuffers[this.vertexCount].bind();
this.indexBuffers[this.vertexCount].bind();
}
}
/**
* Stops and flushes the current batch.
*
*/
stop() {
this.flush();
}
/**
* Destroys the SpriteRenderer.
*
*/
destroy() {
for (let i = 0; i < this.vaoMax; i++) {
// if (this.vertexBuffers[i])
// {
// this.vertexBuffers[i].destroy();
// }
if (this.vaos[i]) {
this.vaos[i].destroy();
}
}
this.renderer.removeEventListener('onPreRender', this.onPreRender, this);
if (this.shader) {
this.shader.destroy();
this.shader = null;
}
this.vaos = null;
super.destroy();
}
}
// interface batchElementInterface {
// _texture: Texture,
// _worldAlpha,
// _vertexData: Float32Array,
// _indices: Uint16Array,
// _tintRGB?,
// _uvs: Float32Array,
// }
src/2d/renderers/plugins/BatchRenderer.ts
View file @ 51e82c40
......@@ -8,10 +8,11 @@ import { BatchBuffer } from '../webgl/BatchBuffer';
import { generateMultiTextureShader } from '../webgl/generateMultiTextureShader';
import { WebglRenderer } from '../WebglRenderer';
import { GLShader, GLBuffer, VertexArrayObject } from '../../../glCore';
import { nextPow2, log2, premultiplyTint, premultiplyBlendMode } from '../../utils';
import { nextPow2, log2, premultiplyTint } from '../../utils';
import { DisplayObject } from '../../display/DisplayObject';
import Texture from '../../texture/Texture';
import BaseTexture from '../../texture/BaseTexture';
import { premultiplyBlendMode } from '../../utils/mapPremultipliedBlendModes';
let TICK = 0;
......@@ -21,7 +22,7 @@ let TICK = 0;
* @class
* @extends ObjectRenderer
*/
export default class BatchRenderer extends ObjectRenderer {
export class BatchRenderer extends ObjectRenderer {
vertSize: number;
vertByteSize: number;
size: number;
......@@ -360,6 +361,7 @@ export default class BatchRenderer extends ObjectRenderer {
// this.indexBuffer.update();
//暂时出现了bug，ios不做特殊处理先，以后有时间排查，暂时应该影响不大
//貌似没问题了（20210601），但是感觉性能差别不大，先不加了，到时要加的话，也要打开start方法里的注释
if (osType == "ios" && false) {
//可能有一帧，在多个地方执行flush
// this is still needed for IOS performance..
......@@ -517,6 +519,9 @@ export default class BatchRenderer extends ObjectRenderer {
super.destroy();
}
}
//放WebglRenderer那执行，BatchRenderer不往外引，不会执行，
// WebglRenderer.registerPlugin('batch', BatchRenderer);
interface batchElementInterface {
_blendMode: BLEND_MODES,
......
src/2d/renderers/plugins/CanvasSpriteRenderer.ts
View file @ 51e82c40
......@@ -4,7 +4,7 @@ import { Matrix, GroupD8 } from '../../math';
import Sprite from '../../display/Sprite';
import { DisplayObject } from '../../display/DisplayObject';
import Graphics from '../../graphics/Graphics';
import { getTintedTexture } from '../../utils';
import { getTintedTexture } from '../../utils/getTintedTexture';
const canvasRenderWorldTransform = new Matrix();
......
src/2d/renderers/webgl/WebGLState.ts
View file @ 51e82c40
import { mapWebGLBlendModes } from '../../utils';
import { mapWebGLBlendModes } from "../../utils/mapWebGLBlendModes";
const BLEND = 0;
const DEPTH_TEST = 1;
......
src/2d/text/EditableText.ts
View file @ 51e82c40
......@@ -4,7 +4,7 @@ import { osType } from "../const";
/**
* 这是最新的20200918；到时放到引擎里去
* 可编辑文本
*/
export class EditableText extends TextField {
......
src/2d/texture/BaseRenderTexture.ts
View file @ 51e82c40
......@@ -2,18 +2,14 @@ import BaseTexture from './BaseTexture';
import { SCALE_MODES } from '../const';
/**
* 将显示对象画在上面的贴图
* A BaseRenderTexture is a special texture that allows any display object to be rendered to it.
*
* __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded
* otherwise black rectangles will be drawn instead.
*
* A BaseRenderTexture takes a snapshot of any Display Object given to its render method. The position
* and rotation of the given Display Objects is ignored. For example:
* 将显示对象画在上面的贴图，这是基础纹理，一般用RenderTexture
* 注意绘制前纹理加载完成
* For example:
*
* ```js
* let renderer = autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 });
* let renderer = CanvasRenderer(context,1024, 1024);
* let baseRenderTexture = new BaseRenderTexture(800, 600);
* let renderTexture = new RenderTexture(baseRenderTexture);
* let sprite = Sprite.fromImage("spinObj_01.png");
*
* sprite.position.x = 800/2;
......@@ -21,48 +17,35 @@ import { SCALE_MODES } from '../const';
* sprite.anchorTexture.x = 0.5;
* sprite.anchorTexture.y = 0.5;
*
* renderer.render(sprite,baseRenderTexture);
* renderer.render(sprite,renderTexture);
* ```
*
* The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0
* you can clear the transform
*
* ```js
*
* sprite.setTransform()
*
* let baseRenderTexture = new BaseRenderTexture(100, 100);
* let renderTexture = new RenderTexture(baseRenderTexture);
*
* renderer.render(sprite, renderTexture); // Renders to center of RenderTexture
* ```
*
* @class
* @extends BaseTexture
*/
export default class BaseRenderTexture extends BaseTexture {
/**
* A map of renderer IDs to webgl renderTargets
* webgl帧缓存列表，键值为渲染器的id
* 画在他的帧缓存中
* @private
* @member {object<number, WebGLTexture>}
*/
_glRenderTargets: {};
/**
* A reference to the canvas render target (we only need one as this can be shared across renderers)
* 画在他的上下文中canvas中
* 离屏canvas，多canvas渲染器可共享，所以不需要列表
* @private
* @member {object<number, WebGLTexture>}
* @member {CanvasRenderTarget}
*/
_canvasRenderTarget: any;
/**
* This will let the renderer know if the texture is valid. If it's not then it cannot be rendered.
* 是否可用
*/
valid: boolean;
/**
* @param {number} [width=100] - The width of the base render texture
* @param {number} [height=100] - The height of the base render texture
* @param {number} [scaleMode=SCALE_MODES.LINEAR] - See {@link SCALE_MODES} for possible values
* @param {number} [width=100] - 宽度
* @param {number} [height=100] - 高度
* @param {number} [scaleMode=SCALE_MODES.LINEAR] - {@link SCALE_MODES}
*/
constructor(width: number = 100, height: number = 100, scaleMode: number = SCALE_MODES.LINEAR) {
super(null, scaleMode);
......@@ -84,10 +67,9 @@ export default class BaseRenderTexture extends BaseTexture {
}
/**
* Resizes the BaseRenderTexture.
*
* @param {number} width - The width to resize to.
* @param {number} height - The height to resize to.
* 重置尺寸
* @param {number} width - 宽度
* @param {number} height - 高度
*/
resize(width: number, height: number) {
width = Math.ceil(width);
......@@ -110,8 +92,7 @@ export default class BaseRenderTexture extends BaseTexture {
}
/**
* Destroys this texture
*
* 销毁
*/
destroy() {
super.destroy();
......
src/2d/texture/BaseTexture.ts
View file @ 51e82c40
......@@ -89,24 +89,19 @@ export default class BaseTexture extends EventDispatcher {
textureCacheIds: string[];
/**
*
* 小程序里用得是imageData，文本多数用这个，改成canvas;
* {
* data:Uint8Array,
* width:number,
* height:number,
* type:string,
* path:string
* }
* 或者是canvas.createImage()对象，用source.data区分
* 加一个离屏的canvas
* image对象，canvas对象，或者imageData（canvas渲染模式用不了，是否考虑去掉），以后类型增多后再说
* {
* data:Uint8Array,
* width:number,
* height:number,
* type:string,
* path:string
* }
*/
source;
/**
* @param {} [source] - 源数据
* @param {number} - possible values
* @param {SCALE_MODES}
*/
constructor(source = null, scaleMode: SCALE_MODES = SCALE_MODES.LINEAR) {
super();
......@@ -141,7 +136,8 @@ export default class BaseTexture extends EventDispatcher {
this._sourceChange(source);
this.dispatchEvent("loaded");
} else {
var self = this
var self = this;
//会覆盖onload方法
source.onload = function () {
self._sourceChange(source);
self.dispatchEvent("loaded");
......@@ -212,7 +208,7 @@ export default class BaseTexture extends EventDispatcher {
//辅助静态方法
/**
* 根据路径
* 根据路径，会缓存baseTexture
* @param {string} url 路径
*/
static fromUrl(url: string) {
......@@ -237,7 +233,7 @@ export default class BaseTexture extends EventDispatcher {
}
/**
* 从离屏canvas创建的
* 从离屏canvas创建的，会给canvas加唯一标识_canvasId，并缓存
*/
static fromCanvas(canvas: HTMLCanvasElement, origin: string = 'canvas') {
//标记canvasId
......@@ -266,7 +262,11 @@ export default class BaseTexture extends EventDispatcher {
}
return baseTexture;
}
//不包括data形式，data用
/**
* 所有形式，图片路径，canvas标签，图片标签，或者数据
* @param anything
* @returns
*/
static from(anything: string | HTMLCanvasElement | HTMLImageElement) {
//路径
if (typeof anything === 'string') {
......@@ -287,7 +287,7 @@ export default class BaseTexture extends EventDispatcher {
}
/**
* 加入缓存
* 加入全局基础纹理缓存
* @static
* @param {BaseTexture} baseTexture
* @param {string} id
......@@ -300,7 +300,7 @@ export default class BaseTexture extends EventDispatcher {
if (BaseTextureCache[id]) {
//覆盖
console.warn(`BaseTexture added to the cache with an id [${id}] that already had an entry`);
console.warn(`id为${id}的基础纹理已存在，即将覆盖`);
}
BaseTextureCache[id] = baseTexture;
}
......@@ -312,7 +312,7 @@ export default class BaseTexture extends EventDispatcher {
* @param {string|BaseTexture} baseTexture id或者BaseTexture
* @return {BaseTexture|null} 移除的BaseTexture或null
*/
static removeFromCache(baseTexture: string | BaseTexture): BaseTexture | null {
static removeFromCache(baseTexture: string | BaseTexture): BaseTexture {
if (typeof baseTexture === 'string') {
const baseTextureFromCache = BaseTextureCache[baseTexture];
if (baseTextureFromCache) {
......
src/2d/texture/RenderTexture.ts
View file @ 51e82c40
......@@ -4,46 +4,34 @@ import { Rectangle } from '../math';
import { SCALE_MODES } from '../const';
/**
* A RenderTexture is a special texture that allows any display object to be rendered to it.
*
* __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded
* otherwise black rectangles will be drawn instead.
*
* A RenderTexture takes a snapshot of any Display Object given to its render method. For example:
* 将显示对象画在上面的贴图，就是快照
* 注意绘制前纹理加载完成
* For example:
*
* ```js
* let renderer = autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 });
* let renderer = CanvasRenderer(1024, 1024);
* let renderTexture = RenderTexture.create(800, 600);
* let sprite = Sprite.fromImage("spinObj_01.png");
*
* sprite.position.x = 800/2;
* sprite.position.y = 600/2;
* sprite.anchorTexture.x = 0.5;
* sprite.anchorTexture.y = 0.5;
* let sprite = Sprite.fromImage("aaa.png");
*
* sprite.x = 800/2;
* sprite.y = 600/2;
* sprite.anchorTexture.set(0.5,0.5);
* //sprite.setTransform();会重置属性
*
* renderer.render(sprite, renderTexture);
* ```
*
* The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0
* you can clear the transform
*
* ```js
*
* sprite.setTransform()
*
* let renderTexture = new RenderTexture.create(100, 100);
*
* renderer.render(sprite, renderTexture); // Renders to center of RenderTexture
* ```
*
* @class
* @extends Texture
*/
export default class RenderTexture extends Texture {
/**
* 它的基础纹理变成了BaseRenderTexture
*/
baseTexture: BaseRenderTexture
/**
* @param {BaseRenderTexture} baseRenderTexture - The renderer used for this RenderTexture
* @param {Rectangle} [frame] - The rectangle frame of the texture to show
* @param {BaseRenderTexture} baseRenderTexture
* @param {Rectangle} [frame]
*/
constructor(baseRenderTexture: BaseRenderTexture, frame?: Rectangle) {
......@@ -58,11 +46,10 @@ export default class RenderTexture extends Texture {
}
/**
* Resizes the RenderTexture.
*
* @param {number} width - The width to resize to.
* @param {number} height - The height to resize to.
* @param {boolean} doNotResizeBaseTexture - Should the baseTexture.width and height values be resized as well?
* 重置尺寸
* @param {number} width - 宽度
* @param {number} height - 高度
* @param {boolean} doNotResizeBaseTexture - 是否不重置基础纹理的尺寸，默认false，表示也重置
*/
resize(width: number, height: number, doNotResizeBaseTexture: boolean = false) {
width = Math.ceil(width);
......@@ -82,12 +69,11 @@ export default class RenderTexture extends Texture {
}
/**
* A short hand way of creating a render texture.
*
* @param {number} [width=100] - The width of the render texture
* @param {number} [height=100] - The height of the render texture
* @param {number} [scaleMode=settings.SCALE_MODE] - See {@link SCALE_MODES} for possible values
* @return {RenderTexture} The new render texture
* 创建renderTexture快捷静态方法
* @param {number} [width=100] - 宽度
* @param {number} [height=100] - 高度
* @param {number} [scaleMode=settings.SCALE_MODE] - {@link SCALE_MODES}
* @return {RenderTexture}
*/
static create(width: number, height: number, scaleMode: number = SCALE_MODES.LINEAR): RenderTexture {
return new RenderTexture(new BaseRenderTexture(width, height, scaleMode));
......
src/2d/texture/Texture.ts
View file @ 51e82c40
......@@ -3,7 +3,7 @@ import TextureUvs from './TextureUvs';
import { EventDispatcher } from '../events/EventDispatcher';
import { Event } from "../events/Event";
import { Rectangle, Point } from '../math';
import { TextureCache } from '../utils';
import { createCanvas, TextureCache } from '../utils';
import { SCALE_MODES } from '../const';
import TextureMatrix from './TextureMatrix';
......@@ -105,7 +105,6 @@ export default class Texture extends EventDispatcher {
* @param {Rectangle} [trim] - Trimmed rectangle of original texture
* @param {number} [rotate] - indicates how the texture was rotated by texture packer. See {@link GroupD8}
* @param {Point} [anchor] - Default anchor point used for sprite placement / rotation
* 暂时不需要rotate
*/
constructor(
baseTexture: BaseTexture | Texture,
......@@ -267,8 +266,7 @@ export default class Texture extends EventDispatcher {
}
/**
*
* Updates the internal WebGL UV cache. Use it after you change `frame` or `trim` of the texture.
* 更新uv，比如在frame改变或trim改变之后
*/
updateUvs() {
if (!this._uvs) this._uvs = new TextureUvs();
......@@ -278,8 +276,7 @@ export default class Texture extends EventDispatcher {
/**
* The frame specifies the region of the base texture that this texture uses.
* Please call `updateUvs()` after you change coordinates of `frame` manually.
*
* 手动修改frame时，而不是set赋值，比如frame.x=111,frame.width=333,需要手动调用updateUvs，不推荐这种方式修改
* @member {Rectangle}
*/
get frame() {
......@@ -335,9 +332,7 @@ export default class Texture extends EventDispatcher {
}
/**
* 宽高都是贴图真实的宽高，不管trim
* The width of the Texture in pixels.
*
* 宽高都是纹理真实的宽高，不管trim
* @member {number}
*/
get width() {
......@@ -345,8 +340,7 @@ export default class Texture extends EventDispatcher {
}
/**
* The height of the Texture in pixels.
*
* 宽高都是纹理真实的宽高，不管trim
* @member {number}
*/
get height() {
......@@ -355,7 +349,7 @@ export default class Texture extends EventDispatcher {
//辅助方法
/**
* 会缓存
* 会缓存进全局纹理
* @param {string} url
*/
static fromUrl(url: string) {
......@@ -384,7 +378,11 @@ export default class Texture extends EventDispatcher {
}
return texture;
}
//不包括data形式
/**
* 图片路径，canvas标签，图片标签，图片数据
* @param anything
* @returns
*/
static from(anything: string | HTMLCanvasElement | HTMLImageElement) {
//路径
if (typeof anything === 'string') {
......@@ -405,10 +403,10 @@ export default class Texture extends EventDispatcher {
}
/**
* 加入全局缓存，TextureCache[name]调用
* 加入全局纹理缓存，TextureCache[name]调用
* @static
* @param {Texture} texture - The Texture to add to the cache.
* @param {string} id - The id that the Texture will be stored against.
* @param {Texture} texture
* @param {string} id
*/
static addToCache(texture: Texture, id: string) {
if (id) {
......@@ -417,7 +415,7 @@ export default class Texture extends EventDispatcher {
}
if (TextureCache[id]) {
//覆盖
console.warn(`Texture added to the cache with an id [${id}] that already had an entry`);
console.warn(`id为${id}的纹理已存在，即将覆盖`);
}
TextureCache[id] = texture;
}
......@@ -426,8 +424,8 @@ export default class Texture extends EventDispatcher {
/**
* 从全局缓存中移除
* @static
* @param {string|Texture} texture - id of a Texture to be removed, or a Texture instance itself
* @return {Texture|null} The Texture that was removed
* @param {string|Texture} texture - 纹理的id或纹理自身
* @return {Texture} 返回移除的纹理
*/
static removeFromCache(texture: any): Texture {
if (typeof texture === 'string') {
......@@ -462,7 +460,7 @@ export default class Texture extends EventDispatcher {
}
}
//将事件置空
//将事件置空，空纹理或白纹理不需要响应任何加载或更新事件
function removeAllHandlers(tex) {
tex.destroy = function _emptyDestroy() { /* empty */ };
tex.addEventListener = function _emptyOn() { /* empty */ };
......@@ -479,29 +477,43 @@ Texture.EMPTY = new Texture(new BaseTexture());
removeAllHandlers(Texture.EMPTY);
removeAllHandlers(Texture.EMPTY.baseTexture);
/**
* 16*16的数据
*/
const whiteSource = {
data: (function () {
var arr = []
for (var i = 0; i < 16 * 16 * 4; i++) {
arr.push(255);
}
return new Uint8Array(arr)
})(),
width: 16,
height: 16,
type: null,
path: null
}
/**
* 白色纹理，几何形状的纹理16*16
* 仅用于webgl模式的Graphics
* @static
* @constant
*/
Texture.WHITE = new Texture(new BaseTexture(whiteSource));
// /**
// * 16*16的数据
// */
// const whiteSource = {
// data: (function () {
// var arr = []
// for (var i = 0; i < 16 * 16 * 4; i++) {
// arr.push(255);
// }
// return new Uint8Array(arr)
// })(),
// width: 16,
// height: 16,
// type: null,
// path: null
// }
// /**
// * 白色纹理，几何形状的纹理16*16
// * 仅用于webgl模式的Graphics
// * @static
// * @constant
// */
// Texture.WHITE = new Texture(new BaseTexture(whiteSource));
// removeAllHandlers(Texture.WHITE);
// removeAllHandlers(Texture.WHITE.baseTexture);
//用离屏canvas，否则canvas渲染模式用不了
Texture.WHITE = (() => {
const canvas = createCanvas();
canvas.width = 16;
canvas.height = 16;
const context = canvas.getContext('2d');
context.clearRect(0, 0, 16, 16);//淘宝小程序的问题，必须先调用过clearRect，否则有几率绘制无效
context.fillStyle = 'white';//淘宝小程序待测试
context.fillRect(0, 0, 16, 16);
return new Texture(new BaseTexture(canvas));
})();
removeAllHandlers(Texture.WHITE);
removeAllHandlers(Texture.WHITE.baseTexture);
removeAllHandlers(Texture.WHITE.baseTexture);
\ No newline at end of file
src/2d/texture/createTextureSheet.ts
View file @ 51e82c40
......@@ -21,8 +21,8 @@ var expData = {
/**
*
* @param baseTexture
* @param altaData
* @param {BaseTexture} baseTexture
* @param {dataTm} altaData
* @return 返回贴图集。不常用
*/
export function createTextureSheet(baseTexture: BaseTexture, altaData): { [key: string]: Texture } {
......
src/2d/texture/index.ts
View file @ 51e82c40
......@@ -2,4 +2,6 @@ export { default as Texture } from "./Texture";
export { default as BaseTexture } from "./BaseTexture";
export * from "./createTextureSheet";
\ No newline at end of file
export * from "./createTextureSheet";
export { default as RenderTexture } from "./RenderTexture";
\ No newline at end of file
src/2d/ui/ScrollPage.ts
View file @ 51e82c40
......@@ -168,8 +168,8 @@ export class ScrollPage extends Container {
if (!isFull) {
//不全屏才设置mask
s.view.mask = s.maskObj;
//为了能接收鼠标事件设置isUsedToMask
s.maskObj.isUsedToMask = false;
//为了能接收鼠标事件设置_isUsedToMask
s.maskObj._isUsedToMask = false;
}
s.maskObj.alpha = 0;
s.maxDistance = maxDistance;
......@@ -244,6 +244,7 @@ export class ScrollPage extends Container {
} else {
s.dispatchEvent(Event.SCROLL_TO_HEAD);
}
s.addSpeed = 0;
}
}
} else {
......@@ -353,6 +354,7 @@ export class ScrollPage extends Container {
s.lastValue = currentValue;
s.stopTimes = 0;
} else {
if (!s.isMouseDownState) return;//先不加，讲道理需要，否则stage的up事件会触发这里，使得isStop改变
s.isStop = false;
s.stopTimes = -1;
if (s.speed == 0 && s.isMouseDownState == 2) {
......
src/2d/ui/ShowWord.ts deleted 100644 → 0
View file @ 24e2e305
import { TextField } from "../text/TextField";
/**
* 文字一个一个出现
*/
export class ShowWord extends TextField {
/**
*
* @param text 文本 例子：这里是生命值，闯关失败后\n都会扣除一点生命值
* @param deltaTime 文字间隔时间，毫秒计
* @param callback 播放完后的回调
*/
playWords(text: string, deltaTime: number = 100, callback?: Function) {
var spiltStrs = text.split("\n");
//拆分文本
let strs: string[] = []
for (var i = 0; i < spiltStrs.length; i++) {
var spiltStr: string = spiltStrs[i];
var ori: string = "";
var index = 0;
while (index < i) {
ori += spiltStrs[index];
ori += "\n";
index++;
}
for (var j = 0; j < spiltStr.length; j++) {
var str = "" + ori;
str += spiltStr.substring(0, j + 1)
strs.push(str)
}
}
// console.log(strs)
//轮流替换文本
for (let m = 0; m < strs.length; m++) {
let str = strs[m];
setTimeout(() => {
this.text = str;
if (m == strs.length - 1) {
callback && callback();
}
}, deltaTime * m)
}
}
}
\ No newline at end of file
src/2d/ui/index.ts
View file @ 51e82c40
......@@ -2,7 +2,6 @@ export * from "./Button";
export * from "./FrameAni";
export * from "./ScrollPage";
export * from "./ScrollList";
export * from "./ShowWord";
export * from "./MovieClip";
......
src/2d/utils/index.ts
View file @ 51e82c40
/**
* 记录的一些方法和设置
* 记录的一些方法和设置，还有index都是会往引擎导的，所以内部方法尽量不导
*/
import { RENDERER_TYPE } from "../const";
import { mapPremultipliedBlendModes } from "./mapPremultipliedBlendModes";
// import { mapPremultipliedBlendModes } from "./mapPremultipliedBlendModes";
import { createCanvas, getEnv } from "./tbminiAdapte";
export * from './twiddle';
export { default as toDisplayDataURL } from "./toDisplayDataURL";
export * from "./getTintedTexture";
export * from "./mapWebGLBlendModes";
export * from "./mapCanvasBlendModes";
// export * from "./getTintedTexture";//外部用不到
// export * from "./mapWebGLBlendModes";//只在webglState里使用一次，外部用不到
// export * from "./mapCanvasBlendModes";//只在canvasRenderer里使用一次，外部用不到
// export * from "./DrawAllToCanvas";
export * from "./tbminiAdapte";
export const premultiplyBlendMode = mapPremultipliedBlendModes();
//在mapPremultipliedBlendModes文件内自行导出，以防在引擎外暴露
// export const premultiplyBlendMode = mapPremultipliedBlendModes();
let nextUid = 0;
......@@ -151,6 +151,7 @@ export function getRGBA(color: string, alpha: number): string {
return color;
}
/////////////uri解析基本用不到，考虑沉淀到其他地方后废弃decomposeDataUri
/**
* Regexp for data URI.
* Based on: {@link https://github.com/ragingwind/data-uri-regex}
......@@ -183,6 +184,7 @@ export function decomposeDataUri(dataUri) {
return undefined;
}
//路劲后缀名解析基本用不到，考虑沉淀到其他地方后废弃getUrlFileExtension
/**
* Regexp for image type by extension.
*
......@@ -295,7 +297,7 @@ export function clearTextureCache() {
}
/**
* 用于记录引擎全局属性记录，暂时没用到
* 用于记录引擎全局属性记录，暂时没用到，考虑废弃
* 除了引擎内部修改赋值，外部仅供读取
*/
export const GlobalPro = {
......
src/2d/utils/mapPremultipliedBlendModes.ts
View file @ 51e82c40
import { BLEND_MODES } from "../const";
/**
* Corrects blend, takes premultiplied alpha into account
*
* 矫正混色模式，因为有预乘alpha的
* @private
* @return {Array<number[]>} Mapped modes.
*/
export function mapPremultipliedBlendModes() {
function mapPremultipliedBlendModes() {
var pm = [];
var npm = [];
......@@ -30,4 +29,6 @@ export function mapPremultipliedBlendModes() {
array.push(pm);
return array;
}
\ No newline at end of file
}
//导出矫正后的
export const premultiplyBlendMode = mapPremultipliedBlendModes();
\ No newline at end of file
src/2d/utils/tbminiAdapte.ts
View file @ 51e82c40
// let env: "tb" | "web" = "web";
// //如果是浏览器环境，声明个my为null，为了无声明不报错
// if (window) window["my"] = null;//在用webview的小程序环境内，只要在小程序的sdk前加js就无所谓，
// export function getEnv(): "tb" | "web" {
// return env
// }
// /**
// * 创建一个离屏的canvas
// */
// export function createCanvas(): HTMLCanvasElement {
// //@ts-ignore
// return document && document.createElement("canvas") || my._createOffscreenCanvas();
// }
// let contentByCanvas: {
// createImage: () => HTMLImageElement,
// requestAnimationFrame: (fun: Function) => number,
// cancelAnimationFrame: (id) => void,
// };
// /**
// * 淘宝小程序项目，拿到canvas先执行这个,,,TODO为啥不直接记录canvas.也许有问题,暂时不改
// * @param canvas
// */
// export function initedByCanvas(canvas) {
// contentByCanvas = {
// createImage: canvas.createImage.bind(canvas),
// //必须加bind，函数内存在this指向
// requestAnimationFrame: canvas.requestAnimationFrame.bind(canvas),
// cancelAnimationFrame: canvas.cancelAnimationFrame.bind(canvas),
// }
// env = "tb";
// }
// export function destroyCanvasContent() {
// if (contentByCanvas) {
// contentByCanvas.createImage = null;
// contentByCanvas.requestAnimationFrame = null;
// contentByCanvas.cancelAnimationFrame = null;
// contentByCanvas = null
// }
// }
// export function createImage() {
// return contentByCanvas && contentByCanvas.createImage() || new Image();
// }
// //下面两个尽量自己外层写循环，不用这里的，因为淘宝小程序不同page用了canvas，最好都用各自的requestAnimationFrame，不相互覆盖
// export function getRequestAnimationFrame() {
// return contentByCanvas && contentByCanvas.requestAnimationFrame || window.requestAnimationFrame.bind(window)
// }
// export function getCancelAnimationFrame() {
// return contentByCanvas && contentByCanvas.cancelAnimationFrame || window.cancelAnimationFrame.bind(window)
// }
//TODO上面所有的以后考虑这么些写,待测试
let env: "tb" | "web" = "web";
//如果是浏览器环境，声明个my为null，为了无声明不报错
if (window) window["my"] = null;//在用webview的小程序环境内，只要在小程序的sdk前加js就无所谓，
export function getEnv(): "tb" | "web" {
return env
}
/**
* 设置运行环境，一般不需要调用，预留
* 方法initedByTbCanvas会自行设置env为tb
* @param e 环境
*/
export function setEnv(e: "tb" | "web") {
env = e;
}
/**
* 创建一个离屏的canvas
*/
export function createCanvas(): HTMLCanvasElement {
//web环境
if (getEnv() == "web") return document.createElement("canvas");
//@ts-ignore
return document && document.createElement("canvas") || my._createOffscreenCanvas();
if (getEnv() == "tb") return my._createOffscreenCanvas();
//提示下
console.warn("未知环境，创建canvas失败")
}
let contentByCanvas: {
createImage: () => HTMLImageElement,
requestAnimationFrame: (fun: Function) => number,
cancelAnimationFrame: (id) => void,
};
/**
* 淘宝小程序项目，拿到canvas先执行这个,,,TODO为啥不直接记录canvas.也许有问题,暂时不改
* 临时记录的淘宝小程序的主canvas
*/
let tbCanvas;
/**
* 淘宝小程序项目，拿到canvas先执行这个,修改当前环境
* @param canvas
*/
export function initedByTbCanvas(canvas) {
tbCanvas = canvas;
setEnv("tb");
}
//兼容老版本，TODO废弃
export function initedByCanvas(canvas) {
contentByCanvas = {
createImage: canvas.createImage.bind(canvas),
//必须加bind，函数内存在this指向
requestAnimationFrame: canvas.requestAnimationFrame.bind(canvas),
cancelAnimationFrame: canvas.cancelAnimationFrame.bind(canvas),
}
env = "tb";
console.warn("方法initedByCanvas即将废弃，请使用方法initedByTbCanvas代替")
initedByTbCanvas(canvas)
}
/**
* 销毁记录的tbCanvas，一般也没必要执行，
* 尤其多页面的淘宝小程序，销毁的话，createImage会有问题
*/
export function destroyTbCanvas() {
tbCanvas = null;
}
//兼容老版本，TODO废弃
export function destroyCanvasContent() {
if (contentByCanvas) {
contentByCanvas.createImage = null;
contentByCanvas.requestAnimationFrame = null;
contentByCanvas.cancelAnimationFrame = null;
contentByCanvas = null
}
console.warn("方法destroyCanvasContent即将废弃，请使用方法destroyTbCanvas代替")
destroyTbCanvas();
}
export function createImage() {
return contentByCanvas && contentByCanvas.createImage() || new Image();
/**
* 返回图片
* @returns
*/
export function createImage(): HTMLImageElement {
if (getEnv() == "web") return new Image();
if (getEnv() == "tb") {
if (tbCanvas) return tbCanvas.createImage();
console.warn("淘宝小程序初始化canvas不存在");
}
console.warn("未知环境，创建Image失败")
}
//下面两个尽量自己外层写循环，不用这里的，因为淘宝小程序不同page用了canvas，最好都用各自的requestAnimationFrame，不相互覆盖
export function getRequestAnimationFrame() {
return contentByCanvas && contentByCanvas.requestAnimationFrame || window.requestAnimationFrame.bind(window)
/**
* 尽量外部自行调用循环，不用引擎给的，即将废弃
* @param callback
* @returns
*/
export function requestAnimationFrame(callback) {
//直接用window的
if (getEnv() == "web") return window.requestAnimationFrame(callback);
//淘宝小程序环境
if (getEnv() == "tb") {
if (tbCanvas) return tbCanvas.requestAnimationFrame(callback);
console.warn("淘宝小程序初始化canvas不存在");
}
console.warn("未知环境，requestAnimationFrame调用无效")
}
export function getCancelAnimationFrame() {
return contentByCanvas && contentByCanvas.cancelAnimationFrame || window.cancelAnimationFrame.bind(window)
export function cancelAnimationFrame(id: number) {
if (getEnv() == "web") {
window.cancelAnimationFrame(id);
return;
}
//淘宝小程序环境
else if (getEnv() == "tb") {
if (tbCanvas) {
tbCanvas.cancelAnimationFrame(id);
return;
}
console.warn("淘宝小程序初始化canvas不存在");
}
console.warn("未知环境，cancelAnimationFrame调用无效")
}
//TODO上面所有的以后考虑这么些写,待测试
// let env: "tb" | "web" = "web";
// //如果是浏览器环境，声明个my为null，为了无声明不报错
// if (window) window["my"] = null;//在用webview的小程序环境内，只要在小程序的sdk前加js就无所谓，
// export function getEnv(): "tb" | "web" {
// return env
// }
// /**
// * 创建一个离屏的canvas
// */
// export function createCanvas(): HTMLCanvasElement {
// //@ts-ignore
// return getEnv() == "web" && document.createElement("canvas") || my._createOffscreenCanvas();
// }
// /**
// * 临时记录的淘宝小程序的主canvas
// */
// let tbCanvas;
// /**
// * 淘宝小程序项目，拿到canvas先执行这个,修改当前环境
// * @param canvas
// */
// export function initedByCanvas(canvas) {
// tbCanvas = canvas;
// env = "tb";
// }
// export function destroyCanvasContent() {
// tbCanvas = null;
// }
// export function createImage(): HTMLImageElement {
// return tbCanvas && tbCanvas.createImage() || new Image();
// }
// export function requestAnimationFrame(callback) {
// return tbCanvas && tbCanvas.requestAnimationFrame(callback) || window.requestAnimationFrame(callback)
// }
// export function cancelAnimationFrame(id: number) {
// return tbCanvas && tbCanvas.cancelAnimationFrame(id) || window.cancelAnimationFrame(id)
// }
//老版本使用提示，TODO废弃
export function getRequestAnimationFrame() {
console.error("requestAnimationFrame,cancelAnimationFrame统统外部自行调用，引擎内不给方法，淘宝小程序在canvas上，web环境在window上")
}
\ No newline at end of file
src/3d/Geometry.ts
View file @ 51e82c40
......@@ -89,7 +89,11 @@ export class Geometry extends HashObject {
this._vertices = vertices;
this._normals = normals || new Float32Array(vertices.length);
this._colors = colors || new Float32Array(vertices.length).map(() => { return 1 });//不传就全是白色
this._colors = colors || (() => {
var f = new Float32Array(vertices.length);
for (var i = 0; i < vertices.length; i++)f[i] = 1;
return f;
})()//new Float32Array(vertices.length).map(() => { return 1 });//不传就全是白色
this._uvs = uvs || new Float32Array(vertices.length / 3 * 2);
//索引直接用，可能没有
this._indices = indices ? new Uint16Array(indices) : null;
......@@ -184,103 +188,76 @@ export interface VaoBufferInt {
}
var vertices = new Float32Array([
2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, 2.0, // v0-v1-v2-v3 front
2.0, 2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, // v0-v3-v4-v5 right
2.0, 2.0, 2.0, 2.0, 2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, 2.0, // v0-v5-v6-v1 up
-2.0, 2.0, 2.0, -2.0, 2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, // v1-v6-v7-v2 left
-2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, -2.0, 2.0, -2.0, -2.0, 2.0, // v7-v4-v3-v2 down
2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, -2.0, 2.0, 2.0, -2.0 // v4-v7-v6-v5 back
]);
var colors = new Float32Array([ // Colors
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v1-v2-v3 front
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v3-v4-v5 right
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v5-v6-v1 up
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v1-v6-v7-v2 left
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v7-v4-v3-v2 down
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0　 // v4-v7-v6-v5 back
]);
colors = colors.map(() => {
return 1
})
var normals = new Float32Array([ // Normal
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 up
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // v7-v4-v3-v2 down
0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0 // v4-v7-v6-v5 back
]);
var uvs = new Float32Array([
1.0, 1.0,
0.0, 1.0,
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
0.0, 0.0,
1.0, 0.0,
]);
var indices = new Uint16Array([ // Indices of the vertices
0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // right
8, 9, 10, 8, 10, 11, // up
12, 13, 14, 12, 14, 15, // left
16, 17, 18, 16, 18, 19, // down
20, 21, 22, 20, 22, 23 // back
]);
// function createNineTextures(imageUrl: string): Promise<FYGE.Texture[]> {
// return new Promise((resolve, reject) => {
// let image = new Image();
// image.onload = function () {
// var obj = {}
// //名字。
// var name = "lalala";
// var w = image.width / 3;
// var h = image.height / 3;
// //生成9张图的数据
// for (var i = 0; i < 9; i++)
// obj[name + i] = {
// "x": i % 3 * w,
// "y": ~~(i / 3) * h,
// w, h, sw: w, sh: h, ox: 0, oy: 0, ro: false
// };
// var textures = FYGE.createTextureSheet(new FYGE.BaseTexture(image), obj);
// //取TextureCache里的
// var arr = [];
// for (var i = 0; i < 9; i++)arr.push(textures[name + i])
// resolve(arr)
// }
// image.onerror = function () {
// reject()
// }
// image.src = imageUrl
// })
// }
// var vertices = new Float32Array([
// 2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, 2.0, // v0-v1-v2-v3 front
// 2.0, 2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, // v0-v3-v4-v5 right
// 2.0, 2.0, 2.0, 2.0, 2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, 2.0, // v0-v5-v6-v1 up
// -2.0, 2.0, 2.0, -2.0, 2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, // v1-v6-v7-v2 left
// -2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, -2.0, 2.0, -2.0, -2.0, 2.0, // v7-v4-v3-v2 down
// 2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, -2.0, 2.0, 2.0, -2.0 // v4-v7-v6-v5 back
// ]);
// var colors = new Float32Array([ // Colors
// 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v1-v2-v3 front
// 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v3-v4-v5 right
// 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v5-v6-v1 up
// 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v1-v6-v7-v2 left
// 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v7-v4-v3-v2 down
// 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0　 // v4-v7-v6-v5 back
// ]);
// colors = colors.map(() => {
// return 1
// })
// var normals = new Float32Array([ // Normal
// 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
// 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
// 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 up
// -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
// 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // v7-v4-v3-v2 down
// 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0 // v4-v7-v6-v5 back
// ]);
// var uvs = new Float32Array([
// 1.0, 1.0,
// 0.0, 1.0,
// 0.0, 0.0,
// 1.0, 0.0,
// 1.0, 1.0,
// 0.0, 1.0,
// 0.0, 0.0,
// 1.0, 0.0,
// 1.0, 1.0,
// 0.0, 1.0,
// 0.0, 0.0,
// 1.0, 0.0,
// 1.0, 1.0,
// 0.0, 1.0,
// 0.0, 0.0,
// 1.0, 0.0,
// 1.0, 1.0,
// 0.0, 1.0,
// 0.0, 0.0,
// 1.0, 0.0,
// 1.0, 1.0,
// 0.0, 1.0,
// 0.0, 0.0,
// 1.0, 0.0,
// ]);
// var indices = new Uint16Array([ // Indices of the vertices
// 0, 1, 2, 0, 2, 3, // front
// 4, 5, 6, 4, 6, 7, // right
// 8, 9, 10, 8, 10, 11, // up
// 12, 13, 14, 12, 14, 15, // left
// 16, 17, 18, 16, 18, 19, // down
// 20, 21, 22, 20, 22, 23 // back
// ]);
src/index.ts
View file @ 51e82c40
......@@ -21,16 +21,12 @@ export * from "./2d/renderers/WebglRenderer";
export * from "./2d/text";
export * from "./2d/texture";
export * from "./2d/ui";
export * from "./2d/utils";
//音频不用这个，到时外部弄个库
// export * from "./sound"
export * from "./tween";
//3D
......
src/sound/Sound.ts deleted 100644 → 0
View file @ 24e2e305
import { EventDispatcher, Event } from "../2d/events";
import { GlobalLoader } from "../2d/loader";
import { SoundChannel } from "./SoundChannel";
/**
* 淘宝小程序的音频
*/
export interface InnerAudioContext {
src: string //音频的数据链接，用于直接播放。 支持音频格式：aac，mp3 src支持的协议如下： HTTP和HTTPS: http://taobao.com/videoSource/test.mp3 apFilePath
startTime: number //音频开始播放时间，单位秒
autoplay: boolean //是否自动开始播放，默认 false
loop: boolean //是否循环播放，默认 false
obeyMuteSwitch: boolean //是否遵循系统静音开关，当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音，默认值 true (仅 iOS支持)
duration: number //当前音频的长度（单位：s），只有在当前有合法的 src 时返回
currentTime: number //当前音频的播放位置（单位：s），只有在当前有合法的 src 时返回，时间不取整
paused: boolean //当前是是否暂停或停止状态，true 表示暂停或停止，false 表示正在播放
buffered: number //音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲。
volume: number //音量。范围 0~1。
isRecordAudioPlayState: boolean //暂不支持
play: () => void //播放
pause: () => void //暂停
stop: void //停止
seek: (postion:number) => void //跳转到指定位置，单位 s
destroy: void //销毁当前实例
onCanplay: (fun: () => void) => void //可以播放事件
onPlay: (fun: () => void) => void //音频开始播放事件
onPause: (fun: () => void) => void //音频暂停播放事件
onStop: (fun: () => void) => void //音频停止播放事件
onEnded: (fun: () => void) => void //音频结束播放事件
onTimeUpdate: (fun: () => void) => void //音频播放进度更新事件
onError: (fun: () => void) => void //音频播放错误事件
onWaiting: (fun: () => void) => void //音频缓冲事件
onSeeking: (fun: () => void) => void //音频跳转事件
onSeeked: (fun: () => void) => void //音频跳转结束事件
}
let usingChannel: Array<SoundChannel> = [];
/**
* @private
* @param channel
*/
export function $pushSoundChannel(channel: SoundChannel): void {
if (usingChannel.indexOf(channel) < 0) {
usingChannel.push(channel);
}
}
/**
* @private
* @param channel
*/
export function $popSoundChannel(channel: SoundChannel): boolean {
let index: number = usingChannel.indexOf(channel);
if (index >= 0) {
usingChannel.splice(index, 1);
return true;
}
return false;
}
export class Sound extends EventDispatcher {
/**
* 记录的路径
*/
private url: string;
/**
* 有url了，貌似就没必要了
*/
private originAudio: InnerAudioContext;
/**
* @private
*/
private loaded: boolean = false;
constructor() {
super();
}
public get length(): number {
if (this.originAudio) {
return this.originAudio.duration;
}
throw new Error("sound not loaded!");
//return 0;
}
public load(url: string): void {
this.url = url;
GlobalLoader.loadAudio((s, audio) => {
this.originAudio = audio;
if (s) {
Sound.$recycle(this.url, audio);
this.loaded = true;
this.dispatchEvent(Event.COMPLETE);
} else {
this.dispatchEvent(Event.ERROR);
}
}, url)
if (Sound.clearAudios[this.url]) {
delete Sound.clearAudios[this.url];
}
}
/**
* @inheritDoc
*/
public play(startTime?: number, loops?: number): SoundChannel {
startTime = +startTime || 0;
loops = +loops || 0;
let audio: InnerAudioContext = Sound.$pop(this.url);
if (audio == null) {//没有就新建
//@ts-ignore
audio = <InnerAudioContext>my.createInnerAudioContext();
audio.src = this.url;
}
else {
//audio.load();
}
audio.autoplay = true;
let channel = new SoundChannel(audio);
channel.$url = this.url;
channel.$loops = loops;
channel.$startTime = startTime;
channel.$play();
//为了能处理所有加入的sound用
$pushSoundChannel(channel);
return channel;
}
/**
* @inheritDoc
*/
public close() {
if (this.loaded == false && this.originAudio) this.originAudio.src = "";
if (this.originAudio) this.originAudio = null;
Sound.$clear(this.url);
}
/**
* @private
*/
private static audios: Object = {};
private static clearAudios: Object = {};
static $clear(url: string): void {
Sound.clearAudios[url] = true;
let array: InnerAudioContext[] = Sound.audios[url];
if (array) {
array.length = 0;
}
}
static $pop(url: string): InnerAudioContext {
let array: InnerAudioContext[] = Sound.audios[url];
if (array && array.length > 0) {
return array.pop();
}
return null;
}
static $recycle(url: string, audio: InnerAudioContext): void {
if (Sound.clearAudios[url]) {
return;
}
let array: InnerAudioContext[] = Sound.audios[url];
if (Sound.audios[url] == null) {
array = Sound.audios[url] = [];
}
array.push(audio);
}
}
\ No newline at end of file
src/sound/SoundChannel.ts deleted 100644 → 0
View file @ 24e2e305
import { EventDispatcher, Event } from "../2d/events";
import { Sound, InnerAudioContext } from "./Sound";
import { $popSoundChannel } from "./Sound";
export class SoundChannel extends EventDispatcher {
/**
* @private
*/
$url: string;
/**
* @private
*/
$loops: number;
/**
* @private
*/
$startTime: number = 0;
/**
* @private
*/
private audio: InnerAudioContext = null;
//声音是否已经播放完成
private isStopped: boolean = false;
/**
* @private
*/
constructor(audio: InnerAudioContext) {
super();
audio.onEnded(this.onPlayEnd)
// audio.addEventListener("ended", this.onPlayEnd);
this.audio = audio;
}
private canPlay = (): void => {
// this.audio.removeEventListener("canplay", this.canPlay);
try {
this.audio.currentTime = this.$startTime;
}
catch (e) {
}
finally {
this.audio.play();
}
};
$play(): void {
if (this.isStopped) {
return;
}
try {
//this.audio.pause();
this.audio.volume = this._volume;
this.audio.currentTime = this.$startTime;
}
catch (e) {
this.audio.onCanplay(() => { this.canPlay() })
// this.audio.addEventListener("canplay", this.canPlay);
return;
}
this.audio.play();
}
/**
* @private
*/
private onPlayEnd = () => {
if (this.$loops == 1) {
this.stop();
this.dispatchEvent(Event.COMPLETE);
return;
}
if (this.$loops > 0) {
this.$loops--;
}
/////////////
//this.audio.load();
this.$play();
};
/**
* @private
* @inheritDoc
*/
public stop() {
if (!this.audio)
return;
if (!this.isStopped) {
//用来管理所有声音用
$popSoundChannel(this);
}
this.isStopped = true;
let audio = this.audio;
audio.onEnded(() => { })//暂时没有offEnded，所以置空试试
audio.onCanplay(() => { })
// audio.removeEventListener("ended", this.onPlayEnd);
// audio.removeEventListener("canplay", this.canPlay);
audio.volume = 0;
this._volume = 0;
this.audio = null;
let url = this.$url;
//延迟一定时间再停止，规避chrome报错
setTimeout(function () {
audio.pause();
Sound.$recycle(url, audio);
}, 200);
}
/**
* @private
*/
private _volume: number = 1;
/**
* @private
* @inheritDoc
*/
public get volume(): number {
return this._volume;
}
/**
* @inheritDoc
*/
public set volume(value: number) {
if (this.isStopped) {
return;
}
this._volume = value;
if (!this.audio)
return;
this.audio.volume = value;
}
/**
* @private
* @inheritDoc
*/
public get position(): number {
if (!this.audio)
return 0;
return this.audio.currentTime;
}
}
src/sound/index.ts deleted 100644 → 0
View file @ 24e2e305
export { SoundChannel } from "./SoundChannel"
export { Sound } from "./Sound"
\ No newline at end of file
src/spine/Spine.ts
View file @ 51e82c40
......@@ -420,7 +420,7 @@ export class Spine extends Container {
slot.currentMeshName = attachment.name;
slot.addChild(mesh);
}
// else if (attachment instanceof pixi_spine.core.ClippingAttachment) {
// else if (attachment instanceof ClippingAttachment) {
// _this.createGraphics(slot, attachment);
// slotContainer.addChild(slot.clippingContainer);
// slotContainer.addChild(slot.currentGraphics);
......
src/spine/SpineAniManager.ts
View file @ 51e82c40
......@@ -40,7 +40,9 @@ export class SpineAniClip extends AnimationClip {
export class SpineAniManager extends AnimationManager {
currentClip: SpineAniClip
/**
*
* 切换动画
* 有切换闪帧问题时尝试setTimeout延时0后执行showAni，
* 因为resetState更新的部分插槽初始值并不是0时间，所以延时到本帧结束，下帧开始前，利用下帧逻辑覆盖显示
* @param name
* @param loops
* @param callback
......
src/spine/animation/DrawOrderAniTrack.ts
View file @ 51e82c40
......@@ -40,7 +40,7 @@ export class DrawOrderAniTrack extends BaseTrack {
frame = frames.length - 1;
else
frame = binarySearch(frames, time) - 1;
var drawOrderToSetupIndex =frames[frame].drawOrder ;
var drawOrderToSetupIndex = frames[frame].drawOrder;
if (!drawOrderToSetupIndex)
arrayCopy(slots, 0, drawOrder, 0, slots.length);
else {
......@@ -48,6 +48,14 @@ export class DrawOrderAniTrack extends BaseTrack {
drawOrder[i] = slots[drawOrderToSetupIndex[i]];
}
}
/**
* 层级需要加个重置方法，因为部分动画并没有层级时间轴，会导致当前动画层级根据上一个动画来
*/
resetValue() {
this.slots.forEach((s, i) => {
this.drawOrder[i] = s;
})
}
}
function binarySearch(values: IDrawOrderAniData[], target: number) {
var low = 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment