カードゲームの作り方

【Unity カードゲーム】ガチャ(パック)機能の実装方法⑤ カードの移動アニメーション生成編【解説通りに作るだけ】

こんにちは、みじんこと申します。

本記事では前記事から引き続き、Unityでのガチャ(パック)機能の実装方法を説明します。

そちらをまだ見ていない方は、実施後にこの記事に進んで頂けると良きかと思います!

本記事では⑤のガチャ機能における「カードの移動アニメーションの実装」を解説していきます。

  1. 前準備とカードの作成
  2. カードとパックの生成実装
  3. カードの種類の実装
  4. カードのランダム生成機能の実装
  5. カードの移動アニメーションの実装
  6. カード詳細パネルの実装
  7. ショップの実装

本記事の完成形としてはこんな感じですね。

こんな感じで、パック開封時にカードが展開されるようにしていきます!!

それでは今回も頑張っていきましょう!!

【実装概要】本記事で実装する内容について

今回はカードの移動アニメーションを実装していきますが、この流れにて実装していきます。

  1. DOTween(アニメーション用のアセット)のインポート
  2. カードを移動させる処理を実装

「DOTween」って言うアニメーションを簡単に実装できるアセットを使って、

カードの動きを実装していく流れです。

それでは早速やっていきましょう!

手順①:DOTweenのインストール

それではまずは「DOTween」というアセットをインストールしていきましょう。

※DOTween:「Unityで動きをつけたいならこれを使え!」と言われるくらいに有名なアセット!

まずはUnityの画面にて、上部メニューのWindow→AssetStoreをクリック

そしたらUnity Asset Storeにアクセスされると思うので、検索バーにdotweenと入力して検索

DOTweenって名前のアセットがあると思うのでクリック。(Proじゃない方ね)

DOTweenのページに飛ぶので、

青いボタン(マイアセットに追加する or Unityで開く)をクリックしてUnity画面を開く。

下記のウィンドウが表示されるので、「Import」をクリック

下記のウィンドウが表示されるので、また「Import」をクリック

下記のウィンドウが出てくるので、「Open DOTween Utility Panel」をクリック

「Setup DOTween」をクリック

ちょっと待ってるとApplyが押せるようになるので、クリックする。

ウィンドウが閉じたら、もう設定は終わってるはずなので、閉じてOK!!

手順②:カード移動アニメーションの実装

ではアセットのインポートが完了したので、実装に進んでいきましょう。

この流れで進めていきます!

  1. Unity上で、カードの移動先を作成
  2. 実際にカードが動く処理をスクリプトに記載
  3. Unity上の設定(スクリプトのアタッチとか)
  4. ゲームの実行

ではやっていこう!!

カードの移動先を作る

ではまずはカードが展開される場所を作っていきましょう!

  1. 新しくPanelを作って、名前をExpandCardTransに変更
  2. パラメータを設定
  3. AddComponentして、Grid Layout Groupを追加
  4. パラメータを設定!
みじんこ

ちなみに「Grid Layout Group」っていうのは、
子要素を指定の大きさで均等に並べてくれる便利なコンポーネントのこと!!

④で設定した値に沿って子要素のセルの大きさや並び方が変わるよ。

今作ったExpandCardTransの中に更にパネルを作っていくよ。

  1. ExpandCardTransの子要素として、新しくPanelを8個作成。
    名前をExpandCardTrans1〜ExpandCardTrans8にしてね。
  2. こんな感じになればOK!!

この8枚のパネルにカードが広がって移動していくイメージです!

スクリプトの作成と記載

そしたら次にスクリプトを作っていこう!!

まずは「CardMovement」スクリプトを作成。

このスクリプトにカードが移動する処理を書いていくよ。

CardMovementコードの記載と解説

ハイライト箇所に注目して追記、変更。(丸ごとコピペでもOK)

上からざっと説明すると、

4行目の「using ~」の記載は、DOTweenの機能を使うときに記載するもの!って認識でOK。

そして8〜14行目の「ExpandThisCard」メソッドですが、これが今回の移動処理の肝になります!

ただやってることは単純で、

  • カードの親要素(※)を変更
  • 指定の場所にカードを移動
  • 動いてる間、処理を止めておく(コルーチン処理)

これだけですね。

ただこのコルーチンってのがかなり大事なので、後ほど説明します。

※親要素:Unity上で言うと、対象オブジェクトの上位の要素のこと。図解するとこれ↓

【補足】コルーチンって何よ!!

プログラムの処理を一旦止めることが出来る関数のことをコルーチンって言います。
(正確な説明ではないかも)

※正確に知りたい人はこちらをチェック→ コルーチン – Unity マニュアル

コルーチンを使いたい時はまず、
「この関数はコルーチンだよ!」って宣言してあげる必要があります。
その宣言が「IEnumerator」です。(ExpandThisCardメソッドの前に書いてあるやつ)

IEnumerator メソッド名って書いてあげることで、
「このメソッドはコルーチンなんだなあ」って思ってもらえる感じです。

それでそのコルーチンの中で、
yield return new WaitForSeconds(1.0f);
って書くと1秒間処理を止められます。

で、そのコルーチンを実行したいときに
「StartCoroutine メソッド名」って書くことで、
コルーチンを実行できる!っていうこと!!

コルーチンを使う時の3つのポイント!!

  1. コルーチンだよって宣言する:IEnumerator メソッド名
  2. ここで止まってねって書く(1秒止めたい時):yield return new WaitForSeconds(1.0f);
  3. コルーチンを実行してくれーって書く:StartCoroutine(メソッド名)

これを踏まえた上で、さっき記載したコードを見てもらえると理解が深まるかと思います!

CardControllerコードの記載と解説

さて、今しがたCardMovementスクリプトを作りましたが、

CardViewと同じようにCardControllerスクリプトから管理出来たほうが便利なので、

CardControllerスクリプトも修正していきましょう。

CardControllerスクリプトにハイライト箇所を追記。

これは説明するまでもなく、
CardControllerからCardMovementを扱えるようにしただけですね。

OpenPackManagerコードの記載と解説

さて、カードが動く処理は書けましたが、

カードが動く処理を動かす処理がないと何の意味もないので、

次はカードが動く処理を実行させる処理を書いていきましょう。

カードが動いて欲しいタイミングは、

パックが開いて、カードが生成されたタイミングなので

OpenPackメソッドにカードを動かす処理を書いていきましょう!

というわけで「OpenPackManager」スクリプトに下記のハイライト部分を追記。

こちらもざっと説明していきますが、量が多いので分割して考えましょう。

ざっくり分けると、記載したコードの内容は下記の3つですね。

  1. カードの展開先の設定
  2. ExpandPackCardsメソッド(カードを展開させるメソッド)の記載
  3. ExpandPackCardsメソッドを実行させる処理の記載

それぞれざっくりと解説していくと、、

■①カードの展開先の設定

まずはカードを展開する場所の設定をする必要があるので、

カード8枚分の移動先の場所の設定を入れるコードを記入。

■②ExpandPackCardsメソッドの記載

これが今回の肝ですね。

見た目長いですけど、大したことしてないので安心してください。

注目すべき処理は3つです。

  1. 移動するカードのリストを取得
  2. それぞれのカードの展開先の設定
  3. カードの移動

■①cardListの取得

まずはこのコードを実行して、対象のカードを取得してリスト化します。

「openedCardTrans」の子要素のカードを全部cardListって名前のリストにぶち込むよ!って理解でOK

■②各カードの展開先の設定

次に、さっき作ったカードリストを使って1枚づつ順番に移動先を設定します。

foreachっていうのは、
リストに入ってるものを対象に1つづつ処理を実行させるよ!ってもの。

switchっていうのは、
()内の値によって処理内容を変更させる!ってもの。

なので、やってることとしては、
1枚目のカードの設定をしてる時は、expandCardTrans1を移動先に設定して。
2枚目のカードの設定をしてる時は、expandCardTrans2を移動先に設定して、、、

みたいな感じで、カードによって移動先を変えて設定してる!!ってことですな。

Foreach文について

リストに書かれてるものに1つづつ処理をさせたい時に使うよ。

foreach (型名 変数名 in リスト名)
{
  処理
}

(すごく適当な使用例)

foreach (食べ物型 A in 美味しいものリスト)
{
  Aを食べる
}

→【実行結果】美味しいものリストのものを全部食べる!みたいな。

Swich文について

値によって処理を変えたい時に使うよ。

swich (変数名)
{
  case 値:
    処理
    break;
  case 値:
    処理
    break;
(以降、書きたい分だけ続く、、)
}

(すごく適当な使用例)

foreach (食べ物型 A in 美味しいものリスト)
{
  switch (A)
  {
    case 寿司:
      醤油を付ける
      break;
    case カレー:
      自家製スパイスをかける
      break;
  }
  Aを食べる
}

→【実行結果】食べ物によって食べ方を変えて、更に美味しく食べれる!みたいな。

■③OpenPackメソッドの修正

これは単にカードを生成した後に、
ExpandPackCardsメソッドを動かしてカードを展開するよーってだけ!

Unity側の設定

それでは最後にUnity側の設定をしていきましょう。

  1. OpenPackManagerを選択
  2. ExpandCardTrans1~8をアタッチする

CardプレハブにもCardMovementをアタッチしましょう。

  1. Cardプレハブをクリックして、OpenPrefabして開く
  2. AddComponentでCardMovementをアタッチ

これで設定は完了です!!

ゲームの実行

それではゲームを実行しましょう。

パックが出てきて、、

クリックしたら、カードが動いた!!

ってなればOKです!!

【演習】コルーチンを使えるようになろう!

さてさて皆さん、お待ちかねの演習のお時間です!

今回は処理を止めるコードとしてコルーチンってのが出てきましたね。

ゲームを作る時にはめちゃめちゃ使うものなので、演習を通して使えるようになりましょう。

今回やってもらいたい演習はこちらです。

今作ったゲームはパックを開くとすぐにカードが展開されてしまうので、

この動画のように、クリック後少し待って、

カードが1枚づつ移動し始めるような処理にしてみましょう!

コルーチンの内容が分かってないと出来ないので、

わすれたひと

コルーチンってなんだっけ。

って人は、コルーチンについての説明をもう一回読んでからやってみよう!

【答え合わせ】コルーチンを使えるようになろう!

では演習の答え合わせしていきましょう。

コルーチンを使う時の3つのポイントを使えていれば出来たはず!

コルーチンを使う時の3つのポイント!!

  1. コルーチンだよって宣言する:IEnumerator メソッド名
  2. ここで止まってねって書く(1秒止めたい時):yield return new WaitForSeconds(1.0f);
  3. コルーチンを実行してくれーって書く:StartCoroutine(メソッド名)

まずは、この3点を実装する必要があるのでこのコードを書いていきましょう。

  • 関数をコルーチン宣言する
  • カードを展開する前に、ちょっと待ち時間を作ってあげる
  • それぞれのカードを動かす間にちょっとだけ待ち時間を挟む

では実際のコードで解説していきます。

OpenPackManagerスクリプトのExpandPackCardsメソッド

ハイライト箇所を変更、追記しましょう。

これによって、これらの処理が実装される感じですね。

  • カードが展開される前に1.25秒待って、
  • その後1枚カードが動いたら0.1秒待ってから次のカードを動かす

そして最後にExpandPackCardsメソッドをコルーチン化したので、
このメソッドを実行するときのコードをStartCoroutineに変更しましょう。

OpenPackメソッドに書いてある下記のハイライト部分を変更

では最後にゲームを実行!!!

演習通りの動きになった!!!

と言うわけで、今回の解説はこれで終わりです!!

お疲れ様でした!

【まとめ】カードの移動編

今回も最後まで読んでいただき、ありがとうございました!!

ガチャ機能としては大体、実装出来たかと思うので、

一旦、ガチャ機能の解説記事はここまでとなります。

この記事がカードゲーム制作の一助になったでしょうか。

もし少しでも助けになったのであれば嬉しいです。

次回からはデッキ編成の作り方解説に入っていきますので、

引き続きこちらも読んでいただけると良きかと思います!!

2024/2/2 追記

この記事のガチャ機能の続きの実装について解説した記事をリリースしました!!

この記事の解説通りに作っていけば、下記のようなガチャ機能やショップ機能、デッキ編成機能を実装できるようになっていますので、是非とも見てみてくださいな!

ここまで!!

ではでは今回は以上です!

また別の記事でお会いしましょう!!

みじんこ

ではまた!!!

ABOUT ME
みじんこ
【名前】みじんこ(ここのブログ書いてるひと) ・大学2年の時に「ゲームが作りたいー!!」って思ったのに、ゲームの作り方を解説してるサイトがことごとく何言ってんのか分かんなくて挫折した。 ・数年な時を経て「だったら俺が完全初心者にも超わかりやすいサイトを作ってやんよ!」って事で、初めてゲームを作ろうとしてる方向けに解説記事を書いてるよ。

COMMENT

メールアドレスが公開されることはありません。