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

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

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

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

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

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

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

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

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


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

Read More

gl.enchant.js を使って 10 分で 3D ゲームプログラミングしてみた. んで, その様子をビデオキャプチャーしてみました!!

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

gl.enchant.js を使って 10 分で 3D ゲームプログラミングしてみた. んで, その様子をビデオキャプチャーしてみました!!

簡単な避けゲーを作ってみました. なんとコードはたった 81行! gl.enchant.js はホント生産性高いです!!

最近, 時間制限を設けて動画でキャプチャしながらゲームプログラミングするのにハマっています. 時間と戦い汗かきながらプログラミングするのがなんか新鮮でクセになっちゃってw

wise9 で清水さんや gl.enchant.js 開発者である 高橋さんもキャプチャしながらプログラミングしてたりして, 盛り上がってきています.

最近は, 面白いことがありすぎて眠れない><

Read More

gl.enchant.js で『Avoid9』ってゲームを作りました

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

1週間程前に gl.enchant.js でゲームを作りました.

タイトルは『Avoid9』. 色々な色の 9leap Box を左右移動やジャンプで避けるというシンプルなゲームです.

9leap に投稿してあるのでよかったら遊んで下さい.

Read More

WebGL 環境上でメタセコイアで作った 3D モデルを見られる, メタセコイアビューアを作ってみた

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

先日作った mqo.gl.enchant.js を使って そこそこちゃんとしたモデルビューアを作りました.

gl.enchant.js と dat-gui を使用しています. enchant.js と dat-gui は相性が悪かったので中身をそれぞれ少しイジッたりしています.

メタセコイアを起動するまででもないがちょっとモデルを確認したいって時に, ちゃちゃっとドラッグ & ドロップで確認できるのでそんなときに活用してくださいな♪♪

Read More

gl.enchant.js 上でメタセコイアのデータを読み込めるようにするプラグイン mqo.gl.enchant.js を修正しました

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

gl.enchant.js 上でメタセコイアのデータを読み込めるようにするプラグイン mqo.gl.enchant.js を作りました

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

gl.enchant.js は標準で collada.gl.enchant.js という COLLADA(.dae) ファイルを読み込めるプラグインが付いています. ですが, dae はちょっと学生さんには馴染みがないかなぁ~と思い Metasequoia(メタセコイア)形式(.mqo) ファイルを読み込めるようにするプラグインを作ってみました.

なんとなぁ~く表示できたら良いかなぁ~という感じで2時間ぐらいで作ったので色々と怪しいですが一応表示できているみたいです. 基本的に使い方は callada.gl.enchant.js と同じで game.preload でロード, game.assets で取得できます.

サンプルは File API を使ってドラッグ & ドロップに対応しているので, ローカルにある mqo ファイルをバンバン放り込んで遊んでみてください.

Read More