カードゲームの作り方

【解説通りに作るだけ】デジタルカードゲームの作り方講座⑤ カードデータの反映編

 

前回までの記事でカードを持って動かせるようになりましたね!!

見てない人は前回の記事参考↓

【解説通りに作るだけ】デジタルカードゲームの作り方④ カードの動かし方編 前回の解説で手札やフィールドにカード生成することが出来るようになりましたね! 見てない人はこちら参照↓ http:/...

 

今回は実際のカードデータを反映していくよ!!

前回までのカードはただの仮置きのデータなので、今回から本物のデータを持たせて、表示させるよ!

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

今回から実際にカードを作っていくので、楽しいぞー!!笑

というわけで行くぞ!!

 

【作業全体の説明】カードデータ作成と反映

まずはザックリ今回の作業の流れを説明します。

①4つクラスを作る
コードを書く
③Unity側の設定をする(アタッチ等)

ザックリ言うとこれだけ。

 

ただこの今回作る4つのコードってのがめっちゃ大事で、それぞれのスクリプトがそれぞれの役割を持ってます。

表にまとめるとこんな感じ↓

【クラス名】 【役割】
Card Entity カードデータそのもの
CardVeiw カードの見た目を管理する
CardModel カードのデータを管理する
Card Controller カード全体を管理する

ここがよく分からないまま進むと後々「ん?何言ってんのこいつ?( ˘ω˘ )ワケワカラン」ってなるので、なんとなくでいいから「このスクリプトはこの役割だからこの処理をやってるのね。」って理解しながら進めてね。

 

コードの作成&記入

まずはスクリプトを4つ作ろう!

4つの名前はこれね↓

  • CardEntity
  • CardModel
  • CardView
  • CardController

こんな感じに無事4つ分作れたら、早速コードを記入していこう!!

とりあえず丸々コピペで大丈夫だよ!

 

CardEntityのコードはこれ↓

 

CardModelのコードはこれ↓

 

CardViewのコードはこれ↓

 

CardControllerのコードはこれ↓

無事全部に張り付けられたかな??

どこかしらにエラーとか出てないか軽く確認して、特にエラーがなければ次にいくよ!

 

コード追記

次は前に作ったGameManagerスクリプトに対しても、ちょっと追記をしていくよ!

たぶん今は、以前に書いた
Instantiate(cardPrefab, playerHand);
とかが書いてあるので、
Startメソッドに書いてある処理は全部消していいよ!

そしたら以下の様にコードを書き換えよう↓

詳細はあとで説明するけど、

要はゲーム実行したらStartGameメソッドが動いて、
Card1ってカードを出すよ!って処理をしてるよ。

 

Unity側の設定

コードが書けたらUnity側の設定をやってこう!!

やることとしては2つだけ!

・カードの作成
・アタッチ

ではやっていこう!!

 

カードの作成

では今回の一番楽しいところ!!

実際のカードを作ってくよ!!

と言いたいところだけど、
その前にフォルダを作ったりちょっとした前準備をしてくよ。

手順に沿って作ってこう↓

 

まずはカードデータとかを保存するフォルダを作るよ。

※まず「Assets」フォルダに移動してね!!

①「+」をクリック
②「Folder」をクリック
③「Resources」という名前を付ける
④「Resources」フォルダにCardプレハブをドラッグ&ドロップ
⑤「Resources」フォルダをダブルクリックして、中に入ろう

 

①先ほどの手順と同じく「CardEntityList」フォルダを作る
②「CardEntityList」フォルダをダブルクリックして中に入る

 

ここからカードデータを作ってくよ!!

①「+」をクリック
②「Create CardEntity」をクリックする
③こんな感じのが出来る(Unityのバージョンによって多少見た目に違いがあるかも)
④出来たやつの名前を「Card1」に変える

 

①クリックして、パラメータを画像通りに設定しよう
②「◎」みたいなのをクリックする
③アイコンはこれを選択する

これで1枚目のカードが完成!!!

 

同じ手順で今度は「Card2」を作ろう。

ちなみに新しく作るときは、Card1をクリックして、「Ctrl+D」でコピー出来るよ。

こんな感じになればOK!!

 

アタッチ

次はさっき作ったコードをCardプレハブにアタッチしよう!

①「Card」プレハブをクリック
②「AddComponent」をクリックして、「CardController」と「CardView」を検索して、選択する
③「CardController」と「CardView」の二つが張り付けばOK!
④「OpenPrefab」をクリックしよう

 

①Card(左側)から「Name」を、左の「NameText」に張り付ける。
②この貼り付けを「Cast」「Power」「Image」も同じように行う

 

ここまで出来たら最後に「GameManagerオブジェクト」にCardプレハブをアタッチしよう!!

①「GameManager」オブジェクトをクリック
②Cardプレハブをドラッグ&ドロップ
③こんな感じに「CardPrefab」に張り付けばOK!!

 

 

ではゲームを実行してみよう!!

今までとは違うカードが出てきた!!!!

 

他の種類のカードを出すには??

ひとまず新しく作ったカードを表示することは出来るようになったけど、まだ1種類のカードしか出せてない!!

というわけで他のカードも出せるようにしていくよ!

 

GameManagerにコードを追記して、Card2も出せるようにしていこう。

※オレンジ部分を追記してね↓

 

これで実行すると、

自分のフィールドに2番目に作ったカードも出てきた!!

 

これはどうやったかと言うと、下のコードの処理によるもの。

CardController card2 = Instantiate(cardPrefab, playerHand);
≪和訳:PlayerHandにCardPrefabを出しますよ。そして出したものを「card2」としますよ。≫

card2.Init(2);
≪和訳:card2は「Card2」として表示させますよ。≫

(以下、何度か繰り返し)

Initの後ろの()の中の数字が、さっき作ったCard1とかCard2を指してるので、ここを書き換えることで好きなカードを出せるようになる!!ってことだね。

例えば、Initの()の中に「1」と書いて、
Instantiate(cardPrefab, playerField)と書き換えたら、
Card1のカードが、自分のフィールドに出る。
ってことだね。

まあ好きなようにいじってみるとわかると思うよ!!

 

要はこれを書いていけばどんどん色んなカードを好きな場所に出せるようになる!!ってことですな!

 

、、、でもこれいちいち書くの面倒くない??

 

「CreatCard」メソッドの作成をしよう

というわけで、カードを作りだす処理をメソッド(関数)にしてまとめよう!!

オレンジの部分が変わってるので、張り替えて実行してみよう↓

さっきと同じようになったかな??

でもさっきよりスッキリしたコードになってるよね!

これは「何度も繰り返す処理」をCreatCardと言うメソッドにしたことで、何度も同じようなコードを書かずに済んだから。ってことだね。

なので今後も何度も同じ処理をするような場合は、メソッドにまとめちゃった方がいいよ!

コードの詳細は次で説明してきます!!

 

コードの解説

今回はいろいろ出てきたので、ざっくりと説明していくよ!!

いきなり読んでも初心者の人はたぶん全部は理解できないと思うけど、

「20%くらい分かったわ!!」で全然OK!!

分かんなくて手が止まっちゃう事の方が勿体ないので、雰囲気だけ掴めれば次にドンドン進んでいって大丈夫だよ!!やってる内にそのうち分かるようになるから。笑

ではいくぞ!!

 

「CardEntity」について

このスクリプトは、
カードデータそのもの!!

「どういうことだよ!!!」って人は、下記のオレンジ部分のコードを追記してみよう↓

例えばだけど、Rarity(レアリティ)を付けてみる

 

コードを追記したら、カードデータを見に行くと。

パラメータが増えてる!!!!

というわけ。(Legendは勝手に書いただけね。笑)

なのでカードのデータをいじりたかったらCardEntityをいじればいい。ってことですな。

※後で戻しておいてね!!

 

「CardModel」について

このスクリプトは、
バトル中のカードデータを管理してるもの!!

カードのデータ自体はCardEntityが持ってるけど、

  • 自分のカードなのか、敵のカードなのか
  • 攻撃できる状態なのか、召喚酔いしてるのか
  • 手札のカードなのか、フィールドに出てるのか

っていうバトル中のデータに関してはバトルによって変わるじゃん??

そういうバトル中のデータを持ってるのがCardModel

だから今後、「このカードは召喚酔いしてるから攻撃できない」とか「自分のカードなのか、敵のカードなのか」とかいうのは、CardModelが管理していくよ!!

 

「CardView」について

このスクリプトは、
バトル中のカードの見た目を管理してるもの!

CardEntityからカードデータそのものを受け取って、CardModelでそのカードデータを持ってても、ゲームの画面に表示されないと意味ないよね。

そこで名前とか、パワーとか色んなデータを表示してるのが、このCardView。

今後出てくる、「攻撃できる状態のカードを光らせる。」という処理はここが管理することになるよ!!

 

「CardController」について

このスクリプトは、
今までのカードに関係するスクリプトをまとめるもの!
という認識でOK

これから出てくるカードは全てCardControllerを使って処理していくよ。

 

「GameManager」について

GameManagerは、今回追記した処理の説明をしてくよ。

今回大事になるのが、CreatCardメソッド!!

CreatCardメソッドってのは、8~12行目のやつね。

このメソッドは何をしてるのかというと、
「カード番号(int cardID)と場所(Transform place)を教えたら、その通りカードを出します!!」
って処理をしてるよ。

日本語で言うと、
CreateCard(出したいカードの名前(番号), 出したいカードの場所)
ってこと。

このCreatCardの後ろの()の中の値を「引数」っていうんだけど、いまいち分かんない人は「C# メソッド(関数)」「C# 引数」とかで軽く調べた方がいいかも!!

 

以上!!!
ものすごくザックリとした説明だったけど分かったかな??

もうちょっと説明が必要なところがあったらコメント下さい!

 

【演習】カードの作成と表示

では最後に理解度チェックとして演習をやっていこう!!

演習としては、
コードでこの状況を作ってみよう!!↓

ヒントとしては、

・新しいカードを作って、
・カードをそれぞれ表示させる。

って処理が必要だね。

ではやってみよう!!

 

【演習】答え合わせ

出来たかな??

答えとしては、
Card3を作って、StartGameメソッドに下の処理を突っ込むだけ!

こんな感じで、今回は細かいコードの中身より、それを使って好きなカードを作って、それを好きな場所に表示できるようになれればOKだよ!!

 

まとめ

今回で好きなカードを作って、好きなように出せるようになったね!!

次の記事ではデッキを作って、ドローフェイズやターンエンドなど、ターン制御部分を作っていくよ!!

どんどんカードゲームっぽくなって楽しくなるね!!

楽しみながらちょっとずつ作ってこ!

ではでは今回はここまで!!

 

あ、あと最後に。
一言でもコメント頂けるとめっちゃやる気が上がります!
そして更新頻度も上がります。笑

どんな質問でも、ご指摘でも歓迎ですのでお気軽どうぞ!

ってなわけで今回は終わりっ!!

また次回!!

 

次の記事↓

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方講座⑥ ターンフェーズ作成編 前回までの記事で、実際にデータを持ったカードを自由に出せるようになりましたね!! 前回の記事を見てない人はそちらを参考↓ ...

前の記事↓

【解説通りに作るだけ】デジタルカードゲームの作り方④ カードの動かし方編 前回の解説で手札やフィールドにカード生成することが出来るようになりましたね! 見てない人はこちら参照↓ http:/...

 

【参考】

[Unityゲーム開発] シャドバ風!?カードゲームの作り方 #3 カードデータの生成

 

Unity初心者がいきなりカードゲームを作るのは無理??【答え:余裕です】 初心者だけど、カードゲームを作ってみたい!! って思って、色々調べてみると って気持ちになっちゃうよね。 ...
【Unity】デッキ(リスト)をシャッフル(ランダムに)する方法【コピペで完成】 ってことあるよね。 僕自身シャッフルの仕方がわからなくて困ってたけど、 案外簡単な方法で出来たので、...
【Unity】クリック時に処理を起こす方法【コピペで完成】 ってこと、あるよね。 実際に見せるとこんな感じ↓ 実際にやってみると超簡単だ...

 

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

POSTED COMMENT

  1. こゆの より:

    毎回毎回分かりやすい解説をしてくださってありがとうございます。
    本当に先生と呼ばせていただきたいです!
    次回の解説も楽しみに待っています!!

    • みじんこ より:

      >こゆのさん
      コメントありがとうございます!
      せ、先生だと、、、!!
      嬉しいです。笑(=´∀`)

      ちょっと複雑になってきましたけど、大丈夫そうですかね??
      少しずつ理解しながら一緒に作っていきましょう!

COMMENT

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