Commit a08ec153 authored by rockyl's avatar rockyl

增加脚本系统

完善节点类型
parent d43f2a98
This diff is collapsed.
This diff is collapsed.
...@@ -32,6 +32,8 @@ ...@@ -32,6 +32,8 @@
<script type="text/javascript" src="../build/render.min.js"></script> <script type="text/javascript" src="../build/render.min.js"></script>
<div id="cusEngine" style="line-height:0;font-size:0"></div> <div id="cusEngine" style="line-height:0;font-size:0"></div>
<script src="view-data.js"></script>
<script src="view-interpreter.js"></script>
<script src="game-stage.js"></script> <script src="game-stage.js"></script>
......
...@@ -2,42 +2,35 @@ ...@@ -2,42 +2,35 @@
* Created by rockyl on 2019-11-06. * Created by rockyl on 2019-11-06.
*/ */
let stage = new render.Stage( let stage = new engine.Stage(
"cusEngine", "cusEngine",
750, 750,
1334, 1334,
60, 60,
render.StageScaleMode.FIXED_WIDTH, engine.StageScaleMode.FIXED_WIDTH,
render.RENDERER_TYPE.WEBGL engine.RENDERER_TYPE.WEBGL
); );
//启动循环 //启动循环
render.Stage.flushAll(); engine.Stage.flushAll();
let gameStage = new render.GameStage(stage); let gameStage = new engine.GameStage(stage);
stage.addChild(gameStage); stage.addChild(gameStage);
let sceneEntry = new render.Container(); engine.loadAssets(data.assets, function (loaded, total) {
sceneEntry.percentWidth = 100; //console.log(`assets process: ${loaded}/${total}`)
sceneEntry.percentHeight = 100; }).then(
() => {
let bg = new render.Rect(); console.log('assets loaded');
bg.percentWidth = 100; start();
bg.percentHeight = 100; }
bg.fillColor = 'gray'; ).catch(e=>{
sceneEntry.addChild(bg); console.log(e);
});
let ball = new render.Circle();
ball.radius = 50; function start() {
ball.fillColor = 'green'; let sceneEntry = instantiate(data.views[0]);
sceneEntry.addChild(ball); gameStage.sceneContainer.push(sceneEntry);
gameStage.sceneContainer.push(sceneEntry); let dialog = instantiate(data.views[1]);
gameStage.popupContainer.push(dialog);
/*let dialog = new render.Container(); }
let dbg = new render.Shape();
dbg.beginFill(0x8888ff);
dbg.drawRect(0, 0, 100, 100);
dbg.endFill();
dialog.addChild(dbg);
gameStage.popupContainer.push(dialog);*/
/**
* Created by rockyl on 2019-11-07.
*/
const data = {
"views": [
{
name: 'view1',
type: 'node',
properties: {
width: '100%',
height: '100%',
},
uuid: '3a357816-5581-41ba-aa6f-4a6cc40ae396',
children: [
{
name: "bg",
type: "rect",
properties: {
width: '100%',
height: '100%',
fillColor: "#1E2127",
},
uuid: "f97bbf76-6923-4669-b5a3-e6382753e49a",
},
{
name: "label",
type: "label",
properties: {
width: '100%',
height: '100%',
fillColor: "#44ff00",
text: 'Hello',
size: 30,
},
uuid: "f97bbf76-6923-4669-b5a3-e6382753e49a",
},
]
},
{
name: 'view2',
type: 'node',
properties: {
horizonCenter: 0,
verticalCenter: 0,
width: '80%',
height: 400,
},
uuid: '3a357816-5581-41ba-aa6f-4a6cc40ae396',
children: [
{
name: "bg",
type: "rect",
properties: {
width: '100%',
height: '100%',
borderRadius: 10,
fillColor: "orange",
},
uuid: "f97bbf76-6923-4669-b5a3-e6382753e49a",
},
{
name: "img",
type: "image",
properties: {
source: 'asset://0a5f2064-f5b4-41a9-8a54-2085e208d20f'
},
uuid: "f97bbf76-6923-4669-b5a3-e6382753e49a",
},
]
},
],
"assets": [
{
"name": "face",
"ext": ".png",
"url": "//yun.duiba.com.cn/aurora/58323a0469a7467c99b34f8933ea65b507a0c655.png",
"uuid": "3e496939-5fe6-42f2-b8fa-42c7a742e880"
}, {
"name": "还以是bug",
"ext": ".jpg",
"url": "//yun.duiba.com.cn/aurora/094832ace87c94bdb9e4a7821b3a3ebca0df2cd7.jpg",
"uuid": "ec67a8a0-8708-43a4-888e-efb0fe7c2bd6"
}, {
"name": "嘿嘿",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/1ad10a4cf3488ef1400af1d6f353d9c577fe1049.gif",
"uuid": "429803eb-0f68-4071-b68c-468980883ac4"
}, {
"name": "1643017",
"ext": ".jpg",
"url": "//yun.duiba.com.cn/aurora/2e4adf3d8646ffbd027038cb2c6627a6bca44e44.jpg",
"uuid": "cc1ad757-ff4c-4cb9-b629-be355119d018"
}, {
"name": "0",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/616a413facbd406b81daac809a52bd0b648a7f4c.gif",
"uuid": "0a5f2064-f5b4-41a9-8a54-2085e208d20f"
}, {
"name": "3",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/e052cb4a88d63330c37ecaf55ae8e7eb2246c433.gif",
"uuid": "e4dacdd2-064f-413e-a8f0-6425ce6dcf12"
}, {
"name": "5",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/881193ea1bd975c8a59f38f2d1f0d0094db6ec7a.gif",
"uuid": "bf822d51-a1b1-4ab6-8f49-a821863731d0"
}, {
"name": "4",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/2df4a5c5238f86704388517d2ba0faa6782fea1e.gif",
"uuid": "9c1d46b4-d2f1-4733-8b93-39b2bb4db9d1"
}, {
"name": "1",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/0bc24c7bb68e3691bad89c8ae096b253af874a73.gif",
"uuid": "db076340-e1db-4e2d-8bb2-7cc32ccdee43"
}, {
"name": "7",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/3e218541244d1ed1192274ad49ea70588b6cd0dc.gif",
"uuid": "02aa47c3-dbdf-43d2-8cdc-869cab544bcc"
}, {
"name": "2",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/1e1344fabf25cf2ea6f1407cd42afc1f1de0bb07.gif",
"uuid": "264f7a8d-475e-4fd0-ac83-96e13a7702f3"
}, {
"name": "8",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/90080b186e0507b70f64c2020880dd1ddd3b7cd8.gif",
"uuid": "ec63930b-8aff-4108-9ceb-ddf9353d4412"
}, {
"name": "0",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/616a413facbd406b81daac809a52bd0b648a7f4c.gif",
"uuid": "7c475d4d-0ae2-4b9a-81ff-76fb8264721f"
}, {
"name": "9",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/f41b70c1003ff703386a5a80ed7092db5fdc11f4.gif",
"uuid": "473b82ec-c9b9-43d7-b2e5-b5399a55d239"
}, {
"name": "12",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/99660ca0a9a578cd6c5eb38b1f35aee9a77849b3.gif",
"uuid": "84f549d3-9bb1-4066-9668-3705e94b5891"
}, {
"name": "11",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/f88c5de6bb6ab80f24cc56978e92cedf4af201f0.gif",
"uuid": "a4470420-60bd-4578-a2dc-100663ba6256"
}, {
"name": "13",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/c5c446eba840899d364bcdb010a2aea8d2ae02ab.gif",
"uuid": "7383d2db-43dd-408a-aa69-261bd39865ac"
}, {
"name": "6",
"ext": ".gif",
"url": "//yun.duiba.com.cn/aurora/881193ea1bd975c8a59f38f2d1f0d0094db6ec7a.gif",
"uuid": "894a28f8-a814-4c8c-a5d9-619194b3073d"
}, {
"name": "btn-join",
"ext": ".png",
"url": "//yun.duiba.com.cn/aurora/e50e0fe70f4b2c96d2deee1d93a0a2444732be6a.png",
"uuid": "e3301bc4-7b51-4868-a613-26298f87988b"
}, {
"name": "bg",
"ext": ".jpg",
"url": "//yun.duiba.com.cn/aurora/7dbe10dba2a92d830f0f9ff72f3d82e07a4c4649.jpg",
"uuid": "bab58ec1-24b1-4d5d-9c95-7014b9915cb3"
}, {
"name": "1643017",
"ext": ".png",
"uuid": "54f7916f-dc10-49f7-b3b1-0bda9d4f5bcd",
"url": "//yun.duiba.com.cn/aurora/4090d0acf7dbf29cd6ab0690795e0b00b715280c.png"
}, {
"name": "bg",
"ext": ".png",
"uuid": "5fe14ca0-5b86-405e-98a6-54ca733f2180",
"url": "//yun.duiba.com.cn/aurora/070159098034ae2cd8c8e4bf4f47b1d45b87024a.png"
}, {
"name": "rule_button",
"ext": ".png",
"uuid": "82a9d493-078a-4b7c-8352-616abc99f24a",
"url": "//yun.duiba.com.cn/aurora/d0c3ed2bf9abc5748c01eb88abb7e0830669b1c5.png"
}, {
"name": "wheel_items",
"ext": ".png",
"uuid": "b899e2f0-36da-42dc-a9ac-c8f4093e4457",
"url": "//yun.duiba.com.cn/aurora/897ee802eb89999c2019c683c084f4b7e2d7f554.png"
}, {
"name": "wheel_bg",
"ext": ".png",
"uuid": "8f531f60-b48e-4a7a-bd7a-9488a3c3dd2d",
"url": "//yun.duiba.com.cn/aurora/479cbb31bfdaee48893bf34f7d0c8fc702b1459a.png"
}, {
"name": "start_bg",
"ext": ".png",
"uuid": "62fe5f9b-47ec-4c1e-b508-f566501caa72",
"url": "//yun.duiba.com.cn/aurora/3191ba684512b9e9391ab4a9d2a2df31cad4825d.png"
}, {
"name": "0",
"ext": ".png",
"uuid": "562af6d0-6b73-4de8-bed0-ed3a4507962c",
"url": "//yun.duiba.com.cn/aurora/be2fa0d9e91b58d9aafcd18f7934784742069cb6.png"
}, {
"name": "1",
"ext": ".png",
"uuid": "6cf1bc08-bcc8-4cec-88d8-3e979b35dd0f",
"url": "//yun.duiba.com.cn/aurora/3f64f753e272d17a1f5807ddf1a8965a0e2de9d5.png"
}, {
"name": "0",
"ext": ".png",
"uuid": "378851d3-6664-4b0e-8407-342f4ffaf334",
"url": "//yun.duiba.com.cn/aurora/3c292a9c6c5b1a3dab684e95d1f7b7cb4f369a8a.png"
}, {
"name": "1",
"ext": ".png",
"uuid": "dee35c49-db44-4722-a412-a8b7123d20b7",
"url": "//yun.duiba.com.cn/aurora/b22420f2322326359e2b3e1dae66dc7e34ce6978.png"
}, {
"name": "bg",
"ext": ".png",
"uuid": "2b0cc6bd-fc10-43ee-a217-aaf1c40a0ad3",
"url": "//yun.duiba.com.cn/aurora/93fbb49529a3b4617f4cdc41dba7c297989baa5e.png"
}],
"dataMapping": [],
processes: [
{
id: 'main',
name: 'Main',
options: {},
subEntry: 'a1',
sub: {
a1: {
uuid: 'a1',
alias: '入口',
meta: 'entry',
output: {
success: ['a2'],
},
design: {
x: 10,
y: 10,
},
},
a2: {
uuid: 'a2',
alias: 'test',
meta: 'test',
options: {
text: 'hello',
},
output: {
success: [],
failed: [],
},
design: {
x: 20,
y: 100,
},
},
}
},
{
id: 'test',
name: 'Test',
options: {
text: {alias: '文本', type: 'string', default: '你好'},
num: {alias: '数字', type: 'number', default: 1},
type: {alias: '类型', type: 'enum', enum: ['rotate', 'jump', 'breath'], default: 'rotate'},
autoPlay: {alias: '自动播放', type: 'boolean', default: false},
color: {alias: '颜色', type: 'color', default: '#123456'},
asset: {alias: '素材', type: 'asset',},
},
output: ['success', 'failed'],
script: "console.log('test');",
},
],
};
/**
* Created by rockyl on 2019-11-07.
*/
const nodeTypeMapping = {
node: 'engine.Container',
rect: 'engine.Rect',
label: 'engine.TextField',
image: 'engine.Image',
};
function instantiate(config) {
return instantiateView(config);
}
const percentKeys = ['width', 'height'];
function propertyParse(key, node, properties) {
let value = properties[key];
let targetKey = key;
if (percentKeys.indexOf(key) >= 0) {
if (typeof value === 'string') {
targetKey = 'percent' + key[0].toUpperCase() + key.substr(1);
value = parseInt(value);
}
}
node[targetKey] = value;
}
function instantiateView(config) {
const {type} = config;
const nodeTypeDef = eval(nodeTypeMapping[type]);
if (!nodeTypeDef) {
console.warn('error node type:', type);
return;
}
const {name, uuid, properties, children} = config;
const node = new nodeTypeDef();
node.name = name;
node.uuid = uuid;
for (let key in properties) {
propertyParse(key, node, properties);
}
if (children && children.length > 0) {
for (let childConfig of children) {
const childNode = instantiateView(childConfig);
if (childNode) {
node.addChild(childNode);
}
}
}
return node;
}
...@@ -4,7 +4,7 @@ import {Point} from '../math'; ...@@ -4,7 +4,7 @@ import {Point} from '../math';
import CanvasRenderer from '../renderers/CanvasRenderer'; import CanvasRenderer from '../renderers/CanvasRenderer';
import {Event} from "../events/Event" import {Event} from "../events/Event"
import {WebglRenderer} from '../renderers/WebglRenderer'; import {WebglRenderer} from '../renderers/WebglRenderer';
import {applyAutoAdjust} from "../../zeroing/auto-adjust"; import {applyAutoAdjust, applyScript} from "../../zeroing";
/** /**
* 容器类 * 容器类
...@@ -12,6 +12,7 @@ import {applyAutoAdjust} from "../../zeroing/auto-adjust"; ...@@ -12,6 +12,7 @@ import {applyAutoAdjust} from "../../zeroing/auto-adjust";
* @extends DisplayObject * @extends DisplayObject
*/ */
@applyAutoAdjust @applyAutoAdjust
@applyScript
export default class Container extends DisplayObject { export default class Container extends DisplayObject {
/** /**
......
...@@ -435,6 +435,8 @@ export default class Sprite extends Container { ...@@ -435,6 +435,8 @@ export default class Sprite extends Container {
} }
} }
//一些静态类方法 //一些静态类方法
/** /**
* 方便创建sprite * 方便创建sprite
......
...@@ -52,7 +52,7 @@ export class Loader extends EventDispatcher { ...@@ -52,7 +52,7 @@ export class Loader extends EventDispatcher {
}, url) }, url)
} }
loadJson(callback: Function, url: string) { loadRaw(callback: Function, url: string, type: 'text'|'json') {
//每次都要new //每次都要new
let _req; let _req;
if (window["XMLHttpRequest"]) { if (window["XMLHttpRequest"]) {
...@@ -64,7 +64,7 @@ export class Loader extends EventDispatcher { ...@@ -64,7 +64,7 @@ export class Loader extends EventDispatcher {
} }
if (_req != null) { if (_req != null) {
_req.open("GET", url, true); _req.open("GET", url, true);
_req.responseType = "json";//不设置,后面得用responseText取,设置了就直接用response _req.responseType = type;
_req.send(); _req.send();
_req.onreadystatechange = () => { _req.onreadystatechange = () => {
if (_req.readyState == 4 && _req.status == 200) { if (_req.readyState == 4 && _req.status == 200) {
...@@ -78,10 +78,22 @@ export class Loader extends EventDispatcher { ...@@ -78,10 +78,22 @@ export class Loader extends EventDispatcher {
} }
} }
loadTexture(url: string, uuid?) { loadJson(callback: Function, url: string) {
this.loadImage((s, img) => { this.loadRaw(callback, url, 'json');
if (s) this.cache(url, img) }
TextureCache[uuid || url] = Texture.from(img);
loadText(callback: Function, url: string) {
this.loadRaw(callback, url, 'text');
}
loadTexture(callback: Function, url: string) {
this.loadImage((s, payload) => {
if (s){
this.cache(url, payload);
callback(s, TextureCache[url] = Texture.from(payload));
}else{
callback(s, payload);
}
}, url) }, url)
} }
...@@ -114,7 +126,7 @@ export class Loader extends EventDispatcher { ...@@ -114,7 +126,7 @@ export class Loader extends EventDispatcher {
cache(name: string, data: any) { cache(name: string, data: any) {
if (this.caches[name]) { if (this.caches[name]) {
console.log("覆盖原先数据:" + name); //console.log("覆盖原先数据:" + name);
} }
this.caches[name] = data this.caches[name] = data
} }
......
import { Loader } from "../2d/loader/Loader";
import { Texture } from "../2d/texture";
const loader = new Loader;
const caches={}
export function loadTexture(url: string) {
loader.loadImage(() => {
}, url,)
}
//loadText和loadJson
export function getRes() {
}
/**
* Created by rockyl on 2019-11-07.
*/
import {Loader} from "..";
let assetsConfig;
const loaderMapping = {
'.png': 'Image',
'.jpg': 'Image',
'.jpeg': 'Image',
'.gif': 'Image',
'.svg': 'Image',
'.txt': 'Text',
'.json': 'Json',
'.svga': 'Svga',
'.sht': 'Sheet',
};
const loader = new Loader();
/**
* 加载素材
*/
export function loadAssets(config, onProcess) {
assetsConfig = config;
let total = assetsConfig.length;
let loaded = 0;
let failedList = [];
return Promise.all(
assetsConfig.map(assetConfig => {
return new Promise((resolve) => {
const loadFunc = loaderMapping[assetConfig.ext] || 'Raw';
loader['load' + loadFunc](function (result, payload) {
if (result) {
loaded++;
onProcess(loaded, total);
} else {
failedList.push(assetConfig.url);
}
resolve();
}, assetConfig.url);
})
})
).then(
() => {
if (loaded < total) {
return Promise.reject('some asset can not loaded: ' + failedList.join(', '));
}
}
)
}
/**
* 根据uuid获取素材配置
* @param uuid
*/
export function getAssetByUUID(uuid) {
return assetsConfig.find(item => item.uuid === uuid);
}
/** /**
* Created by rockyl on 2019-11-06. * Created by rockyl on 2019-11-06.
*
* 自适应功能
*/ */
import {Event} from "../2d/events"; import {Event} from "../2d/events";
...@@ -49,6 +51,10 @@ export function applyAutoAdjust(ctor: Function) { ...@@ -49,6 +51,10 @@ export function applyAutoAdjust(ctor: Function) {
if (this.__sizeDirty) { if (this.__sizeDirty) {
this.__sizeDirty = false; this.__sizeDirty = false;
this.adjustLayout();
}
};
ctor.prototype.adjustLayout = function () {
const that = this; const that = this;
const {width: pWidth, height: pHeight} = this.parent; const {width: pWidth, height: pHeight} = this.parent;
const {width, height} = this; const {width, height} = this;
...@@ -101,7 +107,6 @@ export function applyAutoAdjust(ctor: Function) { ...@@ -101,7 +107,6 @@ export function applyAutoAdjust(ctor: Function) {
applyPercentHeight(); applyPercentHeight();
} }
} }
}
}; };
for (let key in new AdjustData()) for (let key in new AdjustData())
Object.defineProperty(ctor.prototype, key, { Object.defineProperty(ctor.prototype, key, {
......
...@@ -4,4 +4,7 @@ ...@@ -4,4 +4,7 @@
export * from './GameStage' export * from './GameStage'
export * from './StackContainer' export * from './StackContainer'
export * from './shapes' export * from './nodes'
export * from './assets-manager'
export * from './auto-adjust'
export * from './script-manager'
/**
* Created by rockyl on 2019-11-07.
*/
import {Sprite} from "../../2d/display";
import Texture from "../../2d/texture/Texture";
import {getAssetByUUID} from "../assets-manager";
const assetScheme = 'asset://';
export class Image extends Sprite {
private _source: string;
get source() {
return this._source;
}
set source(v) {
if (this._source !== v) {
this._source = v;
this.updateSource();
}
}
private updateSource() {
let url = this._source;
if (this._source.indexOf(assetScheme) === 0) {
let uuid = this._source.replace(assetScheme, '');
const assetConfig = getAssetByUUID(uuid);
url = assetConfig.url;
}
this.texture = Texture.fromImage(url);
}
}
/**
* Created by rockyl on 2019-11-07.
*/
export * from './shapes'
export * from './Image'
\ No newline at end of file
/** /**
* Created by rockyl on 2019-11-06. * Created by rockyl on 2019-11-06.
*/ */
import {Shape} from ".."; import {Shape} from "../../";
import {Event} from "../2d/events"; import {Event} from "../../2d/events";
import {dirtyFieldDetector} from "./decorators"; import {dirtyFieldDetector} from "../decorators";
/** /**
* 图形基类 * 图形基类
...@@ -75,13 +75,11 @@ export class Rect extends ShapeBase { ...@@ -75,13 +75,11 @@ export class Rect extends ShapeBase {
* 圆形 * 圆形
*/ */
export class Circle extends ShapeBase { export class Circle extends ShapeBase {
@dirtyFieldDetector
radius: number = 0;
protected redraw() { protected redraw() {
super.redraw(); super.redraw();
const {radius} = this; const {width, height} = this;
const radius = Math.min(width, height) / 2;
this.drawCircle(radius, radius, radius); this.drawCircle(radius, radius, radius);
} }
......
/**
* Created by rockyl on 2019-11-07.
*
* 脚本功能
*/
const scriptDefs = {};
/**
* 应用脚本
* @param ctor
*/
export function applyScript(ctor: Function) {
}
/**
* 脚本接口
*/
export interface IScript {
name: string;
keepAlive: boolean;
mounted();
destroy();
update();
}
/**
* 注册脚本定义
* @param name
* @param def
*/
export function registerScriptDef(name, def) {
scriptDefs[name] = def;
}
/**
* 脚本容器
*/
class ScriptsContainer {
private _scripts: IScript[] = [];
/**
* 增加一个脚本
* @param name
* @param options
*/
add(name, options): IScript {
let def = scriptDefs[name];
if (!def) {
console.warn('script def not exists');
return;
}
let script = new def();
this._scripts.push(script);
script.mounted();
return script;
}
/**
* 移除一个脚本
* @param index
*/
remove(index): IScript {
let script = this._scripts.splice(index, 1)[0];
if (script) {
script.destroy();
}
return script;
}
/**
* 获取所有脚本
*/
get all(): IScript[] {
return this._scripts;
}
/**
* 根据名字获取脚本
* @param name
*/
get(name): IScript[] {
return this._scripts.filter(script => script.name === name);
}
/**
* 更新脚本时钟
*/
update(t) {
}
}
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