Hyouryuu-Na

Very very lazy
Veteran
Joined
Jun 15, 2017
Messages
1,081
Reaction score
2,680
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
6,007
Reaction score
5,648
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,081
Reaction score
2,680
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,407
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,081
Reaction score
2,680
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

Realist
Veteran
Joined
Oct 8, 2018
Messages
3,869
Reaction score
1,470
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,407
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,081
Reaction score
2,680
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,407
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,081
Reaction score
2,680
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,417
Reaction score
1,825
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

Zaj
Okay anothe stupid question from me. Why is when everyone's explaining the scripts in the scriptlets, it chnge into green. how do i know when do i code without knowing whether its turning green or not
So I realized that I really just don't have enough time to make videos. However I don't mind clicking stream and just letting people watch me work on my game. I don't really have a good microphone... okay it's a $20 headset so it's terrible, and I have no web cam. So the stream would largely be royalty free music and me working, with minor interaction. I guess the question is, would that actually interest anybody?
Child base test two, flappin' their arms like it's VX Ace.
ChildTest-02.gif
Zaj
Hi quick question. Is it possible for me to make a custom VXAce script without learning some bulkiness of Ruby?

Forum statistics

Threads
111,325
Messages
1,060,203
Members
144,640
Latest member
marcmandela
Top