tmlib-rpg メニューウィンドウの作成つづき

11678 ワード
tmlib.js CoffeeScript CoffeeScript テキストリンク

RPGのシステムを作る時に、いろいろメニューのウインドウがあるので…
汎用的に使えるように作ってます。

で、とりあえず、表示選択できるようになったけど
他の部分がいろいろ無いので作成中。

実装したい事の予定

  • メニューを行とカラムに分けて表示
  • メニューに沢山の項目がある場合のページ処理 or スクロール処理
    • それらをわかりやすくするための、ページネーション とか スクロールバー とか
  • 表示／非表示の切り替えとか開く閉じる時のアニメーションとか
  • いろいろなカーソルにカスタマイズできるようにする
  • タッチ操作、マウス操作への対応

とかとか…

SceneMain.coffee

tm.define 'SceneMain',
  superClass: rpg.SceneBase

  # 初期化
  init: ->
    # 親の初期化
    @superInit(name:'SceneMain')

    @window1 = rpg.WindowMenu
      active: true
      cols: 1
      rows: 2
      menus: [
        {name:'Menu1',fn:-> console.log '1'}
        {name:'Menu2',fn:-> console.log '2'}
      ]
    @addChild @window1

    @window2 = rpg.WindowMenu
      active: true
      cols: 2
      rows: 1
      x: @window1.right
      menus: [
        {name:'Menu1',fn:-> console.log '1'}
        {name:'Menu2',fn:-> console.log '2'}
      ]
    @addChild @window2

    @window3 = rpg.WindowMenu
      active: true
      cols: 2
      rows: 2
      y: @window1.bottom
      menus: [
        {name:'Menu1',fn:-> console.log '1'}
        {name:'Menu2',fn:-> console.log '2'}
        {name:'Menu3',fn:-> console.log '3'}
      ]
    @addChild @window3

    @window4 = rpg.WindowMenu
      active: true
      cols: 2
      rows: 2
      x: @window3.right
      y: @window3.top
      menus: [
        {name:'Menu1',fn:-> console.log '1'}
        {name:'Menu2',fn:-> console.log '2'}
        {name:'Menu3',fn:-> console.log '3'}
        {name:'Menu4',fn:-> console.log '4'}
      ]
    @addChild @window4

    @window5 = rpg.WindowMenu
      active: true
      cols: 3
      rows: 3
      x: @window3.left
      y: @window3.bottom
      menus: [
        {name:'Menu1',fn:-> console.log '1'}
        {name:'Menu2',fn:-> console.log '2'}
        {name:'Menu3',fn:-> console.log '3'}
        {name:'Menu4',fn:-> console.log '4'}
        {name:'Menu5',fn:-> console.log '5'}
      ]
    @addChild @window5

左端にカーソルがあるときに、さらに左を押した場合にどう動かすか？とか
カラムとか行によってさらに変わるので…いろいろ大変
うまい方法ないかな～とか思いつつ、一生懸命条件分岐で普通に…操作です。

この処理自体は、RGSS(Ruby)で以前同じのを書いてるので、それを見ながら作成＞＜

まだページネーションが出来てないけど、行カラムはこれで良さそうなので
そろそろタッチ操作に対応しようとしたけど、なんかうまく行かず…

しらべてみたらどうも tmlib.js 0.1.8 では、origin（表示位置の起点）を0,0（左上）にすると、タッチイベントの範囲判定がうまく行かないみたい。
origin は、デフォルトが中心(0.5,0.5)になってて、アクションとかシューティングとかだと調子良い感じだと思う。
RPGにはあまり関係なさそうだけど…アニメーションをさせるようになったら便利かな～？
で、ちょっと修正したら出来たけど…最新のdevelopのブランチでは、すでに直ってる様だったので…
急遽、時期バージョン？の 0.2.0 対応にすることにしました。

AssetManager が変わってて、以前書いた json のロード処理とかいろいろ直したけど、それ以外は普通に動きました。namespace とかも一応、見える範囲は直したつもり。
（まだクラス数も１０数個なので今のうちに…）

あとは、スマホで動作確認も今のうちにしておくかな？