2024年2月11日スポンサーリンクこんにちは、みじんこと申します。本記事では前記事から引き続き、Unityでのガチャ(パック)機能の実装方法を説明します。そちらをまだ見ていない方は、実施後にこの記事に進んで頂けると良きかと思います!本記事では5のガチャ機能における「カードの移動アニメーションの実装」を解説していきます。本記事の完成形としてはこんな感じですね。実装する内容について今回はカードの移動アニメーションを実装していきますが、この流れにて実装していきます。「DOTween」って言うアニメーションを簡単に実装できるアセットを使って、カードの動きを実装していく流れです。それでは早速やっていきましょう!手順1:DOTweenのインストールそれではまずは「DOTween」というアセットをインストールしていきましょう。Storeにアクセスされると思うので、検索バーにdotweenと入力して検索。DOTweenって名前のアセットがあると思うのでクリック。Unityで開く)をクリックしてUnity画面を開く。下記のウィンドウが表示されるので、「Import」をクリック。下記のウィンドウが表示されるので、また「Import」をクリック。Panel」をクリック。DOTween」をクリック。待ってるとApplyが押せるようになるので、クリックする。ウィンドウが閉じたら、もう設定は終わってるはずなので、閉じてOK!!手順2:カード移動アニメーションの実装ではアセットのインポートが完了したので、実装に進んでいきましょう。子要素を指定の大きさで均等に並べてくれる便利なコンポーネントのこと!!4で設定した値に沿って子要素のセルの大きさや並び方が変わるよ。今作ったExpandCardTransの中に更にパネルを作っていくよ。ExpandCardTransの子要素として、新しくPanelを8個作成。名前をExpandCardTrans1〜ExpandCardTrans8にしてね。こんな感じになればOK!!この8枚のパネルにカードが広がって移動していくイメージです!スクリプトの作成と記載そしたら次にスクリプトを作っていこう!!まずは「CardMovement」スクリプトを作成。このスクリプトにカードが移動する処理を書いていくよ。CardMovementコードの記載と解説ハイライト箇所に注目して追記、変更。~」の記載は、DOTweenの機能を使うときに記載するもの!って認識でOK。動いてる間、処理を止めておく(コルーチン処理)これだけですね。このコルーチンってのがかなり大事なので、後ほど説明します。※親要素:Unity上で言うと、対象オブジェクトの上位の要素のこと。【補足】コルーチンって何よ!!プログラムの処理を一旦止めることが出来る関数のことをコルーチンって言います。「この関数はコルーチンだよ!」って宣言してあげる必要があります。その宣言が「IEnumerator」です。「このメソッドはコルーチンなんだなあ」って思ってもらえる感じです。WaitForSeconds(1.0f);って書くと1秒間処理を止められます。WaitForSeconds(1.0f);コルーチンを実行してくれーって書く:StartCoroutine(メソッド名)これを踏まえた上で、さっき記載したコードを見てもらえると理解が深まるかと思います!CardControllerコードの記載と解説さて、今しがたCardMovementスクリプトを作りましたが、CardViewと同じようにCardControllerスクリプトから管理出来たほうが便利なので、CardControllerスクリプトも修正していきましょう。CardControllerスクリプトにハイライト箇所を追記。card){Destroy(card.gameObject);}}これは説明するまでもなく、CardControllerからCardMovementを扱えるようにしただけですね。次はカードが動く処理を実行させる処理を書いていきましょう。カードが動いて欲しいタイミングは、パックが開いて、カードが生成されたタイミングなのでOpenPackメソッドにカードを動かす処理を書いていきましょう!というわけで「OpenPackManager」スクリプトに下記のハイライト部分を追記。expandCardTrans8;break;}StartCoroutine(card.movement.ExpandThisCard(moveTarget));}}}こちらもざっと説明していきますが、量が多いので分割して考えましょう。分けると、記載したコードの内容は下記の3つですね。■1カードの展開先の設定まずはカードを展開する場所の設定をする必要があるので、カード8枚分の移動先の場所の設定を入れるコードを記入。expandCardTrans8;■2ExpandPackCardsメソッドの記載これが今回の肝ですね。見た目長いですけど、大したことしてないので安心してください。expandCardTrans8;break;}StartCoroutine(card.movement.ExpandThisCard(moveTarget));}}注目すべき処理は3つです。openedCardTrans.GetComponentsInChildren<CardController>();まずはこのコードを実行して、対象のカードを取得してリスト化します。次に、さっき作ったカードリストを使って1枚づつ順番に移動先を設定します。expandCardTrans8;break;}}foreachっていうのは、リストに入ってるものを対象に1つづつ処理を実行させるよ!ってもの。switchっていうのは、()内の値によって処理内容を変更させる!ってもの。やってることとしては、1枚目のカードの設定をしてる時は、expandCardTrans1を移動先に設定して。2枚目のカードの設定をしてる時は、expandCardTrans2を移動先に設定して、、、みたいな感じで、カードによって移動先を変えて設定してる!!ってことですな。Foreach文についてリストに書かれてるものに1つづつ処理をさせたい時に使うよ。しいものリストのものを全部食べる!みたいな。Swich文について値によって処理を変えたい時に使うよ。カレー:自家製スパイスをかけるbreak;}Aを食べる}→【実行結果】食べ物によって食べ方を変えて、更に美味しく食べれる!みたいな。カードを展開させるExpandPackCards();}これは単にカードを生成した後に、ExpandPackCardsメソッドを動かしてカードを展開するよーってだけ!Unity側の設定それでは最後にUnity側の設定をしていきましょう。OpenPackManagerを選択ExpandCardTrans1~8をアタッチするCardプレハブにもCardMovementをアタッチしましょう。Cardプレハブをクリックして、OpenPrefabして開くAddComponentでCardMovementをアタッチこれで設定は完了です!!ゲームの実行それではゲームを実行しましょう。パックが出てきて、、クリックしたら、カードが動いた!!ってなればOKです!!【演習】コルーチンを使えるようになろう!さてさて皆さん、お待ちかねの演習のお時間です!今回は処理を止めるコードとしてコルーチンってのが出てきましたね。ゲームを作る時にはめちゃめちゃ使うものなので、演習を通して使えるようになりましょう。今回やってもらいたい演習はこちらです。今作ったゲームはパックを開くとすぐにカードが展開されてしまうので、この動画のように、クリック後少し待って、カードが1枚づつ移動し始めるような処理にしてみましょう!コルーチンの内容が分かってないと出来ないので、わすれたひとコルーチンってなんだっけ。人は、コルーチンについての説明をもう一回読んでからやってみよう!【答え合わせ】コルーチンを使えるようになろう!では演習の答え合わせしていきましょう。WaitForSeconds(1.0f);コルーチンを実行してくれーって書く:StartCoroutine(メソッド名)まずは、この3点を実装する必要があるのでこのコードを書いていきましょう。関数をコルーチン宣言するカードを展開する前に、ちょっと待ち時間を作ってあげるそれぞれのカードを動かす間にちょっとだけ待ち時間を挟むでは実際のコードで解説していきます。OpenPackManagerスクリプトのExpandPackCardsメソッドにハイライト箇所を変更、追記しましょう。WaitForSeconds(0.1f);}}これによって、これらの処理が実装される感じですね。カードが展開される前に1.25秒待って、その後1枚カードが動いたら0.1秒待ってから次のカードを動かすそして最後にExpandPackCardsメソッドをコルーチン化したので、このメソッドを実行するときのコードをStartCoroutineに変更しましょう。OpenPackメソッドに書いてある下記のハイライト部分を変更。機能の解説記事はここまでとなります。この記事がカードゲーム制作の一助になったでしょうか。助けになったのであれば嬉しいです。こんにちは、みじんこと申します。本記事では、Unityでのデッキ編成機能の実装方法を説明します。・大学2年の時に「ゲームが作りたいー!!」って思ったのに、ゲームの作り方を解説してるサイトがことごとく何言ってんのか分かんなくて挫折した。・数年な時を経て「だったら俺が完全初心者にも超わかりやすいサイトを作ってやんよ!」って事で、初めてゲームを作ろうとしてる方向けに解説記事を書いてるよ。コメントをキャンセルメールアドレスが公開されることはありません。みじんこの徒然ブログ。