Embed Size (px)
Citation preview
スマホアプリ作るまで続く 長期連載シリーズ
父ちゃん、母ちゃん、 俺、
やっぱゲーム作りたい。
※「俺」も「父ちゃん」も「母ちゃん」も普段使いません。
ゲーム作りたいです。
前回（TECH合同）のおさらい
M◯riさんの挑発行為
んだとう…？
ということで、NAVER製の collie - 高速アニメーションJSライブラリ
を作ってJSゲーム制作
ここまで、 enchant.js CREATEJS Collie Arctic.js
あたりで書いてみた
【結論】 JavaScriptはJavaScript、
そんなにかわんねぇ。
ってことで 今回は
こっちに行ってみた。
～ The road to a game developer 番外編～
CoffeeScript＋enchant.jsで書いてみるよ～
ネットプライスドットコム NPLab. いまい大すけ
今更だけど…
CoffeeScript CoffeeScript はプログラミング言語のひとつである。コードはJavaScript のコードに変換される。 Ruby や Python、Haskell [1] から影響を受けたシンタックスシュガーの導入により、JavaScript に比べ簡潔さと可読性を向上させたほか、配列内包 (Array comprehensions) やパターンマッチといった機能を追加している。 CoffeeScript により、パフォーマンスを下げることなく、より短いコードでプログラムを記述することができる (JavaScript に比べ 1/3 程度の行数が削減できる)[2]。
「CoffeeScript」『フリー百科事典 ウィキペディア日本語版』（http://ja.wikipedia.org/）。2013年1月25日12時（日本時間）現在での最新版を取得。
結構多用する、 function() {}が、->
this.が、@ だったりして楽、とか
・Classの記述で悩まないとか ・間違ってグローバル変数みたいなのが防げるとか ・イテレーション楽とか ・「,」とか「;」とか まあ、色々あれなんですけど、
詳細は加藤さんに
いつも通りjsdo.itで書いたよ
・jsdo.itはJSだけじゃなくて、JSX、CoffeeScript、TypeScriptで書ける ・保存するとJSにコンパイルして実行 ・ちょっとしたテストに最適
で、どうだったの？
書きやすい。
<!DOCTYPE html> <html> <head> <meta http-‐equiv="Content-‐Type" content="text/html; charset=UTF-‐8" /> <script type="text/javascript" src="./enchant.js"></script> <script type="text/javascript"> enchant(); window.onload = function() { var game = new Game(320,320); game.preload('a.png'); game.onload = function() { var test = new Sprite(100,100); test.x = 10; test.y = 10; test.image = game.assets['a.png']; game.rootScene.addChild(test); }; game.start(); }; </script> </head> <body> </body> </html>
スプライト表示までの最低限のコード
enchant(); window.onload = function() { var game = new Game(320,320); game.preload('a.png'); game.onload = function() { var test = new Sprite(100,100); test.x = 10; test.y = 10; test.image = game.assets['a.png']; game.rootScene.addChild(test); }; game.start(); };
スプライト表示までの最低限のコード
enchant() window.onload = -‐> game = new Game(320,320) game.preload('a.png') game.onload = -‐> test = new Sprite(100,100) test.x = 10 test.y = 10 test.image = game.assets['a.png'] game.rootScene.addChild test game.start()
スプライト表示までの最低限のコード
var Star = enchant.Class.create(enchant.Sprite, { initialize: function() { enchant.Sprite.call(this, 16, 16); this.image = game.assets['icon0.gif']; this.frame = 30; this.x = 320; this.y = 160; this.speed = 3; this.addEventListener(Event.ENTER_FRAME, function() {
this.x -‐= this.speed; if (this.x < 0) { this.remove();
} });
}, remove: function() { delete this; }
});
スプライト継承のクラスのコード
class Star extends Sprite constructor: -‐> super 16, 16 @image = Game.instance.assets['icon0.gif'] @frame = 30 @x = 320 @y = 160 @speed = 3 onenterframe: (e) -‐> @x -‐= @speed if @x < 0 this.remove()
remove: -‐> delete this
スプライト継承のクラスのコード
ずいぶんすっきり。
300行 ↓
250行
全部で4時間くらい ※注）前回も同じくらい
次書けばもっと早い
【注意】 ・enchant.js自体がグローバルな名前領域を前提として作られてるので、プラグイン動かないことがある ・jsdo.itではcoffee -bできないから、上記が致命的
感想
・「どう書こう」的なJSの気持ち悪さがかなり軽減（これはこれでキモさもあるけど） ・==と===みたいなミスが減るのも良い ・誰が書いてもある程度綺麗なコードになるだろう
コード書いて、 コンパイルして、 デプロイするまでの 環境構築がキモ
だよね？
【結論】 ゲームのコードも スッキリな方がいい
ご清聴 ありがとうございました。
