モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

マニュアルのチュートリアルをやってみる! その1:Cocos Creator

『Cocos Creator』の『User Manual』にあるチュートリアル、『Create the first game』をやってみます。

 作成するゲームの画面はこんな感じです。
 f:id:mmorley:20160405233319p:plain:w300
 チュートリアルは、空のプロジェクトに必要な素材(画像、音声、ビットマップフォント)が追加されただけの所から始まります。
 『Cocos Creator』の使い方をゼロから、ざっとひととおり体験するにはおすすめです。
 文章は長いですが、作業は少ないです。
 グーグル先生達と協力して、がんばって訳しました。

使用環境

 私が使用している環境です。

  • Mac OS X El Capitan Version 10.11.4
  • Cocos Creator Version 1.0
  • ブラウザ:Google Chrome Version 49.0.2623.110 (64-bit)

チュートリアルの原文の場所

 チュートリアルの原文は、『Cocos Creator』を起動した最初の画面の『Help』タブの『Tutorial:Make Your First Game』から見ることが出来ます。
f:id:mmorley:20160412160034p:plain:w500
 
 エディタの画面を開いている場合は、アプリケーションメニューの『Help』-『User Manual』をクリックし、左の一覧の『Quick Start』から見ることが出来ます。

クイックスタート:最初のゲームを作成

 ここでは『Cocos Creator』のエディタパネル、機能、ワークフローを体系的に紹介します。『Cocos Creator』によるゲーム開発方法の一般的な手順が学べます。
 
 このチュートリアルによってゲームを作るのに十分な情報が得られるかもしれませんが、各機能とワークフローより理解するためには、このガイドを引き続き読んで下さい。
 
 このチュートリアルでは『Pick Up the Stars』という名前のゲームっぽいものを作成します。このゲームのプレイヤーは、ジャンプし続けるモンスターを操作して、連続して出現する星にタッチさせます。加速度がついているので操作が難しくなっています。友達と誰が一番星を取れるか競いましょう。
 
 このゲームの完成版は、ここで試せます。

プロジェクトとリソースを準備

 このゲームを作るために必要な全てのリソースを用意しました。開始用のプロジェクトを任意の場所にダウンロード・解凍して下さい。

 
 完成版のプロジェクトもダウンロード出来ます。チュートリアルで、わからなくなった場合に参考にして下さい。

開始用のプロジェクトを開く

  1. 『Cococs Creator』を起動
  2. 『Open Other ...(Open other projects)』をクリック
    f:id:mmorley:20160406142339p:plain:w400
  3. 開いたウインドウで、先ほどダウンロード、解凍した『start_project』を選択し、『Open』をクリック
    『Cocos Creator』のエディタが起動して、次のように表示されます。
    f:id:mmorley:20160406142756p:plain:w400

ゲームのリソースを確認

 開始用のプロジェクトには、ゲームに必要な全てのリソースが含まれています。従って他のリソースをインポートする必要がありません。リソースのインポートの詳細については『Asset Workflow』に関する記述をお読み下さい。
 
 プロジェクトのリソースを確認しましょう。『Assets』パネルには、プロジェクトのすべてのリソースの割り当て図が表示されています。
 
 プロジェクトのリソースのルート・ディレクトリは『assets』という名前で、解凍した開始用プロジェクトのフォルダの『assets』ディレクトリと一致します。
 このディレクトリ以下に含まれるリソースだけが、『Cocos Creater』によって管理されます。
 
 『Assets』パネルにはディレクトリが階層で表示されます。フォルダのアイコンf:id:mmorley:20160406152716p:plainの横の三角をクリックするとフォルダが展開されます。すべてのフォルダを展開すると次のようになります。
f:id:mmorley:20160406153423p:plain
 
 リソースは全てドキュメントです。リソースはプロジェクトにインポートされた後、拡張子で種類が判別され、アイコンで区別されます。次に示すのは、プロジェクトのリソースの種類と使用方法です。

  • f:id:mmorley:20160406155540p:plainオーディオドキュメント(一般的にmp3ドキュメント)
    キャラクターがジャンプまたは得点した時に、それぞれjump、scoreと名付けられたオーディオドキュメントが再生されます。
  • f:id:mmorley:20160406161702p:plainビットマップフォント(fntとpngドキュメントで構成)
    ビットマップフォントはゲーム開発で一般的に使用されるフォントリソースです。詳細については『Font』の章を読んで下さい。
  • 画像リソース(通常pngやjpgドキュメント)は、それぞれ簡略化された画像がアイコンとなります。画像ドキュメントはプロジェクトにインポートされた後、textureタイプのリソースとして処理されます。これらのリソースは、シーンやコンポーネントのプロパティにドラッグして使用します。

ゲームシーンを作成

 『Cocos Creator』において、ゲームシーンは、開発におけるゲームコンテンツの中核であり、またプレイヤーにゲームコンテンツを提示するための手段です。ゲームシーンは、通常以下のコンテンツを含みます。

  • シーンの画像と文字(Sprite、Label)
  • キャラクター
  • ゲームのロジックを記述するスクリプトは、シーンのノードにコンポーネントとして付属します。

 
 プレイヤーがゲームを実行すると、ゲームシーンがロードされます。その後、コンポーネントに含まれるゲーム・スクリプトが自動的に実行され、開発者が設定した様々なロジックを実施します。したがって、リソースは別として、ゲームシーンは、すべてのコンテンツ制作の基礎となっています。新しいシーンを作成します。

  1. 『Assets』パネルで、『assets』ディレクトリをクリック(このディレクトリにシーンが作成されます。)
  2. 『Assets』パネルの左上隅の『+』マークをクリックし、ポップアップメニューで『Scene』を選択
    f:id:mmorley:20160406173650p:plain
  3. 『New Scene』という名前でシーンドキュメントが作成されるので、それを右クリックして『Rename』を選択し、『game』という名前に変更
  4. 『game』シーンをダブルクリックしてシーンを開く(『Scene』パネルと『Node Tree』パネルに表示されます。)

Canvasを理解するために

 シーンを開いた後、現在のシーンの全てのノード(とその階層関係)が『Node Tree』パネルに表示されます。新しく作成されたシーンは『Canvas』というノードを1つだけ持っています。『Canvas』はキャンバスノード、またはレンダリングノードと呼ぶことが出来ます。『Canvas』をクリックするとそのプロパティが『Properties』パネルに表示されます。
f:id:mmorley:20160406181622p:plain:w300
 『Design Resolution』プロパティは、ゲームのデザイン解像度を設定します。『Fit Height』と『Fit Width』は、実行する画面の解像度が異なる場合に、『Canvas』をズームする方法を規定しています。

 『Canvas』には異なる解像度への調整機能があるので、通常『Canvas』の下に画像の表示を担当する全てのノードを配置します。『Canvas』の『Scale』プロパティが変更されたとき、全ての画像は、そのサブノードとして異なるサイズの画面に合わせて一緒にズームします。
 
 詳細については、『Canvas』の章をお読み下さい。我々が今知っておくべきことは、追加するシーンの画像が、全て『Canvas』ノードの下に置かれることだけです。

シーンの画像を設定

『background』を追加

 最初に『Assets』パネルで『assets/textures/background』にある『background』の画像リソースを見つけます。このリソースを『Node Tree』パネルの『Canvas』ノードにドラッグします。『Canvas』ノードが、オレンジ色で強調表示されるまでマウスを離さないでください。オレンジ色は、画像リソースとして『background』を使用しているサブノードが、追加されることを意味します。
f:id:mmorley:20160406195507p:plain
 マウスボタンを離すと『background』と名前が付いたノードが『Canvas』下に追加されます。リソースをノードにドラッグして追加すると、ノードは自動的に画像リソースの名前になります。
 
 シーンの編集・変更をした場合、メインメニューの『File』-『Save Scene』によって素早く変更を保存することが出来ます。またはショートカットキー (Macの場合は『command + s』キー、Windowsの場合は『ctrl + s』キー)によって保存できます。

『background』のサイズを変更

 『Scene』パネルで、新しく追加された『background』の画像を見ること出来ます。次に『background』が画面全体をカバーするように画像のサイズを変更します。
 
 まず『background』ノードをクリックし、『Cocos Creator』の画面最上部にある『Toolbar』の左から4番目の矩形ツール(Rect Gizmo)をクリックします。
f:id:mmorley:20160406210120p:plain
 このツールは画像ノードのサイズを変更するのに便利です。『Scene』パネルで、マウスを『background』の左端に置き、『background』の左側がデザイン解像度を示す青色の枠を超えるまでドラッグします。
f:id:mmorley:20160406213137p:plain:w400
 それから『background』画像が、デザイン解像度の枠を完全にカバーするように右と上下に同様にドラッグします。
f:id:mmorley:20160406215307p:plain:w500
 矩形ツールで『background』イメージのサイズを変更している時、『Properties』パネルの『Node』の『Size』プロパティが、それに応じて変化しているのが確認出来ます。完了後の『background』画像のサイズは、約(1360, 760)です。『Size』プロパティに数値を直接入力してサイズを変更することも出来ます。このサイズの背景画像であれば、市場に出回っている全ての携帯電話の画面全体を例外なくカバーすることが出来ます。

『ground』を追加

 メインキャラクタがジャンプするには地面が必要です。すぐに追加しましょう。『background』と同じ方法です。『Assets』パネルで『assets/textures/ground』を『Node Tree』パネルの『Canvas』にドラッグします。ドラッグする時に、新しく追加するノードと『background』ノードの順序を設定することが出来ます。リソースをドラッグした状態で、『Canvas』に強調表示されたオレンジ色の枠が現れて『background』の下に挿入位置を示す緑色のラインが表示されるまで、マウスポインタを移動して、それからマウスを離してください。これにより『ground』はノードのツリーで『background』の下に置かれ、同じく『Canvas』のサブノードになります。
f:id:mmorley:20160406222237p:plain
 
 『Node Tree』パネルの上にあるノードから順にレンダリングされます。一番下の『ground』オブジェクトが、『Scene』パネルで最初に表示されることが分かります。また、サブノードはずっと親ノードの前に表示されます。ノードの表示順序をコントロールするためにノードの階層順序と関係を調整出来ます。
 
 『background』を変更した方法で、矩形ツールによって『ground』ノードも適切なサイズに設定します。矩形ツールがアクティブなとき、頂点とノードの4辺以外の部分をドラッグすることで、ノードの位置を変更することが出来ます。設定された『ground』ノードの状態は、次のようになります。
f:id:mmorley:20160406225004p:plain:w500 
 
 矩形ツールの他に、ノードの位置を変更する移動ツール(Move Gizmof:id:mmorley:20160406225705p:plain
を使用することもできます。ノードに表示された移動ツールの矢印をドラッグすると、1度に1つの座標軸方向にノードの位置を変更できます。
  
 『background』と『ground』の位置とサイズは、正確な数値がなくてもドラッグで設定することが出来ます。完全な値が設定したい場合は、画面に応じて、位置とサイズの数値を直接入力出来ます。

メインキャラクタを追加

 次にメインキャラクタのリトルモンスターが登場させます。『Assets』パネルの『assets/texture/PurpleMonster』からドラッグして、『Node Tree』パネルの『Canvas』の下に配置します。そしてメインキャラクタが前面に表示されるように『ground』より下にします。
 シーンノードでメインキャラクタのオーラが強調されるために、新しく追加した『PurpleMonster』ノードを右クリックして『Rename』を選択し、名前を"Player"に変更します。
 
 次にメインキャラクタのプロパティを設定します。最初に『Anchor』の位置を変更します。ノードのアンカーポイントはデフォルトでは中央です。これはノードの中心の位置が、ノードの位置になっていることを意味します。地上でジャンプするように、メインキャラクタのベースの位置を操作したいので、メインキャラクタの足の下にアンカーポイントを設定します。『Properties』パネルで『Anchor』プロパティを探し、『y』に"0"を設定して下さい。『Scene』パネルで、メインキャラクタの位置を表す移動ツールの矢印が、メインキャラクタの足の下に表示されていることが分かります。
 
 次に『Scene』パネルから『Player』をドラッグして地上に配置してください。下図のようになります。
f:id:mmorley:20160407143108p:plain:w500
 これで、シーンの基本的な、芸術的コンテンツが準備されました。次のセクションでは、ゲームコンテンツを生き生きと動かすためのコードを書きます。
 
チュートリアルはまだ続きますが、今回はここまで。

あとがき

 ドキュメントでは『Cocos Creator』の画面を『Resource Manager』、『Scene Editor』、『Arrangement editor』、『Property checker』の名前で呼んでいますが、実際の画面に名前が出てこないので、パネル名で書きました。
 
 『サブノード』の設定の仕方は、このチュートリアルを見て知りました。
 マニュアルの記述の独特の言いまわしに苦戦しました。。。
 

この記事の続き

 この記事の続きです。
mmorley.hatenablog.com