モーリーのメモ

アプリ開発等（プログラミング、CG作成）、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

マニュアルのチュートリアルをやってみる！ その１：Cocos Creator

Cocos Cocos Creator

＜今回やること！＞

　
　チュートリアルで作成するゲームの画面です。
　f:id:mmorley:20160405233319p:plain:w300
　
　作成に必要なリソース（画像、音声、ビットマップフォント等の素材）は、あらかじめ用意されています。
　このチュートリアルは、『Cocos Creator』の使い方をゼロから、ざっとひととおり体験するのにおすすめです。

　なお、『Cocos Creator』の開発環境の構築については、こちらの記事で説明しています。

　ゲーム開発に興味がある方はぜひお試してみてね。

目次

使用環境

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

作成するゲームについて

　『Pick Up the Stars』というゲームを作成します。

  • 完成版は、下記のリンクで遊べます。
    http://fbdemos.avosapps.com/star-catcher/
  • ゲームの内容
    　ジャンプし続けるキャラクターを左右に動かして、『時間が立つと消える星』にタッチするゲームです。星にタッチするとスコアが加算され、別の場所に星が出現します。タッチする前に星が消えるとゲームオーバーです。

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

  1. 下記のリンクをクリックして、『start_project.zip』をダウンロード
  2. 『start_project.zip』を解凍し、適当な場所に配置する
  3. 『Cocos Creator』を起動
  4. 『Open Other ...（Open other projects）』をクリックし、解凍した『start_project』フォルダを選択して『Open』をクリック
    f:id:mmorley:20190423152331p:plain:w500
    『Cocos Creator』のエディターが起動し、『start_project』が読み込まれます。
    『Assets』パネルに、プロジェクトのすべてのリソース（画像、音声、ビットマップフォント等の素材）が表示されます。
    f:id:mmorley:20190423185420p:plain
    リソースリストは『start_project』フォルダ内のassetsフォルダと同期しています。

『ゲーム』シーンを作成

    補足：シーンについて
    • 『シーン（Scene）』とは、スタート画面、ゲーム画面、設定画面のように画面単位で機能をまとめたものです。
    • 今回作成するのゲームシーンのみです。
    • ゲームシーンには、背景の画像（Sprite）、スコア表示（Label）、キャラクター、各種処理プログラム（Script）が含まれます。
    • ゲームを実行すると、シーンがロードされ、シーンにコンポーネントとして組み込まれたScriptが自動的に実行されます。
  1. 『Assets』パネルで、『assets』フォルダをクリックして選択
  2. 『Assets』パネルの『+』→『Scene』をクリック
    f:id:mmorley:20190423225906p:plain
  3. 作成された『New Scene』の名前を"game"に変更（右クリック→『Rename』）
  4. 『game』をダブルクリックして開く
    補足：Canvasについて
    • シーンを開くと、シーンに配置されたノード（オブジェクト）が『Node Tree』パネルに階層的に表示されます。
    • 新規シーンは『Canvas』ノードを１つだけ持っています。
    • 画像やボタン等のオブジェクトを追加すると『Canvas』ノードの下に配置されます。
    • 『Canvas』のプロパティの『Design Resolution』で、設計上の解像度を設定できます。実行時の解像度が設計と異なる場合のズームの方法は、『Fit Height』と『Fit Width』で設定出来ます。
    • 『Canvas』のプロパティは、『Node Tree』パネルの『Canvas』をクリックすると、『Properties』パネルに表示されます。
      f:id:mmorley:20190424165323p:plain

シーンに画像を配置

『background（背景画像）』を追加

  1. 『Assets』パネルの『textures』フォルダにある『background』を『Node Tree』パネルの『Canvas』ノードにドラッグ
    ＊ツリーに追加する位置（階層と順序）に注意！『Canvas』の下の階層です。
    f:id:mmorley:20190424171739p:plain
    補足：シーンの保存
    　シーンの編集・変更をした場合、メインメニューの『File』-『Save Scene』（またはMacの場合は『command + s』キー、Windowsの場合は『ctrl + s』キー）で保存出来ます。
  2. 『Node Tree』パネルで、『background』をクリック
  3. 『Toolbar』の長方形ツール（Rect Gizmo）をクリック
    f:id:mmorley:20160406210120p:plain
  4. 『Scene』パネルで、『background』の枠をドラッグして『Canvas』のサイズ（紫の枠）より大きくする
    f:id:mmorley:20160406213137p:plain:w400
    最終的に下記のサイズしました。（正確なサイズにする必要はありません。）
    『Properties』パネルの『Node』の『Size』に数値を入力して変更することも出来ます。
    f:id:mmorley:20160406215307p:plain:w500

『ground（地面）』を追加

  1. 『Assets』パネルの『textures』フォルダにある『ground』を『Node Tree』パネルの『Canvas』にドラッグ
    ＊ツリーに追加する位置（階層と順序）に注意！、『Canvas』の下の階層で『background』の下です。
    f:id:mmorley:20190424203527p:plain
    補足：描画の順序
    　『Node Tree』パネルの上にあるノードから先に描画され、一番下の『ground』が最後、つまり一番前面に表示されます。
    　また、サブノード（階層が下のノード）はずっと親ノードの前に表示されます。
  2. 『Node Tree』パネルで、『ground』をクリック
  3. 『長方形ツール』や『移動ツール』等を使用して、『ground』のサイズと位置を下図のように変更
    f:id:mmorley:20190424205856p:plain

キャラクターを追加

  1. 『Assets』パネルの『textures』フォルダにある『PurpleMonster』を『Node Tree』パネルの『Canvas』にドラッグ
    ＊ツリーに追加する位置（階層と順序）に注意！『Canvas』の下の階層で『ground』の下です。
  2. 『Node Tree』パネルで、『PurpleMonster』を右クリックして『Rename』をクリックし、"Player"に名前を変更
  3. 『Properties』パネルで、『Player』の『Anchor』の『y』を0にする
    『Scene』パネルで、アンカーポイント（画像をプログラムで扱う際の原点）がキャラクターの最下部になります。
  4. 『Scene』パネルで、『移動ツール』使用して、『Player』が接地するように移動
    f:id:mmorley:20190425115231p:plain
　
チュートリアルはまだ続きますが、今回はここまでです。
次は、スクリプトを書いてゲームに必要な処理を追加します。

チュートリアルの原本

　チュートリアルの原本は、『Cocos Creator』を起動して最初の画面の『Help』タブの『Tutorial:Make Your First Game』にあります。

    f:id:mmorley:20190423140712p:plain:w500
　完成版のプロジェクトは下記のリンクからダウンロード出来ます。

あとがき

　初めての開発環境で、チュートリアルをすすめると用語を始めとして分からないことが多いと思います。
　とりあえず細かい疑問点は置いておいて、通しでやってみると、点と点が結びついて意味が分かることもあります。

おすすめ・関連する記事

　この記事の続きです。