Using gif/apng as loading image

じ☆ve冰风 · 发表于 4 天前

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:
Spoiler: Test 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:
Spoiler: Result

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

本贴来自国际rpgmaker官方论坛作者:Sodium89处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/using-gif-apng-as-loading-image.129615/

下载

教程

申请

插件

下载

教程

插件

下载

教程

插件

[制作教程] Using gif/apng as loading image

本帖子中包含更多资源

灌水之王

幸运抽奖