RPGツクールMZでCSSを改造してNOW LOADING 画面を作る方法

手順

１、ゲームのプロジェクトフォルダの「css」フォルダ内にある「game.css」を開く
２、「#loadingSpinner」と「#loadingSpinnerImage」を以下のように変更する

#loadingSpinner {
    background-image:url(/img/pictures/NOW LOADING画面に利用したい画像の名前);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: auto;
    height: auto;
    z-index: 10;
    animation: fadein 2s;
    border-radius: 50%;
}

#loadingSpinnerImage {    
    margin: 0 auto;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    margin-top: 25%;
    border: 20px dotted rgba(255, 255, 255, 0.349);
    border-top: 20px dotted rgba(255, 255, 255, 0.315);
    animation: fadein 2s ease, spin 1.5s linear infinite; 
}

３、game.cssを保存する
４、ゲームを起動し、場所移動イベントなどで処理が重そうなマップに移動する

なぜこの機能を作ろうと思ったか

700*700くらいのマップを作ろうと思ったため。
（dataフォルダ内のjsonファイルを改造して作る。）

これくらいの大きさのマップを開くのには
だいたい3～4秒はかかるので
その間に何か画像が表示された方が面白いと思ったので作りました。

タイトル画面でもNOW LOADINGが表示されてしまう問題について

「main.js」の「showLoadingSpinner」下記の用にコメントアウトすると表示されなくなります。

    showLoadingSpinner() {
        // const loadingSpinner = document.createElement("div");
        // const loadingSpinnerImage = document.createElement("div");
        // loadingSpinner.id = "loadingSpinner";
        // loadingSpinnerImage.id = "loadingSpinnerImage";
        // loadingSpinner.appendChild(loadingSpinnerImage);
        // document.body.appendChild(loadingSpinner);
    }

自分で任意のカスタマイズをしたいときは

cssに何が書いてあるかわからない場合はcssの数値などをいじって
いろいろ試してみてください。

cssの説明に関しては下記のページがとてもわかりやすかったです。
※今回の改造もこちらを参照しながらいろいろ試しました。
https://developer.mozilla.org/ja/docs/Web/CSS/background

メモ

画面を拡大縮小してもちゃんと真ん中に表示されるようになっています。
ただ、真ん中のグルグルは画面を大きくしても小さくしても
大きさが常に一定になっています。
※本当は画面大きくしたらグルグルも大きくなるようにしたかったのですが
　やり方がわからなかったので諦めました。
　（誰か知ってたら教えてください。。。）

その他

記事の内容の正確性は保証できません。
内容は読者自身の自己責任の基にご利用ください。