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

フニゲの開発日記

Electronとか...

40秒で支度しな

原稿


2013/12/07校正

Cocos2d-html5のダウンロード

 何はともあれ、Cocos2d-html5をダウンロードしましょう。これがないと何もできません。Cocos2d-html5は公式サイトから無料でダウンロードできます。

http://www.cocos2d-x.org/download

 現在(2013年12月)の最新版はv2.2.1です。実際にアプリを作ってリリースする人はできるだけ最新版を使うべきですが、本書のサンプルを試すだけならv2.2.1を使えばいちばんスムーズに行くでしょう。
 zipファイルを解凍したら、どこか適当な場所に置いてください。どこでもいいんですけど、本書では~/cocos2d-html5に置くことにしました。この先「~/cocos2d-html5」という文字列が10回ぐらい出てきますけど、頭の中で自分が置いた場所に置換して読んでくださいね。

$ cp -r ~/Downloads/Cocos2d-html5-v2.2.1 ~/cocos2d-html5

 あともうひとつ。本書ではGoogle Chromeブラウザを使いますので、もしまだインストールしていなければ、インストールしておいてください。

 これで準備は終わりです。
 いえ、ほんとうにこれだけなんです。40秒ではちょっと厳しいですが、5分あれば楽勝です。
 AndroidiOSの開発環境については、後で必要になったときに簡単に説明します。

サンプルで遊んでみよう

 サンプルをブラウザに表示するには、HTTPサーバーが必要です。何を使ってもいいのですが、pythonのSimpleHTTPServerを使うのが簡単なのでおすすめします。Mac OS Xなら最初からpythonが入っているので、面倒な設定は必要ありません。

$ cd ~/cocos2d-html5
$ python -m SimpleHTTPServer

Serving HTTP on 0.0.0.0 port 8000 ...

 「Serving HTTP on 0.0.0.0 port 8000」と表示されれば、HTTPサーバーが動いています。コマンドプロンプトが返ってきませんが、止まっているわけではありません。このウィンドウはしばらくこのまま放置して、サンプルを見終わってからControl-Cで実行を中止してください。

 Chromeを起動して、アドレスバーに

localhost:8000

を入力すると、~/cocos2d-html5/index.htmlがブラウザ上に表示され、サンプルを選んで遊ぶことができます。

f:id:funige:20131207134731p:plain

  1. Hello World - 自分のゲームを作るときの土台に使えるテンプレート。
  2. Test cases - いろいろな機能のデモです。
  3. Template - これもテンプレート。なんでテンプレートが2つあるんだ。
  4. MoonWarriors - エフェクトの派手なシューティングゲーム
  5. Fruit Attack - これはZoo Keeperですね。
  6. MoonWarriors Simulator - 端末によって表示がどう変わるか確認するデモ。

Windowsの場合

 本書ではできるだけ簡潔に説明するために、主にMac OSXの場合について書いていますが、最後の「iOSアプリの作成」の章以外はWindowsでも実行可能です。

 ファイル操作はUNIXのコマンドを使って説明していますが、もちろんエクスプローラーを使ってもいいですし、DOSプロンプトで対応するコマンドを使って操作することもできるでしょう。
 UNIXと同じコマンドやツールをWindowsで使いたいなら、Cygwinをインストールするのが便利です。CygwinはどうせAndroidのアプリをビルドするときに必要になるので、ちょっと面倒ですがここでCygwinをインストールしておきましょう。Cygwinのホームページ (cygwin.com) からsetup-x86.exe をダウンロードして実行してください。

f:id:funige:20131207134752p:plain

 インストーラはだいたいデフォルトのままでいいのですが、Select Packagesの所でどのパッケージをインストールするか選ばないといけません。とりあえずPythonの下にある「python: Python language interpreter」とDevelの下にある「make: The GNU version of the 'make' utility」だけクリックして選択して下さい。何か足りないときはまたsetup-x86.exeに戻ってやり直せばいいので、そんなに慎重になる必要はありません。

f:id:funige:20131207134812p:plain

f:id:funige:20131207134830p:plain

 インストーラが終了したら、「Cygwin Terminal」をダブルクリックしてターミナルを開いてみましょう。「python -m SimpleHTTPServer」と入力してサーバーが起動すれば、たぶんインストールは成功です。

 あとCygwinのパスを忘れずに設定しておきます。コンピュータの「システムのプロパティ → システムの詳細設定 → 環境変数」で、システム環境変数のPathを編集して「C:¥cygwin¥bin;C:¥cygwin¥usr¥bin;C:¥cygwin¥usr¥local¥bin」を追加します。前のPathをうっかり消してしまうと面倒くさいことになるので、既存のPATHの後にセミコロン「;」を入れて、そのうしろに続けて書きます。ここは慎重に。

f:id:funige:20131207134850p:plain

広告を非表示にする