Cocos CreatorをWindows10にインストールする手順

2016年10月23日

様々なプラットフォームで動作するアプリの開発ができる Cocos2d-x のGUI制作ツール Cocos Creator のダウンロードとインストール方法についてです。

Cocos Creator のアイコン

インストーラのダウンロード

公式サイトにアクセスします。

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

cocos2d-xの公式サイト

「DOWNLOAD」をクリックします。

Cocos Creator のダウンロードページ

Cocos Creator の WIN を選択します。するとページが切り替わり、自動的にインストーラのダウンロードが開始されます。

Cocos Creator のインストール

インストーラのダウンロードが終了したら、それを起動します。

インストール時の言語選択

インストールの際の表示言語を英語か中国語にできます。現在(2016/10/23)は日本語はありません。

インストールディレクトリの選択

インストールディレクトリの設定と利用規約の同意を求められます。インストールには約1GBの空きが必要です。

I agree ... にチェックを入れて INSTALL をクリックします。

Cocos Creator のインストール完了

しばらく待つとインストールが完了します。RUN を押して Cocos Creator を起動しましょう。

Cocos Creator の初期設定

起動すると、以下のように言語選択を求められます。これも英語か中国語から選ばなくてはならず、日本語はありません。

CocosCreator起動時設定

言語選択が終わると、Cocos Developer のアカウントでのログインを求められます。まだ登録していない方は公式サイトからアカウント登録を行ってください。

Cocos Developer アカウントでログイン

ログイン後、次のような画面が表示されます。

Cocos Creator の起動画面

New Project をクリックしてください。

プロジェクトテンプレートの選択

Hello World を選択します。この際、ファイアウォールの警告が表示されることがありますが、許可してください。

ファイアウォールの警告ダイアログ

以上で設定は完了です。プロジェクトの制作画面が表示されます。

Cocos Creator の製作画面

ラベルを表示してみる

画面にUI(表示要素)を追加してみましょう。Node Library から Label をドラッグして Scene にドロップしてください。

その後、画面右の Properties の中にある Label の String を変更すると、表示する文字を変更できます。

ラベルをSceneに追加

この状態で、画面上部の実行ボタン(再生ボタン)を押すとブラウザで画面が確認できます。

ブラウザで動作確認

Cocos Creator では、このように簡単にアプリのUIパーツを画面に配置することができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です