ティラノスクリプト製ゲーム起動時にローディングを表示する

2018.05.24

ティラノスクリプト製のゲームは起動する際に真っ黒な画面がしばらく表示されます。この記事ではその空白時間をローディング画面に置き換えるソースコードを紹介します。

この記事で紹介する内容は黒キヅネさんが公開している以下の記事とは異なります。
Win,Macアプリ出力したゲームの起動を早くするカスタマイズコード

黒キヅネさんのものは「パッケージング後の実行ファイル起動時のウィンドウの表示を早くする」ことに重きを置いたもので、この記事は「ウィンドウ起動後にさらに存在している読み込みをする間、ローディング画面を表示しておく」ものです。

index.htmlを編集する

index.htmlに記載されているコードは主にlinkタグとscriptタグです。このscriptタグがティラノ本体であり、起動に時間がかかる要因です。 71行目あたりの**div id=”tyrano_base”**でシナリオファイルに到達するのですが、scriptタグを読み終わるまでシナリオファイルに何を記述しても無駄なので、index.htmlを編集したいと思います。

scriptタグをすべてbody内に移動させる

scriptタグは本来headタグの中におくべきものですが、実はbodyタグの中でも正しく動かすことができます。（linkタグはbody内では動きません）そこでscriptタグの読み込みを少しでも後回しにするため、bodyの中に移動させます。

scriptタグの順番が変わるとうまく動かなくなることがあるので、順番がかわらないように移動させます。 head内にあったscriptタグをすべてbodyが始まった直後に移動させてください。


【略】

</head>

<body onselectstart="return false" onContextmenu="return false" ontouchmove="event.preventDefault()" >

<script type="text/javascript" src="./tyrano/libs/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="./tyrano/libs/jquery-ui.min.js"></script>

【略】

<script type="text/javascript" src="./tyrano/libs/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="./tyrano/libs/lz-string.min.js"></script>
<script type="text/javascript">
function doScroll() { if (window.pageYOffset === 0) { window.scrollTo(0,1); } } 
window.onload = function() { setTimeout(doScroll, 100); }

</script>


<div id="tyrano_base" class="tyrano_base" style="overflow:hidden" unselectable="on" ondragstart="return false" ></div>

【略】

scriptタグの読み込みが開始される前にアニメーションを実行する

bodyにローディングアニメーションgifを置くだけでもいいのですが、個人的にcssアニメのほうが軽いし好きなのでcssアニメを使います。

利用するのはこちらから入手できるものです。
SpinKit | Simple CSS Spinners

今回使うのはキューブのやつ。ティラノスクリプト用に少しカスタマイズして入れ込みます。

CSSをhead内に追記

まず、ローディングを実行する範囲を指定します。以下の記述をheadが終わる直前に記載します。


<style>
.loadingWrap {
opacity: 1;
color: #fff;
position: absolute;
background: #000; /* 背景の色 */
z-index: 9999; /* 9999にして何が何でも1番上に表示 */
width: 100%; /* 幅と高さを100％にし全体を覆い尽くす */
height: 100%;
}
.loadingWrap p { /* Loading Now...の文字を表示するエリア */
position: absolute;
font-size: 25px;
top: 66%;
left: 43%;
}

.sk-cube-grid {
width: 40px;
height: 40px;
/* margin: 100px auto;　*/
margin: 300px auto; /* 真ん中に来るように少し書き換えています */
}
.sk-cube-grid .sk-cube {
width: 33%;
height: 33%;
/* background-color: #333; */
background-color: #fefefe; /* 黒背景なのでちょっと白っぽく変更 */
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
-webkit-animation-delay: 0s;
animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1); 
}
}

@keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
} 
}
</style>

CSSに対応するHTMLをbody内に追記

次にbodyが始まった直後に以下の記述をします。



<div class="loadingWrap">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
<p>Loading Now...</p>
</div>

これで起動するとローディング画面が表示されるようになります。

シナリオファイルでローディング画面を消す処理をする

このままだとシナリオファイルまで到達しても延々とローディング画面が表示されてしまいます。

なので、first.ksなどでローディング画面を消す処理を記述します。


【first.ksなど】
;必要に応じてローディング内に済ませておきたい処理を書いておく

;ローディングを消す
[wait time="1000"]
[iscript]
$('.loadingWrap').css({'display':'none'});
[endscript]

以上、ローディングが入ったあとにシナリオが開始されれば完成です。

いい記事だと思ったらシェアしてくれるとうれしいです！

Tweet Facebook はてブ!

りまねをフォロー

GitHub Twitter RSS