ページ一覧
Cocos Creator 3 導入編
Cocos Creator 3 カンタン2Dゲーム制作
- プロジェクト作成と画面の説明← 本記事
- (1)【トゥイーンの使い方】
- (2)【プレハブの使い方】
- (3)【衝突判定（コライダの使い方）】
- (4)【アニメーションクリップの使い方】
- (5)【パーティクルの使い方】
- (6)【ラベルアトラスの使い方】
プロジェクトの作成
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などのパスもこの画面で設定します。
以上です。