LoginSignup
2
2

More than 5 years have passed since last update.

壱 Cocos2d-xを始める Cocos Code IDEでポチッとする

Last updated at Posted at 2015-08-24

目次

1 はじめに
2 今回の範囲
2.1 環境準備
2.1.1 cocos2d-x ゲームエンジン、バージョン3.3を使用
2.1.2 Python 統合開発環境を動かすのに必要、バージョン2.7.10を使用
2.1.3 Cocos Code IDE 統合開発環境 Luaでの開発に使用
2.1.4 新規プロジェクト作成と実行
3 今後の予定
3.1 デバッグ情報の非表示、画面サイズの設定、レイヤー、スプライト等

はじめに

この記事は、cocos2d-xを使ったAndroid、iOS向けゲームアプリ開発を始める人に向けた、覚書です。本稿では、初回ビルドまでの手順が比較的容易で、かつライブコーディングによる高効率な開発が見込める開発環境Cocos Code IDEとLua言語使います。

(他にもJavascriptやC++が開発言語として選択できます。Javascriptを使う場合は本稿とほぼ同じ手順でゲーム開発を行う事ができますが、C++を使う場合、コマンドラインによるビルド環境の構築が必要となります。)

環境準備

cocos2d-x-3.3.zipを、c:/cocosに解凍します。

python-2-7-10.msiをダブルクリックしてインストールします。

(2015/8/25現在 公式サイトのダウンロード一覧にないため 公式サイトのアドレスに /filedown/cocos-code-ide-win64-1.2.0.exe を付加してダウンロード)
cocos-code-ide-win64-1.2.0.exeをダブルクリックしてインストールします。Cocos Code IDEを起動し、
ワークスペースをc:/cocos/workspaceに設定、メニューから、ウィンドウ→設定をクリックし、設定ダイアログを開きます。
設定ダイアログ左のCocosをクリックし、Pythonロケーションにc:/Python27を設定します。
すでにJDKがインストールされている場合は、JDKロケーションにそのパスが表示されます。

1-1 cocos code ide config cocos.png

設定ダイアログ左の▶︎Cocosの▶︎をクリック→Frameworksをクリック、そこで、Frameworks下のEngine Modeを選択し、そしてLuaの右のプルダウンメニューからcustomを選択、ここでc:/cocos/cocos2d-x-3.3フォルダをパスとして設定します。その後、OKボタンを押して設定ダイアログを閉じます。

1-2 cocos code ide config framework.png

Cocos Code IDEのメニューから、ファイル→新規→プロジェクトをクリックして、
新規プロジェクトウィンドウからCocos Luaプロジェクトを選択して次へ、
CocosProjectプロジェクト作成画面でプロジェクト名をStartにして次へ、
Simulator設定画面で方向を縦、初期画面の大きさをCustomを選択し、その下に幅540高さ960を入力し、終了ボタンをクリックします。(この辺の設定は後から変更できます。また、ネイティブコードは次回以降Android、iOS向けにビルドするときに生成するので今は選択しません。)

1-3 cocos code ide config new project.png

Cocos Code IDEのExplorerウィンドウからプロジェクトのフォルダをクリックし、Cocos Code IDE上部からWin32 Runボタンをクリックし、

1-4 cocos code ide run.png

下記のような実行画面が表示されれば初期設定は完了です。

1-4 cocos code ide config run.png

Lua言語で記述されたコードが、Windowsアプリとして実行されているのが上記状態です。
次回以降AndroidやiOS端末で実行することで、共通コード(本稿ではLua言語のコード)によるマルチプラットフォーム向けゲーム開発を体験していきます。

今後の予定

cocos2d-xおよびCocos Code IDEを使用する場合、新規プロジェクト作成時にサンプルコードが含まれた状態でプロジェクトが生成されます。今回使用したver3.3のLuaプロジェクトでは、踊るリスと花園がサンプルコードになっていますが、Javascript向け環境を設定した場合は回転する四角い絵のサンプルコードが含まれています。サンプルコードの内容について興味がある人は、次回以降説明予定のスプライト、アクション、レイヤー、イベントといった基本要素を理解してから読み返してみることをお勧めします。

次回は、今回作成したプロジェクトからサンプルコードの不要部分を削除し、コードを追加していきながら、開発者向け情報を非表示にしたり、スプライト、レイヤーといった基本要素を説明していきます。基本要素の説明がある程度終わった所で、AndroidとiOS端末での実行を行う予定です。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2