カードゲームの作り方

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方⑨ マナコスト実装編

 

前回までの記事で、敵への攻撃まで実装出来ましたね。

やってない人は前回の記事参照↓

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方8.5 演習の答え合わせ編 だいぶお待たせしましたが、 ⑦⑧で出した演習の答え合わせをします!! ⑨以降の記事では今回の答えを踏まえたコード...

 

今回の記事では、マナコストの実装をしていきます!!

完成形はこんな感じ↓

 

マナの実装が出来ればかなり完成形に近づくので、張り切っていこう!!

では行くぞ!!!

 

【全体概要】全体の流れの説明

ではまず、今回やっていく作業全体の説明をしていきます!

今回の実装の流れはこんな感じ↓

  1. マナポイントをコードから表示する
  2. ターン毎にマナポイントを増やす
  3. カードを出したらマナポイントを減らす
  4. 出せるカードに印を付ける
  5. マナポイント以下は出せなくする

ではひとつひとつ実装していこう!!

 

【実装】マナポイントの実装

①マナポイントをコードから表示する

ではまずマナポイントの表示を設定していくよ!

いま表示されてるマナポイントはあくまで「仮の数字」なので、コードから操作できるようにしていこう!

 

ではGamaManagerオレンジ部分を追記していこう↓

特にエラーが出なければアタッチに進もう!!

 

⓪.まず4つ分ある「ManaCost」を「ManaPoint」に名前を変えよう
既に「Point」になってる!って人はスルーで大丈夫。
※これはただ単に個人的に変えたかっただけなので、「ManaCost」の方がしっくりくる人はそのままでもいいよ!(変えてくれた方が無駄な読み替えが必要ないから、変えた方が楽だとは思うけども)

 

①.「ManaPoint」を「playerManaPointText」にアタッチする
②.「DefaultManaPoint」を「playerDefaultManaPointText」にアタッチする

 

では実行してみよう!

マナの数字が1に変わったかな??

変わったならOK!!

 

②ターン毎にマナを増やす

では次にマナポイントを毎ターン1づつ増やしていく処理を実装するよ!!

 

GamaManagerの「PlayerTurn」メソッドオレンジ部分を追記

追記出来たら実行してみよう!!

 

ターンエンドボタンを押す度にマナポイントが増えるようになったかな??

無事、実装出来ていたら次へ進もう!

 

※ちなみに、マナが10以上になった時にもし数字が重なる場合は、左右に表示位置をずらした方がいいかも。こんな感じに↓

 

 

③使用時にマナを減らす

では今度は「カードを出す度にマナポイントを減らす処理」を追記していこう!

※ ここから追記するコードが増えるので、間違えないように注意しながら進めてね!!

 

GameManagerの「ShowManaPointメソッド」の下下記のメソッドを追記

 

DlopPlaceクラス下記コードになるように修正
※丸々コピペでもOK。

 

CardControllerオレンジ部分を追記

 

エラーメッセージが出てないことを確認して、問題なければ実行してみよう!

カードを出した時にマナポイントが減るようになったかな??

無事減ったならOK!!次に進もう!

 

④使用可能な手札にカードに印を付ける

マナポイントは減るようになったけど、こんな感じで↓

 

今のままだといくらでもカードを出せちゃう!!

という訳で、まずは「使用可能な手札のカード」に緑の枠を付けるようにしていくよ!!

 

GameManager「ReduceManaPoint」メソッドとその下に追記しよう↓

 

 

同じくGameManager「DrowCard」メソッドにオレンジ部分を追記しよう↓

 

 

CardModelオレンジ部分を追記

 

CardViewオレンジ部分を修正、追記

 

 

CardControllerDropFieldメソッドにオレンジ部分を追記

 

コードを張り付けてエラーがないことを確認したら、次はパネルをアタッチをしていくよ!

 

①②Cardプレハブをクリックして、「OpenPrefab」をクリック

 

①「CanUsePanel」をアタッチする。

 

では実行してみよう!!

2コスト以下の手札に枠が付いて、、

 

1コストのカードを出すと、マナポイントが1になって、コストが1のカードにだけ枠が付いた!!

 

という感じ!!!!

だいぶゲームっぽくなってきたね!

あともうちょっと頑張ろう!!

 

⑤マナポイント以上のコストのカードを出せないようにする

とは言えまだマナポイントを下回ってもカードを出せてしまうので、次はマナポイントよりコストが大きいカードは動かせないようにしていくよ!!

ではやっていこう!

 

CardMovementオレンジ部分を追記しよう↓

 

では実行してみよう!!

マナポイント以上のコストのカードを引っ張っても動かなくなったかな??

これで大枠は完成!!

多少のバグが残っているけど、一旦コードの解説をしてから後で修正していくよ!!

 

【コードの解説】マナポイントの実装

今回はかなり色々なクラスをいじったので、

「どこをどう変えて、どうなったのか。」

をよく確認しながら進んで行こう!!

 

今回の実装の流れはこんな感じだったよね↓

  1. マナポイントを表示する
  2. ターン毎にマナポイントを増やす
  3. カードを出したらマナポイントを減らす
  4. 出せるカードに印を付ける
  5. マナポイント以下は出せなくする

ではそれぞれの詳細について説明していくよ!!

 

①マナポイントの表示

まずはマナポイントを表示するコードの解説をしていくよ!!

 

ここではまず、

  1. 「マナポイントを表示するメソッド」を作成する。
  2. マナポイントに数字を入れる
  3. マナポイントを表示する

ってな流れでマナポイントを表示しているよ。

では実際のコードで見ていこう!

 

①「マナポイントを表示するメソッド」を作成

まずは「マナポイントを表示するメソッド」を作成するよ!

メソッドの中の処理としては、

「マナポイントテキストって言う文字列に
マナポイントっていう数字を文字列に変換して入れますよ!!

ってなことをしているよ。

 

ただこの説明だと正直、

は??急に何言ってんのこいつ?

って思われそうなので、

 

最強に砕けた説明をすると、

文字しか受け付けない超数学嫌いの「てきすと子」に、「マナポイントはこれだよー」って、「1」を渡すと、「数字とか、まじむり。」って言われるけど、

「1」を文字として、てきすと子に渡す(ToString)と、「1ね。おっけー」って受け取ってくれるわけですよ!

(分かる?この説明??笑)

 

②③初期値の入力とマナポイントの表示

次は②マナポイントの初期値を設定して、さっき書いた③「ShowManaPoint」メソッドでマナポイントを表示するよ!

 

②ターン毎にマナポイントを増やす

ここでは単に、
「自分のターンが来たら、マナポイントを1増やす」
って処理をやっているよ!

なのでターン毎の動きを処理している「PlayerTurn」メソッドに追記をして、マナポイントの増加を実装しているよ↓

 

③カード使用時にマナポイントを減らす

今回の記事ではここからの処理が肝になるよ!

追記した処理が結構多いので、処理の流れを抑えると、

  1. カードがフィールドに置かれると、
  2. 「DropPlace」クラスの「OnDrop」メソッドが起動
  3. その中で「CardController」クラスの「DropField」が呼ばれて、
  4. 「GameManager」クラスの「ReduceManaPoint」を呼んで、
  5. コスト分マナポイントを減らして、
  6. 現在のマナポイントを表示する。

こんな感じで色んな処理が連続して実装されてるよ!

ではコードを含めて見ていこう!

 

①②③フィールドにカードが置かれると、「OnDrop」メソッドが動く

カードをフィールドにドロップすると、Fieldに貼り付けた「DropPlace」クラスの「OnDrop」メソッドが動くよね?

その中で、今回追記した「DropField」メソッドが呼ばれる

 

④DropFieldメソッドが呼ばれる

「DropFieldメソッド」が呼ばれて、「ReduceManaPoint」(マナポイントを減らす処理)を呼ぶ。

 

⑤⑥マナポイントを減らして、表示する

「ReduceManaPoint」メソッドが呼ばれたので、マナポイントからカードのコストの数字を引いて、「ShowManaPoint」メソッドを呼んで、マナポイントを改めて表示する!!って感じ!

 

 

④手札の使用可能カードに印を付ける

ここの処理もややこしいので、まず流れを抑えよう。

  1. CardModelクラスに「canUse」という、使用可能かどうかを判断するフラグを作る
  2. CardViewクラスに「SetCanUsePanel」メソッド(canUseの値によって、カードに緑の枠を付ける or 消す処理をするメソッド)を追記する。
  3. GameManagerクラスに「SetCanUsePanelHand」メソッド(手札のカードのコストとマナポイントを比較して、マナポイントの方が多いカードには緑の枠を付けるメソッド)を追記する。
  4. ドローした時に「SetCanUsePanelHand」を実行する様にする。
  5. カードを使った時に「SetCanUsePanelHand」を実行する様にする。
  6. カードをフィールドに出した時に、「canUse」の値をfalseにして「CanUsePanel」を外す。(緑の枠を取る)

文字で書くとめっちゃゴチャゴチャしてるけど、

コードなら割とシンプルなのでコードを見ながら説明していくよ!

 

「canUse」フラグの作成

カード1枚1枚に「今このカードは使用できるかどうか」のフラグを作る。

初期値は当然、false。

 

②フラグに合わせて緑の枠を付ける or 消すメソッドの作成

このカードが使用できるかどうかを表す「CanUse」フラグに合わせて、「CanUsePanel」を付ける or 消すメソッドを作る。

 

③手札のカードに「CanUsePanel」を付ける

手札のカードのリストを取得して、条件に当てはまるカードに「CanUsePanel」を付けていってるよ!

 

④ドローした時に「SetCanUsePanelHand」を実行する

ドローした時にも改めて「SetCanUsePanelHand」メソッドを実行しよう。

これをしないと、ドローしたカードに対して「CanUse」のフラグが更新されないので、本当なら使えるはずのコストのカードでも使えなくなっちゃうので注意!!

 

 

⑤カードを使用した時に「SetCanUsePanelHand」を実行する

さっきと同じく、マナポイントが変化した時にも「SetCanUsePanelHand」メソッドを実行しよう。

「ReduceManaPoint」の中にこのメソッドを入れることで、マナポイントが減った後に、手札のカードのコストとマナポイントを比較して、「CanUsePanel」を付けてくれるよ!

 

⑥フィールドに出した時に「CanUsePanel」を消す

手札の「CanUsePanel」が付いたカードを出すと、パネルが付いたままフィールドに置かれてしまうので、

「DropField」メソッド(カードをフィールドに置いた時に動く処理)に、「CanUsePanel」を消す処理を書き加えてあげよう!!

 

 

⑤マナ以上のカードを動かせなくする

では最後に使用できないカードを動かせないようにするコードの説明していくよ!

流れとしてはこんな感じ↓

  1. 「canDrag」フラグ(カードを動かせる or 動かせないのフラグ)を作る
  2. 「canUse」の値によって「canDrag」フラグを変更する。
  3. 「canDrag」がFalseなら動かせない処理を入れる。

コードだとこんな感じ↓

 

ざっくり説明していったけど分かったかな??

色々コードが出てきて混乱するかもしれないけど、処理は一方向に進んでるだけなので解説を何度か読んでみれば分かるはず!

それでもよくわからなかった場合は、解説を読みながらもう一度ゲームを作り直してみると深く理解出来るはずだよ!

それでも分かりづらい等あればコメントくださいー!!

 

【バグ修正】バグ探しとその修正

では最後にバグの修正をしていこう!!

まずは今回直すべきバグは何があるかを探してみよう!

今回気になるバグは大きく3つかな??

 

いつも言ってますが、バグ探し自分でゲームを作る際の立派な練習になるよ!

バグを見つけたら「こうやったら直せるかも!」って風にその解決方法も考えるとメキメキ力が付くよ!

解説に沿って作るだけでなく、ちょっと立ち止まって考えてみてね!!

では実際にゲームを動かしながらバグを3つ見つけてみよう!!

 

バグ修正対象3つ

ではでは、今回直すべきバグはこの3つ↓

・手札から場に置いたときに出せてないのに、コストが引かれる
フィールドからフィールドにドロップした時にもコストが引かれる
フィールドのカードが動かせない

どれもなかなか致命的なのでしっかり直していこう!!

 

バグ修正① フィールドに置いた時、出せないカードをドロップした場合もコストが減る

現状では、使用できない手札のカードをフィールドにドロップすると、カードはフィールドに置けないけどマナポイントがコスト分引かれてしまう!

という訳で、まずはこのバグを解消していこう!!

 

ではまず、こうなってしまう原因を考えると、

今の処理だと「とりあえず全部区別なく、フィールドにカードが置かれたらコスト分マナポイントを減らせ!!」ってなってるのが原因だよね。

ということは、「使用できないカード(「CanUse」フラグがFalseのカード)をフィールドにドロップした時は、処理を動かすな!!!」とすれば解決するので、

 

現状、「OnDrop」メソッドが

「カードがフィールドに置かれたら、DropFieldメソッドを実行する」となっているのを、

CanUseフラグがTrueなら、DropFieldメソッドを実行する」という分岐にしてあげればOK!!

コードで言うとこんな感じ↓

DropFieldクラスの「OnDrop」メソッドのオレンジ部分を上記の様に修正したら実行してみよう!

 

マナポイント以上のコストのカードをフィールドにドロップしても、マナポイントは減らないようになったかな??

ちなみにフィールドに出てるカードのCanUseフラグはFalseなので、②のフィールドにある「フィールドにあるカードをフィールドにドロップしてもマナポイントが減る」ってバグも同時解決するよ!!

 

③フィールドのカードが動かない

「マナポイント関連のバグは直ったけど、
 フィールドのカードが動かなくなってんじゃん!!( ゚Д゚)」

って感じなので、次はそこを直していきましょう!

 

この原因としては、CanUseフラグがFalseなら動けなくしてるからだよね?

まあこれ自体は正しいんだけど、あくまで手札のカードに対してそうして欲しい!って処理なのに、フィールドのカードまでそうなってしまってるのが原因

という訳で、「フィールドのカードにはこの処理を行いませんよ~」ってやればOK!

 

なのでまずは、「フィールドのカードですよ~」って分かるようなフラグを作ろう。

CardModelオレンジ部分を追記

 

そんでその後は、フィールドにカードを出した時に、そのカードの「FieldCard」フラグをTrueにする処理を追記する。

CardController「DropField」メソッドオレンジ部分を追記

 

そんで最後に、

手札のカードなら、カードのコストがマナポイントより大きいカードは動かない。」
フィールドのカードなら、攻撃できないカードは動かせない。」

というように、手札のカードかフィールドのカードかで処理を変えればOK!

 

CardMovementクラスのコードのオレンジ部分を修正してみよう!!↓

 

では実行してバグを確かめてみよう!!

フィールドの攻撃可能なカードが動かせるようになったかな??

無事出来ていたら完成!!!

超お疲れ様!!!(*´Д`)

 

最後に、、

今回も最後まで解説を読んでいただき、ありがとうございました!!

処理がだいぶ複雑になってきたので分かりづらい部分もあるとは思いますが、ベースの完成までもうすぐなんで、もうちょっと頑張りましょー!

記事数で言うとあと2記事ですかね。(敵のモンスターの攻撃と、エフェクト関係の2記事)

なので今月中(2月)には完成できるんじゃないかな~と思っております!(あくまで予定)

 

そして最後にこの場を借りて、謝罪とお礼を言わせてください。

めっちゃ記事の更新放置してしまってごめんよ!!!

そしてその間もコメントを書いて送ってくださった皆様、

ほんっっっとうにありがとうございました!!

コメントをもらう度に、やる気を貰いました。元気を貰ってました。

そしてまたこうやって記事を更新出来ました。

このカードゲーム作成解説記事は、大学2年の時に「カードゲームが作りたい!!」って思って調べてみたけど、ことごとく意味が分かんなくて挫折した当時の僕を助けられる記事を書けたらいいな~って思いで書き始めたものです。

始めは正直「自分の備忘録程度に書いとこ!」ってくらいだったんですが、当時の僕と同じように「プログラミングなんて全然分かんないけど、カードゲームが作りたい!!」って完全な初心者の人達が「僕にも作れました!ありがとうございます!!」って言ってくれるのが嬉しくてここまで書くことが出来ました。

とはいえまだまだ途中なので、

このままでは当時の僕に「なんだよみじんこ!解説が途中でいつまでもカードゲームが完成しないじゃんよ!!おこだぜ!ぷんぷんだぜ!!」って言われちゃうので、出来るだけ早めに、分かりやすく記事を出せるようにします!!

まあいろいろ書きましたが、要は「コメントしてくれてありがとう!!」ってことです!笑

ひとつひとつのコメントが嬉しいです。

(返信してない人はごめん!これからします!笑)

もちろん「ここがちょっと読みづらい。分かりづらい。」ってコメントもありがたいので、気付いたことがあればコメントくださいな!!

 

ではでは今回はこれで終わりっ!!!

次は敵のモンスターの攻撃を実装していくよ!!

次の記事↓

(頑張って執筆中)

前の記事↓

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方8.5 演習の答え合わせ編 だいぶお待たせしましたが、 ⑦⑧で出した演習の答え合わせをします!! ⑨以降の記事では今回の答えを踏まえたコード...

 

 

【ゲームを作りたい初心者必見!】UnityとC#の勉強方法まとめ こんな疑問に答えます。 ■本記事のテーマ 【完全初心者向け】Unityでゲームを作る...
【男子の夢】子供の頃に作ったカードゲームをデジタル化して遊んでみたいんじゃ!! 全ての男の夢を今、叶えん。 子供の頃に作った 自作カードゲームを デジタル化するぞーー!!...
ひとってついつい『三番目に好きなこと』をやっちゃうよね。って話 めっちゃ久しぶりにただの雑記。 話の内容としてはまあタイトルの通りなんだけど、 休みの日とかってつい、一番やりたいこ...
ABOUT ME
みじんこ
【名前】みじんこ(ここのブログ書いてるひと) ・大学2年の時に「ゲームが作りたいー!!」って思ったのに、ゲームの作り方を解説してるサイトがことごとく何言ってんのか分かんなくて挫折した。 ・数年な時を経て「だったら俺が完全初心者にも超わかりやすいサイトを作ってやんよ!」って事で、初めてゲームを作ろうとしてる方向けに解説記事を書いてるよ。

COMMENT

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