モーリーのメモ

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

モーリーのメモ

物理エンジンを使ったシンプルなゲームを作る! その2(アニメーションとプレハブを作成):Cocos Creator

<今回やること!>

  • 物理エンジンを使ったシンプルなアクションゲームを作成します。
    こちらの記事の続きです。
    mmorley.hatenablog.com
  • ビジュアルな環境で、プレハブとノードを作成します。
  • フレームアニメーションを作成します。
  • アニメーションに終了時に実行する関数名を登録します。
  • 物理エンジンでノードの動きや衝突を計算するために、物理コンポーネントを設定します。
  • スコア、ベストスコア、ゲームスタート時のカウントダウン用のラベルを配置します。
  • スタート、再スタート用のボタンを配置します。
 
 それでは作成を開始します!

使用環境

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

『Coin』プレハブを作成

アニメーションを設定

 コインが回転するフレームアニメーションを作成します。

  1. 『Node Tree』パネルで、『Canvas』を右クリックし、『Create』→『Create Renderer Nodes』→『Sprite Node』をクリック
  2. 追加した『Sprite Node』の名前を"Coin"にする
  3. 『Assets』パネルの『assets/Sprite/background/coin0』を、『Properties』パネルの『Sprite』コンポーネントの『Sprite Frame』にドラッグ&ドロップ
    f:id:mmorley:20190603100536p:plain:w500
  4. 『Properties』パネルの『Add Component』→『Other Component』→『Animation』をクリック
  5. 『Timeline』パネルを表示し、『Create a new Clip file』をクリック
    f:id:mmorley:20190603104937p:plain:w500
  6. 『New Folder』をクリックし、名前を"Animation"にして『Create』をクリック
  7. 『Save As:』で名前を"Coin.Anim"にして『Save』をクリック
    f:id:mmorley:20190603114012p:plain:w500
  8. 『Assets』パネルの『assets/Animation/Coin』を、『Properties』パネルの『Animation』コンポーネントの『Default Clip』にドラッグ&ドロップ
  9. 『Properties』パネルの『Animation』コンポーネントの『Play On Load』にチェックを入れます。
    『Coin』ノードの読み込み時にアニメーションが再生されるようになります。
    f:id:mmorley:20190603154204p:plain
  10. 『Timeline』パネルで『Open/Close Record Modef:id:mmorley:20190603221822p:plain』をクリック
    f:id:mmorley:20190603131302p:plain
  11. 『Add Property』→『cc.Sprite.spriteFrame』をクリック
    *『cc.Sprite.spriteFrame』は、ノードに『Sprite』コンポーネントを追加しないと表示されません。
    f:id:mmorley:20190603143817p:plain:w500
  12. 『Assets』パネルの『assets/Sprite/background/coin0〜coin7(8個のファイル)』を複数選択し、『Timeline』パネルの『cc.Sprite.spriteFrame』の列の『0:00』にドラッグ&ドロップ
    f:id:mmorley:20190603223022p:plain:w500
  13. 『WrapMode:を『Loop』にする
  14. 『Sample:』を『8』にする
    1秒当たりのフレーム数を8にします。コインの画像は8枚で1回転するので1秒で1回転するアニメーションになります。
  15. 『Timeline』パネルで『Open/Close Record Modef:id:mmorley:20190603221822p:plain』をクリック
  16. 『Save』をクリックして保存
    f:id:mmorley:20190603223104p:plain

物理コンポーネントを設定

 物理エンジンでノードを物体として扱うには、『RigidBody』と『PhysicsCollider』の2つのコンポーネントを追加します。

    RigidBody 物体に物理特性を追加します。物理エンジンによってノードが移動、回転等を行うようになります。
    PhysicsCollider 物体の形状を定義します。形状は衝突の判定や質量の計算等に反映されます。『PhysicsCollider』は形状の定義方法で、Box、Circle、Polygon等の種類があります。
  1. 『Properties』パネルで、『Add Component』→『Physics Component』→『Rigid Body』をクリック
  2. 『Properties』パネルで、『RigidBody』コンポーネントを下図のように設定
    『Static』は静的な剛体、つまりは動かない物体です。コインはアニメーションはしますが物理的には衝突判定のみで動きません。
    f:id:mmorley:20190604163406p:plain
  3. 『Properties』パネルで、『Add Component』→『Physics Component』→『Collider』→『Circle』をクリック
  4. 『Properties』パネルで、『PhysicsCircleCollider』コンポーネントを下図のように設定
    • 『Sensor』にチェックを入れると、衝突は検出しますが、衝突動作は行いません。
    • 『Coin』ノードのサイズが『W34✕H36ピクセル』なので、『PhysicsCircleCollider』の半径を17にします。
    f:id:mmorley:20190605210230p:plain

プレハブを作成

 『Coin』ノードをプレハブ化します。

  1. 『Assets』パネルの『assets』の直下に『Folder』を追加し、名前を"Prefab"にする
  2. 『Node Tree』パネルの『Coin』ノードを、『Assets』パネルの『assets/Prefab』にドラッグ&ドロップ
    f:id:mmorley:20190605143316p:plain
  3. 『Node Tree』パネルの『Coin』ノードを右クリックし、『Delete』をクリックして削除
 
 作成したプレハブを再度編集するには、『Assets』パネルの『Prefab/Coin』をダブルクリックします。
 プレハブの編集から戻るには、『Assets』パネルの『Scene/Game』をダブルクリックします。

『Rock』プレハブを作成

 『Coin』ノードと別の方法で『Sprite』ノードを作ってみます。

  1. 『Assets』パネルの『assets/Sprite/background/rock』を、『Node Tree』パネルの『Canvas』ノードにドラッグ&ドロップ
    f:id:mmorley:20190605165635p:plain
  2. 追加したノードの名前を"Rock"(先頭のrを大文字)にする
  3. 『Properties』パネルで、『Add Component』→『Physics Component』→『Rigid Body』をクリック
  4. 『Properties』パネルで、『RigidBody』コンポーネントを下図のように設定
    f:id:mmorley:20190604163406p:plain
  5. 『Properties』パネルで、『Add Component』→『Physics Component』→『Collider』→『Circle』をクリック
  6. 『Properties』パネルで、『PhysicsBoxCollider』コンポーネントを下図のように設定
    四角いのでBox型を使用します。
    f:id:mmorley:20190605210533p:plain
  7. 『Node Tree』パネルの『Rock』ノードを、『Assets』パネルの『assets/Prefab』にドラッグ&ドロップ
  8. 『Node Tree』パネルの『Rock』ノードを右クリックし、『Delete』をクリックして削除

『Explosion』プレハブを作成

  1. 『Assets』パネルの『assets/Particle/explosion』を、『Node Tree』パネルの『Canvas』ノードにドラッグ&ドロップ
  2. 追加したノードの名前を"Explosion"(先頭のEを大文字)にする
  3. 『Node Tree』パネルの『Explosion』ノードを、『Assets』パネルの『assets/Prefab』にドラッグ&ドロップ
  4. 『Node Tree』パネルの『Explosion』ノードを右クリックし、『Delete』をクリックして削除

タイルマップのノードを作成

 『Node Tree』パネルのノードは、ツリーの上側にあるノードほど、シーン中で奥に描画されます。タイルマップはゲームの背景なのでツリーの一番上に配置します。
 ゲーム中は、ステージは『map00』→『map01』→『map00』→...と2つのタイルマップを交互に入れ替えながらループする作りなので、『map01』の初期位置を『map00』の右隣にします。

  1. 『Assets』パネルの『assets/TiledMap/map00』を、『Node Tree』パネルの『Canvas』ノードにドラッグ&ドロップ
  2. 『Assets』パネルの『assets/TiledMap/map01』を、『Node Tree』パネルの『Canvas』ノードにドラッグ&ドロップ
    f:id:mmorley:20190605222323p:plain
  3. 『map01』ノードの『Properties』パネルで、『Node』コンポーネントを下図のように設定
    f:id:mmorley:20190605223951p:plain

『Player』ノードを作成

『Animation Clip』を作成

 『Running』、『JumpUp』、『JumpDown』の3つの『Animation Clip』を作成します。

  1. 『Assets』パネルで、『Animation』フォルダを右クリックして『Create』→『Animation Clip』をクリックし、名前を"Running"にする
  2. 『Assets』パネルで、『Animation』フォルダを右クリックして『Create』→『Animation Clip』をクリックし、名前を"JumpUp"にする
  3. 『Assets』パネルで、『Animation』フォルダを右クリックして『Create』→『Animation Clip』をクリックし、名前を"JumpDown"にする

『Player』ノードを作成

  1. 『Assets』パネルの『assets/Sprite/running/runner7』を、『Node Tree』パネルの『Canvas』ノードにドラッグ&ドロップ
  2. 追加したノードの名前を"Player"にする
  3. 『Properties』パネルで、『Node』コンポーネントの『Position』を下図のように設定
    x座標は『Player』を画面端から40ピクセルにしたいので、
     -280=-320(左端のx座標)+40(左端からの距離)
    y座標は『Player』を地面の上に立たせるので、
     -69=-160(下端のy座標)+64(タイル2マスの高さ)+27(『Player』ノードの中心の高さ)
    f:id:mmorley:20190607220230p:plain

『Animation』コンポーネントを追加

 先程作成した3つの『Animation Clip』を登録します。

  1. 『Properties』パネルの『Add Component』→『Other Component』→『Animation』をクリック
  2. 『Assets』パネルの『assets/Animation/Running』を、『Properties』パネルの『Animation』コンポーネントの『Default Clip』にドラッグ&ドロップ
  3. 『Properties』パネルの『Animation』コンポーネントの『Clips』を3にする
  4. 『Assets』パネルの『assets/Animation/JumpUp』を、『Properties』パネルの『Animation』コンポーネントの『Clips』の『[1]』にドラッグ&ドロップ
  5. 『Assets』パネルの『assets/Animation/JumpDown』を、『Properties』パネルの『Animation』コンポーネントの『Clips』の『[2]』にドラッグ&ドロップ
  6. 『Properties』パネルの『Animation』コンポーネントの『Play On Load』にチェックを入れる
    f:id:mmorley:20190607142236p:plain

物理コンポーネントを追加

  1. 『Properties』パネルの『Add Component』→『Physics Component』→『Rigid Body』をクリック
    設定値はそのままです。
  2. 『Properties』パネルの『Add Component』→『Physics Component』→『Collider』→『Box』をクリック
  3. 『Properties』パネルで、『PhysicsBoxCollider』を下図のように設定
    f:id:mmorley:20190609091729p:plain

『Running』アニメーションを作成

  1. 『Timeline』パネルを表示し、『Open/Close Record Modef:id:mmorley:20190603221822p:plain』をクリック
  2. 『Add Property』→『cc.Sprite.spriteFrame』をクリック
  3. 『Assets』パネルの『assets/Sprite/running/runner0〜runner7(8個のファイル)』を複数選択し、『Timeline』パネルの『cc.Sprite.spriteFrame』の列の『0:00』にドラッグ&ドロップ
  4. 『WrapMode:を『Loop』にする
  5. 『Sample:』を『8』にする
    f:id:mmorley:20190606155053p:plain

『JumpUp』アニメーションを作成

  1. 『Timeline』パネルで、『Clip:』で『JumpUp』を選択
    f:id:mmorley:20190607153902p:plain
  2. 『Save』をクリックして保存
    これは『Running』の『Animation Clip』の保存です。(編集する『Animation Clip』を切り替えたため)
    f:id:mmorley:20190603223104p:plain
  3. 『Add Property』→『cc.Sprite.spriteFrame』をクリック
  4. 『Assets』パネルの『assets/Sprite/running/runnerJumpUp0〜runnerJumpUp3(4個のファイル)』を複数選択し、『Timeline』パネルの『cc.Sprite.spriteFrame』の列の『0:00』にドラッグ&ドロップ
  5. 『Sample:』を『16』にする
    『JumpUp』は、しゃがんで踏み切るまでのアニメーションです。
    ジャンプ操作→『JumpUp』アニメーション再生完了→飛び上がる、という流れで再生されます。『JumpUp』アニメーションの再生時間は、ジャンプ操作から実際に飛び上がるまでのタイムラグになるので、再生速度を早くしました。
    f:id:mmorley:20190607153644p:plain
  6. タイムラインで、赤線を0:04フレームの位置にドラッグし、『insert frame's event』ボタンをクリック
  7. タイムラインに追加された『白いマーク』をダブルクリック
    f:id:mmorley:20190607161041p:plain
  8. 『FUNCTION』に"onJumpUpAnimCompleted"を入力し、『保存f:id:mmorley:20190607191005p:plain』をクリック
    スクリプトで"onJumpUpAnimCompleted"の名前で関数を定義すると、指定したフレームで実行されます。
    『onJumpUpAnimCompleted』では、『Player』ノードが飛び上がる処理を行います。
    踏み切るアニメーションが完了した後に、『onJumpUpAnimCompleted』を呼び出して飛び上がる流れです。
  9. 『x』を押して閉じる
    f:id:mmorley:20190607191602p:plain

『JumpDown』アニメーションを作成

  1. 『Timeline』パネルで、『Clip:』で『JumpDown』を選択
  2. 『Save』をクリックして保存
    f:id:mmorley:20190603223104p:plain
  3. 『Add Property』→『cc.Sprite.spriteFrame』をクリック
  4. 『Assets』パネルの『assets/Sprite/running/runnerJumpDown0〜runnerJumpDown1(2個のファイル)』を複数選択し、『Timeline』パネルの『cc.Sprite.spriteFrame』の列の『0:00』にドラッグ&ドロップ
    f:id:mmorley:20190610221131p:plain
  5. 『Sample:』を『8』にする
  6. 『Open/Close Record Modef:id:mmorley:20190603221822p:plain』をクリック
  7. 『Save』をクリックして保存
    f:id:mmorley:20190603223104p:plain

スタート画面を作成

  1. 『Assets』パネルの『assets/Sprite/PlayBG』を、『Node Tree』パネルの『Canvas』ノードにドラッグ&ドロップ
  2. 『Node Tree』パネルで、『PlayBG』ノードを右クリック→『Create』→『Create UI Node』→『Node With Button』をクリック
  3. 追加したノードの名前を"Start"にする
  4. 『Node Tree』パネルで、『Canvas/PlayBG/Start/Background/Label』ノードを削除
    f:id:mmorley:20190609094817p:plain
  5. 『Assets』パネルの『assets/Sprite/start_n』を、『Properties』パネルの『Button』コンポーネントの『Normal』にドラッグ&ドロップ
  6. 『Assets』パネルの『assets/Sprite/start_s』を、『Properties』パネルの『Button』コンポーネントの『Pressed』にドラッグ&ドロップ
  7. 『Assets』パネルの『assets/Sprite/start_n』を、『Properties』パネルの『Button』コンポーネントの『Hover』にドラッグ&ドロップ
  8. 『Assets』パネルの『assets/Sprite/start_n』を、『Properties』パネルの『Button』コンポーネントの『Disabled』にドラッグ&ドロップ
    f:id:mmorley:20190609113344p:plain

スコア、ベストスコア、カウント、再スタートボタンを配置

 スコア、ベストスコア、カウント、再スタートボタンは、常に表示する必要があるので『Main Camera』ノードに配置しました。また『Game』シーンで最も手前に表示する必要があるので、ノードの位置を変更します。

『Score』ラベルを作成

  1. 『Node Tree』パネルで、『Main Camera』ノードを下図の位置にドラッグ&ドロップ
    f:id:mmorley:20190609133154p:plain
  2. 『Node Tree』パネルで、『Main Camera』ノードを右クリック→『Create』→『Create Renderer Nodes』→『Node With Label』をクリック
  3. 追加したノードの名前を"Score"にする
  4. 『Assets』パネルの『assets/Font/Score(f:id:mmorley:20190609162108p:plainのほう)』を、『Properties』パネルの『Label』コンポーネントの『Font』にドラッグ&ドロップ
  5. 『Properties』パネルの『Label』コンポーネントを下図のように設定
    『Overfrow』は文字数が増えてラベルサイズを超えた時の処理方法です。
    NONEラベルの幅を大きくして表示文字数を増やす。
    CLAMPラベルの幅は変えず、ラベルの幅を超えた文字は表示されません。
    『Enable Wrap Text(テキストの折り返し)』をオンにすると改行を優先します。
    SHRINKラベルの幅は変えず、文字サイズを小さくして表示文字数を増やします。
    『Enable Wrap Text(テキストの折り返し)』をオンにすると改行を優先します。
    RESIZE_HEIGHTラベルの幅は変えず、ラベルの高さを大きくして、改行して表示します。
    f:id:mmorley:20190609165053p:plain
  6. 『Properties』パネルの『Node』コンポーネントを下図のように設定
    f:id:mmorley:20190610123154p:plain

『Best Score』ラベルを作成

 『Score』ラベルとほぼ同じなので、複製を利用して作ります。

  1. 『Node Tree』パネルで、『Score』ノードを右クリック→『Duplicate(複製)』をクリック
  2. 追加したノードの名前を"BestScore"にする
  3. 『Properties』パネルで、『Label』コンポーネントの『String』を"Best Score: 0"にする
  4. 『Properties』パネルで、『Node』コンポーネントの『Position』の『x』を50にする

『Count』ラベルを作成

  1. 『Node Tree』パネルで、『Main Camera』ノードを右クリック→『Create』→『Create Renderer Nodes』→『Node With Label』をクリック
  2. 追加したノードの名前を"Count"にする
  3. 『Assets』パネルの『assets/Font/Score(f:id:mmorley:20190609162108p:plainのほう)』を、『Properties』パネルの『Label』コンポーネントの『Font』にドラッグ&ドロップ
  4. 『Properties』パネルの『Label』コンポーネントを下図のように設定
    f:id:mmorley:20190610125427p:plain
  5. 『Properties』パネルの『Node』コンポーネントで『Color』をクリックし、『Hex Color』を変更
    f:id:mmorley:20190610124956p:plain

『ReStart』ボタンを作成

  1. 『Node Tree』パネルで、『Main Camera』ノードを右クリック→『Create』→『Create UI Nodes』→『Node With Button』をクリック
  2. 追加したノードの名前を"ReStart"にする
  3. 『Node Tree』パネルで、『Main Camera/ReStart/Background/Label』ノードを削除
    f:id:mmorley:20190610142229p:plain
  4. 『Assets』パネルの『assets/Sprite/restart_n』を、『Properties』パネルの『Button』コンポーネントの『Normal』にドラッグ&ドロップ
  5. 『Assets』パネルの『assets/Sprite/restart_s』を、『Properties』パネルの『Button』コンポーネントの『Pressed』にドラッグ&ドロップ
  6. 『Assets』パネルの『assets/Sprite/restart_n』を、『Properties』パネルの『Button』コンポーネントの『Hover』にドラッグ&ドロップ
  7. 『Assets』パネルの『assets/Sprite/restart_n』を、『Properties』パネルの『Button』コンポーネントの『Disabled』にドラッグ&ドロップ
    f:id:mmorley:20190610162949p:plain
         また途中ですが、今回はここまでです。

あとがき

 今回で、ビジュアルエディタで行う作業の大半を済ませました。まだボタンのクリックイベント用の関数の登録等が残っているのですが、それはスクリプトを書く必要があるので次回に行います。
 パーティクルは、下記のサイトで無料で作成することが出来ます。

 ビットマップフォントは、下記のサイトで無料で作成することが出来ます。