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

Status
Not open for further replies.

KenSoulslayer

Graphic Designer/JS Dev
Member
Joined
Nov 29, 2020
Messages
26
Reaction score
10
First Language
Hindi
Primarily Uses
RMMZ
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?

1607078702491.png


SOLUTION: by @caethyril

Put the animate image in your game folder (in this case we put it in img/system)

Locate and open game.css file in your "css" folder

Search and locate the following lines of code and do the following edits:

CSS:
#loadingSpinnerImage {
margin: 0px;
padding: 0px;

/* Change the dimensions based your own image /*
width: 320px;
height: 228px;

/* Change the path below, wherever you put your own image /*
background-image: url('../img/system/loading.gif');
}

Feel free to mess around with the CSS more to get your own desired effect
 
Last edited:

caethyril

^_^
Veteran
Joined
Feb 21, 2018
Messages
2,226
Reaction score
1,634
First Language
EN
Primarily Uses
RMMZ
:kaopride: Correct, it's CSS:
Code:
#loadingSpinner {
    margin: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 120px;
    height: 120px;
    z-index: 10;
}
#loadingSpinnerImage {
    margin: 0px;
    padding: 0px;
    border-radius: 50%;
    width: 96px;
    height: 96px;
    border: 12px solid rgba(255, 255, 255, 0.25);
    border-top: 12px solid rgba(255, 255, 255, 1);
    animation: fadein 2s ease, spin 1.5s linear infinite;
}
I'd suggest editing your project's game.css file (in your project's css subfolder). I'm not personally very knowledgable in that area, but you might find this page and its links helpful~
 

KenSoulslayer

Graphic Designer/JS Dev
Member
Joined
Nov 29, 2020
Messages
26
Reaction score
10
First Language
Hindi
Primarily Uses
RMMZ
:kaopride: Correct, it's CSS:
Code:
#loadingSpinner {[/INDENT]
[INDENT]    margin: auto;[/INDENT]
[INDENT]    position: absolute;[/INDENT]
[INDENT]    top: 0px;[/INDENT]
[INDENT]    left: 0px;[/INDENT]
[INDENT]    right: 0px;[/INDENT]
[INDENT]    bottom: 0px;[/INDENT]
[INDENT]    width: 120px;[/INDENT]
[INDENT]    height: 120px;[/INDENT]
[INDENT]    z-index: 10;[/INDENT]
[INDENT]}[/INDENT]
[INDENT]#loadingSpinnerImage {[/INDENT]
[INDENT]    margin: 0px;[/INDENT]
[INDENT]    padding: 0px;[/INDENT]
[INDENT]    border-radius: 50%;[/INDENT]
[INDENT]    width: 96px;[/INDENT]
[INDENT]    height: 96px;[/INDENT]
[INDENT]    border: 12px solid rgba(255, 255, 255, 0.25);[/INDENT]
[INDENT]    border-top: 12px solid rgba(255, 255, 255, 1);[/INDENT]
[INDENT]    animation: fadein 2s ease, spin 1.5s linear infinite;[/INDENT]
[INDENT]}
I'd suggest editing your project's game.css file (in your project's css subfolder). I'm not personally very knowledgable in that area, but you might find this page and its links helpful~

Thanks for pointing out the file!

I am familiar with CSS and for my said case I prefer using a gif or apng file.

Considering the code has the section
Code:
#loadingSpinnerImage
and the css for thatt, there should be a place to add, specify/add "loadingSpinnerImage" to the game and then animate it with css or simply use an already animated one.

I will try putting it in the img/system folder and try. :kaophew:
 

caethyril

^_^
Veteran
Joined
Feb 21, 2018
Messages
2,226
Reaction score
1,634
First Language
EN
Primarily Uses
RMMZ
Yea, I'm guessing you could just replace the image's border-radius, fill, and animation stuff with an appropriate image property (background-image?) and use that to reference your custom image...hopefully that works with animated GIF/APNG, sounds like you know more than me. :kaoslp:

Good luck! :kaojoy:
 

KenSoulslayer

Graphic Designer/JS Dev
Member
Joined
Nov 29, 2020
Messages
26
Reaction score
10
First Language
Hindi
Primarily Uses
RMMZ
Yea, I'm guessing you could just replace the image's border-radius, fill, and animation stuff with an appropriate image property (background-image?) and use that to reference your custom image...hopefully that works with animated GIF/APNG, sounds like you know more than me. :kaoslp:

Good luck! :kaojoy:

I do know code :kaopride: but I am a complete beginner with RM :kaoswt:so I will experiment and post here if I find anything for others
 

caethyril

^_^
Veteran
Joined
Feb 21, 2018
Messages
2,226
Reaction score
1,634
First Language
EN
Primarily Uses
RMMZ
Aight, I just tried sticking an animated GIF in img/system and this edit seems to work for me:
Code:
#loadingSpinnerImage {
    margin: 0px;
    padding: 0px;
    width: 320px;
    height: 228px;
    background-image: url('../img/system/loading.gif');
}
Remember to change the width/height to match your image~ :kaophew:
 

KenSoulslayer

Graphic Designer/JS Dev
Member
Joined
Nov 29, 2020
Messages
26
Reaction score
10
First Language
Hindi
Primarily Uses
RMMZ
Aight, I just tried sticking an animated GIF in img/system and this edit seems to work for me:
Code:
#loadingSpinnerImage {
    margin: 0px;
    padding: 0px;
    width: 320px;
    height: 228px;
    background-image: url('../img/system/loading.gif');
}
Remember to change the width/height to match your image~ :kaophew:

:kaopride:Added your solution to the main post for other's reference:kaothx:
 
Last edited:

slimmmeiske2

Little Red Riding Hood
Global Mod
Joined
Sep 6, 2012
Messages
8,028
Reaction score
5,332
First Language
Dutch
Primarily Uses
RMXP

This thread is being closed, due to being solved. If for some reason you would like this thread re-opened, please report this post and leave a message why. Thank you.

 
Status
Not open for further replies.

Latest Threads

Latest Posts

Latest Profile Posts

Making Houses and Outside on the same map with RPG Maker MV!
Do people actually use buff/debuff function?
Ami


Imagine you (as Miner) Sleep in the Cave,the other side is a Bunch of Golds,how d'you feel?
finally got footage of my main character running around his corrupted street...
I finally got the ships and water to flow like I wanted to~ the canals are a success. Now to loop the animation for the kites. So many kites.

Forum statistics

Threads
107,702
Messages
1,031,532
Members
139,835
Latest member
dangkykubetim
Top