CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪
またまたまた前回に引き続き CoffeeScript についてのエントリーです.
今回は, タイトルの通り CoffeeScript と gl.enchant.js を使って 15 分で 3D ゲームを作ってみました.
作ったゲームは以前書いたエントリー『gl.enchant.js を使って 10 分で 3D ゲームプログラミングしてみた. んで, その様子をビデオキャプチャーしてみました!!』で 作ったゲームと同じです.
狙いとして「 JavaScript で 10分掛かったけど, CoffeeScript だと 5分で作れちゃったよ~」ってエントリーにしようと考えていたのですが 何分 CoffeeScript はまだ不慣れなもので 15分も掛かってしまいましたw
ただ, 慣れさえすれば Python のように流れるようにコードを書けるのでいくつかゲームなりツールなり作ればホントに 5分とかで 作れるようになるのかなというのは感じました.
お蔵入りしようとも考えたのですが, JavaScript のコードを見比べてもらえれば勉強にもなるかなと 思い公開しました.
作ったゲームのコードや作っているところをキャプチャした動画もあるので よかったら参考にしてください.
} ( { { } } }{ { { }{ } } _____ __ __ }{ }{ { ) / ____| / _|/ _| .- { { } { }} -. | | ___ | |_| |_ ___ ___ ( ( } { } { } } ) | | / _ \| _| _/ _ \/ _ \ |`-..________ ..-'| | |___| (_) | | | || __/ __/ | | \_____\___/|_| |_| \___|\___| |#-..________ ..-#;--. |################(__ \ _____ _ _ |#################| ) ) / ____| (_) | | |#################|/ / | (___ ___ _ __ _ _ __ | |_ |#################( / \___ \ / __| '__| | '_ \| __| |#################|/ ____) | (__| | | | |_) | |_ |#################| |_____/ \___|_| |_| .__/ \__| `-#############-' | | |_|
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[i] 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() # 完成です. # 最後まで見ていただきありがとうございました. # ではまたノシ [/code]</pre> </section> <section> <h2>Tips</h2> <p> 今回 CoffeeScript を使ってゲームのコード解説です. gl.enchant.js やゲームのアルゴリズムについての解説ではなく, CoffeeScript の特徴について触れています. </p> <section> <h3>->による関数定義</h3> <p> ->で簡単に関数を定義できます. function という単語は長いので -> で代用できるのは 非常に楽ですね. </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 個ほどできているのでキリの良いところで公開します.
CoffeeScript 連投なのだー!!
『CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪』
http://t.co/ptoCLocM
#coffeescript #javascript
CoffeeScript 連投なのだー!!
『CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪』
http://t.co/ptoCLocM
#coffeescript #javascript
CoffeeScript 連投なのだー!!
『CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪』
http://t.co/ptoCLocM
#coffeescript #javascript
CoffeeScript 連投なのだー!!
『CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪』
http://t.co/ptoCLocM
#coffeescript #javascript
CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life http://t.co/4dRthHPL
CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life またまたまた前回に引き続き CoffeeScript についてのエントリーです. 今回は… http://t.co/5vLNa2zE
[…] CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life: CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life […]
CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life
http://t.co/LI6zvpl8
javascript: CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life http://t.co/HJqOsqoW
javascript: CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life http://t.co/HJqOsqoW
CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life http://t.co/eyXTIHt8 #javascript
CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life http://t.co/lLDiBAu7 http://t.co/wmsRU9qJ
CoffeeScript 連投なのだー!!
『CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪』
http://t.co/ptoCLocM
#coffeescript #javascript
CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life – http://t.co/BZ4ZIlL2
CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life http://t.co/4sSaLFcM
CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life http://t.co/IZqMSfvo
“CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life” http://t.co/GvTuXjdh
Now Browsing: CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life – http://t.co/J7YZmo0o
[…] CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ […]
“CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life” http://t.co/DUwVjguU
CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life – http://t.co/D8AHwGLN
enchant.jsで3Dやろうとすると既にやってる人が!@CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ http://t.co/k6QnhLSB @phi_jpさんから
“CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life” http://t.co/SPPNYC7Csf
“CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life” http://t.co/GvTuXjdh