プログラミング

経験値取得アニメーション編(動画有り) 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プログラミングに興味がある人は、ぜひ参考にしてみてくださいね。

 

注目の記事

SNS拡散力アップ!PHPでOG画像付きリッチURLを自作する方法【Curl → Opengraph】
プログラミング
PHP,WordPress
SNS拡散力アップ!PHPでOG画像付きリッチURLを自作する方法【Curl → Opengraph】

  ブログやHPにサイトのURLをただ貼り付けても、どんなページなのか一目でわからないのでなかなか思うようにアクセスに繋がりません。 ですが、毎回のようにURL先の画像を準備したり、説明文を設定するのも大変ですし、ページタイトルや画像が差し替わってしまうことも考えられます。   今回はそういった手間...

ブログで生活するための7つの道のり 〜収益化と拡散の方法教えます〜
ライティング
Facebook,Google AdSense,Twitter,ノマドワーク
ブログで生活するための7つの道のり 〜収益化と拡散の方法教えます〜

  ブログで生活したい   毎日数時間、ブログを書くだけで生きていける、そんな夢のような生活を実現させたいと思い描く人は多いですが、簡単なことでは有りません。 ですが、やらなければいけないことがわかっていれば、収益化するのは簡単です。   今回は「ブログで生活するための7つの道のり」をテ...

英語できたらブログで稼げる 【ネオコピペ】
ライティング
ブログ,翻訳,英語
英語できたらブログで稼げる 【ネオコピペ】

  2010年に楽天が社内公用語の英語化を宣言したのは、多くの人が耳にしたことがあるでしょう。 私からすると、「英語ができることは強み」だという考えから、「これからは英語ができないと行きていけないのでは?」と考えを変えさせられるような、そんな出来事でした。   多言語できるデメリットを見つけるのは難...

PHPポケモン「バトルシステム編〜状態異常1〜」30
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「バトルシステム編〜状態異常1〜」30

状態異常チェック 今回は少し先延ばししていた状態異常判定を一部作成していきましょう。 状態異常では「行動前」と「行動後」に判定するものに分けることができます。 行動前 まひ、ねむり、こおり  行動後 どく、もうどく、やけど   まずは簡単な行動前から実装していきます。行動前に判...

AIが人類にもたらす驚異!深層学習が与える影響とは
ネットワーク
AI,ディープフェイク,深層学習
AIが人類にもたらす驚異!深層学習が与える影響とは

  海外の記事でAIについて記述した興味深いものが掲載されました。   今回は「AIが人類にもたらす驚異!深層学習が与える影響とは」について、上記サイトを参考にまとめましたのでご紹介します。 ※直訳ではありません、あくまで記事の内容を参考にして自らの考えを記述したものです     AIの驚異と...

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

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

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

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

お金を生む仕組みを理解しよう【知っておきたい3つのポイント】
マーケティング
お金を生む仕組みを理解しよう【知っておきたい3つのポイント】

  どんなビジネスが儲かるのか・・・   一度はこういった悩みを持ったことがあるのではないでしょうか。 それを知るためには、どういった要素がお金を生むために作用しているのかを理解しておく必要があります。 今回は「お金を生む仕組み」について、知っておいてためになる基礎的な部分をわかりやすく...

カテゴリ

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