memo

ゲーム制作やデザインについての個人的メモ

【ティラノスクリプト】クリック待ち画像を透過PNGにする+アニメーションさせる

12/10
[glyph]タグで表示位置を固定する場合について追記
コメントありがとうございます!

*****

クリック待ち画像(デフォルトでは文章の最後でぴょんぴょんしている水色のGIF画像)を透過PNGにしてCSSでアニメーションさせてみます。すこーしだけ本体部分を書き換えているので、バージョンアップに対応する際はご注意ください。

①画像を用意する

f:id:onigirimgmg:20170525010326p:plain
↑この画像を「nextpage.png」という名前で保存して、tyrano/images/system に入れます。「nextpage.gif」と同じフォルダです。
f:id:onigirimgmg:20170525180552p:plain:w300

②kag.tag.jsを書き換える

tyrano/plugins/kag/kag.tag.js を開いて、「nextpage.gif」を「nextpage.png」に書き換えます。テキストエディタの置換機能を使うと簡単にできます。
f:id:onigirimgmg:20170525181134p:plain:w300
Meryの場合:Ctrl+Rで「置換」を表示して、上のボックスに「nextpage.gif」を、下のボックスに「nextpage.png」を入力して「すべて置換」をクリックすると書き換えられます。

CSSを設定する

tyrano/tyrano.cssを開いてCSSを設定します。変更するのは170行目あたりにある「次へのクリックを促すアイコン」の下にある「.img_next」から始まる部分です。
f:id:onigirimgmg:20170525181714p:plain:w300

※[glyph]タグで表示位置を固定する場合はCSSの【img_next】の部分を【glyph_image】に変更してください。

いくつかサンプルを載せておきます。CSSアニメーションについて詳しく知りたい場合は各自でググってください。

点滅する

f:id:onigirimgmg:20170525183257g:plain

.img_next{
	-webkit-animation: next 1s ease-in-out infinite alternate;
	animation: next 1s ease-in-out infinite alternate;
}
@-webkit-keyframes next {
	0% { opacity:1; }
	100% { opacity:0; }
}
@keyframes next {
	0% { opacity:1; }
	100% { opacity:0; }
}
上下に動く

f:id:onigirimgmg:20170525190923g:plain

.img_next{
	-webkit-animation: next 1s ease-in-out infinite alternate;
	animation: next 1s ease-in-out infinite alternate;
}
@-webkit-keyframes next {
	0% {-webkit-transform: translateY(0px);}
	100% {-webkit-transform: translateY(3px);}
}
@keyframes next {
	0% {transform: translateY(0px);}
	100% {transform: translateY(3px);}
}
Y軸で回転する

f:id:onigirimgmg:20170525184418g:plain

.img_next{
	-webkit-animation: next 1s ease-in-out infinite alternate;
	animation: next 1s ease-in-out infinite alternate;
}
@-webkit-keyframes next {
	0% { -webkit-transform:rotateY(0deg); }
	100% { -webkit-transform:rotateY(180deg); }
}
@keyframes next {
	0% { transform:rotateY(0deg); }
	100% { transform:rotateY(180deg); }
}
360°回転する

f:id:onigirimgmg:20170525190245g:plain
f:id:onigirimgmg:20170525190222p:plain ←この画像を使いました

.img_next{
	-webkit-animation: next 2s linear infinite;
	animation: next 2s linear infinite;
}
@-webkit-keyframes next {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@keyframes next {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
拡大・縮小する

f:id:onigirimgmg:20170525185229g:plain
f:id:onigirimgmg:20170525185250p:plain ←この画像を使用しました

.img_next{
	-webkit-animation: next 1s ease-in-out infinite alternate;
	animation: next 1s ease-in-out infinite alternate;
}
@-webkit-keyframes next {
	0% { -webkit-transform:scale(1.0); }
	100% { -webkit-transform:scale(0.8); }
}
@keyframes next {
	0% { transform:scale(1.0); }
	100% { transform:scale(0.8); }
}

その他「こんなのできる?」というのがありましたらリクエストしてみてください。オリジナルのクリック待ち画像の制作も承ってます。お気軽にどーぞ。