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

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

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

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

では実際に作業する前に大まかな処理の流れをイメージしておきましょう。

ざっくりではありますがこのような感じでしょうか。

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

山オブジェクト作成

プロジェクトを起動したら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の学習方法

Unityを始めプログラミング全般について皆さんは普段どのようにして勉強してますか?

ネットで検索したり、書籍を読んだり、オンラインスクールなど様々な方法があります。

逆にたくさん方法があり過ぎで、どれをやればいいかわからないという方にオススメの方法をいくつか紹介します。

kindle unlimited

これはAmazonが提供する電子書籍読み放題のサービスです。

月額980円で約200万冊以上が読み放題でとてもお得です。

また30日無料体験もできるのが魅力です。

当然Unityに関する書籍もたくさん揃っています。

またC#関連の書籍や、プログラミングのものも多数あります。

プログラミング関連の書籍は値段が結構しますので、それらが無料で読めるのはかなりお得なサービスです。

30日無料体験もありますので気に入らなければその期間に解約すれば料金は発生しません

オンラインで学習

質問が出来るおすすめのUnity学習方法ページです。

・Unityでゲーム作りたいけど何から初めたら良いかわからない。

・独学でゲームを完成させられるか不安。

・ゲーム開発でわからないことを一人で解消できない。

・入門書を一通りやってみたが次に何していいかわからない。

こんな人におすすめしたい内容になっています。

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

感想・コメントをどうぞ

購読
通知する
guest
0 コメント
Inline Feedbacks
View all comments

関連記事