ゲーム作り

【解説通りに作るだけ】デジタルカードゲームの作り方④ カードの動かし方編

 

前回の解説で手札やフィールドにカード生成することが出来るようになりましたね!

見てない人はこちら参照↓

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方③ 手札の生成編 前回でカードとフィールドの作成が完了しましたね! ※前回の記事はこちら↓ http://yuus01.info/ga...

 

今回はカードを持って動かせるようにしていくよ!!

完成形としてはこんな感じ!

 

動かせるようになるとカードゲームらしくなって楽しいよね!!

そんなわけで早速いくぞ!!

 

カードを動かす為のコードの実装

ではまず、カードを持って動かしたり、フィールドに出せるようにするのに必要な実装の流れを説明していくよ!

 

流れはザッとこんな感じ↓

①.カードを動かすコードを書く
②.フィールドに置く為のコードを書く
③.カードにコードを貼り付ける(アタッチする)
④.フィールドにコードを貼り付ける(アタッチする)

 

コードの内容と貼り付け方は後で詳しく説明するから、

とりあえずの流れを頭に入れといて、やりながら「あー今はここをやってるのね」って思いながらやるといいよ!

そんな訳で実際にやっていくぞ!!

 

①②2つのコード記入

ここではまず
カードを動かすためのコードと、
フィールドに置くためのコードを書いていくよ!

 

1.スクリプトの作成

では新しいスクリプトを2つ作るよ。

名前は、

“CardMovement”

“DropPlace”

という名前で作ってね。

クラス作成方法が分からないひとは以下を参考にして!!

 

“CardMovement”と”DropPlace”という名前のクラスが出来たらOK!!↓

 

それぞれ

カードを動かすためのコード(”CardMovement”)

フィールドに置くためのコード(”DropPlace”)

になってるよ。

 

2.プログラムの記入

そしたら中身を開いて、中身を丸ごと全部コピぺしよう。

 

”CardMovement”はこっち↓

 

”DropPlace”はこっち↓

 

③④コードの貼り付け(アタッチ)

無事コードが書けたら、今度はUnity側の設定をしていくよ!

まずはCardPrefabに”CardMovement”を張り付けよう。

①.Cardプレハブをクリック
②.右下の「Add Component」をクリック
③.CardMovementと入力して、選択する
④.右のInspecterビューに、CardMovementが表示されればOK!!

≪2020/07/13 追記≫

コメントでご指摘いただいた所についての追記になります。

⑤.上記に加えて「Canvas Group」の追加。(パラメータは上の画像に合わせて下さい)

他にも疑問点、抜けてる点などコメントしていただけるとめちゃくちゃありがたいです!

コメント頂きありがとうございました!!

 

同じように、PlayerFieldにも”DropPlace”を張り付けよう。↓

 

 

そしたら実行ボタンを押す!!

 

動かせるし、フィールドに出せる!!!

と、そんな感じでカードを自由に動かして出せるようになったかな??

そしたらコードの解説をしていくよー!

 

コードの解説

ではカードを動かしてる、
それぞれのコードについて説明していくよ!!

①CardMovement(カードを動かすためのコード)と、

②DropPlace(カードを置くためのコード)の順に説明していくよ。

 

①CardMovementについて

まずはカードに貼り付けた”CardMovement”のコードについて。

 

ざっくりまとめるとこんな感じ↓

1.《カードをドラッグし始めた時の処理》→親要素を変更する(10~15行目)
2.《ドラッグ中の処理》→カードの場所をマウスポインターと同じにする(17~20行目)
3.《ドラッグし終わった時の処理》→親要素を変更する(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とかについての説明。

ここね↓

ここの部分にいくつか書いてあるけど、

さっき説明した“OnDrag”メソッドを使う時は”IDragHandler“書かないと使えないよ。

って認識でOK。

 

それぞれ以下に対応してるよ↓

【クラス名】 【メソッド名】
IDragHandler “OnDrag”メソッド
IBeginDragHandler “OnBeginDrag”メソッド
IEndDragHandler “OnEndDrag”メソッド

表の右のメソッドを使うには、対応したクラスを書く必要があるってことね。

 

継承部分についてもう少し詳しく知りたい人はコメント下さいな。

 

unityengine.eventsystemsについて

最後にこれ↓

 

これもすごくザックリ言うと、

さっき説明した、IDragHandlerとかを使う為に書く必要があるもの。

って認識でOK

これを書かないと使えないので書きましょう。ってだけ。

ここも詳しく知りたい人がいたらコメントくださいな。

 

②DropPlaceについて

次にフィールドに貼り付けたコードについての解説!

ざっくり、やってる処理としては、

《ドロップされた時の処理》→カードの親要素をアタッチしてるオブジェクトに変える

ってだけ。

 

なので、この”DropPlace”クラスの親要素を変更する処理をコメントアウトすると、、

置けなくなる!!(実際にやってみてね)

と言うわけで、この処理を行う“DropPlace”クラスをアタッチしたから、カードが置けてる。ってことですな。

 

演習

今回は割と簡単な演習だからみんなやってみて!

【演習】

現在は自分の手札から、自分のフィールドにカードを置くことは出来るけど、

逆にフィールドから手札に戻すことは出来ない。自分のフィールドから相手のフィールドに置くことも出来ない。

ではフィールドのカードを手札に戻す、あるいは相手のフィールドに出せるようにするにはどうすれば良いか。

 

ヒントとしては、

コードが貼ってあるから置けるんだよ。

って話。

 

まあカードゲームとしては有り得ない仕様だけど、練習だと思ってやってみよう!

 

答え合わせ

出来たかな??

ただ単にコピペしてるだけだと全く身に付かないから、やり方を覚えながら進もうね。

んで、答えはこう↓

このふたつにDropPlaceをアタッチするだけ!!

変な仕様になっちゃうから終わったらアタッチしたのは消しといてね!!

 

【最後に】お詫びとか、今後について

更新がめちゃくちゃ遅くなってしまってごめんなさい!!

コメントしてくれた方々ほんとにありがとうございました!

これでもめちゃくちゃ原動力になってます。

記事を書いてる側としては、ほんとにたった一言のコメントでも力になるし嬉しいんです!

なのでほんの1mmでも応援して頂けたり、参考になったという方はぜひコメントをお願いします。

(もちろん「ここがちょっと分かりずらいよ!」などのコメントでも大丈夫です!参考にしますので!!)

 

その代わりと言ってはなんですが、

7月中にカードゲームの基本動作までの
解説記事を全て書いて投稿します。

(現時点で全く記事のストックとか無いけど。。笑)

具体的には下の動画で言うと、
マナコスト通りにカードを出して、
相手のカードとバトルする所までね。
(スペルカードとか、モンスター効果とかはその後に実装するよ)

 

ペースとしては週に2回の投稿を予定しています。

なので全10回程度の解説記事になると思います。

そして最終的には「初心者がカードゲームを作りたいなら”みじんこのブログ”を見ればいいよね」って言ってもらえるようなサイトにしたいと思ってます!

その為にはあなたのコメント一つがめちゃくちゃ力になるので、一言でもいいのでコメントの方よろしくお願いいたします!!

 

新しい記事を投稿したタイミングとか、
ゲームについての役立ち(そうなこと)など
知りたい方はフォローして下さいな→→mijinko_game000

あと質問などあれば、お気軽にどうぞ!!!

 

次の記事↓

【解説通りに作るだけ】デジタルカードゲームの作り方講座⑤ カードデータの反映編 前回までの記事でカードを持って動かせるようになりましたね!! 見てない人は前回の記事参考↓ http://yuus0...

前の記事↓

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方③ 手札の生成編 前回でカードとフィールドの作成が完了しましたね! ※前回の記事はこちら↓ http://yuus01.info/ga...

では今回は終わりっ!!

 

何も知らない初心者がカードゲームアプリを作ろうとした結果www ワクワクが止まらないんだが、、?!! 子供の頃から作りたかったゲームをとうとう形にする日が来たと思うとワクワクが止...
Unity初心者がいきなりカードゲームを作るのは無理??【答え:余裕です】 初心者だけど、カードゲームを作ってみたい!! って思って、色々調べてみると って気持ちになっちゃうよね。 ...
【超自由になれます】Bluetoothイヤホンを使うべき3つのメリットとデメリット突然だけど Bluetoothイヤホン使ってる?? 元々ぼく自身「Bluetooth??なにそれおいしいの?」状態だったので...

 

ABOUT ME
みじんこ
【名前】みじんこ(ここのブログ書いてるひと) ・大学2年の時に「ゲームが作りたいー!!」って思ったのに、ゲームの作り方を解説してるサイトがことごとく何言ってんのか分かんなくて挫折した。 ・数年な時を経て「だったら俺が完全初心者にも超わかりやすいサイトを作ってやんよ!」って事で、初めてゲームを作ろうとしてる方向けに解説記事を書いてるよ。

POSTED COMMENT

  1. yuki より:

    こんにちは。
    記事参考になりました。続き楽しみです。

    CanvasGroupを使われてますが、AddComponentで「CanvasGroup」も追加しないといけないのではないでしょうか?

    • みじんこ より:

      >yukiさん
      コメントありがとうございます!
      あ、、完全に抜けてました。
      これだとエラーめちゃくちゃ出ますね。。笑
      すみません、CanvasGroupの追加は必要です!!
      記事に追記したのでよろしくお願いします。
      また何かあったらコメントお願いしますね!

      次の記事は今日か明日に出せると思うので、また見て下さい!

COMMENT

メールアドレスが公開されることはありません。