ページ一覧

Cocos Creator 3 導入編

Cocos Creator 3 カンタン2Dゲーム制作

プロジェクトの作成

Cocos Dashboardの左側メニューのProjectを押します。

Editor Versionで使用するCocos Creatorのバージョンを指定します。
Templatesで Empty(3D)もしくはEmpty(2D)を選択します。
（この記事の続きでは、2Dのゲーム作成で説明を進めます）
Nameに任意のプロジェクト名を入力します。
（この記事の続きで2Dのゲーム作成を進める場合はFishGameとします）
Locationにプロジェクト作成するパスを入力します。
（ここではC:\CocosCreatorWorkとします）

右下のCreateボタンを押します。

空のプロジェクトでCocos Creatorが起動します。
Cocos Creatorを終了するとCocos Dashboardに戻ります。
先ほど作成したプロジェクトが一覧に表示されるので、次回以降はここをクリックして起動します。

画面の説明

ここでは2Dのテンプレートでプロジェクトを作成した場合の画面を説明しています。

まずは大まかに画面にあるパネルについて説明します。
それぞれの細かい使い方は、続きの記事でその都度説明します。
なお、Cocos Creatorではゲーム内で扱う画像データのことを Sprite（スプライト） と呼びます。

No	パネルの名称	説明
1	Assets (アセット)	シーン、スプライト、スクリプトファイルなど、ゲーム内で使用するアセット（資材）を登録します。
2	Hierarchy (ヒエラルキー)	ヒエラルキーとは「階層」の意味で、アセットにある1つのシーンを編集します。シーンとは画面を構成するデータのことです。
3	Scene （シーン）	ヒエラルキーパネルで開いているシーンについて、配置しているNode（ノード）の位置を編集します。シーン上にあるスプライト等をノードと呼びます。
4	Inspector （インスペクター）	ヒエラルキーで選択しているNode（ノード）について、詳細な設定を行います。
5	Assets Preview （アセットプレビュー）	アセットパネルで選択しているアセットのプレビューを行います（スプライトなどに限る）。

各パネルはドラッグ＆ドロップで移動でき、パネル右上のハンバーガーメニューでポップアップに変更できます。
初期状態に戻したい場合、メニューバーからCocos Creator→Layout→Defaultを選択します。

また、メニューバーのPanelで任意のパネルを開けます。

プロジェクトのプロパティ

事前に確認/変更が必要な、プロジェクトのプロパティの主な画面について見ていきます。
メニューバーからProject→Project Settingを選択します。Project Settingダイアログが開きます。

Project Data(プロジェクトデータ)

左メニューのProject Dataを選択します。

Design Width,Design Height：デザイン時の画面サイズを決定します。
Fit Width, Fit Height：スマホ等に出力した際に、画面の縁にフィットして表示するかどうかを決定します。
　（※本記事では画面サイズを初期値の960x640、またFit Width, Fit Heightは両方ONで解説を進めます。）

Feature Cropping(機能の有効/無効の切り替え)

左メニューのFeature Croppingを選択します。
この画面ではそのゲーム内で利用する機能の有効/無効の切り替えが行えます。
また2Dのエリアではプルダウンで2D Physic Systemの切り替えが行えます。
（ここでは初期値のままでよいです。詳細は後の記事で説明します。）

Splash Setting

左メニューのSplash Settingを選択します。
スマホ等に出力した際のスプラッシュ画面が設定できます。

環境設定

メニューバーからCocos Creator→Preferenceを選択します。
左メニューのExternal Programs（外部ソフト）を選択します。
Default Script Editerの行で、虫眼鏡アイコンを押し、VSCodeのパスを選択します。
VSCodeは初期値では、以下の場所にインストールされます。

C:\Users\＜ユーザ名＞\AppData\Local\Programs\Microsoft VS Code\Code.exe

（※他のツールでも可能ですが、本記事ではVSCodeで説明を進めます。）
Android SDKなどのパスもこの画面で設定します。

以上です。

Cocos Creator 3 プロジェクト作成と画面の説明