Unityの小技カードゲームで使えるカードの移動方法

私が参加しているオンラインサロンの1Weekゲームジャムで使用した複数枚のカードを特定の場所からパラパラと移動させる方法を紹介します。

ちなみにこちらの講座で本格的なカードゲームの作り方を教えてくれます。
移動だけではなく、ドラッグアンドドロップ、カードデータをScriptableObjectにする方法などかなりためになる内容になっているのでおすすめです。

Unityインストラクターが教えるシャドウバースのような本格2Dカードゲーム開発コース【スタジオしまづ】

この記事では上記のゲームのように「山」から「別の山」にカードが時間差でカードっぽく移動することができます。
使い方次第ではカードをシャッフルしてるかのような演出にも利用出来るかも知れません。

それでは実際にUnityを起動させ作業していきましょう。
新しい2Dプロジェクトを作成します。
今回画面サイズは960×640にしています。

Unityスキルアップ、
始めるなら今

パズル、脱出、RPG...目標のゲームを完成させよう！

人気のUnity講座はこちら

山オブジェクト作成

プロジェクトを起動したらImageを2つ作成します。
位置とサイズを適当に調整します。今回は横150：縦200にしました。
調整が終わったらButtonコンポーネントを追加します。
更にわかりやすいように名前をYama1とYama2にして、Textをそれぞれのオブジェクトの下に設置し見出しをつけました。
GameView

HierarchyとInspector

カード作成

続いてカードを作成します。
Yama1の下にImageを追加し、名前をCardに変更します。
InspectorのSorce Imageにカードの画像を当てます。
今回は140*180のサイズでカードの画像で作りました。

ここまでできたらCardという名前でC#スクリプトを作成しImageの方のCardにアタッチします。
以上でカードの準備は完了なのでこれをprefab化しHierarchy上から削除します。
Prefab化したカードはこのような感じになっています。

片方の山にカードを設置

ではPrefab化したカードをYama1の方に設置しましょう。
HierarchyにCardを置いていっても良いのですが、ゲームがスタートしたら自動で生成されるようにC#スクリプトを作成しましょう。
今回はYamaControllerと名付けました。
作成したYamaControllerをYama1にアタッチし、以下のコードを書いていきます。

そうするとYama1のInspectorでCardと生成する数を入れられるようになります。
下の図は10枚のカードを生成する例です。

実際にUnityでPlayするとYama1の配下にCardが10枚生成されたのがわかると思います。

生成したカードをListに保持

カードの生成ができたのでYamaControllerでListとして全てのカードを保持しておきましょう。
YamaControllerを下記の様に修正します。

これで生成したCard全てをYamaControllerで生成＆取得することができました。

Yama1のクリック時の処理を実装

さて、次にCardの移動の引き金となるクリック処理をYamaControllerに仕込んでいきます。
YamaControllerにMoveCardsという関数を作成します。
処理の中身は確認用にログを表示するだけです。

続いてUnityエディタ上でMoveCardsが呼び出されるようYama1のInspectorのButtonコンポーネントの設定をしていきます。
下の図のようにOn Click()にYama1自身をアタッチして呼び出される関数をMoveCardに選択します。

ゲームを実行しYama1をクリックするとConsoleの方でログが表示されました。

カードのループと移動

ここまで来たらもう少しです。
MoveCards関数を作り込んでいきます。
Listで保持しているCardたちをループさせYama2の方に移動させます。
YamaControllerを下のように修正します。

修正後、UnityエディタからYama1のInspectorから別の山のtransformをアタッチします。
今回の場合はYama2がそれに当たります。

それではゲームを実行しCardがYama2に移動するか確認してみましょう。

Hierarchy上でもYama2の配下にCardが移動しているのがわかります。

カードっぽく移動させる

移動は出来たものの、このままでは味気ないですね。
そこで移動する見た目をもっとカードっぽくなるようにしていきましょう。
最初にDOTweenというAssetをインポートします。

DOTweenのインポート方法や使い方はこちらの書籍でわかりやすく紹介してくれています。

Unityの寺子屋定番スマホゲーム開発入門

DOTweenのインポートが完了したらYamaControllerを下記のように修正します。

修正後、カードの移動が下のように変わりました。

カードが一枚ずつ別の山に移動しているのが確認出来ました。
ここで一つ問題があります。実はこのカードは下のカードから移動しています。
本来カードっぽく移動するのであれば上のカードから移動してほしいですよね。
そこでYamaControllerのListを修正します。
具体的に何をするのかというとStart関数でListに追加したCardの並びを反転させます。

この修正を加えることによってYama1に設置された上のカードからYama2に移動してくれるようになります。