Implement Pixi.loader and Pixi.sprite in a project

[Oscar92player]

Hello everyone.

I need some help doing this because I don't have so much experience with this, and it's related with what @Jonforum told me in this post where we were talking about the BGM delay, lag and frame drops when you play a game made with MV.

The thing is I would like to implement those changes related to PIXI and see if I can avoid the errors I mentioned. But in order to do that I need help, because I don't know where I need to start.

As I understand, and @Andar and @bgillisp told me, RPG Maker uses the CPU in order to load all the resources from the game (Javascript and rendering), and that means that CPUs that are not powerful enough to manage those resources can cause the lag, frame drops and music delay I was talking about. So, and thanks to Jonforum for the links, the idea is to change the way Pixi manages the engine of the game, using the CPU to work with Javascript, and the GPU with the rendering of the resources.

First of all, I have this link:
Pixi.loader
And this other link:
Pixi.sprite

I don't know what to do with them, if I need to copy the codes in a .js file or if I need to use them as a plugin... I don't know even if this can cause incompatibilities with other plugins or something like that.

 

[Gamefall Team]

Well man, you're a bit confused
PIXI.Sprite and PIXI.Loader are classes of Pixi.js, so they are in PIXI, you don't need to add them with plugins or similar. The Pixi.js library in MV contains them.
The problem is that these things are not "plug and play", you need to have a good experience in coding and know the PIXI library for make a good use of them.
For example, if you are interested, you can take a look directly in the RMMV console on what PIXI.Loader is.

Try something like this in the console:

var loader = new PIXI.loaders.Loader()
loader.add('test', 'img/system/Window.png')
loader.load(function(loader, resources) {
console.log(loader, resources, resources.test)
})

This way you will take a look on what materially is the PIXI.Loader and the result of its methods that are in general an object containing the texture information. If you haven't any experience in coding, I suggest to learn firstly the basis of JS and the Object oriented logic and then take a deep look on the documentation of PIXI. Good luck, man!

 

[Oscar92player]

Well man, you're a bit confused
PIXI.Sprite and PIXI.Loader are classes of Pixi.js, so they are in PIXI, you don't need to add them with plugins or similar. The Pixi.js library in MV contains them.
The problem is that these things are not "plug and play", you need to have a good experience in coding and know the PIXI library for make a good use of them.
For example, if you are interested, you can take a look directly in the RMMV console on what PIXI.Loader is.

Try something like this in the console:

var loader = new PIXI.loaders.Loader()
loader.add('test', 'img/system/Window.png')
loader.load(function(loader, resources) {
console.log(loader, resources, resources.test)
})

This way you will take a look on what materially is the PIXI.Loader and the result of its methods that are in general an object containing the texture information. If you haven't any experience in coding, I suggest to learn firstly the basis of JS and the Object oriented logic and then take a deep look on the documentation of PIXI. Good luck, man!

And there is no other way to change this? I mean, there must be something to do this in a way more easily, because I don't know about programming in Javascript, or such.

 

[Gamefall Team]

The Sprite core engine of MV is made combining the default JS bitmaps and the PIXI.Sprite class of Pixi.js, so the texturing is made through loading bitmap and all the loading methods of the Image Manager are based that way. So using the PIXI.Loader and the PIXI.Sprite (taking the texture from images etc...) is not considered in these classes, but you have to deal directly with the Pixi.js library and so you need to know how to play with codes, because you must know how certain things works or you will not be able to use them.
For example I have worked a lot with @Jonforum to find the right balance for the PIXI.Text class of Pixi in MV, trying some class creation similar to the one in the Core, but we have realized that working directly with PIXI is the best solution for the best quality, and in this case the code knowledge is necessary.

If you want to avoid things like audio delay or "non-loaded" images, you can try also preloaders like the one of SRDude that preloads images and audio using the CacheMap features of MV 1.5.0. I think You will not able to have the same performances of the PIXI methods, but you can improve the quality of your game for sure.

 

[Oscar92player]

The Sprite core engine of MV is made combining the default JS bitmaps and the PIXI.Sprite class of Pixi.js, so the texturing is made through loading bitmap and all the loading methods of the Image Manager are based that way. So using the PIXI.Loader and the PIXI.Sprite (taking the texture from images etc...) is not considered in these classes, but you have to deal directly with the Pixi.js library and so you need to know how to play with codes, because you must know how certain things works or you will not be able to use them.
For example I have worked a lot with @Jonforum to find the right balance for the PIXI.Text class of Pixi in MV, trying some class creation similar to the one in the Core, but we have realized that working directly with PIXI is the best solution for the best quality, and in this case the code knowledge is necessary.

If you want to avoid things like audio delay or "non-loaded" images, you can try also preloaders like the one of SRDude that preloads images and audio using the CacheMap features of MV 1.5.0. I think You will not able to have the same performances of the PIXI methods, but you can improve the quality of your game for sure.

I'm actually using the latest version of the Preloader Core, but using 1.4.1 instead of 1.5.0. It is true that using that plugin improves greatly the game, avoiding the music delay and some frame drops when calling pictures in events, but when opening menus, change the Window graphic, or teleporting to other maps there is still critical frame drops. Basically, the game runs at 60FPS, but when some of those actions take place, the frames drops to 15-25 in less than a second, causing some kind of screen tearing and lag until the game recovers again the normal 60FPS. So, every time your game loads a new scene or graphic = frame dropping.

Other thing is, if you reset the game using the F5 key, the plugin will preload again all the resources, and that makes the RAM to overload resources that in theory are just preloaded, causing memory leak problems every time you reset the game without closing it before. In fact, one time I needed to force my computer to turn off because of the RAM when using the Preloader Core and reseting my project.

 

[chaucer]

Technically, you do not need to implement PIXI.Sprites into your game, because the default rpg maker MV Sprite class is just a modified version of PIXI.Sprite, therefore they are one and the same, also the Sprite itself is not where the issue lies, the issue is with the Bitmap class.

Bitmaps are created by loading up a Image DOM, and then loading up a DOM Canvas( These things are done via CPU, while textures & Base Textures are done through GPU ), then drawing that Image, to the canvas, and from there it then creates a new BaseTexture( by default pixi normally uses textures and base textures, which is actually what the PIXI.loaders is used for ) from the canvas of the bitmap, this speeds up the the loading of the texture, However it creates some other issues, one being( at least for my computer, I'm unsure if anyone else is affected by the same issue ), that the canvas objects continously load up in memory since, theres no real way to delete DOM objects, since there is always a reference to them stored in browser memory, where as skipping the canvas, and directly using textures, the memory can easily be freed( again, this is my own experience for my computer, I'm unsure if anyone else has the same issue, I actually have a hard time play testing projects i work on, as larger projects I can't refresh the game more than twice, or I'll get an out of memory warning ).

I'm unsure if using PIXI.Textures, instead of bitmaps would help speed up Audio processing, as I've never tested this myself, however I can say for sure, using PIXI.Textures increases loading time of images( not by a whole lot, but it does ), I also do know that what you're asking for is a pretty large undertaking, and would possibly break certain plugins, and require alot of changes to be made to the engine itself, I've already been looking into rewriting MV's Sprite class to purely use textures, however this was really for my own use, as like i said above, it could possibly break things, not to mention most programmers are more accustomed to the bitmap class at this point, I doubt anyone would really be interested in such a change, if you want though when i finish it, I could send you a copy, granted, it might not be for some time as I've got quite a long list of other things that should come first.

 

[Jonforum]

To accelerate the audio.
Unless you use the new API PIXI AUDIO.
https://pixijs.github.io/pixi-sound/examples/demo.html

you need to use a preCache Audio file
use this plugin
TDDP_PreloadManager

and you can preCache all audio you need in the js file.
ex:

-----------------------------------------------------------------------------
* BGM files to load on boot
* -----------------------------------------------------------------------------
*/
TDDP.bootPreloadBGM = [
    "intro1"
]
/*
*
* -----------------------------------------------------------------------------
* BGS files to load on boot
* -----------------------------------------------------------------------------
*/
TDDP.bootPreloadBGS = [
    // "Quake"
]
/*
*
* -----------------------------------------------------------------------------
* SFX files to load on boot.
* -----------------------------------------------------------------------------
*/
TDDP.bootPreloadSE = [
    // "Open2"
]
/*
*
* -----------------------------------------------------------------------------
* ME files to load on boot.
* -----------------------------------------------------------------------------
*/
TDDP.bootPreloadME = [
    // "Shock1"
]

 

[Oscar92player]

To accelerate the audio.
Unless you use the new API PIXI AUDIO.
https://pixijs.github.io/pixi-sound/examples/demo.html

you need to use a preCache Audio file
use this plugin
TDDP_PreloadManager

and you can preCache all audio you need in the js file.
ex:

-----------------------------------------------------------------------------
* BGM files to load on boot
* -----------------------------------------------------------------------------
*/
TDDP.bootPreloadBGM = [
    "intro1"
]
/*
*
* -----------------------------------------------------------------------------
* BGS files to load on boot
* -----------------------------------------------------------------------------
*/
TDDP.bootPreloadBGS = [
    // "Quake"
]
/*
*
* -----------------------------------------------------------------------------
* SFX files to load on boot.
* -----------------------------------------------------------------------------
*/
TDDP.bootPreloadSE = [
    // "Open2"
]
/*
*
* -----------------------------------------------------------------------------
* ME files to load on boot.
* -----------------------------------------------------------------------------
*/
TDDP.bootPreloadME = [
    // "Shock1"
]

Unfortunatelly, I tried with this plugin a lot of times before, without result. In fact, I tried again last night and even if it loads some files, there are some critical errors that makes the project unplayable:
- The first error appears when I try to load more folders than the audio ones. If I try to load the "img" related folders (like "system", "pictures"...) the game stucks in Loading screen, and if I open the console window, I see that the preload of resources stucks in 44%, no matter how.

- The second error comes from the first if I desist in the preload of the "img" related folders. If I try to play my game, some graphics will be missing during gameplay, such as SFonts, Icons, Title screen images, particles, characters ans events...

No matter how, this plugin is a nest of errors every time I try to use it in a project, even in the most updated version of the Maker, and that is the reason I don't want to try it again.