スマホアプリ作るまで続く
長期連載シリーズ
父ちゃん、母ちゃん、
俺、
やっぱゲーム作りたい。
※「俺」も「父ちゃん」も「母ちゃん」も普段使いません。
ゲーム作りたいです。
前回(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行
クマちゃん in the sky
http://jsdo.it/hine.gdw/ofag
全部で4時間くらい
※注)前回も同じくらい
次書けばもっと早い
【注意】
・enchant.js自体がグローバル
な名前領域を前提として作られて
るので、プラグイン動かないこと
がある
・jsdo.itではcoffee -bできな
いから、上記が致命的
感想
・「どう書こう」的なJSの気持ち
悪さがかなり軽減(これはこれで
キモさもあるけど)
・==と===みたいなミスが減るの
も良い
・誰が書いてもある程度綺麗なコー
ドになるだろう
コード書いて、
コンパイルして、
デプロイするまでの
環境構築がキモ
だよね?
【結論】
ゲームのコードも
スッキリな方がいい
ご清聴
ありがとうございました。

Creators'night#14今井