3

event based editorサポートできるStarCraft 2 Editorのようなアルゴリズムを作成しようとしています:

  • UI の作成
  • 音を鳴らす
  • キーボード/マウス入力の処理
  • メッセージを表示する
  • ボタン (または参照された UI オブジェクト) が押されたなど。

StarCraft 2 Editor とほとんど同じです (もちろん 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 )を見つけました (StarCraft 2 Editor についてまだ知らない場合)。event based editor

私の質問は次 のとおりです。これを達成するために使用できる最適なアルゴリズムは何ですか?

4

3 に答える 3

5

jQuery UIの仕事のように聞こえます。

ユーザーがエディターでカスタム エリアを作成すると、すべての属性がオブジェクト (JSON として保存できる) 内に格納され、マップを読み込むときにパラメーターとして 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; }
}

また、ドラッグ可能やサイズ変更可能などの jQuery UI ツールにより、エディターの構築が容易になります。

于 2013-07-02T18:21:46.833 に答える
3

バックボーンのイベント システムにならってこれをモデル化します。

events: {
  'click selector': handler,
  'mouseover selector': handler2,
  ...
}

ハンドラーは任意の JavaScript 関数にすることができます。これにより、displayMessage.

次に、独自のハンドラーをカレー化して、ユーザーが必要に応じて構成を指定できるようにすることができます。

例：

var events = {
   'click element': displayMessage({
        text:"Hello user!",
        title:"Welcome!",
        type:"normal",
    }),
   'mouseover pizza': createButton({...}) 
}

function displayMessage(options) {
   var options = options;

   return function() {
      //display message logic
   }
}

次にcompose、他のヘルパーの中で関数を提供して (promise を調べますか?)、関数を組み合わせることができます。

var events = {
   'click element': compose(
        displayMessage({
            text:"Hello user!",
            title:"Welcome!",
            type:"normal",
        }),
        createButton({})
    ),
   'mouseover pizza': createButton({...}) 
}

これはうまくいくでしょうか？

警告: イベントがオブジェクトを含む配列であった方がよい場合があります。そうすれば、衝突することなく、一部のセレクターに複数のクリック ハンドラーを設定できます。

于 2013-07-03T20:04:10.170 に答える