【解決済み】MVでの図形描画をリアルタイムで行うプログラム

[orange_cat]

以下で書かれている図形描写の箇所を次のように書きました。
viewtopic.php?t=1013

コード: 全て選択

    Spriteset_Map.prototype.makeDrawBitmap = function() {
        var bitmap = new Bitmap(Graphics.boxWidth, Graphics.boxHeight);
        var context = bitmap._context;

        if($gameVariables.value(1)<=350){
        context.fillStyle = "rgb(255, 227, 59)";
        context.fillRect(20,400,50,-1*$gameVariables.value(1));
        }else{
            context.fillRect(20,400,50,-1*350);
        }
                return bitmap;
    };

$gameVariables.value(1)にはゲームデータで取得できる歩数が入っています。
一歩歩く度に、長方形を伸ばす描写したいのですが、リアルタイムで反映できません。

ただし、一度メニュー画面を開き、再度マップに戻ると歩いた分だけ長方形が反映されています。

リアルタイムで描画するにはどのようにコードを書けばよいか、ご教授願います。

[WTR]

リアルタイムに実行する処理は update に書くことになりますね。
createUpperLayer ではガワだけ作っておいて
update で中身を更新すればよいかと思います。
こんな感じでしょうか。

コード: 全て選択

(() => {
	'use strict';

    const _Spriteset_Base_createUpperLayer = Spriteset_Base.prototype.createUpperLayer;
    Spriteset_Base.prototype.createUpperLayer = function() {
        _Spriteset_Base_createUpperLayer.apply(this, arguments);
        if (this instanceof Spriteset_Map) {
            this.createDrawSprite();
        }
    };

    Spriteset_Map.prototype.createDrawSprite = function() {
		this._drawSprite = new Sprite(new Bitmap(Graphics.boxWidth, Graphics.boxHeight));
        this.addChild(this._drawSprite);
    };

	const _Spriteset_Map_update = Spriteset_Map.prototype.update;
	Spriteset_Map.prototype.update = function() {
		_Spriteset_Map_update.apply(this, arguments);
		this.updateDrawSprite();
	}

	Spriteset_Map.prototype.updateDrawSprite = function() {
		const bitmap = this._drawSprite.bitmap;
		const context = bitmap._context;
		bitmap.clear();
        if ($gameVariables.value(1) <= 350) {
	        context.fillStyle = "rgb(255, 227, 59)";
    	    context.fillRect(20,400,50,-1*$gameVariables.value(1));
        } else {
            context.fillRect(20,400,50,-1*350);
        }
	}
})();

[orange_cat]

さっそくご回答くださりありがとうございます！

万が一他のプラグインとも競合しないように、
ご教授いただいたプラグイン以外、全てプラグインをOFFにして試してみましたが、
当初と同じように、リアルタイムでの更新はされず、
一度メニュー画面を開き、再度マップに戻ると歩いた分だけ長方形が反映されている結果となりました。

せっかく教えていただいたのに申し訳ないです・・・。
恐れ入りますが、もし可能でしたら他のプログラムもご教授いただければ幸いです。

[WTR]

すみません
clear しないとダメだったみたいです。
↑の投稿を差し替えましたので再度試してみていただけますか。

[orange_cat]

試してみたところリアルタイムで反映する事ができました！
非常に助かりました、ありがとうございます！

もう一つ追加で質問があります。
フェードアウトをした際、描画した図形がフェードアウトされずに残ってしまいます。
フェードアウトした際、ピクチャ同様にフェードアウトさせたいのですが、どうしたら良いのでしょうか？

重ね重ねすみません、お教えいただければ嬉しいです。

[WTR]

コード: 全て選択

    const _Spriteset_Base_createUpperLayer = Spriteset_Base.prototype.createUpperLayer;
    Spriteset_Base.prototype.createUpperLayer = function() {
        if (this instanceof Spriteset_Map) {
            this.createDrawSprite();
        }
        _Spriteset_Base_createUpperLayer.apply(this, arguments);
    };

ここだけでよさそうです。
オリジナルの createUpperLayer より先に新しいスプライトを作ればよさげ。

[orange_cat]

試してみたところ、無事想定する動作を確認できました！
何度もお答えいただきありがとうございました。
本当に助かりました！！