Commit a08ec153 authored by rockyl's avatar rockyl

增加脚本系统

完善节点类型
parent d43f2a98
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -32,6 +32,8 @@
<script type="text/javascript" src="../build/render.min.js"></script>
<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>
......
......@@ -2,42 +2,35 @@
* Created by rockyl on 2019-11-06.
*/
let stage = new render.Stage(
let stage = new engine.Stage(
"cusEngine",
750,
1334,
60,
render.StageScaleMode.FIXED_WIDTH,
render.RENDERER_TYPE.WEBGL
engine.StageScaleMode.FIXED_WIDTH,
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);
let sceneEntry = new render.Container();
sceneEntry.percentWidth = 100;
sceneEntry.percentHeight = 100;
let bg = new render.Rect();
bg.percentWidth = 100;
bg.percentHeight = 100;
bg.fillColor = 'gray';
sceneEntry.addChild(bg);
let ball = new render.Circle();
ball.radius = 50;
ball.fillColor = 'green';
sceneEntry.addChild(ball);
gameStage.sceneContainer.push(sceneEntry);
/*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);*/
engine.loadAssets(data.assets, function (loaded, total) {
//console.log(`assets process: ${loaded}/${total}`)
}).then(
() => {
console.log('assets loaded');
start();
}
).catch(e=>{
console.log(e);
});
function start() {
let sceneEntry = instantiate(data.views[0]);
gameStage.sceneContainer.push(sceneEntry);
let dialog = instantiate(data.views[1]);
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';
import CanvasRenderer from '../renderers/CanvasRenderer';
import {Event} from "../events/Event"
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";
* @extends DisplayObject
*/
@applyAutoAdjust
@applyScript
export default class Container extends DisplayObject {
/**
......
......@@ -435,6 +435,8 @@ export default class Sprite extends Container {
}
}
//一些静态类方法
/**
* 方便创建sprite
......
......@@ -52,7 +52,7 @@ export class Loader extends EventDispatcher {
}, url)
}
loadJson(callback: Function, url: string) {
loadRaw(callback: Function, url: string, type: 'text'|'json') {
//每次都要new
let _req;
if (window["XMLHttpRequest"]) {
......@@ -64,7 +64,7 @@ export class Loader extends EventDispatcher {
}
if (_req != null) {
_req.open("GET", url, true);
_req.responseType = "json";//不设置,后面得用responseText取,设置了就直接用response
_req.responseType = type;
_req.send();
_req.onreadystatechange = () => {
if (_req.readyState == 4 && _req.status == 200) {
......@@ -78,10 +78,22 @@ export class Loader extends EventDispatcher {
}
}
loadTexture(url: string, uuid?) {
this.loadImage((s, img) => {
if (s) this.cache(url, img)
TextureCache[uuid || url] = Texture.from(img);
loadJson(callback: Function, url: string) {
this.loadRaw(callback, url, 'json');
}
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)
}
......@@ -114,7 +126,7 @@ export class Loader extends EventDispatcher {
cache(name: string, data: any) {
if (this.caches[name]) {
console.log("覆盖原先数据:" + name);
//console.log("覆盖原先数据:" + name);
}
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.
*
* 自适应功能
*/
import {Event} from "../2d/events";
......@@ -49,57 +51,60 @@ export function applyAutoAdjust(ctor: Function) {
if (this.__sizeDirty) {
this.__sizeDirty = false;
const that = this;
const {width: pWidth, height: pHeight} = this.parent;
const {width, height} = this;
const {percentWidth, percentHeight, left, top, right, bottom, horizonCenter, verticalCenter} = this.adjustData;
this.adjustLayout();
}
};
ctor.prototype.adjustLayout = function () {
const that = this;
const {width: pWidth, height: pHeight} = this.parent;
const {width, height} = this;
const {percentWidth, percentHeight, left, top, right, bottom, horizonCenter, verticalCenter} = this.adjustData;
const applyPercentWidth = function () {
if (t(percentWidth)) {
that.width = pWidth * percentWidth / 100;
}
};
const applyPercentHeight = function () {
if (t(percentHeight)) {
that.height = pHeight * percentHeight / 100;
}
};
const applyPercentWidth = function () {
if (t(percentWidth)) {
that.width = pWidth * percentWidth / 100;
}
};
const applyPercentHeight = function () {
if (t(percentHeight)) {
that.height = pHeight * percentHeight / 100;
}
};
let pw = true, ph = true;
if (t(horizonCenter)) {
applyPercentWidth();
this.x = (pWidth - this.width) / 2 + horizonCenter;
} else {
if (t(left)) {
this.x = left;
if (t(right)) {
this.width = pWidth - left - right;
pw = false;
}
} else if (t(right)) {
this.x = pWidth - width - right;
}
if (pw) {
applyPercentWidth();
let pw = true, ph = true;
if (t(horizonCenter)) {
applyPercentWidth();
this.x = (pWidth - this.width) / 2 + horizonCenter;
} else {
if (t(left)) {
this.x = left;
if (t(right)) {
this.width = pWidth - left - right;
pw = false;
}
} else if (t(right)) {
this.x = pWidth - width - right;
}
if (pw) {
applyPercentWidth();
}
}
if (t(verticalCenter)) {
applyPercentHeight();
this.y = (pHeight - this.height) / 2 + verticalCenter;
} else {
if (t(top)) {
this.y = top;
if (t(bottom)) {
this.height = pHeight - top - bottom;
ph = false;
}
} else if (t(bottom)) {
this.y = pHeight - height - bottom;
}
if (ph) {
applyPercentHeight();
if (t(verticalCenter)) {
applyPercentHeight();
this.y = (pHeight - this.height) / 2 + verticalCenter;
} else {
if (t(top)) {
this.y = top;
if (t(bottom)) {
this.height = pHeight - top - bottom;
ph = false;
}
} else if (t(bottom)) {
this.y = pHeight - height - bottom;
}
if (ph) {
applyPercentHeight();
}
}
};
......
/**
* Created by rockyl on 2019-11-06.
*/
export * from './GameStage'
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.
*/
import {Shape} from "..";
import {Event} from "../2d/events";
import {dirtyFieldDetector} from "./decorators";
import {Shape} from "../../";
import {Event} from "../../2d/events";
import {dirtyFieldDetector} from "../decorators";
/**
* 图形基类
......@@ -75,13 +75,11 @@ export class Rect extends ShapeBase {
* 圆形
*/
export class Circle extends ShapeBase {
@dirtyFieldDetector
radius: number = 0;
protected redraw() {
super.redraw();
const {radius} = this;
const {width, height} = this;
const radius = Math.min(width, height) / 2;
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