cocos2d javascript bindingsの環境構築
cocos2d javascript bindingsでコーディングする際、Xcodeでjavascriptをゴリゴリ書いていくのもありなんですが、cocos2dの作者がオススメしているようにSublime Text2を使って環境を構築するとなかなか快適な環境が作れたので紹介します。
1. Sublime Text 2を導入する
有償ではありますがカスタマイズの豊富さと軽快な動作が売りのSublime Text 2を導入しましょう。
2. パッケージコントロールをインストールする
Sublime Text 2には既に豊富なパッケージが用意されています。それらを簡単に導入するには、以下のサイトを参考にSublime Text 2用のパッケージコントロールを導入します。
Sublime Text 2 Package Control
3. SublimeLinterを導入
cocos2d javascript bindingsでは、javascriptの構文が1箇所で間違っているとすぐ動作しません（当たり前ですが...）。それに気が付くには、事前に構文チェックをかけれると嬉しいものです。
そこでPackage ControlからSublimeLinterをインストールしましょう。
設定項目ですが、以下の箇所を全てtrueにして使っています。
これにより、ファイルを保存した時にポップアップで且つハイライトでエラーの箇所を表示してくれます。
"sublimelinter_fill_outlines": true,
// If true, lines with errors or warnings will have a gutter mark.
"sublimelinter_gutter_marks": true,
// If true, the find next/previous error commands will wrap.
"sublimelinter_wrap_find": true,
// If true, when the file is saved any errors will appear in a popup list
"sublimelinter_popup_errors_on_save": true,
日本語のコメントがあるとエラーと見なしてしまうようなので、homebrewでnodeをインストールしておくと良いでしょう。
# brew install node
簡単ですね。
4. jsformatの導入
SublimeLinter同様に jsformatパッケージもインストールしておくと良いでしょう。
これは、ソースコードの整形を行ってくれるプラグインです。
インデントなどを無視して雑にガリガリ書いた時に一発で見やすく整形してくれます。
5. SublimeBlockCursorの導入
3.の設定でエラーをハイライトにするとカーソルが見えづらくなるので私は、このパッケージも導入しています。導入した後カーソルがブロックカーソルに変更されます。このブロックカーソルの色は変更も可能です。使っているカラースキームのファイルを開いて、次のタグを挿入するだけで色が変更されます。
<dict>
<key>name</key>
<string>Block Cursor</string>
<key>scope</key>
<string>block_cursor</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FFFFFF</string>
<key>background</key>
<string>#AA0022</string>
</dict>
</dict>
6.VintageExの導入
なんとSublimeText2にはその欲望も叶えてくれる素晴らしいパッケージがあります。
vimerならば、必ず導入しておきましょう。 ある程度のコマンドには対応しています。
個人的にはここまで対応できていれば全然問題ありません。
さて、これである程度快適にcocos2d jsbのコーディング環境が整いました。
あとは、スニペットをgithubで公開していこうと思っています。
まだ全然作ってないので少しづつ更新していきます。
cocos2d javascript bindingsは本当に楽しいので、是非皆さんもjavascriptで
ネイティブゲームアプリを作ってみてください。
とりえあえず前回のcocos2d 勉強会で発表したCocosMatchの動画を貼っておきます。
これは、cocos2d jsbで記述しており、60fpsで動作します。
