プログラミング

HPバーアニメーション前編 サーバー側の対応 PHPポケモン 43

PHP PHPポケモン ポケモン
HPバーアニメーション前編 サーバー側の対応 PHPポケモン 43

動きのあるHPバーづくり

それではデモ公開に先立ち、HPバーの作り込みをしていきたいと思います。

現在のPHPポケモンは、ダメージ計算などが終わった結果をすべて返却しているため、技選択をして次の画面に移行すると、HPが減った状態でスタートしていました。これでは、どの技でどれぐらいのダメージを与え、状態変化等でどのぐらいダメージの変化があったのかなどはわかりません

今回はそこもゲームと同じように再現するため、HPバーの動きを再現していきます。

 

ちなみにですが、動き関係についてはもちろんJavaScript(jQuery)をガッツリ使用します。

 

サーバー側の処理

まず注意すべき点が1つあります。それは、どこまでをフロント側(Javascript)、どこまでをサーバ側(PHP)で担当するかということです。

あくまでPHPポケモンはWEBアプリケーションのため、DOMを直接操作されてしまうと実際には起こり得ない計算結果を発生させてしまう可能性があります。そうしないためにも、ダメージ計算などはすべてサーバー側で行い、フロントではあくまで画面上の変動は演出にとどめて置かなければなりません。

・残りHP20の相手に10ダメージを与える

PHPで今まで通りダメージ計算を行い、相手の残りHPを10にする

Javascriptで20から10になる演出をさせる(残りHPをここでは計算しない)

 

メッセージIDの発行

ポケモンがHPに対して動きを持たせるタイミングは、メッセージに合わせてあります。以下2つの例をみてみましょう。

 

攻撃技を使用した場合

「ピカチュウはでんきショックを使った」

→ でんきショックのダメージ分HPバー減少

 

状態異常(毒)の場合

毒ダメージ分HPバー減少

→「ピカチュウは毒のダメージを受けている」

 

このように、状況によってメッセージのタイミングは異なりますが、メッセージの前後で行われ、ボタンを押すことで順番にアクションが進んでいきます。なので、メッセージに対してIDをもたせ、そこにパラメーターを設定することで、どのメッセージでどのアクションを実行させればよいかを判別させます。そのために、ResponseTraitに作成したメッセージとレスポンスの2つを組み合わせて作成します。

 

アクション判定方法
  1. メッセージにIDを持たせる
  2. そのIDに該当するパラメーターをレスポンスへ格納
  3. メッセージがクリックされた時に、レスポンスに格納されたパラメーター通りアクションを実行

 

それでは、メッセージIDを生成するための仕組みを見ていきましょう。

 

レスポンストレイト(/App/Traits/ResponseTrait.php
/**
* メッセージIDの発行
*
* @return string
*/
public function issueMsgId()
{
    // IDを生成
    $id = 'msg'.substr(bin2hex(random_bytes(16)), 0, 16);
    // ユニークになるようにチェック
    while(in_array($id, $_SESSION['__message_ids'] ?? [], true)){
        $id = 'msg'.substr(bin2hex(random_bytes(16)), 0, 16);
    }
    $_SESSION['__message_ids'][] = $id;
    return $id;
}

 

重複をさせるために、ランダムでIDを生成後にセッションに格納しています。格納前に同値があれば、whileで再生成するという仕組みです。

ここでプロパティではなくセッションを使用している理由は「どのインスタンス内でIDが生成されるかわからない」からです。通常はサービス内で行われていますが、技の反動であればポケモンのインスタンス内や技のインスタンス内など様々です。これらを取り出してまとめてコントローラーのインスタンスにセットした時に、プロパティ内で一意にしていれば重複する可能性が出てきてしまいます。

16桁の文字数列で1桁程度の数であれば、重複する可能性はほぼ有りませんが100%ではありません。これを100%とするためにセッションを活用しました。

 

アクションの作成

IDの作成が出来たので、次にメッセージへのID格納と、レスポンスへのパラメーターの格納を行います。そのために、レスポンストレイトへいくつかメソッドを追加しておきましょう。

 

レスポンストレイト(/App/Traits/ResponseTrait.php
/**
* アニメーション用の自動メッセージの格納
*
* @param mixed $param
* @return array
*/
public function setAutoMessage($param)
{
    $this->msgs[] = ['', $param, 'auto'];
}
 
/**
* 空メッセージの格納
*
* @param string $param
* @return array
*/
public function setEmptyMessage($param)
{
    $this->msgs[] = ['', $param, ''];
}

 

メッセージの格納(setMessage)では空を弾くようにしています。しかし、状態異常のダメージを行う際には空メッセージを間に挟んでいる方が簡単に作成できるため、個別に作成しました。自動メッセージの格納は次回詳しく説明しますが、アニメーションに合わせて自動送りをしたいメッセージ用として準備しています。

 

これでアニメーションを起こす際に必要な値を格納する準備が整いました。

しかし、アニメーションでHPの減算・加算を行うためには、敵味方お互いのターン最初のHP状態を残して置かなければなりません。現在はgetRemainingHpで取得しているので、計算後の値は取得できますが、画面以降すればその値はダメージを逆算しなければ算出することが出来ないからです。

なので、前画面からのポケモン情報を引き継いだタイミングで、コントローラーに対してスタート時のHP状況を格納するために、プロパティを用意しておきましょう。

 

バトルコントローラー(/App/Controller/Battle/BattleController.php
<?php
$root_path = __DIR__.'/../../..';
require_once($root_path.'/App/Controllers/Controller.php');
// サービス
require_once($root_path.'/App/Services/Battle/StartService.php');
require_once($root_path.'/App/Services/Battle/RunService.php');
require_once($root_path.'/App/Services/Battle/FightService.php');
// トレイト
require_once($root_path.'/App/Traits/Controller/BattleControllerTrait.php');
 
// バトル用コントローラー
class BattleController extends Controller
{
 
--省略
 
    /**
    * 前ターンのHP
    * @var array
    */
    protected $before_remaining_hp = [
        'friend' => 0,
        'enemy' => 0,
    ];

 

次に格納方法です。計算が行われる前でなければなりませんので、両ポケモンも引き継ぎ処理後に、getRemainingHpの結果を格納しましょう。

 

バトルコントローラー用トレイト(/App/Traits/Controller/BattleControllerTrait.php
/**
 * バトルコントローラー用トレイト
 */
trait BattleControllerTrait
{
 
    /**
    * ポケモン情報の引き継ぎ
    *
    * @param Pokemon::export:array $pokemon
    * @return void
    */
    protected function takeOverPokemon($pokemon)
    {
        $class = $pokemon['class_name'];
        $this->pokemon = new $class($pokemon);
        // ランク(バトルステータス)の引き継ぎ
        if(isset($_SESSION['__data']['rank'])){
            $this->pokemon
            ->setRank($_SESSION['__data']['rank']['pokemon']);
        }
        // 状態変化の引き継ぎ
        if(isset($_SESSION['__data']['sc'])){
            $this->pokemon
            ->setSc($_SESSION['__data']['sc']['pokemon']);
        }
        // 前ターンのHP(現在の残りHP)をプロパティに格納
        $this->before_remaining_hp['friend'] = $this->pokemon
        ->getRemainingHp();
    }
 
    /**
    * 相手ポケモンの引き継ぎ
    *
    * @param Pokemon::export:array $enemy
    * @return void
    */
    protected function takeOverEnemy($enemy)
    {
        if(!empty($enemy)){
            $this->enemy = new $enemy['class_name']($enemy);
            // 前ターンのHP(現在の残りHP)をプロパティに格納
            $this->before_remaining_hp['enemy'] = $this->enemy
            ->getRemainingHp();
        }
        // ランク(バトルステータス)の引き継ぎ
        if(isset($_SESSION['__data']['rank'])){
            $this->enemy
            ->setRank($_SESSION['__data']['rank']['enemy']);
        }
        // 状態変化の引き継ぎ
        if(isset($_SESSION['__data']['sc'])){
            $this->enemy
            ->setSc($_SESSION['__data']['sc']['enemy']);
        }
    }

 

自ポケモンの場合は通常の引継ぎ処理後に一律で取得可能ですが、相手ポケモンの場合は開始ターン引き継ぎ時点ではポケモンのインスタンスが存在しません。なので、引き継ぎができれば取得して格納するようにしましょう。

 

バトルコントローラー(/App/Controller/Battle/BattleController.php
/**
* アクションに合わせた分岐
* @return void
*/
private function branch()
{
    try {
        // アクション分岐
        switch ($this->request('action')) {
            /******************************************
            * 開始
            */
            case 'battle':
            // サービス実行
            $service = new StartService;
            $service->execute();
            // 実行結果
            $this->enemy = $service->getResponse('enemy');
            // 前ターンのHP(現在の残りHP)をプロパティに格納
            $this->before_remaining_hp['enemy'] = $this->enemy
            ->getRemainingHp();
            $this->setMessage($service->getMessages());
            $this->setResponse($service->getResponses());
            break;

 

相手ポケモンの場合、開始ターンは引き継ぎ処理で格納出来ていないので、サービス実行後にインスタンスが生成された段階で格納します。

 最後に、開始時のHPを取得するためのメソッドを用意しておきましょう。

 

バトルコントローラー用トレイト(/App/Traits/Controller/BattleControllerTrait.php
/**
* 前のターンの残りHPを取得(HPバー用)
*
* @param Pokemon:object $pokemon
* @param string $param (per)
* @return numeric
*/
public function getBeforeRemainingHp($pokemon, $param='')
{
    if($param === 'per'){
        // 最大HPとの比率を%で取得(数値で返却)
        return $this->before_remaining_hp[$pokemon->getPosition()] / $pokemon->getStats('HP') * 100;
    }else{
        return $this->before_remaining_hp[$pokemon->getPosition()];
    }
}

 

こちらのメソッドが、HPバーの初期値で使用する値の算出用となります。

 

画面開始時の初期値の取得方法が整ったので、次は計算(アニメーション)用のパラメーター返却です。作成したレスポンス用メソッドを使って実装していきましょう。

 

攻撃用トレイト(/App/Traits/Service/Battle/ServiceBattleAttackTrait.php
/**
* 攻撃メッセージのパラメーターとして設定するID
* @var string
*/
private $atk_msg_id;
 
/**
* 攻撃
* (攻撃→ダメージ計算→ひんし判定)
*
* @param object $atk_pokemon
* @param object $def_pokemon
* @param object $move
* @return void
*/
protected function attack($atk_pokemon, $def_pokemon, $move)
{
 
--省略
 
    // 攻撃メッセージを格納
    $this->atk_msg_id = $this->issueMsgId();
    $this->setMessage($atk_pokemon->getPrefixName().'は'.$move->getName().'を使った!', $this->atk_msg_id);
 
--省略
 
/**
* 攻撃判定成功時の処理
*
* @param object $atk_pokemon
* @param object $def_pokemon
* @param object $move
* @return void
*/
private function attackSuccess($atk_pokemon, $def_pokemon, $move)
{
 
--省略
 
    // このターン受けるダメージをポケモンに格納
    $def_pokemon->setTurnDamage($move->getSpecies(), $damage ?? 0);
    // ダメージ計算
    $def_pokemon->calRemainingHp('sub', $damage ?? 0);
    // HPバーのアニメーション用レスポンス
    if(isset($damage)){
        $this->setResponse([
            'param' => $damage,
            'action' => 'hpbar',
            'target' => $def_pokemon->getPosition(),
        ], $this->atk_msg_id);
    }

 

攻撃用トレイトであれば、メッセージのタイミングがかなり早くに発生して、ダメージ計算が別のメソッド内で行われるため、プロパティを用意してメッセージIDを格納しておきます。メッセージを格納する際にパラメーターとしてIDを格納、その後ダメージ計算後に同じIDをキーにしてsetResponseに対して必要なパラメータを持たせています。

 

レスポンスとして返す値には、以下の3つを用意しました。

action:アクションの種類

target:対象

param:ダメージ量(回復量)

 

回復技なども同じアクションで処理ができるように、アクションの種類はhpbarとしました。これが1つ目のactionです。経験値の増加アニメーションであれば、expbarとする予定です。これはJavascriptで分岐させるために使うだけなので、設定値は自由です。

 

2つ目のtargetは、敵か味方かを判別するための値です。こちらは防御ポケモンのgetPositionを使用の値を使って判別しています。

 

3つめのparam変動値です。HPであればほとんどがダメージとなるので、減算処理では正の数回復には負の数を指定して同じJavascriptの処理で実装します。

 

この要領で、状態異常によるダメージなども指定していきます。例として「やどりぎのタネ」のパラメーター格納を見てみましょう。

 

バトル用チェックトレイト(/App/Traits/Service/Battle/ServiceBattleCheckTrait.php
/**
* アタック後の状態変化チェック
*
* @param object Pokemon
* @return void
*/
protected function checkAfterSc($sicked_pokemon, $enemy_pokemon)
{
 
--省略
 
    /**
    * やどりぎのタネ
    */
    if(isset($sc['ScLeechSeed'])){
        // メッセージIDの生成(ダメージ用と回復用)
        $ls_msg_id1 = $this->issueMsgId();
        $ls_msg_id2 = $this->issueMsgId();
        // 最大HPの1/8HPを吸収する
        $leech_seed = new ScLeechSeed;
        // 小数点以下切り捨て
        $damage = (int)($sicked_pokemon->getStats('HP') / 8);
        if($damage){
            // 最小ダメージ数は1
            $damage = 1;
        }
        // ダメージ計算
        $sicked_pokemon->calRemainingHp('sub', $damage);
        // HPバーのアニメーション用レスポンス
        $this->setResponse([
            'param' => $damage,
            'action' => 'hpbar',
            'target' => $sicked_pokemon->getPosition(),
        ], $ls_msg_id1);
        // 回復
        $enemy_pokemon->calRemainingHp('add', $damage);
        // HPバーのアニメーション用レスポンス
        $this->setResponse([
            'param' => $damage * -1, # 加算するため負の数に変換してセット
            'action' => 'hpbar',
            'target' => $enemy_pokemon->getPosition(),
        ], $ls_msg_id2);
        // メッセージ(アニメーション用に空メッセージを2つ用意)
        $this->setAutoMessage($ls_msg_id1);
        $this->setAutoMessage($ls_msg_id2);
        $this->setMessage($leech_seed->getTurnMessage($sicked_pokemon->getPrefixName()));
        // HPが0になっていればチェック終了
        if(!$sicked_pokemon->getRemainingHp()){
            return;
        }

 

やどりぎのタネのHPバーのアニメーションとメッセージの流れは

  1. 相手のHPが減る
  2. 自分のHPが増える
  3. メッセージ表示「やどりぎのタネが相手の〇〇から体力を吸収した」

 という3ステップになります。なので、最初の2つには空の自動メッセージに合わせてIDをのパラメーターを結びつけておき、最後にメッセージを表示させています。

 

あとは、ダメージの種類に合わせて準備するだけです。余白を置きたいときには自動メッセージや空メッセージ、メッセージ後にアクションを起こしたい場合は通常メッセージにパラメーターをセットすれば、可能な限り近い再現が可能となります。

 

まとめ

いかがだったでしょうか。

今回のPHPポケモンは「HPバーアニメーション」の作り方について、サーバー側での処理方法をご紹介しました。

次回はフロント側の処理として、JavascriptjQuery)を使ったアニメーションの作り方を説明します。

 

現在WEBアプリケーションを学習中の方や興味がある人は、ぜひ参考にしてくださいね。

 

注目の記事

甘い誘惑に気をつけよう「わからないことへの対処法」
雑記
甘い誘惑に気をつけよう「わからないことへの対処法」

  最近は開発記事が多めだったので、今回は気分転換も込めてみんな大好きコラムのコーナーです。開発疲れという理由ももちろんありますが、久々に考えを書き綴りたくなったというのが本音です。   今回のテーマは「甘い誘惑に気をつけよう」です。高校生ぐらいまではあまり縁がなかったことでも、大学生・社会...

くれくれ姿勢が実は起業の近道だった!相手のことを考え過ぎるとハマる落とし穴とは
雑記
フリーランス,独立,起業
くれくれ姿勢が実は起業の近道だった!相手のことを考え過ぎるとハマる落とし穴とは

  仕事ください アドバイスしてください 〇〇について教えてください   こういったくれくれ姿勢の人は多く、投げかけられた側からすると「メリットは?」と感じてしまいます。 ですが実はこのくれくれ姿勢には意外な成功の要因が隠れています。多くの自己啓発記事やツイートをする人はこの本質的なものに触...

フリーランスが見積書を作るときに押さえておきたい3つのポイント+α
フリーランス
フリーランス,仕事依頼,独立,見積書
フリーランスが見積書を作るときに押さえておきたい3つのポイント+α

  仕事の依頼がきたけど、どれぐらいの金額を提示すればいいかわからない   駆け出しのフリーランスや、これから独り立ちしようとしている人に多い悩みです。 今回はそういった方のために「フリーランスが見積書を作るときに押さえておきたい3つのポイント+α」についてご紹介します。     時給...

【Wi-Fi6とは】スマホやPCの買い替えは必要?騙されないための基礎知識
ネットワーク
5G,IEEE 802.11ax,Wi-Fi
【Wi-Fi6とは】スマホやPCの買い替えは必要?騙されないための基礎知識

  本格的に5G普及への取り組みが始まり、Wi-Fi6といった新世代の規格が出たことによって、超情報化社会へ加速しました。 ですが、こういったナンバリングが一般化することによって、わからずに高性能な機器を斡旋されて無駄な購入をさせられたり、わからないことを理由に詐欺的営業を仕掛けてくる悪意ある人...

大半のネットワークビジネスが成立しない理由とは【権利収入の落とし穴】
マーケティング
MLM
大半のネットワークビジネスが成立しない理由とは【権利収入の落とし穴】

  誘われたけど、欠点が上手く説明できない 権利収入って本当にもらえるの?   ネットワークビジネスと聞けば、良い印象を抱かない人がほとんどでしょう。ですが、「何故?」と問われて説明できる人は意外にも少数派です。 そして、SNSを積極的に活用している人ならば、一度は誘いを受けたことがあるの...

これってスパム?amazon・paypalを装う悪質メールの対処方法とは
ネットワーク
amazon,Paypal,Xserver,スパム,三井住友,楽天,迷惑メール
これってスパム?amazon・paypalを装う悪質メールの対処方法とは

定期更新、役立つコラムのコーナー!   今回の注目したのは「迷惑(悪質)メールについて」です。   以前はamazonや楽天を名乗る業者から届いた迷惑メールについて紹介、その対処方法について取り上げましたが、今回は更にレベルアップしたスパムがいくつか届いたので、それらも紹介がてら、騙されないため...

画像に文字スペースを確保する簡単テクニックを3つ教えます【サムネイル作りで大活躍】
デザイン
Illustrator,Photoshop,サムネイル,バナー
画像に文字スペースを確保する簡単テクニックを3つ教えます【サムネイル作りで大活躍】

  サムネイル用の画像に文字スペースが無くて困っている・・・   せっかくいい写真が撮れたり、フリー画像が見つかったとしても、文字を配置するスペースが確保できずにせっかくのオブジェクトに重ねてしまったり、断念して別の画像を使用するようなケースはかなり多いです。 ですが、せっかく良い画像が見つ...

【JavaScript】ESLint下でToastr(グローバル変数)を使用する方法
プログラミング
ESLint,JavaScript,jQuery,Toastr
【JavaScript】ESLint下でToastr(グローバル変数)を使用する方法

  ESLintはシステム全体で見れば便利なツールと言えますが、ライブラリなどを読み込む際に通常紹介されているような方法では使えなかったり、慣れていない人からするとどうしても躓くポイントが多くなるのも事実です。 ですが使いこなせるようになれば、開発がスムーズになることはもちろん、保守性やコードの...

カテゴリ

SEO対策 イベント デザイン ネットワーク ビジネスモデル フリーランス プログラミング マーケティング ライティング 動画編集 雑記

タグ

5G Adobe AfterEffects AI ajax amazon Animate api artisan atom Automator AWS Bluetooth CSS CVR description EC-CUBE4 ECショップ ESLint Facebook feedly foreach function Google Google AdSense Honeycode htaccess HTML IEEE 802.11ax Illustrator Instagram IoT JavaScript jQuery jQuery UI keyword LAN Laravel Linux MacBook MAMP meta MLM MySQL NoCode note OS OSI参照モデル Paypal Photoshop PHP phpMyAdmin PHPポケモン PremierePro rss SEO SEO対策 Sequel Pro Skype SNS SSH Symfony TCP/IP title Toastr Trait Twig Twitter UCC V系 WAN WebSub Wi-Fi wiki Windows WordPress XAMPP xml Xserver YouTube YouTuber Zoom アーティスト アウトプット アクセス層 アニメーション アフィリエイト イーブイ インターネット インプット エンジニア オブジェクト指向 お金配り クリック単価 クリック数 コミュニケーション能力 コロナ コンサルティング サムネイル システムエンジニア スタートアップ スタイルシート スパム データベース ディープフェイク デザイナー デザイン テレワーク ナンパ ニュース ネットワークモデル ノマドワーク バナー ピカチュウ ビジネス フィード フリーランス ブロガー ブログ プログラマー プログラミング プログラミング学習 プログラミング教育 プロトコル ホームページ制作 ポケモン マークアップ マーケティング メール リモートワーク レンダリング 三井住友 三宮 仕事依頼 児童デイ 児童デイサービス 児童発達支援 公開鍵 初心者 助成金 勉強法 営業 広告 広告収入 必勝マニュアル 放課後等デイサービス 朝活 楽天 深層学習 無線LAN 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力