Skip to content

Ruby on enchant.js : Groupクラスの追加

朝起きてその勢いで、Groupクラスを実装してみた。

すると以下のようなプログラムが書けるようになった

group = Group.new
bear = Bear.new(32,32,"chara1.gif")
label = Label.new("Hello enchant.js");
button = Button.new(100,100,"Button");
group.addEventListener('enterframe'){|e|
    self.y+=1
}

group.addChild(bear)
group.addChild(label)
group.addChild(button)
Game.rootScene.addChild(group)

こうすると、前回までに作ったプログラムがまるごと下に移動して行く、という状態を作ることが出来る。

さっそくHotRuby.jsのソース改変部分を見てみよう

今回もいつものようにHotRuby.prototype.classesを拡張している。

Groupはエンティティをグループ化する別のエンティティだから、やはりEntityクラスを継承することになる。

    "Group" : {
        "initialize" : function(recver, args) {
            recver.__instanceVars.entity = new Group();
            HotRuby.prototype.classes.extendRubyClass("Group","Entity");
        },
        "addChild" : function(recver, args) {
            recver.__instanceVars.entity.addChild(args[0].__instanceVars.entity);
        },
        "removeChild" : function(recver, args) {
            recver.__instanceVars.entity.removeChild(args[0].__instanceVars.entity);
        }
    },

Groupが使えるようになると、非常にシンプルだが強力な味方を得たことになる。

enchant.jsではスクロールする背景などをグループにしたり、画面に表示させるエンティティの優先度をコントロールするテクニックがよく使われる。

ここまで来ると、僕が過去に作ったenchant.jsのゲームの大半はそのまま移植できてしまう。

あと良く使うのは、Sceneのpushとpopだ。
enchant.jsのシーンはスタックのようになっていて、あるシーンの上に別のシーンを重ねて行ける。
上のシーンにあるときは、下のシーンへのイベント発行は抑制される。

たとえば9leapに投稿されているゲームによくある「START」という文字を出して画面を止める処理は、シーンのスタックによって行われている。

これを実現するためにGameクラスに手を加える。

    "Game" : {
        "assets" : function(recver, args) {

            return args[0];
        },
        "rootScene" : function(recver, args) {
            return HotRuby.prototype.classes.
                    newRubyObject("Scene",{scene:game.rootScene});
        },
        "pushScene" : function(recver, args) {
            game.pushScene(args[0].__instanceVars.scene);
        },
        "popScene" : function(recver, args) {
            game.popScene();
        }
    },

今回のは非常に簡単だ。Sceneクラスを既にHotRubyクラスとして定義してあるから、渡されたargsの中から__instanceVars.sceneをそのままGame.pushSceneに渡せばいい。

これで以下のようなプログラムが実現できる

testScene = Scene.new

startButton = Label.new("Tap to start!");
startButton.addEventListener('touchend'){|e| //ラベルがクリックされたら、シーンをポップ
    Game.popScene()
}
startButton.x = 30
startButton.y = 140

testScene.addChild(startButton)

Game.rootScene.addChild(group)
Game.pushScene(testScene)

こうすると、さっきまで動いていたシーンの上にtestSceneが上乗せされ、「Tap to start!」というラベルをクリックすると、testSceneがポップされて、groupが動き出すようになる。

これでゲームを作るための準備はほぼ整った。Mapクラスのラップがまだだけど、今のところMapを使うほど高度なゲームは9leapでも少ないので、これは後回しにしよう。

まだ完全にラップできたわけではないが、ゲームを作ってみるには十分だろう。
次はHotRubyで実際に簡単なゲームを作ってみたい

このエントリーをはてなブックマークに追加
はてなブックマーク - Ruby on enchant.js : Groupクラスの追加
Post to Google Buzz
Share on GREE

Related posts:

  1. Ruby on enchant.js : HotRubyにおける組み込みクラスの継承の実装
  2. 続・Ruby×enchant.jsへの挑戦 / イベントドリブンモデルの実現
  3. [enchant.js]shi3z式ゲームプログラミング #7 タイムアタックは神!
  4. node.js + socket.io + enchant.js でつくる、リアルタイム通信ゲーム
  5. enchant.js + node.jsで作る非同期型ネットゲームのプロトタイプ

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*