Hyouryuu-Na

Very very lazy
Veteran
Joined
Jun 15, 2017
Messages
1,075
Reaction score
2,622
First Language
Not English
Primarily Uses
RMMV
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:

original.gif


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:
20201106_233440.gif

And that's all. Hope this helped someone ^^
 
Last edited:

Wavelength

MSD Strong
Global Mod
Joined
Jul 22, 2014
Messages
5,969
Reaction score
5,596
First Language
English
Primarily Uses
RMVXA
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

Very very lazy
Veteran
Joined
Jun 15, 2017
Messages
1,075
Reaction score
2,622
First Language
Not English
Primarily Uses
RMMV
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

Volunteer
Veteran
Joined
Dec 16, 2016
Messages
812
Reaction score
1,405
First Language
English
Primarily Uses
N/A
Also works with apng as loading image.

test.png

'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

Very very lazy
Veteran
Joined
Jun 15, 2017
Messages
1,075
Reaction score
2,622
First Language
Not English
Primarily Uses
RMMV
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 ^^
 
Last edited:

ShadowDragon

Veteran
Veteran
Joined
Oct 8, 2018
Messages
3,661
Reaction score
1,378
First Language
Dutch
Primarily Uses
RMMV
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

Volunteer
Veteran
Joined
Dec 16, 2016
Messages
812
Reaction score
1,405
First Language
English
Primarily Uses
N/A
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

LBgiZMQ.png


UaC5Xwp.png


oOh19WC.png
 
Last edited:

Anthony Xue

Ancient Architect
Veteran
Joined
May 9, 2016
Messages
117
Reaction score
117
First Language
German
Primarily Uses
@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

Very very lazy
Veteran
Joined
Jun 15, 2017
Messages
1,075
Reaction score
2,622
First Language
Not English
Primarily Uses
RMMV
Edit: The solution didn't work so I removed it ^^;
 
Last edited:

tale

Volunteer
Veteran
Joined
Dec 16, 2016
Messages
812
Reaction score
1,405
First Language
English
Primarily Uses
N/A
@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

Very very lazy
Veteran
Joined
Jun 15, 2017
Messages
1,075
Reaction score
2,622
First Language
Not English
Primarily Uses
RMMV
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.
 
Last edited:

caethyril

^_^
Veteran
Joined
Feb 21, 2018
Messages
2,379
Reaction score
1,786
First Language
EN
Primarily Uses
RMMZ
This CSS edit worked for me in MZ:
 

Anthony Xue

Ancient Architect
Veteran
Joined
May 9, 2016
Messages
117
Reaction score
117
First Language
German
Primarily Uses
Thanks!

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

studwb22

Veteran
Veteran
Joined
Dec 30, 2020
Messages
52
Reaction score
13
First Language
English
Primarily Uses
RMMV
Would this have any application in trying to use a GIF as a battlebackground?
 

Latest Threads

Latest Posts

Latest Profile Posts

Doing RPG Maker News #18 | Moghunter is Back, Encrypt MV/MZ Plugins, Isometric Geometric Tiles
Unironically, no joke, after consideration and self-reflection, I have decided that the best thing for my creative/workflow/commitment problems is to spend EVEN MOAR hours a day playing videogames than I normally do. (Micro-thread)
FINALLY got my weather system implemented. Who needs a black mage when you have a weathermancer! :p
Oh boy! COVID19 lockdown again! Good thing I already never go outside! :D

Forum statistics

Threads
110,642
Messages
1,054,905
Members
143,769
Latest member
Lynnen
Top