プログラミング

レベルアップ時のステータス表示編 PHPポケモン 48

PHP PHPポケモン ポケモン
レベルアップ時のステータス表示編 PHPポケモン 48

ステータスの表示

前回経験値バーのアニメーションとレベルアップ時の動的な変更を実装しましたが、レベルアップ時に表示されるステータスの実装は先送りにしていました。なので今回はそのステータス表示を作成しましょう。

 

ステータスはメッセージとして返却せずに、小モーダルを起動させるという方法で対応します。

 

モーダルに合わせたレスポンスの返却

今まではパラメーターを返却して、それに合わせてアニメーションを起動していましたが、今回はモーダルを起動してそこへデータを表示するため、モーダル起動に合わせたパラメータを返却することで対応します。

bootstrap4のモーダルを起動するには、data要素としてtargetとtoggleを指定する必要があります。toggleにはモーダル、targetには対象となるモーダルのIDまたはクラスで指定するのが一般的です。今回はIDで指定できるように、レスポンスを生成しましょう。

 

ポケモンクラス(/Classes/Pokemon.php
/**
* レベルアップ処理
*
* @param string|null $msg_id
* @return void
*/
protected function actionLevelUp($msg_id=null)
{
 
 --省略
 
    // メッセージIDを生成
    $msg_id1 = $this->issueMsgId();
    $msg_id2 = $this->issueMsgId();
    // レベルアップアニメーション用レスポンス
    $this->setResponse([
        'param' => json_encode([
            'level' => $this->level,
            'remaining_hp' => $this->getRemainingHp(),
            'remaining_hp_per' => $this->getRemainingHp('per'),
            'max_hp' => $this->getStats('HP'),
        ]),
        'action' => 'levelup',
    ], $msg_id1);
    $this->setAutoMessage($msg_id1);
    // レベルアップメッセージ
    $this->setMessage($this->getNickName().'のレベルは'.$this->level.'になった!', $msg_id2);
    // レスポンスデータをセット
    $this->setResponse([
        'toggle' => 'modal',
        'target' => '#'.$msg_id2.'-modal',
    ], $msg_id2);
    // 現在のレベルで習得できる技があるか確認
    $this->checkMove();
}

 

レベルアップメソッドの中でレスポンスを生成します。toggleにはmodaltargetにはメッセージID-modalを付与したIDのモーダルを指定するように格納しています。

 

targetは別のアクションでも使用していましたが、toggleについては未実装だったので、こちらもあれば付与するようにタグへ追記しておきましょう。

 

バトル画面(/Resources/Pages/Battle.php
<div class="message-box action-message-box border p-3 mb-3">
    <?php # メッセージエリア ?>
    <?php foreach($controller->getMessages() as $key => list($msg, $status, $auto)): ?>
        <?php $class = $key === $controller->getMessageFirstKey() ? 'active' : ''; ?>
        <?php $last_class = $key === $controller->getMessageLastKey() ? 'last-message' : ''; ?>
        <p class="result-message <?=$class?> <?=$last_class?> <?=$status ?? ''?>"
            data-action='<?=$responses[$status]['action'] ?? ''?>'
            data-target='<?=$responses[$status]['target'] ?? ''?>'
            data-param='<?=$responses[$status]['param'] ?? ''?>'
            data-toggle='<?=$responses[$status]['toggle'] ?? ''?>'
            data-auto='<?=$auto ?? ''?>'>
            <?=$msg?>
        </p>
    <?php endforeach; ?>
    <span class="message-scroll-icon small">【CLICK】</span>
</div>

 

data-toggleの追加以外にも修正ポイントがあるので簡単にまとめておきます。

  1. 今まではメッセージアクションにmessage-boxを使用していましたが、action-message-boxで起こせるように追記しました。
  2. message-scroll-iconでマウスイベントが発生しないように、cssで「pointer-events: none;」を指定しました。
  3. result-messageにモーダル起動アクションが含まれているため、この要素をメッセージボックスいっぱいに広げました。
    以下CSSです。
.result-message{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 1rem;
    margin-bottom: 0;
}

 

モーダル生成値の作成

それでは次にモーダルの生成に必要なパラメーターを用意しましょう。ループ内で生成するのであれば、同じレスポンスに返却して生成することも可能ですが、どこにモーダルが潜んでいるかがわからなくなれば保守性も下がってしまいます。そうならないためにも、モーダルは統一で最下層に生成できるよう、モーダル用のレスポンスを作成します。

 

レスポンストレイト(/App/Traits/Response.php
<?php
trait ResponseTrait
{
 
--省略
 
    /**
    * モーダルの格納用
    * @var array
    */
    private $modals = [];
 
--省略
 
    /**
    * モーダルテータの取得
    *
    * @return array
    */
    public function getModals()
    {
        return $this->modals;
    }
 
    /**
    * モーダル用テータの格納
    *
    * @param array $param
    * @param boolean $merge
    * @return array
    */
    public function setModal(array $param, bool $merge=false)
    {
        if(empty($param)){
            // 空の場合はスキップ
            return;
        }
        if($merge){
            // 結合(引き継ぎ)
            $this->modals = array_merge($this->modals, $param);
        }else{
            $this->modals[] = $param;
        }
    }
 
    /**
    * モーダル情報の初期化
    *
    * @return void
    */
    public function resetModal()
    {
        $this->modals = [];
    }
 
    /**
    * 全リセット
    *
    * @return void
    */
    public function resetAll()
    {
        $this->messages = [];
        $this->responses = [];
        $this->modals = [];
    }
 
}

 

では、作成したレスポンスメソッドに合わせて、モーダルを作成するために必要なデータを格納していきましょう。

 

ポケモンクラス(/Classes/Pokemon.php
/**
* レベルアップ処理
*
* @param string|null $msg_id
* @return void
*/
protected function actionLevelUp($msg_id=null)
{
 
--省略
 
    // レスポンスデータをセット
    $this->setResponse([
        'toggle' => 'modal',
        'target' => '#'.$msg_id2.'-modal',
    ], $msg_id2);
    // モーダル用のレスポンスをセット
    $this->setModal([
        'id' => $msg_id2,
        'modal' => 'levelup',
        'stats' => $this->getStats(),
    ]);
    // 現在のレベルで習得できる技があるか確認
    $this->checkMove();
}

 

モーダルで使用するメッセージID、そのモーダルで使用するテンプレートファイル名(modal)、モーダル内で使うデータ(stats)の3つを格納しました。

 

レスポンスの上書き対策

今までのレスポンスを使わずに、新しくモーダル用のレスポンスを用意した理由の1つが、データ重複による上書きを回避するためです。

例えば、現在のレスポンスに「modals」というキーでデータを格納していくとしましょう。第3引数で複数データ格納を判別させれば、同一レスポンス内での生成は簡単に制御出来ますが、別インスタンスからデータを引き継ぐ際の一括登録の対応が複雑になってしまいます。そうならないためにも、モーダル用のレスポンスを作成しました。

 

現段階ではレベルアップ時のステータス表示のみしかモーダルで返却していませんが、技の習得などでもモーダルを使って処理をする必要が出てくるため、それらも考慮すべくレスポンスを分ける方法と選択しました。

 ※オブジェクトを使って格納する方法もありますが、現在の作り込み状況からすべてを変更するのは困難と判断して断念しました。仕様設計が大切だということ改めて痛感させられた今日このごろです。

 

最後にモーダルを最下部で生成しましょう。

 

バトル画面(/Resources/Pages/Battle.php
<?php foreach($controller->getModals() as $modal): ?>
    <?php include($root_path.'/Resources/Partials/Battle/Modals/'.$modal['modal'].'.php'); ?>
<?php endforeach; ?>

 

レベルアップ時のモーダル(/Resources/Partials/Battle/Modals/levelup.php
<!-- Modal -->
<div class="modal fade" id="<?=$modal['id']?>-modal" tabindex="-1" role="dialog" aria-labelledby="<?=$modal['id']?>-modal-title" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="<?=$modal['id']?>-title">ステータス</h5>
                <button type="button" class="close action-message-box" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-sm">
                    <tbody>
                        <?php foreach($modal['stats'] as $key => $val): ?>
                            <tr>
                                <th scope="row" class="w-50"><?=transJp($key)?></th>
                                <td><?=$val?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm action-message-box" data-dismiss="modal">閉じる</button>
            </div>
        </div>
    </div>
</div>

  

メッセージアクションとの連携

最後にモーダルとメッセージアクションを連携させましょう。とは言っても、メッセージに対してモーダルを起動するために必要なパラメータを設定しているので、起動については連携ができています。連携させるのはモーダルを閉じる際のアクションです。

 

まず、先程作成したモーダルに設定したdata要素を見てみましょう。

data-keyboard="false"
data-backdrop="static"

 

この2つをセットしておくことで、画面外をクリックしてもモーダルを閉じることができません。さらに、閉じるボタンにメッセージアクションを発火させるためのクラス「action-message-box」を付与しています。

 

これで、ステータスモーダルを閉じるとメッセージアクションが起動し、レベルアップ後の経験値バーのアニメーションへと移行してくれます。

実際の動きを見てみましょう。

 

 

レベルアップ後にモーダル起動、閉じると次のメッセージアクションへ移行することができましたね。

これでレベルアップアニメーションの実装は完了です。

 

まとめ

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

今回のPHPポケモンでは「レベルアップ時のステータス表示」についてモーダルを使った方法をご紹介しました。

WEBプログラミングでゲームづくりをするには、その特徴を活かしながら作成していく必要があります。中には便利なものもありますが、場合によっては通常のゲーム開発では不要な機能まで実装しなければならない場合もあります。

現在プログラミング学習に取り組んでいる方、または興味を持っている方は、ぜひ参考にしてみてくださいね。

 

注目の記事

PHPポケモン「バトルシステム実装編〜補正値計算・乱数・急所〜」21
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「バトルシステム実装編〜補正値計算・乱数・急所〜」21

バトルシステムの実装  今回は「急所」と「乱数」と「タイプ一致」の判定と補正を実装していきます。 ちなみにですが、ポケモンwikiを熟読したところ、補正値の計算にも順番があり、計算後に小数点の切り捨てや五捨五超入をするなど、そこそこ複雑な計算順序がありましたが、今回はそこまで精密に再現せず、補正値(...

データ軽量化編 β版へ向けて  PHPポケモン 90
プログラミング
PHP,PHPポケモン,ポケモン
データ軽量化編 β版へ向けて PHPポケモン 90

β版の実装に向けて 大型アップデートにより、ある程度機能改善や実装箇所も増えてきましたが、それと同時に次の段階への移行が本格的に見えてきました。それがβ版です。   PHPポケモンは2020年12月現在α版となっており、完全な試作段階のWEBアプリケーションです。セーブ機能はなく、セッションの有効期...

デザインとブランディングが生み出す本当の価値とは
デザイン
UCC
デザインとブランディングが生み出す本当の価値とは

  商品やHPなど様々なところで価値を提供している「デザイン」ですが、それがもつ本当の意味や価値というものは意外と知られていません。 一般的にはイメージを作る・伝えるということで要求されるものですが、突き詰めた先には人間の深層心理に働きかけるブランディングという要素が潜んでいるのです。   今...

HPバーアニメーション 後編 フロント側の対応 PHPポケモン 44
プログラミング
PHP,PHPポケモン,ポケモン
HPバーアニメーション 後編 フロント側の対応 PHPポケモン 44

HPバーアニメーション それでは前回に続き、HPバーのアニメーションづくりをしていきましょう。前回、メッセージに合わせてレスポンスを返却するというサーバー側の仕組みを作成しました。なので、今回はそれをフロント側で受け取り、タイミングよくアニメーションで再現します。   フロント側(js)の処理 前回...

バトルステータス可視化編 PHPポケモン 70
プログラミング
PHP,PHPポケモン,ポケモン
バトルステータス可視化編 PHPポケモン 70

バトルステータスの可視化 現在のポケモンでは、バトルステータスの現状を可視化できるようになっており、どれぐらいのランク補正がかかっているか、フィールドがどういう状態になっているかがわかるようになっています。 初代、第2世代等では確認できなかった内容ではありますが、システムとしては便利な要素でも...

今からできる!ブログのアクセスを爆UPさせる3大SNS活用法
マーケティング
Facebook,Instagram,Twitter,ブロガー,ブログ
今からできる!ブログのアクセスを爆UPさせる3大SNS活用法

  ブログを収益化させたいけど、なかなかアクセス数が増えない 記事の質は高いのに、その良さをどうやって伝えれば良いかわからない   SEO対策をする上でも、収益化するためにも記事のクオリティは重要です。 しかし、せっかく良い記事を書いていても、そのブログや記事の存在を伝えることができなけれ...

ビジネス系次世代ブログ!?無料で企画書が読める「机上の空論」とは
ビジネスモデル
ビジネス系次世代ブログ!?無料で企画書が読める「机上の空論」とは

  この記事は、私の考えたビジネスモデルを紹介するコーナーです。考えるだけで辞めたものや、コストやリスクを考えて断念したもの、そこまでニーズがないと判断したものなど様々なので、読んだ方は自分なりの見解や根拠を踏まえて判断したり、各自ビジネスの参考資料としてご活用ください。   このブ...

フォームはもう古い?サイトのCVRを高くするチャットシステムとは
マーケティング
CVR,ECショップ
フォームはもう古い?サイトのCVRを高くするチャットシステムとは

  サイトのコンバージョン率を上げたい お問い合わせフォームから連絡が来ない   ちょっとWebサイトやネットショップを立ち上げても中々思うような結果につながらない時代になりました。数多くのサイトが出回っていることはもちろん、ユーザーの閲覧頻度が増えて目が肥えているというのも大きな理由の1...

カテゴリ

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