how to properly show a picture inside a scene_base?

[Xyonel]

i try to insert a picture inside the card detail function, this picture is a button that once clicked insert that card detailed into a favorite list and I'm stuck with that problem:

i tried this:

function Window_TripleTriad_CardDetails() {
this.initialize.apply(this, arguments);
};

Window_TripleTriad_CardDetails.prototype = Object.create(Window_Base.prototype);
Window_TripleTriad_CardDetails.prototype.constructor = Window_TripleTriad_CardDetails;

Window_TripleTriad_CardDetails.prototype.initialize = function (x, y, width, height) {
this.load_plugin_parameters();
Window_Base.prototype.initialize.call(this, x, y, width, height);
this.refresh(0);
/*if (SceneManager::scene_is?(scene_album_Monrion))*/
if (SceneManager._scene instanceof scene_album_Monrion)
this.drawPicture('button', 850, 500);
else this.drawPicture('button', 0, 0);
};

Window_TripleTriad_CardDetails.prototype.drawPicture = function(filename, x, y) {
var bitmap = ImageManager.loadPicture(filename);
this.contents.blt(bitmap, 0, 0, bitmap._canvas.width, bitmap._canvas.height, x, y);
};

 

[standardplayer]

I honestly always just use Sprites, I'm not a huge fan of RPG Maker's picture setup.

for(let i = 0; i < aListOfYourImagePaths.length; i++{
this.addChild(new PIXI.Sprite.fromImage(folderPath)
}

for the path, make sure it's how it appears in your directory.
example
"img/Pictures/myPicture.png"

A tricky thing with loading images is that they (sprites included) don't load instantly.
For example, if you try to check a sprite's width immediately after the sprite is created, without waiting at least a few frames,
it's likely that the width will return 1, regardless of the loaded image's size.

This is mostly important if you use the width property when positioning it.

There are many ways around this. You could hardcode the width of the image, which I don't recommend.
You could also alias the scene's update function, and wait for the sprite to load fully before doing any positioning.
Two ways I check to see if a sprite has loaded are
(assuming my sprite is called spr)

spr._texture.baseTexture.hasLoaded
spr.width > 1 //<=== only useful when the width is actually supposed to be greater than one, obviously

 

[Xyonel]

I'll try that.

 

[standardplayer]

You'll also probably want to be able to get the filepaths of all of those images ahead of time, if you go about it the way I described. I'm assuming your game doesn't have just one card lol. The following function will return an array that has the paths of all files in a folder and it's sub-folders.

function findFilesInDir (currentPath, storage) {
let fs = require('fs');
let currentFile;
let stats;
let files;
let i = 0;

files = fs.readdirSync(currentPath);
for (i in files) {
currentFile = currentPath + '/' + files;
stats = fs.statSync(currentFile);
if (stats.isFile()) {
storage.push(currentFile);
}
else if (stats.isDirectory()) {
findFilesInDir(currentFile, storage);
}
}

}


Here's an example of how you would call that function to find all files in the img/Pictures folder (and any subfolders within)

let result = [];
findFilesInDir("img/Pictures", result);

console.log(result);

 

[Xyonel]

@standardplayer btw my intent was to make a "favorite button", not showing a card in card details, the image is already made, I just need a button that function as a favorite maker array.
I cannot use a list cause on the left there is already a list, so I must use a mouse or a favorite keyboard.