カードゲームの作り方

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方⑧ リーダーへの攻撃編

 

前回の記事でモンスターへの攻撃が実装出来ましたね!

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

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方⑦ カードバトル編 前回までの記事で、ドローやターンエンドボタンなど ターンフェーズについての実装が完了しましたね! 前回の記事を見てない人...

 

今回は敵リーダーへの攻撃を実装していきます!!

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

 

基本的には前回のモンスターの攻撃と同じ様なやり方で実装していくので、前回の復習も含めてやっていこう!

では行くぞ!!

 

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

では最初に今回の流れを説明します。

全体の流れはこんな感じ↓

  1. 「AtattackedLeader」クラスを作る
  2. コードの記入
  3. アタッチをする
  4. リーダーのHPの表示を反映させる
  5. 攻撃可能の枠を作る
  6. アタッチする

では順番に進めていこう!

 

【解説】リーダーへの攻撃の実装

①「AttackedLeader」クラスの作成

ではまず「AttackedLeader」クラスを新しく作ろう

こんな感じになればOK↓

②コードの記入

次はリーダーへ攻撃するためのコードを追記していくよ。

 

AttackedLeaderクラスに丸々コピペしよう↓
(エラーが出るけど気にしないでOK!)

 

GameManagerにも追記していくよ。

一番下の行(この前書いた、SetAttackableFieldCardメソッドの下とか)に全部コピペしよう↓

 

こっちはStartGameメソッドにオレンジ部分を追記しよう↓

 

無事にコードを張り付けられたかな??

エラーが出てなければ次に進もう!

 

③「AttackedLeader」のアタッチ

では次はアタッチをやっていこう!

 

①.「EnemyLeader」をクリック
②.「AddComponent」をクリックして「AttackedLeader」を選択。
③.こんな感じに張り付けばOK!

 

では実行してみよう!!

 

敵リーダーに攻撃出来るようになった!!
(下のログメッセージにリーダーのHPが表示されるようになってるよね?)

 

でもHPがゲームの画面に表示されていない!

というわけで、次はHPをゲーム画面に反映させていくよ!

 

④リーダーのHPを表示に反映させる

ではいくつかコードを追記していこう!

 

まずはGameManagerクラスに追記していくよ。

一番上の「using~」が並んで書いてある所に、オレンジ部分を追記しよう↓

 

[SerializeField] Transform ~って色々書いてあるところの下にオレンジの2行を追記↓

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

 

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

 

AttackToLeaderメソッドの下に全部追記↓

 

ちょっと追記する量が多かったけど追記出来たかな??

中身は後で解説するので、エラーが出てないことを確認して次に進もう!

 

⑤HPTextのアタッチ

では次にアタッチをしていこう!

 

①.「GameManager」をクリック
②.PlayerLeaderの「HPText」を”PlayerLeaderHPText”にドラッグ&ドロップ
③.EnemyLeaderの「HPText」を”EnemyLeaderHPText”にドラッグ&ドロップ

 

うまく出来たかな??

では実行してみよう!

こんな感じに
敵と自分のHPが5000になって、
攻撃したらHPが減るようになったかな??

無事ここまでこれたら、最後に攻撃可能カードに付ける枠を作っていくよ!

 

⑥枠の作成

では攻撃可能なカードに付ける緑の枠の作成をしていくよ!!

画像に沿って順番にやっていこう↓

①.Cardプレハブをクリック
②.OpenPrefabをクリック
③.Sceneビューをクリック(クリックしてもカードが見えない場合はCardをダブルクリックすると見やすい位置に移動してくれるよ)

 

①.Panelをコピー&ペースト(Ctrl+C→Ctrl+V)
②.Panelをコピーして出来たものを「CanUsePanel」に名前を変える
③.Panelの上にCanUsePanelを持っていく

 

①.パラメータを変える
②.Colorをクリック
③.いい感じの緑色にする
④.チェックを外しておく

 

これで攻撃可能なカードに付けるパネルは作成完了!!

 

⑦パネルを表示する

では今作った緑色のパネルをコードから表示させていくよ!!

 

まずカードの見た目を操作するので、CardViewクラスにオレンジ部分を追記↓

 

では次は、GameManagerクラスの追記部分。

AttackToLeaderメソッドに11行目を追記しよう↓

 

SetAttackableFieldCardメソッドに6行目を追記しよう↓

 

ではこれでコードの追記は終わり!

 

⑧パネルのアタッチ

では最後にパネルをアタッチしていこう!

 

①.Cardプレハブをクリックして、OpenPrefabをクリック

 

①.「CanUsePanel」を「CanAttackPanel」にドラッグ&ドロップする。

 

では実際に動かしてみよう!

 

完成だ!!!

こんな感じに攻撃出来る時に緑の枠が表示されるようになったかな??

ではでは実装できたので、コードの解説をしていくよ。

 

【解説】コードの詳細について

今回はちょこちょこと色んなクラスに追記したので、

詳しい説明する前に、一旦ざっくりなんの処理を追記したのかをまとめるよ。

 

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

【クラス名】 【追記内容】
AttackedLeader リーダーの上にカードをドラッグ&ドロップした時の処理
GameManager リーダーに攻撃した時の処理、HP表示の処理
CardView 攻撃可能パネルを表示・非表示にするメソッド

ではそれぞれのクラスに追記した内容が分かったら、コードそれぞれの解説に入っていこう!

 

「AttackedLeader」の説明

ではまずAttackedLeaderクラスのコードの説明。

ここのコードで大事になるのは、「OnDrop」メソッド

OnDropメソッドは、ドロップされた時に動くメソッドだったよね。

まあ中身は前回説明したのとほぼ一緒。

※忘れた人はこちらを参照

 

ざっくり言うとこんな感じ↓

public void OnDrop(PointerEventData eventData)
{
【解説】リーダーにドロップしてきたカードをアタッカーにする
CardController attackCard = eventData.pointerDrag.GetComponent<CardController>();

【解説】AttackToLeaderメソッドを実行する
GameManager.instance.AttackToLeader(attackCard, true);
}

つまり、

リーダーの上にカードがドロップされると、
そのカードをアタッカーとして、
「AttackToLeader」メソッド(リーダーに攻撃するメソッド)を発動する。

って処理をしているよ。

 

「GameManager」の説明

では次にGameManagerクラスに追記した分の解説をしていくよ!

GameManagerには、いくつか処理を追記したので、処理内容をまとめてから解説をしていきます。

【メソッド名】 【メソッドの概要】
AttackToLeader リーダーに攻撃した時の処理を行うメソッド
ShowLeaderHP リーダーのHPを表示するメソッド

 

「AttackToLeader」メソッド

まずは「OnDrop」メソッドで呼ばれた、「AttackToLeader」メソッドの説明からしていくよ。

 

これは簡単に言うと、リーダーに攻撃するメソッド

上からざっくり説明していくと、

 

これでまず攻撃してきたカードが攻撃可能なのかを判断する。
攻撃出来ないなら、returnで処理を止める。

if (attackCard.model.canAttack == false)
{
return;
}

 

次に、敵リーダーのHPをアタッカー(attckCard)のパワーの分減らす

enemyLeaderHP -= attackCard.model.power;

 

そして、アタッカーを攻撃不可にして、緑のパネルを消す

attackCard.model.canAttack = false;
attackCard.view.SetCanAttackPanel(false);

 

最後に、ログにリーダーのHPを表示して、
ShowLeaderHPメソッド(リーダーのHPを表示するメソッド)を動かす

Debug.Log(“敵のHPは、”+enemyLeaderHP);
ShowLeaderHP();

という感じの処理!!

 

「ShowLeaderHP」メソッド

次は「ShowLeaderHP」メソッドの説明!!

これは、リーダーのHPを表示するメソッドだね。

やってることは以下の2つ↓

  1. リーダーのHPが0以下の時には0にする
  2. ゲーム画面に反映する

 

まずこれで、リーダーのHPが0以下の時には0と表示するようにする↓

if (playerLeaderHP <= 0)
{
playerLeaderHP = 0;
}
if (enemyLeaderHP <= 0)
{
enemyLeaderHP = 0;
}

 

次に、ゲーム画面に反映!!↓

playerLeaderHPText.text = playerLeaderHP.ToString();
enemyLeaderHPText.text = enemyLeaderHP.ToString();

という感じだね!

 

「CardView」の説明

CardViewクラスには、
SetCanAttackPanelメソッドしか追記してないのでサラッと。

 

これは攻撃可能パネル(緑の枠)を出すor消すメソッド。

中身としては↓

public void SetCanAttackPanel(bool flag)
{
【解説】canAttackPanelを消す or 表示する
canAttackPanel.SetActive(flag);
}

こんだけ!!

 

【演習】バグの解消

では今回も理解の定着のために演習やっていこう!!

今回もバグの解消を演習としてやっていくよ!

 

今回の修正対象のバグは、

  • モンスターに攻撃しても枠が消えない

というバグを解消してもらいます!!

 

ヒントとしては、

リーダーへ攻撃した時と、モンスターに攻撃した時の処理の違い

に注目してみて!!

 

まあ理解しながら進めてるなら簡単だと思うよ!

というわけで、また今回も答えはまだ教えません!!

ただちょっと前回のが難しそうだったので、何度は下げました。
だから前回よりは簡単だから頑張って!

みんなの理解度が知りたいので、分かった人はコメントで教えてね!
(最近コメントが増えてきて嬉しいです(‘ω’)笑)

出来た人が出てきたら答え合わせとして、答えを載せる予定です。

ではでは演習頑張って!

次はマナポイントの実装をしていくよ。

(演習の答え合わせを先にやります!!)

おわりっ!!

 

次の記事↓

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

前の記事↓

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方⑦ カードバトル編 前回までの記事で、ドローやターンエンドボタンなど ターンフェーズについての実装が完了しましたね! 前回の記事を見てない人...

 

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

POSTED COMMENT

  1. もっけ より:

    今回も面白かったです!
    リーダーのカードが意味を持ち始めると
    ゲームっぽい華やかさがでてきますね

    今回の課題はサクッとできました!
    前回は難易度の高さにビビっていたので
    個人的にはこれくらいがちょうどよかったです

    次回の記事が待ち遠しいです!!
    首を長くして待っています

    • みじんこ より:

      >もっけさん
      いつもコメントありがとうございます!

      課題の難度がちょうどよくなって良かったです。笑
      もっけさんがフィードバックをくれたお陰です、ありがとうございますね!
      完成目指して作っていきましょう!!

COMMENT

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