プログラミング

レベルアップ時のステータス表示編 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プログラミングでゲームづくりをするには、その特徴を活かしながら作成していく必要があります。中には便利なものもありますが、場合によっては通常のゲーム開発では不要な機能まで実装しなければならない場合もあります。

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

 

注目の記事

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

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

できるやつの「雑学力」
雑記
勉強法,雑学力
できるやつの「雑学力」

  テレビのコメンテーター、討論番組の出演者で活躍するほとんどの人は物知りだ。 あなたも「よくそんなことまで知っているな」と思ったことはあるだろう。 現代で起業して成功し続ける人のほとんどが、常に新しい情報を取り入れている。 そして得た情報に対して、歴史情報と照らし合わせ、自分なりの意見や解釈を...

ピカチュウから学ぶオブジェクト指向 〜進化編〜 7
プログラミング
PHP,PHPポケモン,オブジェクト指向,ポケモン
ピカチュウから学ぶオブジェクト指向 〜進化編〜 7

  ※前回(第6回)で意味不明な場所に空変数が入っており、ステータスが一部しか出力できないという問題がありました。修正しています。犯人は「$stats = [];」です。(GetTrait.php)   今回はポケモンのゲームでは欠かせない、楽しみの一つとなる「進化システム」を導入していきます。これからPHPポ...

状態異常演出編 PHPポケモン 62
プログラミング
PHP,PHPポケモン,ポケモン
状態異常演出編 PHPポケモン 62

状態異常の演出 今回は「状態異常」にかかった際の動的な変更、演出を実装していきます。 どく状態になれば、メッセージに合わせて「どく」を表記、まひ状態になれば、メッセージに合わせて「まひ」をセットするという単純なものです。   返り値の変更 それではまず、状態異常をセットしてメッセージを生成して...

バズる!ビジネスの見つけ方 〜何で起業するか悩んでいませんか?〜
マーケティング
ビジネス,起業
バズる!ビジネスの見つけ方 〜何で起業するか悩んでいませんか?〜

  独立や起業を志している9割以上の人が「何をビジネスにするか?」を悩んでいます しかし、それは負のサイクルです。 起業するためにビジネスを考えるという行為自体が”矛盾している”ということに気づかなければ、このサイクルからは抜け出すことができません。 その結果、行動できずに終わってしまう人は多...

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

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

放物線アニメーション編 PHPポケモン 81
プログラミング
PHP,PHPポケモン,ポケモン
放物線アニメーション編 PHPポケモン 81

ボールアニメーション 前回までに作成した捕獲判定処理を使って、ボールのアニメーションを作成します。 捕獲演出は以下の通りです。  味方側から相手に向かってボールを投げる 相手ポケモンの前でボールを開く 捕獲判定で算出した揺れ回数分ボールを揺らす   捕まえた際は、ボールの揺れをストップ...

PHPポケモン(α)第1回目の大型アプデ
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン(α)第1回目の大型アプデ

第1回目 大型アップデートについて 本日、PHPポケモンの大型アップデートをしました。 今回のアップデートには全体的なデザインチェンジが含まれているため、今まで遊んでくれていた人も、新鮮な気持ちで初められることができるはずです。   デザインについては、PHPを使った開発をしている人からすれば馴...

カテゴリ

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