oce.js

oce

oce是一个简单易用的精灵（舞台元件）控制框架，基于2D引擎pixijs，可用于制作带有交互操作的简单动画场景。

可用于基于H5画布的PPT制作，简单的游戏，互动视觉界面等。

用法

安装

npm

npm install ocean-stage

yarn

yarn add ocean-stage

引用

import {Game,Stage,Display,Resources} from 'oce.js';
// 创建应用
const game = new Game(document.body, {
    width: 2048, 
    height: 1536,
    backgroundColor: 0xFFFFFF
});
// 创建舞台
const stage = new Stage();
game.addStage(stage);
// 元件数据对象
const beanDatas;
const urls = beanDatas.map(n => n.src);
// 添加外部元件资源
Resources.loader('123', urls).then(res => {
    for (var key in beanDatas) {
        addBean(beanDatas[key]);
    }
})
 

数据格式

beanDatas数据格式

[
    {
        "src": "http://47.103.50.205:91/car.jpg",
        "id": 123,
        // 类型
        "type": "image",
        // 基本属性
        "property": {
            "x": 50,
            "y": 50
        },
        // eventData触发事件
        "events": eventData,
    }
]

eventData 元件控制元件的数据格式

// 元件触发的事件列队
[{
    //绑定的元件需要需要触发的事件名称
    "name": "click",
    // 触发后需要处理的动作内容
    "content": {
        // 执行动作的元件集合
        "beans": {
            // key名为元件id，只为目标对象
            "671": {
                // 元件id
                "target": "671",
                // 元件要执行的动作
                "type": "soundPlay",
                // 元件执行动作的参数
                "pams": true
            },
            // key名为元件id，值为数组（动作列队）
            "665": [{
                // 元件id
                "target": "665",
                // 元件要执行的动作
                "type": "show",
                // 元件执行的动作参数
                "pams": true
            }, {
                "target": "665",
                "type": "shake",
                "pams": true
            }],
            "673": {
                "target": "673",
                "type": "soundPlay",
                "pams": false
            }
        }
    }
}]