前回の記事でモンスターへの攻撃が実装出来ましたね！
やってない人は前回の記事参照↓
今回は敵リーダーへの攻撃を実装していきます！！
完成形としてはこんな感じ↓
基本的には前回のモンスターの攻撃と同じ様なやり方で実装していくので、前回の復習も含めてやっていこう！
では行くぞ！！
Contents
【全体概要】全体の流れの説明
では最初に今回の流れを説明します。
全体の流れはこんな感じ↓
- 「AtattackedLeader」クラスを作る
- コードの記入
- アタッチをする
- リーダーのHPの表示を反映させる
- 攻撃可能の枠を作る
- アタッチする
では順番に進めていこう！
【解説】リーダーへの攻撃の実装
①「AttackedLeader」クラスの作成
ではまず「AttackedLeader」クラスを新しく作ろう。
こんな感じになればOK↓
②コードの記入
次はリーダーへ攻撃するためのコードを追記していくよ。
AttackedLeaderクラスに丸々コピペしよう↓
（エラーが出るけど気にしないでOK！）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class AttackedLeader : MonoBehaviour, IDropHandler { public void OnDrop(PointerEventData eventData) { /// 攻撃 // attackerを選択 マウスポインターに重なったカードをアタッカーにする CardController attackCard = eventData.pointerDrag.GetComponent<CardController>(); GameManager.instance.AttackToLeader(attackCard, true); } } |
GameManagerにも追記していくよ。
一番下の行（この前書いた、SetAttackableFieldCardメソッドの下とか）に全部コピペしよう↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public int playerLeaderHP; public int enemyLeaderHP; public void AttackToLeader(CardController attackCard, bool isPlayerCard) { if (attackCard.model.canAttack == false) { return; } enemyLeaderHP -= attackCard.model.power; attackCard.model.canAttack = false; Debug.Log("敵のHPは、"+enemyLeaderHP); } |
こっちはStartGameメソッドにオレンジ部分を追記しよう↓
|
1 2 3 4 5 6 7 8 9 10 11 |
void StartGame() // 初期値の設定 { enemyLeaderHP = 5000; playerLeaderHP = 5000; // 初期手札を配る SetStartHand(); // ターンの決定 TurnCalc(); } |
無事にコードを張り付けられたかな？？
エラーが出てなければ次に進もう！
③「AttackedLeader」のアタッチ
では次はアタッチをやっていこう！
①.「EnemyLeader」をクリック
②.「AddComponent」をクリックして「AttackedLeader」を選択。
③.こんな感じに張り付けばOK！
では実行してみよう！！
敵リーダーに攻撃出来るようになった！！
（下のログメッセージにリーダーのHPが表示されるようになってるよね？）
でもHPがゲームの画面に表示されていない！
というわけで、次はHPをゲーム画面に反映させていくよ！
④リーダーのHPを表示に反映させる
ではいくつかコードを追記していこう！
まずはGameManagerクラスに追記していくよ。
一番上の「using~」が並んで書いてある所に、オレンジ部分を追記しよう↓
|
1 2 3 4 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; |
[SerializeField] Transform ～って色々書いてあるところの下にオレンジの2行を追記↓
|
1 2 3 4 |
[SerializeField] CardController cardPrefab; [SerializeField] Transform playerHand, playerField, enemyField; [SerializeField] Text playerLeaderHPText; [SerializeField] Text enemyLeaderHPText; |
StartGameメソッドにオレンジ部分を追記↓
|
1 2 3 4 5 6 7 8 9 10 11 12 |
void StartGame() // 初期値の設定 { enemyLeaderHP = 5000; playerLeaderHP = 5000; ShowLeaderHP(); // 初期手札を配る SetStartHand(); // ターンの決定 TurnCalc(); } |
AttackToLeaderメソッドにオレンジ部分を追記↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public void AttackToLeader(CardController attackCard, bool isPlayerCard) { if (attackCard.model.canAttack == false) { return; } enemyLeaderHP -= attackCard.model.power; attackCard.model.canAttack = false; Debug.Log("敵のHPは、"+enemyLeaderHP); ShowLeaderHP(); } |
AttackToLeaderメソッドの下に全部追記↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
public void ShowLeaderHP() { if (playerLeaderHP <= 0) { playerLeaderHP = 0; } if (enemyLeaderHP <= 0) { enemyLeaderHP = 0; } playerLeaderHPText.text = playerLeaderHP.ToString(); enemyLeaderHPText.text = enemyLeaderHP.ToString(); } |
ちょっと追記する量が多かったけど追記出来たかな？？
中身は後で解説するので、エラーが出てないことを確認して次に進もう！
⑤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クラスにオレンジ部分を追記↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class CardView : MonoBehaviour { [SerializeField] Text nameText, powerText, costText; [SerializeField] Image iconImage; [SerializeField] GameObject canAttackPanel; public void Show(CardModel cardModel) // cardModelのデータ取得と反映 { nameText.text = cardModel.name; powerText.text = cardModel.power.ToString(); costText.text = cardModel.cost.ToString(); iconImage.sprite = cardModel.icon; } public void SetCanAttackPanel(bool flag) { canAttackPanel.SetActive(flag); } } |
では次は、GameManagerクラスの追記部分。
AttackToLeaderメソッドに11行目を追記しよう↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
public void AttackToLeader(CardController attackCard, bool isPlayerCard) { if (attackCard.model.canAttack == false) { return; } enemyLeaderHP -= attackCard.model.power; attackCard.model.canAttack = false; attackCard.view.SetCanAttackPanel(false); Debug.Log("敵のHPは、"+enemyLeaderHP); ShowLeaderHP(); } |
SetAttackableFieldCardメソッドに6行目を追記しよう↓
|
1 2 3 4 5 6 7 8 |
void SetAttackableFieldCard(CardController[] cardList, bool canAttack) { foreach (CardController card in cardList) { card.model.canAttack = canAttack; card.view.SetCanAttackPanel(canAttack); } } |
ではこれでコードの追記は終わり！
⑧パネルのアタッチ
では最後にパネルをアタッチしていこう！
①.Cardプレハブをクリックして、OpenPrefabをクリック
①.「CanUsePanel」を「CanAttackPanel」にドラッグ&ドロップする。
では実際に動かしてみよう！
完成だ！！！
こんな感じに攻撃出来る時に緑の枠が表示されるようになったかな？？
ではでは実装できたので、コードの解説をしていくよ。
【解説】コードの詳細について
今回はちょこちょこと色んなクラスに追記したので、
詳しい説明する前に、一旦ざっくりなんの処理を追記したのかをまとめるよ。
表にまとめるとこんな感じ↓
| 【クラス名】 | 【追記内容】 |
|---|---|
| AttackedLeader | リーダーの上にカードをドラッグ&ドロップした時の処理 |
| GameManager | リーダーに攻撃した時の処理、HP表示の処理 |
| CardView | 攻撃可能パネルを表示・非表示にするメソッド |
ではそれぞれのクラスに追記した内容が分かったら、コードそれぞれの解説に入っていこう！
「AttackedLeader」の説明
ではまずAttackedLeaderクラスのコードの説明。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class AttackedLeader : MonoBehaviour, IDropHandler { public void OnDrop(PointerEventData eventData) { /// 攻撃 // attackerを選択 マウスポインターに重なったカードをアタッカーにする CardController attackCard = eventData.pointerDrag.GetComponent<CardController>(); GameManager.instance.AttackToLeader(attackCard, true); } } |
ここのコードで大事になるのは、「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」メソッドの説明からしていくよ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
public void AttackToLeader(CardController attackCard, bool isPlayerCard) { if (attackCard.model.canAttack == false) { return; } enemyLeaderHP -= attackCard.model.power; attackCard.model.canAttack = false; attackCard.view.SetCanAttackPanel(false); Debug.Log("敵のHPは、"+enemyLeaderHP); ShowLeaderHP(); } |
これは簡単に言うと、リーダーに攻撃するメソッド。
上からざっくり説明していくと、
これでまず攻撃してきたカードが攻撃可能なのかを判断する。
攻撃出来ないなら、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」メソッド
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
public void ShowLeaderHP() { if (playerLeaderHP <= 0) { playerLeaderHP = 0; } if (enemyLeaderHP <= 0) { enemyLeaderHP = 0; } playerLeaderHPText.text = playerLeaderHP.ToString(); enemyLeaderHPText.text = enemyLeaderHP.ToString(); } |
次は「ShowLeaderHP」メソッドの説明！！
これは、リーダーのHPを表示するメソッドだね。
やってることは以下の２つ↓
- リーダーのHPが０以下の時には０にする
- ゲーム画面に反映する
まずこれで、リーダーのHPが０以下の時には０と表示するようにする↓
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);
}
こんだけ！！
【演習】バグの解消
では今回も理解の定着のために演習やっていこう！！
今回もバグの解消を演習としてやっていくよ！
今回の修正対象のバグは、
- モンスターに攻撃しても枠が消えない
というバグを解消してもらいます！！
ヒントとしては、
リーダーへ攻撃した時と、モンスターに攻撃した時の処理の違い
に注目してみて！！
まあ理解しながら進めてるなら簡単だと思うよ！
というわけで、また今回も答えはまだ教えません！！
ただちょっと前回のが難しそうだったので、何度は下げました。
だから前回よりは簡単だから頑張って！
みんなの理解度が知りたいので、分かった人はコメントで教えてね！
（最近コメントが増えてきて嬉しいです(‘ω’)笑）
出来た人が出てきたら答え合わせとして、答えを載せる予定です。
ではでは演習頑張って！
次はマナポイントの実装をしていくよ。
（演習の答え合わせを先にやります！！）
おわりっ！！
次の記事↓
前の記事↓
今回も面白かったです！
リーダーのカードが意味を持ち始めると
ゲームっぽい華やかさがでてきますね
今回の課題はサクッとできました！
前回は難易度の高さにビビっていたので
個人的にはこれくらいがちょうどよかったです
次回の記事が待ち遠しいです！！
首を長くして待っています
>もっけさん
いつもコメントありがとうございます！
課題の難度がちょうどよくなって良かったです。笑
もっけさんがフィードバックをくれたお陰です、ありがとうございますね！
完成目指して作っていきましょう！！
わかりやすい解説ありがとうございます！
みじんこさんのわかりやすい記事のおかげで、
これまでゼロ知識だった私でもここまで追いつきました！
本を買ってやるよりもわかりやすいのに、無料で本当にいいのか心配にもなりますが。。笑
これまでの復習をしっかりしながら、次の更新も楽しみにしています！