プログラミング

経験値取得アニメーション編(動画有り) PHPポケモン 47

PHP PHPポケモン ポケモン
経験値取得アニメーション編(動画有り) PHPポケモン 47

経験値取得アニメーションの実装

最近は技の実装が続いていたので、気分転換にフロント側の演出づくりをしていきます。その中でも今回実装するのは「経験値取得アニメーション」です。

経験値バーはポケモンの第2世代から追加実装された演出です。初代では次のレベルにアップするまでの数値を、わざわざポケモンのステータスから見る必要がありましたが、経験値バーの登場によって感覚的に「あとどれぐらい必要なのか」がわかるようになりました。

 

アニメーションを作成するのはフロントの処理ですが、それに必要なパラメータ等はバックエンド(PHP側)でメッセージに対して用意しなければなりません。なので、まずはバックエンド側に必要な処理から見ていきましょう。

 

バック(PHP)処理

HPのアニメーションを作成する際に、処理開始時のHPをコントローラーのプロパティに格納しました。ですが、今回は経験値についても取得前の最終状態を格納しておく必要があります。なので、格納する値を「ポケモンのオブジェクト」そのものに変更します。

 

バトルコントローラー(/App/Controller/Battle/BattleController.php
// バトル用コントローラー
class BattleController extends Controller
{
 
    use BattleControllerTrait;
 
--省略
 
    /**
    * 前ターンのポケモンの状態
    * @var array
    */
    protected $before = [
        'friend' => null,
        'enemy' => null,
    ];

 

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

 

オブジェクトはそのまま他の変数に渡しても参照渡しとなってしまい、ダメージ処理などをすればすべてのオブジェクトの値が変更されてしまいます。そうならないために、開始時の状態はcloneを使って値渡しをしましょう。 

オブジェクトのクローン作成(PHP.net

 

あとは、コントローラーのbeforeプロパティに格納された情報をHPや経験値、レベルなどの出力で使用します。こうすることで、画面移管時には更新前の状態を表示することが可能です。

 

アニメーション用レスポンスの返却

それでは実際に返却する値について見ていきましょう。

まずは、経験値取得処理部分でメッセージIDと、それに合わせたレスポンスを生成します。

 

ポケモンクラスへのSet処理トレイト
/**
* 経験値をセット(取得)する
* @param integer $exp
* @return object
*/
public function setExp($exp)
{
    if(!is_numeric($exp)){
        // 入力値のチェック
        $this->setMessage('数値を入力してください', 'error');
        return $this;
    }
    // 次のレベルに必要な経験値を取得
    $next_exp = $this->getReqLevelUpExp();
    // 経験値を加算
    $this->exp += (int)$exp;
    // メッセージIDを生成
    $msg_id = $this->issueMsgId();
    $this->setMessage($this->getNickname().'は経験値を'.$exp.'手に入れた!', $msg_id);
    // レベル上限の確認
    if($this->level >= 100){
        return $this;
    }
    if($next_exp <= $exp){
        $levelup = true;
        /**
        * 次のレベルに必要な経験値を超えている場合
        */
        // レベルアップ処理
        $this->actionLevelUp($msg_id);
        // レベルアップ処理ループ
        while($this->getReqLevelUpExp() < 0){
            // メッセージIDを再生成
            $msg_id = $this->issueMsgId();
            $this->setAutoMessage($msg_id);
            // レベルアップ処理
            $this->actionLevelUp($msg_id);
        }
        // 全レベルアップ処理終了後、メッセージIDを再生成
        $msg_id = $this->issueMsgId();
        $this->setEmptyMessage($msg_id);
    }
    // 経験値バーの最終アニメーション用レスポンス
    $this->setResponse([
        'param' => $this->getPerCompNexExp(),
        'action' => 'expbar',
    ], $msg_id);
 
    // 進化判定
    if(isset($levelup) && isset($this->evolve_level) && ($this->evolve_level <= $this->level)){
        return $this->evolve();
    }else{
        return $this;
    }
}

 

経験値取得時にメッセージIDを生成してセットします。最後(進化判定前)で次のレベルに必要な経験値量をパラメーターとしてレスポンスを返却しています。これで、経験値を貰えばexpbarのアクション分岐で経験値バーを変動させることができます。

 

レベルアップ

経験値処理で1点考慮しなければならないのが、レベルアップ処理です。こちらは経験値取得後に行われ、レベルがアップすることで最大HPや残HPも変動させる必要があります

それでは、上記処理のレベルアップ部分を確認してみましょう。

if($next_exp <= $exp){
    $levelup = true;
    /**
    * 次のレベルに必要な経験値を超えている場合
    */
    // レベルアップ処理
    $this->actionLevelUp($msg_id);
    // レベルアップ処理ループ
    while($this->getReqLevelUpExp() < 0){
        // メッセージIDを再生成
        $msg_id = $this->issueMsgId();
        $this->setAutoMessage($msg_id);
        // レベルアップ処理
        $this->actionLevelUp($msg_id);
    }
    // 全レベルアップ処理終了後、メッセージIDを再生成
    $msg_id = $this->issueMsgId();
    $this->setEmptyMessage($msg_id);
}

 

レベルアップする際には、経験値バーは100%になります。なので、paramを100として経験値バーのアニメーションを実行させます。場合によってはレベルが連続でアップすることがあるので、ループ時も同様に処理をします。この処理はレベルアップ時に一律で発生するため、actionLevelUp内で行えるよう、引数にメッセージIDを追加して行いましょう。

 ここでのポイントは、レベルアップ時に使用するメッセージIDを$msg_idに上書きするという点です。そうしておけば、レベルアップ終了後にその値を最終の経験値バーアニメーションで使用することができるからです。

 

では、レベルアップ処理のメソッドを見てみましょう。

 

ポケモンクラス(/Classes/Pokemon.php
/**
* レベルアップ処理
*
* @param string|null $msg_id
* @return void
*/
protected function actionLevelUp($msg_id=null)
{
    // メッセージIDの指定があれば、経験値バーのアニメーション用レスポンスをセット
    if(!is_null($msg_id)){
        $this->setResponse([
            'param' => 100, # %
            'action' => 'expbar',
        ], $msg_id);
    }
    // 現在のHPを取得
    $before_hp = $this->getStats('HP');
    // レベルアップ
    $this->level++;
    // HPの上昇値分だけ残りHPを加算(ひんし状態を除く)
    if(!isset($this->sa['SaFainting'])){
        $this->calRemainingHp('add', $this->getStats('HP') - $before_hp);
    }
    // メッセージ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->checkMove();
}

 

引数でメッセージIDをチェック後、もし引数が与えられていればパラメーターに100(%)のレスポンスを返却します。

レベルアップ処理では、最大HP残りHPレベル3箇所を更新する必要があるため、json_encode関数を使用してjson形式でパラメーターをセットします。

 

HPバーの長さはJavaScript側でも算出が可能ですが、PHPでメソッドが用意されているため合わせて返却しています。

ゲームではレベルアップメッセージ後にステータスが表示されますが、今回は一旦無視します。

 

フロント(JavaScript)処理

必要データが揃ったので、アニメーションを実装するためにフロント側の処理を作成していきましょう。まずはレベルや経験値バーの変更がしやすいように、それぞれにIDを割り振っていきましょう。

 

バトル画面(/Resources/Pages/Battle.php
<?php # 自ポケモン詳細 ?>
<div class="col-6 text-center">
    <img src="/Assets/img/pokemon/dots/back/<?=get_class($before_pokemon)?>.gif" alt="<?=$before_pokemon->getName()?>">
</div>
<div class="col-6">
    <p>
        <span class="mr-2"><?=$pokemon->getNickName()?></span>
        <span class="mr-2">Lv:<span id="level"><?=$before_pokemon->getLevel()?></span></span>
        <span class="mr-2"><?=$before_pokemon->getSaName(false)?></span>
    </p>
    <div class="form-group">
        <div class="progress">
            <?php if($before_pokemon->getRemainingHp('per') <= 50) $hp_bar_class = 'bg-warning'; ?>
            <?php if($before_pokemon->getRemainingHp('per') <= 20) $hp_bar_class = 'bg-danger'; ?>
            <div id="hpbar-friend"
            class="progress-bar <?=$hp_bar_class ?? 'bg-success'?>"
            role="progressbar"
            style="width:<?=$before_pokemon->getRemainingHp('per')?>%;"
            aria-valuenow="<?=$before_pokemon->getRemainingHp()?>"
            aria-valuemin="0"
            aria-valuemax="<?=$before_pokemon->getStats('HP')?>"></div>
        </div>
        <p class="text-right px-3">
            <span id="remaining-hp-count-friend"><?=$before_pokemon->getRemainingHp()?></span>
            / <span id="max-hp-count-friend"><?=$before_pokemon->getStats('HP')?></span>
        </p>
        <?php # 経験値バー ?>
        <div class="progress" style="height:4px;">
            <div id="expbar"
            class="progress-bar bg-primary"
            role="progressbar"
            style="width:<?=$before_pokemon->getPerCompNexExp()?>%;"
            aria-valuenow="<?=$before_pokemon->getPerCompNexExp()?>"
            aria-valuemin="0"
            aria-valuemax="100"></div>
        </div>
    </div>
</div>

  

経験値バーの変動

最初は経験値バーのアニメーションから作成します。前回HPバーを作成した際はhpbarというアクション名で分岐を作成したので、今回は新しくexpbarという名称で分岐を作ります。

 

メッセージ用js/Public/Assets/js/Battle/message.js
/**
* メッセージアクション
* @param now element
* @return Promise
**/
var actionMsgBox = function(now){
    return new Promise( async (resolve, reject) => {
        // 最終メッセージかどうか確認
        if((now.length === 0) || now.hasClass('last-message')){
            await doLastMsg();
        }else{
            // メッセージにアクションがセットされていれば実行
            switch (now.data('action')){
                // ==============================================
                // HPバーの処理 =================================
                //
                case 'hpbar':
                await doAnimateHpBar(
                    now.data('target'),
                    now.data('param')
                );
                break;
                // ==============================================
                // 経験値バーの処理 =============================
                //
                case 'expbar':
                await doAnimateExpBar(
                    now.data('param')
                );
                break;
 
--省略
 
// ==============================================
// 経験値バーの処理 =============================
//
/**
* 経験値バーのアニメーションを実行
* @param mixed param
* @return Promise
**/
var doAnimateExpBar = function(param){
    return new Promise ((resolve, reject) => {
        var expbar = $("#expbar");
        // EXPの現在の値を変更
        expbar.attr('aria-valuenow', param);
        // 経験値バーの長さを100%にする
        expbar.animate({
            width: param + "%"
        }, {
            duration: 500,
            easing: 'easeOutQuad',
            complete: function(){
                // 処理完了(css変更のズレがあるため0.5秒後にresolveを返却)
                setTimeout(function() {
                    resolve();
                }, 500);
            }
        });
    });
}

 

アクション自体はHPバーとほとんど変わらず単純です。若干のズレを合わせるために長さの変更にはanimateを使用してcssを変更しています。

 

レベルアップ

次にレベルアップ処理についてです。こちらも分岐を追加し、それ用の関数を作成しましょう。

 

メッセージ用js/Public/Assets/js/Battle/message.js
/**
* メッセージアクション
* @param now element
* @return Promise
**/
var actionMsgBox = function(now){
    return new Promise( async (resolve, reject) => {
        // 最終メッセージかどうか確認
        if((now.length === 0) || now.hasClass('last-message')){
            await doLastMsg();
        }else{
            // メッセージにアクションがセットされていれば実行
            switch (now.data('action')){
                // ==============================================
                // HPバーの処理 =================================
                //
                case 'hpbar':
                await doAnimateHpBar(
                    now.data('target'),
                    now.data('param')
                );
                break;
                // ==============================================
                // 経験値バーの処理 =============================
                //
                case 'expbar':
                await doAnimateExpBar(
                    now.data('param')
                );
                break;
                // ==============================================
                // レベルアップ処理 =============================
                //
                case 'levelup':
                await doAnimateLevelUp(
                    now.data('param')
                );
                break;
                // ==============================================
            }
            // 次のメッセージへ
            await nextMsg(now);
        }
        resolve();
    });
}
 
--省略
 
// ==============================================
// レベルアップ処理 =============================
//
/**
* 経験値バーのアニメーションを実行
* @param json
* @return Promise
**/
var doAnimateLevelUp = function(param){
    return new Promise ((resolve, reject) => {
        var expbar = $("#expbar");
        expbar.hide();
        expbar.css('width', 0);
        // レベルアップ
        $("#level").text(param.level);
        // HPバーの変更
        var hpbar = $("#hpbar-friend");
        hpbar.attr('aria-valuenow', param.remaining_hp);
        hpbar.attr('aria-valuemax', param.max_hp);
        hpbar.css('width', param.remaining_hp_per + '%');
        // 経験値バーをリセット
        expbar.animate({
            width: 0
        }, {
            duration: 1,
            easing: 'easeOutQuad',
            complete: function(){
                // 処理完了(css変更のズレがあるため0.5秒後にresolveを返却)
                setTimeout(function() {
                    expbar.show();
                    resolve();
                }, 500);
            }
        });
    });
}

 

レベルアップ処理の際に経験値バーを0に戻す必要がありますが、その際にCSSの変更で0%にすると、減少モーションが発生してしまいます。そうならないために、一度hideで非表示にしてからanimateを使ってwidthを0に変更。完了後にshowで表示状態に戻してresolveを返却しています。

 

それでは実際のアニメーションを見てみましょう。

 

 

まだテンポの違和感が残っていますがアニメーション自体は問題なく実装できました。

 

まとめ

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

今回のPHPポケモンでは「経験値バーのアニメーション」と「レベルアップ処理」の実装方法をご紹介しました。

ゲームづくりやWEBプログラミングに興味がある人は、ぜひ参考にしてみてくださいね。

 

注目の記事

構成見直し編(クラス名) PHPポケモン49
プログラミング
PHP,PHPポケモン,ポケモン
構成見直し編(クラス名) PHPポケモン49

構成の見直し 今回は全体構成の見直しをします。ディレクトリについては変更ありませんが、ファイル名とクラス名について大幅な修正をかけていきます。   クラス名の重複回避 まず、クラス名の重複についてです。状態異常・状態変化の子クラスでは重複回避のために接頭語を着けて管理していましたが、他にも重複...

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

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

PHPポケモン「オートロード編(修正版)」17 おまけ:日本語化
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「オートロード編(修正版)」17 おまけ:日本語化

  前回実装したオートローダーの使い方が盛大に間違っていたので、今回その間違いの説明をしながら、正しい実装方法をご紹介します。 申し訳ありません。(誠意)    オートロードについて(再)  必要なタイミングで必要なファイルをrequireまたはincludeするあれです。   前回spl_autoload_reg...

ブラウザで遊べる「PHPポケモン」
プログラミング
PHP,PHPポケモン,ポケモン
ブラウザで遊べる「PHPポケモン」

PHPポケモン 約1ヶ月半をかけて作り込んできたPHPポケモンですが、ある程度遊べるぐらいのレベルになったので、みなさまにも体験・楽しんでいただけるよう本日(2020年10月12日)より一般公開します。   PHPポケモンへのリンクは本記事の最後に用意しておりますので、プレイする前に注意事項等に目を通し...

【関数とは】初心者が最短でPHPを使えるようになるための実践的な学び方
プログラミング
function,PHP
【関数とは】初心者が最短でPHPを使えるようになるための実践的な学び方

  PHPを実践で使えるレベルまで押し上げるための初心者向け講座、第3回目は「関数」です。   第1回の変数、第2回の配列、そして今回の関数の3つをマスターできていれば、いざ業務に望んでも、ある程度通用すると思っておいて良いでしょう。  ※オブジェクト指向やクラスの理解、データベースの知識など、...

Laravelで生成したCookie情報をjQueryで取得する方法【JavaScript】
プログラミング
ajax,api,JavaScript,jQuery,Laravel,PHP
Laravelで生成したCookie情報をjQueryで取得する方法【JavaScript】

  今回はLaravel開発備忘録です。 ajaxでapi認証してviewに記述したhtmlデータを取得するために、cookieを使ったapi_tokenの受け渡し手順をまとめてみました。   Laravelを使った開発をしている人は、ぜひ参考にしてくださいね。     Laravel側の処理   まずはcookieにデータをセットする必要があり...

プログラミングとは?現役システムエンジニアが教える裏事情
プログラミング
システムエンジニア,プログラマー
プログラミングとは?現役システムエンジニアが教える裏事情

  プログラミングってよくわからない? 実際に何をやっているの?   最近注目されているSE(システムエンジニア)やPG(プログラマー)という職業ですが、「そもそもプログラミングとは?」といった疑問を抱えている方も多いですね。 今回は、そういった方へ向けて「プログラミングの基礎知識と裏事情」...

PHPポケモン「アクション制御編」27
プログラミング
JavaScript,jQuery,PHP,PHPポケモン,ポケモン
PHPポケモン「アクション制御編」27

  今回のPHPポケモンでは主に画面の作り込みをしていきます。 とは言っても、ガッチリCSSを書いてよりゲームらしい見た目にするわけではなく、あくまで「ゲームシステムを再現するため」だけに整えていくのが目的です。   ということで、今回はPHPよりもBootstrapさんとjQueryさんに活躍してもらいます。   ...

カテゴリ

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