プログラミング

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つの思考「楽して稼ぐ」「知識オタク」「資産形成は無駄」

  「楽して稼ぎたい」   人間誰しも、そう考えているはずです。これは正しく、成功するためには必要な思考です。 それを「楽に稼ぐ方法なんてない」と無理やり押さえつけてしまう人は、完全に本質が見えておらず、その大半に「楽して稼げない自分を認められてない」というマイナス因子が含まれてい...

バトル状態のクラス化編 PHPポケモン 67
プログラミング
PHP,PHPポケモン,ポケモン
バトル状態のクラス化編 PHPポケモン 67

バトルの状態 PHPポケモンでも様々な技を再現してきましたが、まだまだ未実装のものはたくさんあります。そのほとんどがイレギュラー処理の必要なものだったりします。 それらをしっかりと解決していくためにも、今回は「バトル状態」をひとまとめに管理できるようにシステムの見直しを行います。   ひとまとめに...

コンテンツ配信業でバズるために大切な3つの法則〜『1ヶ月でチャンネル登録者数1000人』は参考にするな
マーケティング
YouTube,YouTuber,ブログ
コンテンツ配信業でバズるために大切な3つの法則〜『1ヶ月でチャンネル登録者数1000人』は参考にするな

  YouTubeやブログを始めたけど思ったように伸びない・・・   こういった人は、チャンネル登録者数を伸ばす方法などの動画を見ても参考にならなく、結果に繋がらないという場合がほとんどです。 その理由は、その人自身に問題があるわけではなく、動画の前提条件がそもそも違っているからです。   今回は「...

グローバル&ヘルパー関数編 PHPポケモン 61
プログラミング
PHP,PHPポケモン,ポケモン
グローバル&ヘルパー関数編 PHPポケモン 61

進化や技習得、HPバーや経験値バーの演出ができているのに、なぜ状態異常の演出はされていないの?   そう感じている方が少なからずいるはずです。 現段階では、状態異常になっても次の画面に移管しなければ表示されません。これは、PHP側で内部処理は行われているが、メッセージに合わせた動的な変更がされていな...

SNS拡散力アップ!PHPでOG画像付きリッチURLを自作する方法【Curl → Opengraph】
プログラミング
PHP,WordPress
SNS拡散力アップ!PHPでOG画像付きリッチURLを自作する方法【Curl → Opengraph】

  ブログやHPにサイトのURLをただ貼り付けても、どんなページなのか一目でわからないのでなかなか思うようにアクセスに繋がりません。 ですが、毎回のようにURL先の画像を準備したり、説明文を設定するのも大変ですし、ページタイトルや画像が差し替わってしまうことも考えられます。   今回はそういった手間...

Toastr(トースト)活用編 PHPポケモン 100
プログラミング
JavaScript,PHP,PHPポケモン,ポケモン
Toastr(トースト)活用編 PHPポケモン 100

記念すべき第100回目です!   色々考えましたが、100回目だからと言って特別な内容ではなく、いつもの流れの延長での開発進行となります。ご了承ください。 今回は、何人かのプレイユーザーの声も参考にしながら、ユーザビリティをあげるための機能追加を進めていきます。   Toastr(トースト)と...

PHPポケモン「行動順判定+敵ポケモン攻撃編」25
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「行動順判定+敵ポケモン攻撃編」25

行動順の判定 ポケモンの行動順は以下の通りです。 技の優先度 すばやさの実数値(補正有り) 同速の場合は50%の乱数   この順番で比較を行い、先行後攻を決めます。ただし、これは両者ともに攻撃を選択した場合のみです。アイテムの使用や交代は技よりも優先されますし(※一部技を除く)、にげる...

プログラミングを優しく解説!学んで得する3つの理由
プログラミング
プログラミング教育
プログラミングを優しく解説!学んで得する3つの理由

  プログラミング教育が始まるけど、そもそもよくわかっていない   2020年からは小学校がプログラミング学習が必修化され、翌年には中学校でも導入予定です。 しかし、保護者からすると全くわからず困惑していたり、教える先生たち教師陣からしてもよくわかっていないケースは少なくありません。   今回...

カテゴリ

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 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力