ミニマッププラグインの試作

[ppp]

ミニマッププラグインを制作中なのですが、fillRectのwidth, height とBitmapのwidth, heightの違いがわかりません。ご教授いただけるとありがたいです。

コード: 全て選択

/*:
 * @plugindesc ミニマップを表示
 * @author free
 * @help MZ MV ミニマップを表示
 */

(function () {
    "use strict";

    const pluginName = 'MiniMap';

    var _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() {
        var sprite = new Sprite()

        for(var x = 0; x < $dataMap.width; x++){
            for(var y = 0; y < $dataMap.width; y++){
            sprite.bitmap = this.makeDrawBitmap(x, y);
            this.addChild(sprite);
            }
        }
    };

    Spriteset_Map.prototype.makeDrawBitmap = function(x, y) {
        var bitmap = new Bitmap(Graphics.boxWidth, Graphics.boxHeight);
        bitmap.fillRect(x, y, 10, 10,'rgba(255, 255, 255, 0.5)');
        return bitmap;
    };
})();

[Plasma Dark]

Bitmapのコンストラクタに渡す width, height はcanvasの縦横幅であり、fillRectはcanvasの2Dcontextに対して矩形を描画するメソッドです。

Bitmapクラスは rpg_core.js に定義されているので、その initialize や _createCanvas を読んでみてください。

HTMLCanvasElement: width プロパティ - MDN
CanvasRenderingContext2D - MDN

[ppp]

返答ありがとうございます！大変助かりました！

[ppp]

再度質問失礼します

コード: 全て選択

/*:
 * @plugindesc ミニマップを表示
 * @author free
 * @help MZ MV ミニマップを表示
 */

(function () {
    "use strict";

    const pluginName = 'MiniMap';

    var _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() {
        var sprite = new Sprite()

        for(var x = 0; x < $dataMap.width; x++){
            for(var y = 0; y < $dataMap.width; y++){
            sprite.bitmap = this.makeDrawBitmap(x, y);
            this.addChild(sprite);
            }
        }
    };

    Spriteset_Map.prototype.makeDrawBitmap = function(x, y) {
        var bitmap = new Bitmap(Graphics.boxWidth, Graphics.boxHeight);
        bitmap.fillRect(x, y, 10, 10,'rgba(255, 255, 255, 0.5)');
        return bitmap;
    };
})()

このプログラムは、とりあえずマップの範囲分だけ矩形を表示しようとしているのですが、うまくいきません。何故でしょうか？教えていただけると幸いです。具体的な問題として、矩形が一つしか表示されません

[Plasma Dark]

Spriteインスタンスをひとつだけ作って、それを書き換えているだけなのでひとつしか表示されません。
1マス1Spriteで作るより、1Sprite内のBitmapで全マス分の描画を行ってしまうほうが考えることは少なくなりそうです。

ミニマップというくらいなのだから、画面全体と同じ大きさのBitmapを作るのは過剰ですね。適切な大きさに絞ってあげると良いと思います。
fillRectで指定する矩形は、今のコードだとほとんど隣のマスと重なってしまっているようです。

[ppp]

気づけず返信おくれてすみません。回答ありがとうございました