• 戦闘の表示効果や効果音を改善しました。
• NPCのAIと移動機能を実装
• お店機能を改善
• 装備による追加効果に対応
• マップエディターを改訂（マップの追加やUIを改善)
• UIの見栄えを少し変更(CSS3を一部使用）
• UIにスピンボックスを追加
• スマートフォンを想定したRTG用のライブラリを作成
• 不具合をそこそこ修正

1. 消費アイテムのみ複数保持するように変更
2. 装備を買ったら、その場で装備する選択肢を追加
3. アイテムを交換できない不具合修正
4. アイテムを売った際にお金が増えない不具合を修正
5. メッセージにスクリプト指定の不具合を修正
6. 宿屋のジングルのタイミングを修正

ナイトリービルドを更新。
習作

補足ですが、キャッシュが効いている場合にCTRL+Rなどでページを再読み込みする必要があります。

マップエディター

マップエディターを汎用化するために、しばらく改変を続けたいと思います。

ナイトリービルドを更新。
マップエディター

補足ですが、キャッシュが効いている場合にCTRL+Rなどでページを再読み込みする必要があります。

基本方針

コントロール(DQ.Control)はGUI(DOM)を持つオブジェクトを指します。設計するに当たって.Net Framework を強く意識しています。
ですので属性名称は.Net Frameworkのそれを踏襲しています。
ただし、色やマージンなど見栄えを指定するプロパティやメソッドは用意せず、直接CSSやStyleで指定することにします。
※.Net Frameworkでは、GUIを持たないComponentも存在しますが、当該ライブラリーでは提供しません。

objとclient

DQ.Controlは要素(jQueryでラップしたもの)を内包しており、objとclientがあります。
objは最も外側のDOMを指し、clientは子Controlが追加される要素を指します。
最もシンプルなコントロールの場合、objとclientは同じ要素を指します。

シンプルなControl

Windowフォームの様にヘッダーとフッターを持つ場合はobjが最も外側の要素を指し、clientは子要素を指します。

hederとfotterを持つControl

作成と廃棄

DQ.Controlはオブジェクトですのでnew で生成します。引数には親コントロールと要素を指定します。
ページ全体を示すDQ.Pageコントロールが存在し、最上位のコントロールを作成する場合は親として
DQ.page()を指定します。

コントロールに対応する要素の指定は以下の３通りの指定方法があります。

1. IDを指定する
2. jQueryオブジェクトを指定する
3. 省略する

大別するとID指定かそれ以外となります。IDを指定した場合、html上の構造を維持したままControlを作成しますが、
それ以外の場合は親Controlへ追加された時点で、親Control.clientオブジェクトの最後尾へ追加されます。

var ctrl = new DQ.Control(DQ.page(),
           $('<div style="position: absolute;">'));
ctrl.show();
ctrl.location(64, 64);
ctrl.text('Hellow, World!');
ctrl.size('10em', '2em');

作成したコントロールを廃棄する場合は、dispose()メソッドを呼び出します。

ctrl.dispose();

Controlの追加

Control内へControlを追加する場合はコンストラクターで親Controlを指定します。

var ctrl = new DQ.Control(DQ.page(),
                       $('<div style="position: absolute;"/>'));
...
var child = new DQ.Control(ctrl, $('<div style="position: relative;" />'));
child.size('5em', '4em');

外観と振る舞いの分離

先にも説明したようにコントロールの作成時に要素のIDを指定した場合、htmlで記述されている構造を保持したままControlを作成します。
これもVisual Studioでの開発でGUIのレイアウトの編集とアプリケーションの振る舞いの実装を分離して作業することを想定しているためです。
DQ.Controlから派生したFormコントロールとPanelコントロールを使用して例示します。
この例ではclassでコントロールの種類を指定し、idは各コントロールのidとしてそのまま使用されます。

<div class="dq-form" id="form1"
     style="width: 300px; height: 240px;">
  <div class="dq-panel" id="panel1">
  foo bar
  </div>
</div>
<script type="text/javascript">
  var f1 = new DQ.UI.Form(DQ.page(), {
     parseHtml: true //DOMツリーからControlを自動生成します。
  }, 'form1' );
  f1.panel1.dockStyle(DQ.UI.DockStyle.dockable); 
                      //子Controlは親Controlの属性として追加されます。
  f1.show();
</script>

<div id="box" />
<script type="text/javascript">
var text ="漢字alpha0123456789;"
function show(length) {
  if (pos >= text.length) {
    return;
  }

  $('#box').text(text.substring(0, length);
  setTimeout( function() { show(length + 1); }, 15.625 );
}

show(1);
</script>

<div id="box" />
<script type="text/javascript">
var text ="漢字alpha0123456789;"
function show(pos) {
  if (pos >= text.length) {
    return;
  }

  $('#box').append(text.charAt(pos));
  setTimeout( function() { show(length + 1); }, 15.625 );
}

show(0);
</script>

軽くノーウェイトでベンチマークしてみましたが、それほどの差は無かったです。
次によくあるメッセージのスクロール表示のキャンセル機能を考えてみます。
まあ、これは単純にクリックなりキー押下なりでキャンセルフラグを設定すれば良いでしょう。

var text ="漢字alpha0123456789;"
var cancel = false;
function show(length) {
  if (pos >= text.length) {
    return;
  }
  if(cancel) {
    $('#box').text(text); //全部表示して終了
  } else {
    $('#box').text(text.substring(0, length);
    setTimeout( function() { show(length + 1); }, 15.625 );
  }
}
$('#box').click(function() { cancel = true; });
show(1);

会話や文章の切れ目を意識してユーザーからのクリックを待機する方法について考えてみます。
ここは難しいことを考えずに、一度にスクロール表示するテキストを一つの文字列として全体を配列で保持することにします。
そして、ひとつのテキストのスクロール表示が終わるとユーザーからのアクション（クリック）があるまで待ち、アクションがあると次のテキストを再びスクロール表示します。

var data = ["first","second", "third"];

MessageBox = function(data) {
 this.content = $('#box');
 this.data = Array.apply(null, data); //配列のクローンを渡す。
 this.next();
 $('body').bind("click", this, this.click);
}
MessageBox.prototype = {
 sliding: false,
 clear: function() {
     this.content.text('');
 },
 next: function() {
     this.clear();
     this.text = thi.data.shift();
     slideText(1);
     var me = this;
     function slideText(length) {
          var text = me.text;
          if (me.cancel) {
              return;
          }
          if (length < text.length) {
              me.sliding = true;
              me.content.text(text.substring(0, len));
              setTimeout(function () { slideText(length + 1); }, 15.625);
          } else {
              me.sliding = false;
          }
     }
 },
 click: function(e) {
   var me = e.data;
   if (me.sliding) {
      me.cancel = true; //キャンセルして現在のテキストを一括表示する。
      return false;
   }
   //次のテキストがあれば、スクロール表示する。
   if (me.data.length == 0) {
      $('body').unbind("click", me.click);
      me.clear();
    } else {
      me.next.apply(me);
    }
　  return false; 
 } 
}

このままでは前回表示したテキストが消えてしまいます。RPGでは、テキストを縦に流して行きたいかもしれません。
また、会話の途中で選択肢を求めることもありますが、そこらへんについては割愛します。
とりあえず一連の表示やコマンドに対応したコントロールのデモを用意しておきました。