プログラミング

経験値取得アニメーション編(動画有り) 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ポケモン 75
プログラミング
PHP,PHPポケモン,ポケモン
フレンドリィショップ編 開店準備 PHPポケモン 75

アイテム(どうぐ) PHPポケモンもバトル機能が一通り揃ってきたので、新機能として「アイテム」の実装に取り掛かります。 アイテムにも色々ありますが、技やポケモンのクラス同様に、初代で登場したアイテムから順番に取り揃えていきましょう。   キズぐすりの実装 ポケモンのどうぐ、一番手は「キズぐすり」...

お金を稼ぐためは理解しておきたい基本的な3要素【お客さんを増やす前に知っておかなければならないことって?】
マーケティング
お金を稼ぐためは理解しておきたい基本的な3要素【お客さんを増やす前に知っておかなければならないことって?】

  お客さんを増やすためにはどうすればいいんだろう?   ビジネスをやっている人で儲かっている一部を除けば、誰もが抱いている共通の悩みですね。 ですが、ただお客さんを増やすために安易な広告を打ったりするのは、実は危険なことなんです。   今回は「お金を稼ぐためには理解しておきた...

ナンパしてたら独立できた「人間力の鍛え方」
フリーランス
コミュニケーション能力,ナンパ
ナンパしてたら独立できた「人間力の鍛え方」

  経験談から、人間力を鍛える方法をご紹介します。 今回は「ナンパ」がテーマです。なので、少し男性目線の内容になります。 女性の方は、「男性はこうやって考えている人もいるんだ」といった参考にしてください。   ナンパなんて、と思う人もいるでしょう。 ハラスメント規制も強くなる現代では、安易な...

人に相談しても期待はするな【行動もどきって?成功する人と失敗する人の違いとは】
雑記
自己啓発
人に相談しても期待はするな【行動もどきって?成功する人と失敗する人の違いとは】

  「とにかく行動しろ」 「いろんな人に会え」 「どんどん外注しろ」   どれも覚えておきたい教訓ではありますが、その本質が見抜けなければ逆効果になります。 行動であっても、それが行動もどきになっている人は多く、人に会って人生が変わるということも受け身であれば全く意味がありません。外注に...

HTMLの基本設計「よくわかるSEO対策」構造化(マークアップ)編
SEO対策
HTML,SEO,マークアップ
HTMLの基本設計「よくわかるSEO対策」構造化(マークアップ)編

  HTML5がリリースされて随分経ちました。 それにより多くのタグが増え、それにより今までデザインを目的と使用されていたものが「構造化」という本来の役割を持たされるようになりました。    構造化は、目に見えにくい部分です   それぞれの役割を理解していなければ、せっかくきれいなサ...

PHPポケモン「わざ編〜チャージ技の実装〜」34
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「わざ編〜チャージ技の実装〜」34

チャージ技とは ポケモンの技は数多く存在していて、その中でも特別な処理が必要なものがいくつかあります。その1つが「チャージ技」です。 ※チャージ技とはポケモン上で用いられている用語ではありません   現在実装している初代御三家+ピカチュウの初代レベルアップ技の中では以下の2つがあります。 ロ...

EC-CUBE4内にWordPressを設置(共存)する方法
SEO対策,プログラミング
EC-CUBE4,PHP,Symfony,Twig,WordPress
EC-CUBE4内にWordPressを設置(共存)する方法

今回使用したバージョン EC-CUBE4.0.5 WordPress5.6 ※EC-CUBE4、WordPressのカスタマイズは自己責任でお願いします。また、現在稼働中のサイトで試す際には、必ずバックアップを取ってから行なうようにしてください。   EC-CUBE4とは ネットショップを作るとなれば、様々なサービスが出回っ...

命中率補正と交代技編 PHPポケモン 45
プログラミング
PHP,PHPポケモン,ポケモン
命中率補正と交代技編 PHPポケモン 45

命中率補正とは ダメージ計算や行動順判定には補正(ランク)を計算した結果を反映していましたが、命中率補正についてはまだ未実装だったため、今回はこちらを作成していきたいと思います。 まずはwikiを参考に、計算方法を見ていきましょう。 命中(ポケモンwiki) https:// wiki.ポケモン.com/wiki/命中 第...

カテゴリ

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