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

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

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

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

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

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

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

人気のUnity講座はこちら

Udemy講座

山オブジェクト作成

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

カード作成

続いてカードを作成します。
Yama1の下にImageを追加し、名前をCardに変更します。
InspectorのSorce Imageにカードの画像を当てます。
今回は140*180のサイズでカードの画像で作りました。
カード作成
ここまでできたらCardという名前でC#スクリプトを作成しImageの方のCardにアタッチします。
以上でカードの準備は完了なのでこれをprefab化しHierarchy上から削除します。
Prefab化したカードはこのような感じになっています。
カードPrefab

片方の山にカードを設置

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

そうするとYama1のInspectorでCardと生成する数を入れられるようになります。
下の図は10枚のカードを生成する例です。
YamaController
実際にUnityでPlayするとYama1の配下にCardが10枚生成されたのがわかると思います。
再生後のYama1

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

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

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

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

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

続いてUnityエディタ上でMoveCardsが呼び出されるようYama1のInspectorのButtonコンポーネントの設定をしていきます。
下の図のようにOn Click()にYama1自身をアタッチして呼び出される関数をMoveCardに選択します。
Yama1のButtonコンポーネント
ゲームを実行しYama1をクリックするとConsoleの方でログが表示されました。
yama1クリックの確認

カードのループと移動

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

修正後、UnityエディタからYama1のInspectorから別の山のtransformをアタッチします。
今回の場合はYama2がそれに当たります。
Yama1のインスペクター
それではゲームを実行しCardがYama2に移動するか確認してみましょう。


Hierarchy上でもYama2の配下にCardが移動しているのがわかります。
Yama2のヒエラルキー

カードっぽく移動させる

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

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

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

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

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


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

シンプルではありますが、以上が簡単なカードの移動処理となります。
これを応用して移動した山から更に別の山に移動させたり、また移動した山から更に移動しグリッドレイアウトで順番に並べていくなどカードゲームっぽいカード移動が出来ると思います。

おすすめUnityオンライン学習

一人でゲーム開発が不安な方はオンラインスクールで学習すると効率が良いと思います。
以下に当てはまる人は検討してみると良いかもしれません。

「ゲーム作りけど何から初めればいい?」
「入門書をの次に何をしたらいいの?」
「疑問や問題を一人で解決出来ない。。」
「ゲームを完成させる自信がない。。」
「気軽に質問できる環境が欲しい。。」

自分で学習することに限界を感じたら
オンライン学習しましょう!

Udemy

Udemy
特徴:教材動画買い切り型
レッスン方法:動画教材/Q&Aで質問
習得スキル:教材動画によって異なる
コース概要: ピンポイントで作りたいゲームジャンルの動画を見つけることができるかもしれません。 また頻繁にセールを開催していますのでゲーム開発講座が1500円~で購入することも可能です。
ゲームジャンル別おすすめ講座はこちら Udemy 詳細

テックアカデミー

テックアカデミー
特徴:現役エンジニア伴走型レッスン
レッスン方法:チャット(週2回)/テキストチャット/課題レビュー
習得スキル:オリジナルゲームアプリの作成
コース概要: 途中で挫折しないためにメンター(相談者)が週2回、マンツーマンであなたの質問・相談に答えてくれるので、ゲーム開発・プログラミング未経験の人でも安心してゲーム開発に取り組めます。転職したい人向けのサポートもあります。無料体験もあります。
テックアカデミー 詳細

テックスタジアム

テックスタジアム
特徴:ゲーム開発の為のオンラインスクール
レッスン方法:動画教材,Slackでの質問(24時間)
習得スキル: Unity,UnrealEngine、CG、企画、サーバー、AI、XR等
コース概要: ゲーム業界で必須な技術の習得が可能です。Slack上で待機している先生への24時間、何度でも質問できます。またIT・ゲーム業界への就職サポートが無料で受けられます。
ゲーム開発に特化したオンラインスクールですので、Unityはもとより、他のゲームエンジンやゲーム業界に興味がある方にはオススメです。
テックスタジアム 詳細

デジハリONLINE

デジハリONLINE
特徴:動画カリキュラム型レッスン
レッスン方法:動画講座/Slack/予約制Zoom相談
習得スキル:Unity基礎,実践/ハイクオリティ3Dゲーム
コース概要: デジタルハリウッド大学・大学院などを通じたデジタルコンテンツ業界とのつながりを活かし、最新かつ実践的なカリキュラムを提供しています。【基礎編】【実践編】とカリキュラムが分かれていて、それぞれに課題があり、ご自身の理解度を把握できます。最終的にはハイクオリティの3Dゲームが作れるようになります。
デジハリONLINE 詳細

関連記事

最後までご覧頂いてありがとうございました。

2dパズル

作って覚える 7つの2Dパズル

段階的にUnityゲーム開発をレベルアップ