プログラミング

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

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

 

注目の記事

【Adobe Animate CC】モーショントゥイーンを使ったアニメーション作成
動画編集
Adobe,Animate,Illustrator,Photoshop,アニメーション
【Adobe Animate CC】モーショントゥイーンを使ったアニメーション作成

    今回はキャラクターがうちわを扇いでいるアニメーションのAdobe Animateを使った作成方法をご紹介します。 完成イメージは以下の通りです。   Photoshopなどを使ってもgifアニメーションの作成はできますが、Adobe Animateのモーショントゥイーンを使えば、変化するポイントだけを設定す...

迷惑メールはなぜ届く?amazonや楽天を騙る悪質メールへの対処法とは
ネットワーク
amazon,スパム,メール,楽天
迷惑メールはなぜ届く?amazonや楽天を騙る悪質メールへの対処法とは

「いきなり迷惑メールが届くようになった」 「Amazonや楽天を装ったメールはどうやって見分ければいいの?」   知らない人からいきなり連絡が届いたり、登録もしていないようなサービスからメールが届けば、それは詐欺メールかも知れません。 スマホやパソコンが一般的に普及して、ネットでの買い物やサービスを利用...

npm run watch-poll中にPCがフリーズした時の解決法
プログラミング
CSS,JavaScript,Laravel,Linux
npm run watch-poll中にPCがフリーズした時の解決法

  Laravelで開発中にPCが頻繁にフリーズするという問題にぶち辺り、原因がnpm run watch-pollだということが解ったので、その解決方法をまとめておきます。 複雑な原因でもなく大きな問題にもならなかったのですが、これが原因でデータ破損となれば困るので、同じような問題に直面した開発者向けです。    ...

ポケモン図鑑編 PHPポケモン 88
プログラミング
PHP,PHPポケモン,ポケモン
ポケモン図鑑編 PHPポケモン 88

ポケモン図鑑とは ポケモンに出会ったり、仲間にしたりすると、ポケモン図鑑のデータがどんどんと埋まっていきます。PHPポケモンでもこの仕組みを実現させるために、ポケモン図鑑を作成していきましょう。   クラスによる管理 ポケモン図鑑はクラス管理をしていきます。プレイヤー1人に対して1つのポケモン図...

「数字を上げる」必勝マニュアル 〜再生回数・フォロワー・PV数〜
マーケティング
YouTuber,ブロガー,必勝マニュアル,自己啓発
「数字を上げる」必勝マニュアル 〜再生回数・フォロワー・PV数〜

  「継続は力なり」   色んな場面で言われます。何事も地道な努力が大事です。 しかし、地道な努力というのは成果が見えづらく、反応が得にくいことも確かです。   運良く勢いに乗れて、常に努力のし易い環境にいることで伸びていく人の確かにいます。 しかし、ほとんどの人がそうはいきません。...

ピカチュウから学ぶオブジェクト指向 〜レベルシステム導入編〜 3
プログラミング
PHP,PHPポケモン,オブジェクト指向,ポケモン
ピカチュウから学ぶオブジェクト指向 〜レベルシステム導入編〜 3

  大人気?シリーズ「ピカチュウから学ぶオブジェクト指向」、今回はレベルシステムの導入編です。   第1回(基礎編)、第2回(クラス継承編)で作成したPokemonとPikachuのクラスを使用するので、最初から学習したい人はぜひご参考ください。      レベルシステムの導入   ポケモンのゲ...

PHPポケモン(α)攻略wiki「最初のポケモン」
雑記
PHPポケモン,wiki,ポケモン
PHPポケモン(α)攻略wiki「最初のポケモン」

リリースから一ヶ月、遂にPHPポケモン(α)の攻略Wiki(仮)が公開です!   というのは大嘘で、内部の大幅変更の関係上、今回はPHPポケモンをプレイするにあたってのオススメなどをまとめて見た次第です。 ちなみに、バトルシステム自体は本家に沿って作成しているので、種族値や技性能に精通している人はブラウザ...

20代の独立が成功のカギ【学生→フリーランス・起業は危険です】
フリーランス
フリーランス,独立,起業
20代の独立が成功のカギ【学生→フリーランス・起業は危険です】

  終身雇用のほとんどが崩壊している今、学生の頃から独立や起業を考えている人は多いですが、安易な決断は危険です。 独立するには早すぎるのも良いとは言えず、また遅すぎることもそれなりにリスクです。 SNSやメディアでも学生起業などが騒がれていますが、それに影響されてしまうのはかなり危険なことです...

カテゴリ

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