Skip to content

Ruby on enchant.js / RubyでHTML5ゲームを作ってみる

先日からちょこちょこやってきたRuby on enchant.jsで試しにゲームを作ってみたのでソースもろとも公開したいと思う。

まずはRuby on enchant.jsを使ったゲームの実行結果を見てみよう。
(chromeでも動くようになった)

見ての通り、非常にシンプルなモグラ(?)叩きだ。

この程度なら、Ruby on enchant.jsではわずか122行でプログラミングできる。
また、完全なソースコードはこのページからダウンロードできる。

HotRubyはサーバとブラウザのハイブリッドな仕組みによってRubyを間接的にブラウザ上で動かしてしまうという仕組みだ。

ブラウザ上のindex.htmlに書かれた <script type=”text/ruby”> のタグを見つけ、その内容をサーバに送信。サーバ側ではRubyが起動し、YARVという仮想マシン用の中間コードが生成される。中間コードをJSON形式でHotRuby.jsが受け取り、それを実行する、という仕組みだ。

では実際にRuby部分のソースコードを見てみよう。

class Effect < Sprite
    def initialize (x,y)
        super(16,16)
        self.image = Game.assets("kirakira.gif")
        self.frame=0
        self.x = x+16
        self.y = y+8
        self.scaleX=2
        self.scaleY=2
        $group.addChild(self)
        @mode = 0
    end
    def enterframe
        if Game.frame%4 < 3
            return
        end
        self.frame += 1
        if self.frame >= 4
            destroy
        end
    end
end

class Droid < Sprite
    def initialize
        super(48,48)
        self.image = Game.assets("mogura.png")
        self.frame=0
        @mode = 0
    end
    def touchend
        if self.frame == 0
            $combo = 0
            $comboLabel.text = "COMBO:" + $combo
            return
        end
        @effect = Effect.new(self.x,self.y)
        $combo = $combo+1
        $score = $score + $combo*$combo
        $scoreLabel.text = "SCORE:" + $score
        $comboLabel.text = "COMBO:" + $combo
        self.frame=5
        @mode=5
        @wait1 = Game.frame+20 
    end
    def enterframe
            case @mode
            when 0
                $droids = $droids - 1
                if $droids == 0
                    self.frame=0
                    @mode=1
                    @next=4
                    @wait = Game.frame+70
                    return
                end
                self.frame=0
                if $droids <0
                    return
                end
                @wait = Game.frame+rand(20+$droids*4)
                @mode=1
                @next=2
            when 1
                if Game.frame > @wait
                    @mode=@next
                end
            when 2
                if Game.frame%4 ==0
                    return
                end
                self.frame+=1
                if self.frame>3
                    @wait = Game.frame+rand(20+$droids*0.5)
                    @next=3
                    @mode=1
                end
            when 3
                if Game.frame%4 ==0
                    return
                end
                self.frame-=1
                if self.frame<=0
                    self.frame=0
                    @mode=1
                    @next=0
                end
            when 4
                Game.end($score)
            else
                @mode=0
            end
        end
end

$droids = 100
$score=0
$combo=0


$scoreLabel = Label.new("SCORE:"+$score)
$scoreLabel.x=40
$scoreLabel.y=40

$comboLabel = Label.new("COMBO:"+$combo)
$comboLabel.x=220
$comboLabel.y=40

$group = Group.new
$group.addChild($scoreLabel)
$group.addChild($comboLabel)
Game.rootScene.addChild($group)

j=0
4.times{
    5.times { |i|
        droid = Droid.new()
        droid.x = i*48+40
        droid.y = j*48+60
        $group.addChild(droid)
    }
    j+=1 # HotRubyのバグでこう書かないといけない
}

ところどころあまり美しいとは言い難い記述があるが、そこは目を瞑っていただくことてして、重要なのはJavaScriptスタイルのプログラムよりエレガントに書けるところだろう。

ならCoffeeScriptで書けばいいじゃん、という意見もあるだろうけど、ここでは聞かなかったことにする。

特に

class Effect < Sprite
    def initialize (x,y)
        super(16,16)
        self.image = Game.assets("kirakira.gif")
        self.frame=0
        self.x = x+16
        self.y = y+8
        self.scaleX=2
        self.scaleY=2
        $group.addChild(self)
        @mode = 0
    end
    def enterframe
        if Game.frame%4 < 3
            return
        end
        self.frame += 1
        if self.frame >= 4
            destroy
        end
    end
end

こんなふうに、Spriteを継承してenterframeメソッドをオーバーライドするだけで勝手にイベントを聞いてくれる。

また、ここでdestroyというメソッドを呼んでいるが、これは今の本家enchant.jsにはないメソッドで、イベントリスナのクリーンアップと親エンティティからのremoveChildを自動的に行う自爆メソッドだ。

現状だとコンパイルエラーが若干追いかけにくいとか、HotRuby.jsの実装が枯れてないとかいろいろと問題が多いが、とりあえずゲームらしきものを動かすところまでは作ることが出来た。

このRuby on enchant.jsについては、明後日ボストンで開催されるHTML5ゲーム開発勉強会でも発表する予定。

HotRubyにはまだまだいろんな可能性が隠されていると思うので、なんとか開発を継続して欲しい(と言ってももう三年くらいは放置されてるみたいなんだけど・・・)。

なお、Ruby on enchant.jsを試してみたい場合は、ゲームのページからZIPファイルをダウンロードして、index.htmlを編集すれば、ローカルでも試すことが出来るようになっている。

Enjoy!

このエントリーをはてなブックマークに追加
はてなブックマーク - Ruby on enchant.js / RubyでHTML5ゲームを作ってみる
Post to Google Buzz
Share on GREE

Related posts:

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

Facebook comments:

Post a Comment

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