- Joined
- Jun 15, 2017
- Messages
- 1,075
- Reaction score
- 2,592
- 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:
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>)
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):
2. Commenting out context.drawImage(this._loadingImage, dx, dy); from Graphics._paintUpperCanvas like this:
3. Adding this new line under context.drawImage(this._loadingImage, dx, dy) inside the same function:
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 ^^
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>
1.Adding a new line to the Graphics._clearUpperCanvas function (use 'find' to find it easily):
HTML:
document.getElementById('loading').innerHTML=""
Code:
//context.drawImage(this._loadingImage, dx, dy);
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'>"
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 ^^
Last edited: