[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,222
Reaction score
1,630
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,222
Reaction score
1,630
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,222
Reaction score
1,630
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,011
Reaction score
5,325
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.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

Who would think putting a power button on a side of a laptop is a good thing? You want to move the laptop and you suddenly press the button.
The second draft of my script is almost done, and I don't think I'm going to write a third draft. I'll make changes to dialogue here and there, but I'm happy with the series of events the way they are.
How you feel about font and dialogue box changing for every main character while the minor cast and regular npc get their own styles? Too much?
Just found an obviously custom effect (i.e. edited by me) in my resources>sounds folder called "rip jaw off". Dear Lord what is wrong with me as a person that at some point I needed a sound *specifically* for THAT??
(...rhetorical question.)

Forum statistics

Threads
107,526
Messages
1,030,277
Members
139,652
Latest member
jasasewamobilbali
Top