Using gif/apng as loading image

Hyouryuu-Na · Nov 7, 2020

This works for MV. If you're looking for a way to do this in MZ, follow this post.

I find the default 'Now loading' image to be very ugly and after I customized it, I still felt like... nah... It needs some animation. As I just love fiddling around with HTML, I thought I'd give gifs a try. (Edit: I hadn't noticed it initially but apngs also work. Thanks to @tale for pointing that out)
After a bit of trial and error, I managed to do it but I had to use a placeholder gif because I haven't made a custom one yet :")
I decided to use this cute bunny one here:

The process is very simple.
First we place our gif/apng in a reasonable place. I put it in the img/system folder as 'test.gif' in my case.
Then we have to open up 'index.html' in a text/script editing software. Then we simply add this line at the very end inside the <body> section (just above </body>)

Code:

<div id="loading"></div>

Then inside 'rpg_core.js', we have to make the following changes:
1.Adding a new line to the Graphics._clearUpperCanvas function (use 'find' to find it easily):

HTML:

document.getElementById('loading').innerHTML=""

2. Commenting out context.drawImage(this._loadingImage, dx, dy); from Graphics._paintUpperCanvas like this:

Code:

//context.drawImage(this._loadingImage, dx, dy);

3. Adding this new line under context.drawImage(this._loadingImage, dx, dy) inside the same function:

Code:

document.getElementById('loading').innerHTML="<img style='margin: 0; width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 7' src='img/system/test.gif'>"

Be sure to change the width, height and source (along with extension) according to your own gif/apng.

To test it out, I intentionally got rid of the faceset so that the loading image would last longer. And here's what it looks like in-game:

And that's all. Hope this helped someone ^^

Wavelength · Nov 9, 2020

What a cool idea!

For step 1, does it matter where in the Graphics._clearUpperCanvas method we add the new line of code?

I assume the GIF the designer would insert must already be an animated .gif image, and that there's nothing that RPG Maker itself is doing to animate it - is that essentially correct?

Hyouryuu-Na · Nov 9, 2020

No, you can add it anywhere inside that function. It just gets rid of the gif when loading is done/error is gone.

yes you just put the ready made gif file. The engine itself does nothing about it. It just plays automatically.

tale · Nov 9, 2020

Also works with apng as loading image.

'test.gif' > 'test.png'

I used apng example from wikimedia commons.

Note: apng might not be supported in older web browsers. Good to know alternative

Hyouryuu-Na · Nov 9, 2020

Oh yes, It does! I didn't know about apngs until now XD So I didn't think about experimenting with that. Thanks for pointing that out @tale ^^

ShadowDragon · Nov 14, 2020

I knew apng a while now, but it has a downside the first time I use it, the png's you add are stacked,
so you see every frame behind it (unless it changed). but I still don't know how to make a transparant .gif
file though, always white, black or solid color.

I know olivia has a plugin for 1 image and reads all columns and rows for the animation to play,
but this is exacly much better if the gif isn't to big.

what if the .gif animation has 360 frames and 10-30mb in size? it would take time to load, and
when the time the load, the game is already loaded XD.

so the animation need to be small and effective, but I like the idea of this. need to save it,
can come in handy.

tale · Nov 24, 2020

If anyone's curious about possibility for MZ, loading has been revised.

Inside 'rmmz_core.js' uses "loadingSpinner" instead of loading image.

Edit: appearance could be altered inside css folder of game.css

Anthony Xue · Jan 11, 2021

@tale Could you elaborate on that? What exactly do I have to do to get a custom loading image in MZ? I hate this spinning circle with a passion.

Hyouryuu-Na · Jan 11, 2021

Edit: The solution didn't work so I removed it ^^;

tale · Jan 11, 2021

@Anthony Xue I'm looking into temporary solution as MZ tutorial however limits to choosing one of 12 samples for CSS Loaders styles.

@Hyouryuu-Na I added this line in the end before the closing bracket and an error occurred while testing-
TypeError
Cannot set property 'innerHTML' of null

Spooktober Game Jam entries has a rmmz_core.js inside js folder. I'm not sure where to add new lines to.

Hyouryuu-Na · Jan 11, 2021

Welp that sucks XD I thought since MZ already has divs for the spinner, we won't have to add a div separately in index.html. But I guess that's what must be done :/ Idk... there's not much I can do without actually fiddling around with it.

Edit: Turns out there is a solution for MZ! Thanks to @caethyril for linking it. I'll also update the first post with the link as well.

caethyril · Jan 11, 2021

This CSS edit worked for me in MZ:

[RMMZ] [SOLVED] [How to] Change the default loader

I have seen a few threads on how to replace/edit the default loader in RMV and else but no luck with RMZ. I have found that this time it's CSS instead of a GIF or APNG, so basically what is the right way to replace that with an apng? or is that not ideal and I should code a custom CSS loader...

forums.rpgmakerweb.com

Anthony Xue · Jan 11, 2021

Thanks!

(It's now a floating hourglass. Much more appealing.)

studwb22 · Jan 29, 2021

Would this have any application in trying to use a GIF as a battlebackground?

Using gif/apng as loading image

Hyouryuu-Na

Very very lazy

Wavelength

MSD Strong

Hyouryuu-Na

Very very lazy

tale

Volunteer

Hyouryuu-Na

Very very lazy

ShadowDragon

Veteran

tale

Volunteer

Anthony Xue

Ancient Architect

Hyouryuu-Na

Very very lazy

tale

Volunteer

Hyouryuu-Na

Very very lazy

caethyril

^_^

[RMMZ] [SOLVED] [How to] Change the default loader

Anthony Xue

Ancient Architect

studwb22

Veteran

Latest Threads

Latest Posts

Latest Profile Posts

Newest members

Forum statistics