CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

またまたまた前回に引き続き CoffeeScript についてのエントリーです.

今回は, タイトルの通り CoffeeScript と gl.enchant.js を使って 15 分で 3D ゲームを作ってみました.

作ったゲームは以前書いたエントリー『gl.enchant.js を使って 10 分で 3D ゲームプログラミングしてみた. んで, その様子をビデオキャプチャーしてみました!!』で 作ったゲームと同じです.

狙いとして「 JavaScript で 10分掛かったけど, CoffeeScript だと 5分で作れちゃったよ~」ってエントリーにしようと考えていたのですが 何分 CoffeeScript はまだ不慣れなもので 15分も掛かってしまいましたw

ただ, 慣れさえすれば Python のように流れるようにコードを書けるのでいくつかゲームなりツールなり作ればホントに 5分とかで 作れるようになるのかなというのは感じました.

お蔵入りしようとも考えたのですが, JavaScript のコードを見比べてもらえれば勉強にもなるかなと 思い公開しました.

作ったゲームのコードや作っているところをキャプチャした動画もあるので よかったら参考にしてください.


             
           }   (  
          {  {  }   
         }   }{  {
        {  }{  }  }                    _____       __  __
         }{ }{  { )                   / ____|     / _|/ _|
     .- { { }  { }} -.               | |     ___ | |_| |_ ___  ___
    (  ( } { } { } }  )              | |    / _ \|  _|  _/ _ \/ _ \
    |`-..________ ..-'|              | |___| (_) | | | ||  __/  __/
    |                 |               \_____\___/|_| |_| \___|\___|
    |#-..________ ..-#;--.
    |################(__  \            _____           _       _
    |#################| )  )          / ____|         (_)     | |
    |#################|/  /          | (___   ___ _ __ _ _ __ | |_
    |#################(  /            \___ \ / __| '__| | '_ \| __|
    |#################|/              ____) | (__| |  | | |_) | |_
    |#################|              |_____/ \___|_|  |_| .__/ \__|
     `-#############-'                                  | |
                                                        |_|

Demo Download

About

上の Demo, Download ボタンでそれぞれプレイ, ダウンロードできます.

マウス, もしくはタッチでプレイヤー(戦闘機)を操作し向かってくるエネミー(ウィルス)を 避けるシンプルなゲームです.

Movie

ライブコーディングをキャプチャした動画です.

Code

今回制作したゲームのコードです.

# CoffeeScript と gl.enchant.js を使って 3D ゲームを作っていきます
# 10分ほどお付き合い下さい

# この下にコードを書いていきます

# 定数
SCREEN_SIZE   = 640
PLAYER_MODEL  = "model/player.mqo"
ENEMY_MODEL   = "model/virus.mqo"

# おまじない
enchant()

# ゲーム生成
game = new Game(SCREEN_SIZE, SCREEN_SIZE)
game.preload PLAYER_MODEL, ENEMY_MODEL

# 初期化
game.onload = ->
  # シーン
  scene = game.rootScene
  
  # シーン3D
  scene3d = new Scene3D()
  
  # ライト
  light = new DirectionalLight()
  light.color = [1.0, 1.0, 1.0]
  scene3d.setDirectionalLight light
  
  # カメラ
  camera = new Camera3D()
  camera.x = 0
  camera.y = 1
  camera.z = 15
  camera.centerY = -1
  scene3d.setCamera camera
  
  # プレイヤー
  player = new Sprite3D()
  scene3d.addChild player
  player.set game.assets[PLAYER_MODEL]
  
  # タッチ
  scene.ontouchmove = (e) ->
    player.x = (e.x/SCREEN_SIZE) * 4-2
    player.y = -((e.y/SCREEN_SIZE) * 4-2)
  
  # シーン切替時処理
  scene.onenter = ->
    game.frame = 0
  
  # 更新
  scene.onenterframe = ->
    # 敵生成
    if game.frame % 10 is 0
      enemy = new Cube()
      scene3d.addChild enemy
      enemy.set game.assets[ENEMY_MODEL]
      
      enemy.x = Math.random()*4-2
      enemy.y = Math.random()*4-2
      enemy.z = -100
      
      enemy.onenterframe = ->
        @z += 1
        @parentNode.removeChild this if @z > 15
        
    # 衝突判定
    i = 0
    len = scene3d.childNodes.length
    
    while i<len
      elm = scene3d.childNodes&#91;i&#93;
      if elm isnt player and player.intersect(elm) is true
        seconds = game.frame / game.fps
        score = seconds.toFixed()*100
        console.log score, seconds
        game.end score, score + "秒耐えました"
      ++i
    
  
  
  

# ゲーム開始
game.start()

# 完成です.
# 最後まで見ていただきありがとうございました.
# ではまたノシ

&#91;/code&#93;</pre>
</section>

<section>
    <h2>Tips</h2>
    <p>
        今回 CoffeeScript を使ってゲームのコード解説です.
        gl.enchant.js やゲームのアルゴリズムについての解説ではなく, CoffeeScript の特徴について触れています.
    </p>
    
    <section>
        <h3>-&gt;による関数定義</h3>
        
        <p>
            -&gt;で簡単に関数を定義できます. function という単語は長いので -&gt; で代用できるのは
            非常に楽ですね.
        </p>
        <p>
            ただ C++ から来た人とかはポインタのメンバアクセスと勘違いしちゃうかも!! コードの流れ的に大丈夫かな.
        </p>
        <pre class="prettyprint">
  # タッチ
  scene.ontouchmove = (e) ->
    player.x = (e.x/SCREEN_SIZE) * 4-2
    player.y = -((e.y/SCREEN_SIZE) * 4-2)

先に処理を記述する後置 if

CoffeeScript では Ruby でよく使われる後置 if が使えます.

@parentNode.removeChild this if @z > 15

Ruby に慣れている人や, せっかちな人はこっちの方が良いかも!!

is, isnt 演算子を使った条件記述

CoffeeScript では === と !== の代わりにそれぞれ is, isnt が使えます. 文法的にしゃべり言葉に近付くので読みやすくなりますね.

if elm isnt player and player.intersect(elm) is true

次回は CoffeeScript 怒濤のサンプル集を公開します!! 現在(2012/04/16) 50 個ほどできているのでキリの良いところで公開します.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT