前回の解説で手札やフィールドにカード生成することが出来るようになりましたね！
見てない人はこちら参照↓
今回はカードを持って動かせるようにしていくよ！！
完成形としてはこんな感じ！
動かせるようになるとカードゲームらしくなって楽しいよね！！
そんなわけで早速いくぞ！！
Contents
カードを動かす為のコードの実装
ではまず、カードを持って動かしたり、フィールドに出せるようにするのに必要な実装の流れを説明していくよ！
流れはザッとこんな感じ↓
①．カードを動かすコードを書く
②．フィールドに置く為のコードを書く
③．カードにコードを貼り付ける(アタッチする)
④．フィールドにコードを貼り付ける(アタッチする)
コードの内容と貼り付け方は後で詳しく説明するから、
とりあえずの流れを頭に入れといて、やりながら「あー今はここをやってるのね」って思いながらやるといいよ！
そんな訳で実際にやっていくぞ！！
①②２つのコード記入
ここではまず
カードを動かすためのコードと、
フィールドに置くためのコードを書いていくよ！
1.スクリプトの作成
では新しいスクリプトを２つ作るよ。
名前は、
“CardMovement”
“DropPlace”
という名前で作ってね。
クラス作成方法が分からないひとは以下を参考にして！！
“CardMovement”と”DropPlace”という名前のクラスが出来たらOK！！↓
それぞれ
カードを動かすためのコード（”CardMovement”）
フィールドに置くためのコード（”DropPlace”）
になってるよ。
2.プログラムの記入
そしたら中身を開いて、中身を丸ごと全部コピぺしよう。
”CardMovement”はこっち↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class CardMovement : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler { public Transform cardParent; public void OnBeginDrag(PointerEventData eventData) // ドラッグを始めるときに行う処理 { cardParent = transform.parent; transform.SetParent(cardParent.parent, false); GetComponent<CanvasGroup>().blocksRaycasts = false; // blocksRaycastsをオフにする } public void OnDrag(PointerEventData eventData) // ドラッグした時に起こす処理 { transform.position = eventData.position; } public void OnEndDrag(PointerEventData eventData) // カードを離したときに行う処理 { transform.SetParent(cardParent, false); GetComponent<CanvasGroup>().blocksRaycasts = true; // blocksRaycastsをオンにする } } |
”DropPlace”はこっち↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; // フィールドにアタッチするクラス public class DropPlace : MonoBehaviour, IDropHandler { public void OnDrop(PointerEventData eventData) // ドロップされた時に行う処理 { CardMovement card = eventData.pointerDrag.GetComponent<CardMovement>(); // ドラッグしてきた情報からCardMovementを取得 if (card != null) // もしカードがあれば、 { card.cardParent = this.transform; // カードの親要素を自分（アタッチされてるオブジェクト）にする } } } |
③④コードの貼り付け（アタッチ）
無事コードが書けたら、今度はUnity側の設定をしていくよ！
まずはCardPrefabに”CardMovement”を張り付けよう。
①．Cardプレハブをクリック
②．右下の「Add Component」をクリック
③．CardMovementと入力して、選択する
④．右のInspecterビューに、CardMovementが表示されればOK！！
≪2020/07/13 追記≫
コメントでご指摘いただいた所についての追記になります。
⑤.上記に加えて「Canvas Group」の追加。(パラメータは上の画像に合わせて下さい)
他にも疑問点、抜けてる点などコメントしていただけるとめちゃくちゃありがたいです！
コメント頂きありがとうございました！！
同じように、PlayerFieldにも”DropPlace”を張り付けよう。↓
そしたら実行ボタンを押す！！
動かせるし、フィールドに出せる！！！
と、そんな感じでカードを自由に動かして出せるようになったかな？？
そしたらコードの解説をしていくよー！
コードの解説
ではカードを動かしてる、
それぞれのコードについて説明していくよ！！
①CardMovement（カードを動かすためのコード）と、
②DropPlace（カードを置くためのコード）の順に説明していくよ。
①CardMovementについて
まずはカードに貼り付けた”CardMovement”のコードについて。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class CardMovement : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler { public Transform cardParent; public void OnBeginDrag(PointerEventData eventData) // ドラッグを始めるときに行う処理 { cardParent = transform.parent; transform.SetParent(cardParent.parent, false); GetComponent<CanvasGroup>().blocksRaycasts = false; // blocksRaycastsをオフにする } public void OnDrag(PointerEventData eventData) // ドラッグしてる時に起こす処理 { transform.position = eventData.position; } public void OnEndDrag(PointerEventData eventData) // カードを離したときに行う処理 { transform.SetParent(cardParent, false); GetComponent<CanvasGroup>().blocksRaycasts = true; // blocksRaycastsをオンにする } } |
ざっくりまとめるとこんな感じ↓
１.《カードをドラッグし始めた時の処理》→親要素を変更する(10~15行目)
２.《ドラッグ中の処理》→カードの場所をマウスポインターと同じにする(17~20行目)
３.《ドラッグし終わった時の処理》→親要素を変更する(22~26行目)
一番重要な”OnDrag”メソッド
今回一番重要なのが、17行目の”OnDrag”メソッド。
名前の通りだけど、
OnDragメソッドとは、
ドラッグしてる時にこのメソッドの中に書いてある処理を実行するというメソッド。
今回で言うと、
transform.position = eventData.position
なので、
ドラッグしてる間は、
transform.position（カードの場所）を
eventData.position（マウスポインターの場所）にするよ。
っていう処理をしてるってこと！！
他のメソッドについて
次に大事なのが、“OnBeginDrag”と”OnEndDrag”メソッド。
（”OnDrag”メソッドの上と下にあるメソッドのことね。）
これらはそれぞれ、
ドラッグし始めた時の処理（OnBeginDragメソッド）
ドラッグし終わった時の処理（OnEndDragメソッド）
が書かれてるよ。
それぞれメソッドの中に、
transform.SetParent(~,false)
って書かれてるけど、これの意味は
(この場合で言うと)カードオブジェクトの親要素を変更する。ってこと。
親要素って言うのはこれね。↓
今回の動きで説明すると、
ドラッグする前の手札のカード（赤枠で囲ってるカード）の親要素は、PlayerHand。
これをドラッグすると親要素がCanvasに変わる↓
※transform.SetParent(cardParent.parent, false)の処理による結果
ドロップしたらこうなる↓
という処理をここで行ってるよ！
〜Handlerについて
次はクラス名の後ろに書いてあるIDragHandlerとかについての説明。
ここね↓
|
1 2 3 4 |
public class CardMovement : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler { （省略） } |
ここの部分にいくつか書いてあるけど、
さっき説明した“OnDrag”メソッドを使う時は”IDragHandler“書かないと使えないよ。
って認識でOK。
それぞれ以下に対応してるよ↓
| 【クラス名】 | 【メソッド名】 |
|---|---|
| IDragHandler | “OnDrag”メソッド |
| IBeginDragHandler | “OnBeginDrag”メソッド |
| IEndDragHandler | “OnEndDrag”メソッド |
表の右のメソッドを使うには、対応したクラスを書く必要があるってことね。
継承部分についてもう少し詳しく知りたい人はコメント下さいな。
unityengine.eventsystemsについて
最後にこれ↓
|
1 2 3 4 5 6 7 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class CardMovement : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler {（省略）} |
これもすごくザックリ言うと、
さっき説明した、IDragHandlerとかを使う為に書く必要があるもの。
って認識でOK
これを書かないと使えないので書きましょう。ってだけ。
ここも詳しく知りたい人がいたらコメントくださいな。
②DropPlaceについて
次にフィールドに貼り付けたコードについての解説！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; // フィールドにアタッチするクラス public class DropPlace : MonoBehaviour, IDropHandler { public void OnDrop(PointerEventData eventData) // ドロップされた時に行う処理 { CardMovement card = eventData.pointerDrag.GetComponent<CardMovement>(); // ドラッグしてきた情報からCardMovementを取得 if (card != null) // もしカードがあれば、 { card.cardParent = this.transform; // カードの親要素を自分（アタッチされてるオブジェクト）にする } } } |
ざっくり、やってる処理としては、
《ドロップされた時の処理》→カードの親要素をアタッチしてるオブジェクトに変える
ってだけ。
なので、この”DropPlace”クラスの親要素を変更する処理をコメントアウトすると、、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; // フィールドにアタッチするクラス public class DropPlace : MonoBehaviour, IDropHandler { public void OnDrop(PointerEventData eventData) // ドロップされた時に行う処理 { CardMovement card = eventData.pointerDrag.GetComponent<CardMovement>(); // ドラッグしてきた情報からCardMovementを取得 if (card != null) // もしカードがあれば、 { // card.cardParent = this.transform; // カードの親要素を自分（アタッチされてるオブジェクト）にする } } } |
置けなくなる！！（実際にやってみてね）
と言うわけで、この処理を行う“DropPlace”クラスをアタッチしたから、カードが置けてる。ってことですな。
演習
今回は割と簡単な演習だからみんなやってみて！
【演習】
現在は自分の手札から、自分のフィールドにカードを置くことは出来るけど、
逆にフィールドから手札に戻すことは出来ない。自分のフィールドから相手のフィールドに置くことも出来ない。
ではフィールドのカードを手札に戻す、あるいは相手のフィールドに出せるようにするにはどうすれば良いか。
ヒントとしては、
コードが貼ってあるから置けるんだよ。
って話。
まあカードゲームとしては有り得ない仕様だけど、練習だと思ってやってみよう！
答え合わせ
出来たかな？？
ただ単にコピペしてるだけだと全く身に付かないから、やり方を覚えながら進もうね。
んで、答えはこう↓
このふたつにDropPlaceをアタッチするだけ！！
変な仕様になっちゃうから終わったらアタッチしたのは消しといてね！！
【最後に】お詫びとか、今後について
更新がめちゃくちゃ遅くなってしまってごめんなさい！！
コメントしてくれた方々ほんとにありがとうございました！
これでもめちゃくちゃ原動力になってます。
記事を書いてる側としては、ほんとにたった一言のコメントでも力になるし嬉しいんです！
なのでほんの1mmでも応援して頂けたり、参考になったという方はぜひコメントをお願いします。
（もちろん「ここがちょっと分かりずらいよ！」などのコメントでも大丈夫です！参考にしますので！！）
その代わりと言ってはなんですが、
7月中にカードゲームの基本動作までの
解説記事を全て書いて投稿します。
（現時点で全く記事のストックとか無いけど。。笑）
具体的には下の動画で言うと、
マナコスト通りにカードを出して、
相手のカードとバトルする所までね。
（スペルカードとか、モンスター効果とかはその後に実装するよ）
ペースとしては週に2回の投稿を予定しています。
なので全10回程度の解説記事になると思います。
そして最終的には「初心者がカードゲームを作りたいなら”みじんこのブログ”を見ればいいよね」って言ってもらえるようなサイトにしたいと思ってます！
その為にはあなたのコメント一つがめちゃくちゃ力になるので、一言でもいいのでコメントの方よろしくお願いいたします！！
新しい記事を投稿したタイミングとか、
ゲームについての役立ち（そうなこと）など
知りたい方はフォローして下さいな→→mijinko_game000
あと質問などあれば、お気軽にどうぞ！！！
次の記事↓
前の記事↓
では今回は終わりっ！！
こんにちは。
記事参考になりました。続き楽しみです。
CanvasGroupを使われてますが、AddComponentで「CanvasGroup」も追加しないといけないのではないでしょうか？
＞yukiさん
コメントありがとうございます！
あ、、完全に抜けてました。
これだとエラーめちゃくちゃ出ますね。。笑
すみません、CanvasGroupの追加は必要です！！
記事に追記したのでよろしくお願いします。
また何かあったらコメントお願いしますね！
次の記事は今日か明日に出せると思うので、また見て下さい！