基于事件的编辑器,如星际争霸2编辑器(算法)

Question

我正在尝试event based editor在星际争霸2编辑器中创建一个类似的算法,可以支持:

• 创建UI
• 播放声音
• 处理键盘/鼠标输入
• 显示消息
• 按下按钮(或一些引用的UI对象)等.

与星际争霸2编辑器完全相同(当然也不是3D的东西)

---

到目前为止,我正在考虑使用JSON,在对象中添加每个事件,然后循环遍历它们并使用该addEventListener()方法创建事件.

JSON事件对象(当然它将由用户在编辑器中创建,无需编程):

var Events={
    //your event's names here
    onReady:{ //on page ready to manipulate
        displayMessage:{//just a simple popup
            text:"Hello user!",
            title:"Welcome!",
            type:"normal",
            },
        createButton:{ //creates a buton on the screen
            text:"Click me!",
            id:"myButton"
        }
    },
    onClick:{
        id:"myButton" ,//the id of the button we just created
        actions:{ //the actions applied after we click the button
            displayMessage:{//just a simple popup
                text:"You pressed me!",
                title:"Button",
                type:"error",//show the message as an error
            }
        }
    }
}

我发现了一些软件(GameMaker,Construct 2,GameDevelop),event based editor如果你想知道我在说什么(如果你还不知道星际争霸2编辑器)的话

我的问题是:我可以用什么来实现这个目标的最佳算法是 什么？

Answer 1

听起来像jQuery UI的工作.

当用户在编辑器中创建自定义区域时,它的所有属性都存储在一个对象(可以保存为JSON)中,然后在加载地图时将其作为param应用于div(使用html-attributes).

function create_areas(areas){
    var map = $('#map_area');
    for(var i=0;i<areas.length;i++){
        map.append($('<div>', area[i].params));
    }
}

而params看起来像这样:

params = {
    width: 100,
    height: 200,
    ....
    mousedown: function(){ play_music('hello'); },
    keydown: function(e){ alert('you pressed ' + e.keyCode; }
}

还有像draggable和resizeable这样的jQuery UI工具可以简化构建编辑器的过程.