1.1版本提交一次，暂停开发

src/core/Component.ts

@@ -3,7 +3,7 @@
  */
 
 import HashObject from "./HashObject";
-import {Node,} from "./Node";
+import {Node,} from "./nodes/Node";
 import {EngineConfig} from "../engine-config";
 
 const interactiveMap = [

src/core/ScillaEngine.ts

@@ -4,7 +4,7 @@
  * 引擎
  */
 
-import {Node, RootNode} from "./Node";
+import {Node, RootNode} from "./nodes/Node";
 import {injectProp} from "../tools/utils";
 import InteractContext from "./context/InteractContext";
 import RenderContext, {ScaleMode} from "./context/RenderContext";

src/core/Sheet.ts

@@ -9,11 +9,11 @@ import {Frame} from "../ReType";
 /**
  * 图集
  */
-export class Sheet extends HashObject{
+export class Sheet extends HashObject {
 	/**
-	 * 图集原图
+	 * 图集原图或原材质
 	 */
-	img: any;
+	source: any;
 	/**
 	 * 图集分割配置
 	 */
@@ -21,13 +21,22 @@ export class Sheet extends HashObject{
 
 	private _textureCache: any = {};
 
-	constructor(img?, frames?: Frame) {
+	constructor(source?: HTMLImageElement | Texture, frames?) {
 		super();
 
-		if(img){
-			this.img = img;
+		this.init(source, frames);
+	}
+
+	/**
+	 * 初始化
+	 * @param source
+	 * @param frames
+	 */
+	init(source?: HTMLImageElement | Texture, frames?) {
+		if (source) {
+			this.source = source;
 		}
-		if(frames){
+		if (frames) {
 			this.frames = frames;
 		}
 	}
@@ -47,7 +56,7 @@ export class Sheet extends HashObject{
 	 * @param force
 	 */
 	generateTexture(name: string, force = false): Texture {
-		const {img, frames, _textureCache} = this;
+		const {source, frames, _textureCache} = this;
 
 		if (!force && _textureCache[name]) {
 			return _textureCache[name];
@@ -55,7 +64,13 @@ export class Sheet extends HashObject{
 
 		const frame = frames[name];
 		if (frame) {
-			return _textureCache[name] = createTexture(img, frame);
+			let img = source, realFrame = frame;
+			if(source instanceof Texture){
+				img = source.img;
+				realFrame.x += source.x;
+				realFrame.y += source.y;
+			}
+			return _textureCache[name] = createTexture(img, realFrame);
 		}
 	}
 
@@ -64,7 +79,7 @@ export class Sheet extends HashObject{
 	 * @param name
 	 * @param texture
 	 */
-	inputTexture(name: string, texture: Texture){
+	inputTexture(name: string, texture: Texture) {
 		this._textureCache[name] = texture;
 	}
 
@@ -97,14 +112,29 @@ export class Sheet extends HashObject{
 	}
 
 	/**
-	 * 销毁自身
+	 * 销毁材质
+	 * @param name
 	 */
-	destroy() {
-		this.img = null;
+	destroyTexture(name){
+		this._textureCache[name].destroy();
+		delete this._textureCache[name];
+	}
 
+	/**
+	 * 销毁所有材质
+	 */
+	cleanAllTexture(){
 		for (let key in this._textureCache) {
-			this._textureCache[key].destroy();
-			delete this._textureCache[key];
+			this.destroyTexture(key);
 		}
 	}
+
+	/**
+	 * 销毁自身
+	 */
+	destroy() {
+		this.source = null;
+
+		this.cleanAllTexture();
+	}
 }

src/core/Texture.ts

@@ -48,10 +48,10 @@ export default class Texture extends HashObject {
 	setFrame(frame: Frame) {
 		utils.injectProp(this, frame);
 		if (!frame.hasOwnProperty('sourceW')) {
-			frame.sourceW = frame.width;
+			this.sourceW = frame.width;
 		}
 		if (!frame.hasOwnProperty('sourceH')) {
-			frame.sourceH = frame.height;
+			this.sourceH = frame.height;
 		}
 	}
 
@@ -101,9 +101,11 @@ export default class Texture extends HashObject {
 	 * @param dw
 	 * @param dh
 	 */
-	drawToCanvas(context, dx = 0, dy = 0, sx?, sy?, dw?, dh?) {
+	drawToCanvas(context: CanvasRenderingContext2D, dx = 0, dy = 0, sx?, sy?, dw?, dh?) {
 		const {x, y, width, height, offX, offY} = this;
 
+		console.log(x, y, width, height);
+		console.log(sx || x, sy || y, width, height, dx + offX, dy + offY, dw || width, dh || height);
 		context.drawImage(this.img, sx || x, sy || y, width, height, dx + offX, dy + offY, dw || width, dh || height);
 	}
 

src/core/Transform.ts

+/**
+ * Created by rockyl on 2019-07-10.
+ */
+
+

src/core/context/RenderContext.ts

@@ -346,7 +346,7 @@ export default class RenderContext {
 		let {shortcutCanvas, stageWidth, stageHeight} = this;
 
 		if (!shortcutCanvas) {
-			this.shortcutCanvas = createCanvas();
+			shortcutCanvas = this.shortcutCanvas = createCanvas();
 		}
 		const sx = bounds ? bounds.x || 0 : 0;
 		const sy = bounds ? bounds.y || 0 : 0;

src/core/index.ts

@@ -3,7 +3,7 @@
  */
 
 export {Component} from "./Component";
-export {Node, RootNode} from './Node'
+export {Node, RootNode} from './nodes/Node'
 export {ScillaEvent} from './ScillaEvent'
 export {createCanvas, ScaleMode} from './context/RenderContext';
 export {default as engine, ScillaEngine} from './ScillaEngine'

src/core/interpreter.ts

@@ -4,7 +4,7 @@
  * 配置文件解释器
  */
 
-import {Node} from "../core/Node";
+import {Node} from "./nodes/Node";
 import {ScillaEvent} from "../core/ScillaEvent";
 import {EngineConfig} from "../engine-config";
 import engine from "./ScillaEngine";
@@ -75,11 +75,16 @@ function instantiateConfig(config, root?: Node, pid?: number): Node {
 function setupNode(config, root?: Node, pid?: number): Node {
 	let node: Node = null;
 	if (config) {
-		let {name, uuid, children} = config;
+		let {name, uuid, children, base} = config;
 		if (pid !== undefined && uuid !== undefined) {
 			uuid = pid + '_' + uuid;
 		}
-		node = root || new Node(name, uuid);
+		if (root) {
+			node = root;
+		} else {
+			let temp = engine.getDefByName(base);
+			node = new temp(name, uuid);
+		}
 
 		nodeMap[uuid] = node;
 
@@ -165,6 +170,8 @@ function instantiateComponents(node: Node, config: any) {
  * @param pid
  */
 function injectComponents(node: Node, config: any, pid?: number) {
+	injectComponentProperties(node, config, pid);
+
 	if (config.components) {
 		const components = node.components;
 		for (let i = 0, li = config.components.length; i < li; i++) {
@@ -337,10 +344,10 @@ function transPrefabUUID(uuid, pid: number) {
 	return pid ? pid + '_' + uuid : uuid;
 }
 
-function wrapperScript(script){
+function wrapperScript(script) {
 	try {
 		return new Function('component', 'dataCenter', script);
-	}catch (e) {
+	} catch (e) {
 		console.warn('script is correct :', script);
 	}
 }

src/core/nodes/Circle.ts

@@ -29,25 +29,25 @@ export class Circle extends GraphicNode {
 	/**
 	 * @inheritDoc
 	 */
-	protected draw() {
-		const {currentCanvasContext, bounds: {width, height}, startAngle, endAngle, backToCenter, _margin, _useCacheMode} = this;
+	protected draw(context) {
+		const {bounds: {width, height}, startAngle, endAngle, backToCenter, _margin, _useCacheMode} = this;
 		let offset = _useCacheMode ? _margin : 0;
 
 		const radius = Math.min(width, height) / 2;
 		const pos = offset + radius;
 
 		if(startAngle == 0 && endAngle == 360){
-			currentCanvasContext.arc(pos, pos, radius, 0, 2 * Math.PI);
+			context.arc(pos, pos, radius, 0, 2 * Math.PI);
 		}else{
 			if(backToCenter){
-				currentCanvasContext.moveTo(pos, pos);
+				context.moveTo(pos, pos);
 			}
-			currentCanvasContext.arc(pos, pos, radius, startAngle * Math.PI / 180, endAngle * Math.PI / 180);
+			context.arc(pos, pos, radius, startAngle * Math.PI / 180, endAngle * Math.PI / 180);
 			if(backToCenter){
-				currentCanvasContext.lineTo(pos, pos);
+				context.lineTo(pos, pos);
 			}
 		}
 
-		super.draw();
+		super.draw(context);
 	}
 }

src/core/nodes/GraphicNode.ts

@@ -4,7 +4,7 @@
  * 绘制节点
  */
 
-import {Node} from "../Node";
+import {Node} from "./Node";
 import {dirtyFieldDetector} from "../../tools/decorators";
 import {color} from "../../ReType";
 
@@ -38,6 +38,12 @@ export class GraphicNode extends Node {
 
 	useCacheMode = true;
 
+	measureBounds() {
+		super.measureBounds();
+
+		this._margin = this.borderWidth;
+	}
+
 	protected getUseCacheMode(){
 		return this._useCacheMode && !this.isMask;
 	}

src/core/nodes/Image.ts

+/**
+ * Created by rockyl on 2019-07-11.
+ *
+ * 图片显示类
+ */
+
+import {Node,} from "./Node";
+import Texture from "../Texture";
+import {deepDirtyFieldDetector, dirtyFieldDetector} from "../../tools/decorators";
+import {Vector2D} from "../../support";
+import Bounds from "../../support/Bounds";
+import {Sheet} from "../Sheet";
+
+export class Image extends Node {
+	/**
+	 * 纹理资源
+	 */
+	@dirtyFieldDetector
+	texture: Texture;
+
+	/**
+	 * 填充模式
+	 */
+	@dirtyFieldDetector
+	fillMode: FillMode = FillMode.NORMAL;
+
+	/**
+	 * tiled模式的偏移
+	 */
+	@deepDirtyFieldDetector
+	tiledOffset: Vector2D = new Vector2D();
+
+	/**
+	 * 切片边界配置
+	 */
+	@deepDirtyFieldDetector
+	slicedBounds: Bounds = new Bounds();
+
+	protected _pattern;
+	protected _sheetForSliced: Sheet = new Sheet();
+
+	/**
+	 * 异步资源
+	 * @param promise
+	 */
+	private set async_texture(promise: Promise<Texture>) {
+		if (!promise) {
+			return;
+		}
+		promise.then(
+			(texture) => {
+				this.texture = texture;
+			}
+		)
+	}
+
+	/**
+	 * 重写缓存模式
+	 */
+	protected getUseCacheMode() {
+		return this._useCacheMode || this.fillMode === FillMode.TILED || this.fillMode === FillMode.SLICED;
+	}
+
+	/**
+	 * 准备切片用的图集
+	 */
+	protected prepareSheetForSliced() {
+		if (this.dirty && !this.slicedBounds.isEmpty) {
+			const sheet = this._sheetForSliced;
+			sheet.cleanAllTexture();
+			const {sourceW, sourceH} = this.texture;
+			const {x, y, width, height, right, bottom} = this.slicedBounds;
+
+			const xs = [0, x, right];
+			const ys = [0, y, bottom];
+			const ws = [x, width, sourceW - right];
+			const hs = [y, height, sourceH - bottom];
+
+			const frames = {};
+			for(let i = 0; i < 9 ; i++){
+				let gx = i % 3;
+				let gy = Math.floor(i / 3);
+
+				frames[i] = {x: xs[gx], y: ys[gy], width: ws[gx], height: hs[gy],}
+			}
+			sheet.init(this.texture, frames);
+			sheet.generateAll();
+		}
+	}
+
+	protected draw(context) {
+		super.draw(context);
+		this.drawImage(context);
+	}
+
+	/**
+	 * 根据模式绘制图片
+	 */
+	drawImage(context) {
+		if (!this.texture) {
+			return;
+		}
+
+		const {texture, fillMode, width, height} = this;
+		const {x, y, sourceW, sourceH} = texture;
+
+		let drawWidth = width, drawHeight = height;
+
+		switch (fillMode) {
+			case FillMode.NORMAL:
+				texture.drawToCanvas(context, 0, 0, undefined, undefined, width, height);
+				break;
+			case FillMode.SLICED:
+				this.prepareSheetForSliced();
+
+				const {x: sx, y: sy, right, bottom} = this.slicedBounds;
+				const rightWidth = sourceW - right;
+				const bottomHeight = sourceH - bottom;
+				const xs = [0, sx, drawWidth - rightWidth];
+				const ys = [0, sy, drawHeight - bottomHeight];
+				const ws = [sx, drawWidth - sx - rightWidth, rightWidth];
+				const hs = [sy, drawHeight - sy - bottomHeight, bottomHeight];
+
+				for (let i = 0; i < 9; i++) {
+					const slicedTexture = this._sheetForSliced.getTexture(i);
+
+					let gx = i % 3;
+					let gy = Math.floor(i / 3);
+
+					console.log(xs[gx], ys[gy]);
+					slicedTexture.drawToCanvas(context, xs[gx], ys[gy], undefined, undefined, ws[gx], hs[gy]);
+				}
+				break;
+			case FillMode.TILED:
+				if (!this._pattern || texture['isDirty']) {
+					const textureCanvas = texture.getCacheCanvas();
+					this._pattern = context.createPattern(textureCanvas, 'repeat');
+				}
+
+				if (!this.tiledOffset.isZero) {
+					const {x: offX, y: offY} = this.tiledOffset;
+
+					let x = offX % sourceW;
+					x = x > 0 ? x - sourceW : x;
+
+					let y = offY % sourceH;
+					y = y > 0 ? y - sourceH : y;
+
+					drawWidth -= x;
+					drawHeight -= y;
+
+					context.transform(1, 0, 0, 1, x, y);
+				}
+
+				context.beginPath();
+				context.rect(0, 0, drawWidth, drawHeight);
+				context.closePath();
+				context.fillStyle = this._pattern;
+				context.fill();
+
+				if (!this.tiledOffset.isZero) {
+					//ctx.restore();
+				}
+
+				break;
+		}
+	}
+
+	protected measureRenderSize() {
+		if (this.texture) {
+			const {sourceW, sourceH} = this.texture;
+
+			return {
+				width: sourceW,
+				height: sourceH,
+			}
+		}
+	}
+}
+
+export enum FillMode {
+	/**
+	 * 正常
+	 */
+	NORMAL,
+	/**
+	 * 九宫裁切
+	 */
+	SLICED,
+	/**
+	 * 瓦片
+	 */
+	TILED,
+}

src/core/Node.ts → src/core/nodes/Node.ts

@@ -4,14 +4,14 @@
  * 节点类
  */
 
-import Vector2D from "../support/Vector2D";
-import {deepDirtyFieldDetector, dirtyFieldDetector,} from "../tools/decorators";
-import Matrix from "../support/Matrix";
-import {Bounds} from "../support";
-import {Component, createCanvas, engine, ScillaEngine} from "./index";
-import {bubbling, traverse} from "./utils";
-import {EngineConfig} from "../engine-config";
-import {EventDispatcher} from "./EventDispatcher";
+import Vector2D from "../../support/Vector2D";
+import {deepDirtyFieldDetector, dirtyFieldDetector,} from "../../tools/decorators";
+import Matrix from "../../support/Matrix";
+import {Bounds} from "../../support";
+import {Component, createCanvas, engine, ScillaEngine} from "../index";
+import {bubbling, traverse} from "../utils";
+import {EngineConfig} from "../../engine-config";
+import {EventDispatcher} from "../EventDispatcher";
 
 export class Node extends EventDispatcher {
 	name = 'Node';
@@ -104,6 +104,10 @@ export class Node extends EventDispatcher {
 	 * 全局逆矩阵
 	 */
 	protected _globalInvertMatrix: Matrix = Matrix.create();
+	/**
+	 * 真实渲染透明度
+	 */
+	protected _renderVisible: boolean;
 	/**
 	 * 真实渲染透明度
 	 */
@@ -117,13 +121,13 @@ export class Node extends EventDispatcher {
 	 */
 	protected _globalPosition: Vector2D = new Vector2D();
 	/**
-	 * 渲染边界
+	 * 锚点实际偏移
 	 */
-	protected _bounds = new Bounds();
+	protected _anchorOffset: Vector2D = new Vector2D();
 	/**
-	 * 锚点偏移
+	 * 渲染边界
 	 */
-	//protected _anchorOffset: Vector2D = new Vector2D();
+	protected _bounds = new Bounds();
 	/**
 	 * 尺寸
 	 * 对于不同的子类渲染都有不同的效果
@@ -575,6 +579,7 @@ export class Node extends EventDispatcher {
 		if (!this.enabled) {
 			return;
 		}
+
 		this.preUpdate(t);
 		this.updateComponents(t);
 		this.onUpdate(t);
@@ -712,20 +717,7 @@ export class Node extends EventDispatcher {
 	 * @param t
 	 */
 	protected preUpdate(t) {
-		if (this.dirty) {
-			this.updateLocalMatrix();
-		}
-		this.updateGlobalMatrix();
 
-		if (this.dirty) {
-			if (this.useCacheMode) {
-				this.readyCacheCanvas();
-			}
-			this.measureBounds();
-			if (this.useCacheMode) {
-				this.updateCacheCanvas();
-			}
-		}
 	}
 
 	/**
@@ -757,9 +749,24 @@ export class Node extends EventDispatcher {
 	 * @param t
 	 */
 	protected windUpUpdate(t) {
+		if (this.dirty) {
+			this.updateLocalMatrix();
+		}
+		this.updateGlobalMatrix();
+
+		if (this.dirty) {
+			if (this.useCacheMode) {
+				this.readyCacheCanvas();
+			}
+			this.measureBounds();
+			if (this.useCacheMode) {
+				this.updateCacheCanvas();
+			}
+		}
+
 		this.transformToLocal();
 
-		if (this.visible) {
+		if (this._renderVisible) {
 			this.render();
 		}
 
@@ -796,11 +803,17 @@ export class Node extends EventDispatcher {
 			return;
 		}
 
-		const {bounds, explicitWidth, explicitHeight} = this;
+		const {bounds, explicitWidth, explicitHeight, anchor: {x, y}} = this;
 
 		let renderSize: any = this.measureRenderSize();
-		bounds.width = renderSize ? renderSize.width : isNaN(explicitWidth) ? 0 : explicitWidth;
-		bounds.height = renderSize ? renderSize.height : isNaN(explicitHeight) ? 0 : explicitHeight;
+		bounds.width = isNaN(explicitWidth) ? renderSize ? renderSize.width :  0 : explicitWidth;
+		bounds.height = isNaN(explicitHeight) ? renderSize ? renderSize.height : 0 : explicitHeight;
+
+		const anchorOffsetX = this._anchorOffset.x = bounds.width * x;
+		const anchorOffsetY = this._anchorOffset.y = bounds.height * y;
+
+		bounds.x = -anchorOffsetX;
+		bounds.y = -anchorOffsetY;
 	}
 
 	/**
@@ -822,7 +835,6 @@ export class Node extends EventDispatcher {
 			if (this.useCacheMode) {
 				this.draw(this.currentCanvasContext);
 			}
-			this.dirty = false;
 		}
 
 		if (this.useCacheMode) {
@@ -964,12 +976,19 @@ export class Node extends EventDispatcher {
 	}
 
 	/**
-	 * 真实渲染透明度
+	 * 实际渲染透明度
 	 */
 	get renderAlpha(): number {
 		return this._renderAlpha;
 	}
 
+	/**
+	 * 实际可见性
+	 */
+	get renderVisible(): boolean {
+		return this._renderVisible;
+	}
+
 	/**
 	 * 渲染边界
 	 */
@@ -1016,10 +1035,10 @@ export class Node extends EventDispatcher {
 		const matrix = this._localMatrix;
 		matrix.identity();
 
-		matrix.translate(
+		/*matrix.translate(
 			-ax * width,
 			-ay * height,
-		);
+		);*/
 
 		matrix.scale(sx, sy);
 		matrix.rotate(rotation * Math.PI / 180);
@@ -1043,9 +1062,11 @@ export class Node extends EventDispatcher {
 
 		if (parent) {
 			this._renderAlpha = parent.renderAlpha * this.alpha;
+			this._renderVisible = parent.renderVisible && this.visible;
 			_globalMatrix.concat(parent.getMatrix(false));
 		} else {
 			this._renderAlpha = this.alpha;
+			this._renderVisible = this.visible;
 		}
 	}
 
@@ -1053,8 +1074,12 @@ export class Node extends EventDispatcher {
 	 * 执行矩阵转换
 	 */
 	protected transformToLocal() {
+		const {_anchorOffset: {x: ax, y: ay}} = this;
+
 		const {a, b, c, d, tx, ty} = this.getMatrix(false, true);
-		this.context.setTransform(a, b, c, d, tx, ty);
+		const offX = ax * a + ay * c;
+		const offY = ax * b + ay * d;
+		this.context.setTransform(a, b, c, d, tx - offX, ty - offY);
 	}
 
 	/**

src/core/nodes/index.ts

@@ -2,6 +2,8 @@
  * Created by rockyl on 2019-07-05.
  */
 
+export * from './Node'
 export * from './GraphicNode'
 export * from './Rect'
 export * from './Circle'
+export * from './Image'

src/core/utils.ts

@@ -4,7 +4,7 @@
  * 节点相关工具
  */
 
-import {Node} from "./Node";
+import {Node} from "./nodes/Node";
 
 /**
  * 节点遍历(先序遍历)
@@ -33,7 +33,7 @@ export function traverse(target: Node, hitChild: (child: Node, ...params) => boo
 		}
 	}
 
-	fullCallback && fullCallback(target);
+	!interrupt && fullCallback && fullCallback(target);
 }
 
 /**
@@ -46,8 +46,6 @@ export function traverse(target: Node, hitChild: (child: Node, ...params) => boo
  * @param params 其他参数
  */
 export function traversePostorder(target: Node, hitChild: (child: Node, ...params) => boolean, level = -1, includeSelf = false, fullCallback?: (current: Node) => void, ...params) {
-	let interrupt;
-
 	if (level !== 0) {
 		for (let i = target.children.length - 1; i >= 0; i--) {
 			const child = target.children[i];
@@ -68,7 +66,7 @@ export function traversePostorder(target: Node, hitChild: (child: Node, ...param
 		hitChild(target, ...params);
 	}
 
-	!interrupt && fullCallback && fullCallback(target);
+	fullCallback && fullCallback(target);
 }
 
 /**