読者です 読者をやめる 読者になる 読者になる

CoffeeScriptとCanvasでスパロボ風シミュレーションRPGを作る(準備)

Ruby

プロローグ

第2次スーパーロボット大戦OGが発売延期になりました。せっかく、アニメ版OG2で盛り上がっていたところなのに実に残念です。

もっと残念なことは、たとえ発売されたとしても第2次OGは、プレイステーション3用であるということです。もうあの懐かしいゲームボーイアドバンスでOGシリーズが発売されることはありません。アドバンス後継であるDSや3DSで発売されることも無いでしょう。


もう私たちは、ソルプレッサに阻まれ、1回の敵フェイズにリセットを10回繰り返すことは無いのでしょうか?

もう私たちは、フェアリオンを1体ずつ動かして、うっかりゴールドの方を撃墜してしまうことは無いのでしょうか?

もう私たちは、最強武器M950マシンガンを使うことは無いのでしょうか?

もう私たちは、究極!ゲシュペンストキックの連続攻撃で敵を4体蹴り抜くことは無いのでしょうか?


こうなったら自分で作るしかありません!
(いや、2OGでも上記の半分は実現されているんでしょうけど、私はPS3を持っていません。お金が無いのです)


ちなみに私、5年以上もプログラミングをしておきながら、本格的にゲームを作るのは初めてだったりします(テトリス、オセロぐらいは作りましたけど)。

どんな環境で作るか?

今回目指すのはGBA時代のスパロボ風のゲームです。したがって、あまり処理能力は必要とされません。無理に高速なC++Javaを使う必要はないので、開発のしやすいPythonRubyJavaScriptなどの高級言語が候補に上がります。

しかし、PythonRubyは、PC用のアプリしか作れません。

一方、JavaScriptはブラウザさえあれば、PCでもスマートフォンでも動きますが、言語の使いやすさとしては、PythonRubyに劣ります。素っぴん状態ではクラスも名前空間も無いですし、functionって打つのがとにかくダルい。

JavaScriptの「どこでも動く」点は魅力なのですが・・・

CoffeeScript

そこで、CoffeeScriptを使うことにしました!

CoffeeScript

CoffeeScriptはJavaScriptの残念なシンタックスを改善した小言語です。CoffeeScriptで書いてコンパイラに通すとJavaScriptのソースを出力してくれます。ちなみにCoffeeScriptのコンパイラ自身も、CoffeeScriptから生成したJavaScriptで書かれています。

#CoffeeScript
fizzbuzz = (x) ->
  for i in [1..x]
    if i % 15 == 0
      console.log("FizzBuzz")
    else if i % 5 == 0
      console.log("Buzz")
    else if i % 3 == 0
      console.log("Fizz")
    else
      console.log(i)

fizzbuzz(100)
//JavaScript
var fizzbuzz;
fizzbuzz = function(x) {
  var i, _results;
  _results = [];
  for (i = 1; 1 <= x ? i <= x : i >= x; 1 <= x ? i++ : i--) {
    _results.push(i % 15 === 0 ? console.log("FizzBuzz") : i % 5 === 0 ? console.log("Buzz") : i % 3 === 0 ? console.log("Fizz") : console.log(i));
  }
  return _results;
};
fizzbuzz(100);

CoffeeScriptのコードが改良するのは「シンタックス」「見た目」だけです。実行モデルはJavaScriptそのままです。そのため、CoffeeScriptとJavaScriptのコードを見比べれば、どこに何が対応するのかすぐ分かるので、JavaScript用のデバッガしかなくても、CoffeeScriptを十分デバッグすることができます。

準備

JavaScriptの実行とデバッグFirefoxでもGoogle Chromeでも好きなのを使ってください。

以下、Windows 7環境でのインストールを紹介します。

Ruby

CoffeeScriptのコンパイルにはRubyがあると便利です。
RubyInstallerの1.9.x版をインストールします。

Windows用のRubyインストーラにはRumixもありますが、現時点(2011/9/30)では、RubyInstallerの最新版が1.9.2, Rumixは1.9.1だったので、RubyInstallerを使いました。

CoffeeScript自身

RubyGemsでインストールします。コマンドラインから

$> gem install coffee-script

を実行してください。

Node.exe

サーバサイドJavaScriptとして有名のNode.jsのWindows版です。CoffeeScriptのコンパイラJavaScriptで書かれているので、JavaScriptの処理系が必要なのです。

Node.exe

ファイルは、Node.exe 一個だけ!これをパスが通ったところに置くだけ。・・・だけでいいと思ったのですが、node.exeのパスにスペースが入るとエラーが出る
ので注意。

エディタ

CoffeeScriptは特別なエディタがなくても書けますが、サクラエディタCoffeeScript用設定ファイル

コンパイルの方法

$> ruby -r "coffee-script" -e "puts CoffeeScript.compile('ファイル名')"

とすると、コンパイルされたJavaScriptが出力されるので、それをファイルにリダイレクト。

Rakeを使う場合などはRubyソースコードに次のように書きます。

require "coffee-script"
src = nil
open("ファイル名.coffee", "r:エンコーディング:utf-8") do |f|
  src = f.read()
end

open("ファイル名.js", "w:エンコーディング:utf-8") do |f|
  f.write(CoffeeScript.compile(src))
end

自動コンパイル

ちなみに、CoffeeScriptとは別個のことですが、Rakeを使うとファイルの変更を監視し自動でコンパイルすることができます。

RakefileでLaTeXファイルを監視自動コンパイル - hogeなlog

手動コンパイルだと、CoffeeScriptを変更して、コンパイルを忘れたまま、「おかしいなぁ?いま直したバグがなんでまた出るんだろう?」ということがたまにあるので(私は)、自動にしておくと安心です。

広告を非表示にする