RMMV Alternative to creating hundreds of a similarly-shaped bitmap?

[GreenTree-Studios]

Sorry to be "Sir Spamalot", but I am currently having problems with the framerate from my Fossil Cleaning System Plugin.

The problem is shown here: Cleaning Drill Effect Near Completion

And this is the code that is most likely the cause:

Spriteset_Cleaning.prototype.updateDrillEffect = function(){
    if (TouchInput.isLongPressed()){
        this._drillHole = new Sprite();
        this._drillHole3 = new Sprite();
        this._drillHole4 = new Sprite();
        var toolX = TouchInput._x;
        var toolY = TouchInput._y;
        $gameScreen.showPicture(1, 'DrillEffect', 1, toolX, toolY, 100, 100, 255, 0);
        $gameScreen.showPicture(2, 'DrillTracker', 1, toolX, toolY, 100, 100, 255, 0);
        layer--;
        if(layer <= 1200){
            this._drillHole.bitmap = this.drillBitmap();
            this._drillHole.bitmap.blt(this.drillBitmap, TouchInput._x, TouchInput._y, 48, 48, 0, 0);
            this._drillHole.move(TouchInput._x, TouchInput._y);
            this._rockLayer3.addChild(this._drillHole);
            if (layer <= 1000 && this._rockLayer3.children.indexOf(this._drillHole)){
                this._drillHole3.bitmap = this.drill3Bitmap();
                this._drillHole3.move(TouchInput._x, TouchInput._y);
                this._rockLayer3.addChild(this._drillHole3);
                this._drillHole3.mask = this._fossil;
                if(layer <= 800 && this._rockLayer3.children.indexOf(this._drillHole3)){
                    this._drillHole4.bitmap = this.drill4Bitmap();
                    this._drillHole4.bitmap.blt(this.drill4Bitmap, TouchInput._x, TouchInput._y, 48, 48, 0, 0);
                    this._drillHole4.move(TouchInput._x, TouchInput._y);
                    this._rockLayer3.addChild(this._drillHole4);
                    this._drillHole4.mask = this._fossil;
                    layer = 1200;
                    }
                }
            }
    }else{
        $gameScreen.showPicture(1, 'DrillEffect', 1, toolX, toolY, 100, 100, 0, 0);
        $gameScreen.showPicture(2, 'DrillTracker', 1, toolX, toolY, 100, 100, 0, 0);
    }
};

Spriteset_Cleaning.prototype.drillBitmap = function(){
    return ImageManager.loadDrillBitmap(this.drillBitmapName());
};

ImageManager.loadDrillBitmap = function(filename, hue){
    return this.loadBitmap('img/hole/', filename, hue, true)
};

Spriteset_Cleaning.prototype.drillBitmapName = function(){
    return 'Drill';
};

Spriteset_Cleaning.prototype.drill3Bitmap = function(){
    return ImageManager.loadDrill3Bitmap(this.drill3BitmapName());
};

ImageManager.loadDrill3Bitmap = function(filename, hue){
    return this.loadBitmap('img/hole/', filename, hue, true)
};

Spriteset_Cleaning.prototype.drill3BitmapName = function(){
    return 'Drill3';
};

Spriteset_Cleaning.prototype.drill4Bitmap = function(){
    return ImageManager.loadDrill4Bitmap(this.drill4BitmapName(), -121);
};

ImageManager.loadDrill4Bitmap = function(filename, hue){
    return this.loadBitmap('img/hole/', filename, hue, true)
};

Spriteset_Cleaning.prototype.drill4BitmapName = function(){
    return 'Drill4';
};

Can anyone point me in the right direction to not adding so many images that would cause lag?

 

[gstv87]

add the RGB values to a grayscale image and use that to transparent the top layer?

....also... why are you using showPicture for image processing in a procedure that clearly uses it's own sprites?
if you can make your own sprites, what do you need showPicture for?

 

[GreenTree-Studios]

I'm planning to use Yanfly Engine's Picture Common Events to create buttons that will switch between tools. Also, I don't know how to make the origin of that sprite be at the center.

 

[GreenTree-Studios]

So how would I go about adding the color to the grayscale image in JavaScript?

 

[gstv87]

how did you come up with all that, without knowing how to find the center of an image? 0o

 

[GreenTree-Studios]

Looked over some of the provided code in rpg_objects.js file of my project.

 

[Magnus0808]

From just looking at the code it seems that it has various errors in it. Does it say something in your console?

From the looks of it this line:

this._drillHole.bitmap.blt(this.drillBitmap, TouchInput._x, TouchInput._y, 48, 48, 0, 0);

probably doesn't do anything as this.drillBitmap is a function as far as I know. I am not really sure what you were trying to do either. How does the 'img/hole/Drill.png' look like?

Also this part

else{
        $gameScreen.showPicture(1, 'DrillEffect', 1, toolX, toolY, 100, 100, 0, 0);
        $gameScreen.showPicture(2, 'DrillTracker', 1, toolX, toolY, 100, 100, 0, 0);
    }

seems wrong too.
The toolX and toolY is defined in the true part of the if statement and is not defined here.

It also seems like you continuously make new sprites and add them to the scene instead of drawing the same sprite multiple times. (which is probably what you, yourself, mentioned as being the problem). I imagine what you want to do is have a bitmap which is the rockLayer which you then draw the drillHoles on using the blt-function.

If you want, you can send me your project and I can try to fix it for you later as it seems like an interesting idea.

 

[gstv87]

@Magnus0808
the error is right here:

if (TouchInput.isLongPressed()){
this._drillHole = new Sprite();
this._drillHole3 = new Sprite();
this._drillHole4 = new Sprite();

every time the touch is active, it spawns a new sprite.

what needs to be done is use one sprite, and add bitmaps to it.
I don't know how to translate that to JS, but that's what it should be done.