Showing jpg image through javascript

KravenarGames

Veteran
Veteran
Joined
Feb 19, 2017
Messages
120
Reaction score
15
First Language
English
Primarily Uses
N/A
Is there a way to show and remove a jpg image through javascript? Instead of showing a png file through the classic gui system?
 

standardplayer

Keeper of Kitties
Veteran
Joined
Apr 6, 2016
Messages
528
Reaction score
2,399
First Language
English
Primarily Uses
N/A
//create
let pic = new PIXI.Sprite.fromImage("img/folder/filename.png");
//position
pic.position.set(x, y);
//show
SceneManager._scene.addChild(pic);
//remove
SceneManager._scene.removeChild(pic);
//do this to remove from the PIXI texture cache. Important!
pic.destroy(true);
pic = undefined;
 

KravenarGames

Veteran
Veteran
Joined
Feb 19, 2017
Messages
120
Reaction score
15
First Language
English
Primarily Uses
N/A
Thank you! Is there a way to show it in layers? like img1 layer0, then img2 layer1 and remove image1 after?
It shows the jpg but it puts it above all layers and if I show a message it doesn't show (maybe it appears on the layer under)
 
Last edited:

standardplayer

Keeper of Kitties
Veteran
Joined
Apr 6, 2016
Messages
528
Reaction score
2,399
First Language
English
Primarily Uses
N/A
The order you add them in with
SceneManager._scene.addChild
is their 'layer' order. There are several layers to the map, everything you show with the method I shared will get them above everything you're currently seeing on screen.

SceneManager._scene.children
If you type that into the console, it will return an array with all current children in SceneManager._scene (<== This always points to the current scene, be it the map, the menu, the title, etc)

There are two other useful functions to control which order the pictures you show go in
SceneManager._scene.swapChildren(pic1, pic2)
SceneManager._scene.addChildAt(pic, index) <== where index is the position in the array you'd like to put the picture.

If you want to put stuff below the characters, or on the same 'layer' as them, it's a little more complicated.
I won't go into detail if it's not necessary, but you can go into the console and type

SceneManager._scene._spriteset.children[0].children[2].children

If you press enter after typing that into the console, you'll see all the children on the 'map layers' (it's more complicated than saying 'map layers', but it's more info than you asked for)
 

KravenarGames

Veteran
Veteran
Joined
Feb 19, 2017
Messages
120
Reaction score
15
First Language
English
Primarily Uses
N/A
Awesome!!! It works! But if I use:
SceneManager._scene.addChildAt(pic, 1)
and destroy it with
SceneManager._scene.removeChild(pic);
the image doesn't remove itself... what's wrong?
 

standardplayer

Keeper of Kitties
Veteran
Joined
Apr 6, 2016
Messages
528
Reaction score
2,399
First Language
English
Primarily Uses
N/A
Gotta remove it first.
You could do it without removing it first, but then you'd have to do something like
SceneManager._scene.removeChildAt(index)
You'd have to get the index somehow, which isn't impossible but
it's much more efficient to just remove it like

SceneManager._scene.removeChild(pic);
pic.destroy(true);
pic = undefined;

Do it before you get rid of the reference in the variable.

EDIT: Also, for some reason I just assumed you already knew the script call for the regular RPG Maker show picture method. Here it is

//to show
$gameScreen.showPicture(pictureId, name, origin, x, y, scaleX, scaleY, opacity, blendMode);

//to remove
$gameScreen.erasePicture(id)

For a lot of reasons, I hate using the script call version of RPG Maker's pictures, but I do a lot with images in JS. If you don't mind using those script calls, they'll work, too.

Sorry, the way you worded it, for some reason I thought you didnt' want to use RPG Maker's picture showing methods at all, JS or not.
 
Last edited:

KravenarGames

Veteran
Veteran
Joined
Feb 19, 2017
Messages
120
Reaction score
15
First Language
English
Primarily Uses
N/A
Is there another way to remove pic from the PIXI cache?
 

standardplayer

Keeper of Kitties
Veteran
Joined
Apr 6, 2016
Messages
528
Reaction score
2,399
First Language
English
Primarily Uses
N/A
Yeah, you could go through
PIXI.utils.baseTextureCache["img/filepath/file.png"].destroy()
PIXI.utils.BaseTextureCache["img/filepath/file.png"].destroy()

But in the original example I gave
pic.destroy(true)
does that as well

Please note though, if you try to destroy the image and it's base texture while the picture is still showing, you're program will crash.

Make sure you remove the images from the scene before destroying
 
Last edited:

KravenarGames

Veteran
Veteran
Joined
Feb 19, 2017
Messages
120
Reaction score
15
First Language
English
Primarily Uses
N/A
But if I use:
PIXI.utils.baseTextureCache["img/pictures/Image.jpg"].destroy();

it says "Cannot read property of "img/pictures/Image.jpg" of undefined."

and it crashes.
 

standardplayer

Keeper of Kitties
Veteran
Joined
Apr 6, 2016
Messages
528
Reaction score
2,399
First Language
English
Primarily Uses
N/A
Gotta put your path in quotes
 

standardplayer

Keeper of Kitties
Veteran
Joined
Apr 6, 2016
Messages
528
Reaction score
2,399
First Language
English
Primarily Uses
N/A
OH.....
I made a casing error
It's upper case 'b'
PIXI.utils.BaseTextureCache
Sorry about that....
 

KravenarGames

Veteran
Veteran
Joined
Feb 19, 2017
Messages
120
Reaction score
15
First Language
English
Primarily Uses
N/A
it now says "cannot read property 'destroy' of undefined"
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

You know, I sometimes ponder if working on the story and details is more necessary than the game itself. Its... technically work, just not direct.

Like for me specifically I never stop evolving the story based on what avenues I can approach in gameplay and then I get anxious thinking "hey good thing I thought about that now instead of later". Repeat ad nauseam.
World Of Final Fantasy Livestream~!
(Ft. Kaliga)
So my office building has 8 individually rented offices in it; 3 of which are social workers and 2 are marriage therapists... Unsurprisingly it always sound very angry out there. Glad I have my own private entrance. :LZSexcite: :thumbsup-right:
I wonder if there's ever been an art challenge that involves drawing faces from the generator.

Forum statistics

Threads
94,375
Messages
920,412
Members
124,144
Latest member
vopima2188
Top