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

# ページ一覧

__Cocos Creator 3 導入編__
- [Cocos Creator 3 ダウンロード](https://qiita.com/Hiro256/items/941b196f2e3f0db9e7da)
- [Cocos Creator 3 インストール](https://qiita.com/Hiro256/items/056e922af7821e482e88)

__Cocos Creator 3 カンタン2Dゲーム制作__
- プロジェクト作成と画面の説明← __本記事__
- [(1)【トゥイーンの使い方】](https://qiita.com/Hiro256/items/872f82fe7c875106faaf)
- [(2)【プレハブの使い方】](https://qiita.com/Hiro256/items/26c4da8b46565e319471)
- [(3)【衝突判定（コライダの使い方）】](https://qiita.com/Hiro256/items/153777d22a3e24e4bb5a)
- [(4)【アニメーションクリップの使い方】](https://qiita.com/Hiro256/items/f077e64bdc047bc8ef16)
- [(5)【パーティクルの使い方】](https://qiita.com/Hiro256/items/4b91f426d88cfd9e2e82)
- [(6)【ラベルアトラスの使い方】](https://qiita.com/Hiro256/items/a0716a722a709414afe6)

# プロジェクトの作成

`Cocos Dashboard`の左側メニューの`Project`を押します。
* `Editor Version`で使用する`Cocos Creator`のバージョンを指定します。
`Templates`で `Empty(3D)`もしくは`Empty(2D)`を選択します。
（この記事の続きでは、2Dのゲーム作成で説明を進めます）

* `Name`に任意のプロジェクト名を入力します。
（この記事の続きで2Dのゲーム作成を進める場合は`FishGame`とします）

* `Location`にプロジェクト作成するパスを入力します。
（ここでは`C:\CocosCreatorWork`とします）

右下の`Create`ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/521c35e2-acfc-865d-4c89-8693877a45e3.png)

空のプロジェクトで`Cocos Creator`が起動します。
`Cocos Creator`を終了すると`Cocos Dashboard`に戻ります。
先ほど作成したプロジェクトが一覧に表示されるので、次回以降はここをクリックして起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/0e52ed35-8f94-3074-7ee5-b44049bf0483.png)

# 画面の説明

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

まずは大まかに画面にあるパネルについて説明します。
それぞれの細かい使い方は、続きの記事でその都度説明します。
なお、Cocos Creatorではゲーム内で扱う画像データのことを __Sprite（スプライト）__ と呼びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/d963548f-a885-e4fe-1db2-e322e2a42257.png)

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

各パネルはドラッグ＆ドロップで移動でき、パネル右上のハンバーガーメニューでポップアップに変更できます。
初期状態に戻したい場合、メニューバーから`Cocos Creator`→`Layout`→`Default`を選択します。
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/45397542-6bd1-043e-97f5-41870d181048.png">
また、メニューバーの`Panel`で任意のパネルを開けます。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/6f23ff67-ed64-9c4d-572c-d3ccea5dc3d1.png">

# プロジェクトのプロパティ
事前に確認/変更が必要な、プロジェクトのプロパティの主な画面について見ていきます。
メニューバーから`Project`→`Project Setting`を選択します。`Project Setting`ダイアログが開きます。
## Project Data(プロジェクトデータ)
左メニューの`Project Data`を選択します。
* `Design Width`,`Design Height`：デザイン時の画面サイズを決定します。
* `Fit Width`, `Fit Height`：スマホ等に出力した際に、画面の縁にフィットして表示するかどうかを決定します。
　（※本記事では画面サイズを初期値の`960x640`、また`Fit Width`, `Fit Height`は両方ONで解説を進めます。）

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/a776c00a-fcab-d0d9-a39d-da01f7a99462.png">

## Feature Cropping(機能の有効/無効の切り替え)
左メニューの`Feature Cropping`を選択します。
この画面ではそのゲーム内で利用する機能の有効/無効の切り替えが行えます。
また`2D`のエリアではプルダウンで`2D Physic System`の切り替えが行えます。
（ここでは初期値のままでよいです。詳細は後の記事で説明します。）
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/a0b7d0e0-5933-e61e-6351-b2e10fc281f0.png">

## Splash Setting
左メニューの`Splash Setting`を選択します。
スマホ等に出力した際のスプラッシュ画面が設定できます。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/0f0f1f06-c9f6-e8e6-093c-b599717dcaba.png">

# 環境設定
メニューバーから`Cocos Creator`→`Preference`を選択します。
左メニューの`External Programs`（外部ソフト）を選択します。
`Default Script Editer`の行で、虫眼鏡アイコンを押し、`VSCode`のパスを選択します。
`VSCode`は初期値では、以下の場所にインストールされます。
```
C:\Users\＜ユーザ名＞\AppData\Local\Programs\Microsoft VS Code\Code.exe
```
（※他のツールでも可能ですが、本記事ではVSCodeで説明を進めます。）
`Android SDK`などのパスもこの画面で設定します。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/55ece8da-1975-c363-06d8-589e86668a30.png">

以上です。