ティラノスクリプトでいろいろなものを回転させる方法
こんにちは！箱詰九分と申します。趣味でゲーム作ってて、最近はティラノスクリプトをよく使ってます。（もともとは Unity でいろいろ作ってました。今も Unity 触るよ）
ティラノスクリプト、すてきなツールですよね。比較的お手軽にノベルゲームが作れて、さらにノベルゲーム以外も作れてしまうという。私はティラノを触り始めてまだ半年ほどで、一本だけゲームを仕上げました。一応紹介させてください。
↓これです
「魔法少女にうってつけの日」！記念すべき私のティラノでの処女作です。
（ちなみに Unity だとこんなのも作りました↓２分くらいであそべるミニゲームです。）
さて、前置きが長くなってしまいましたが、ゲーム内でなんらかの「ものを回転させる」シーンはよく現れます。私はこの回転させるという動作がとても好きで、「魔法少女にうってつけの日」も、ゲーム内でキャラクターをほどよく回転させています。この記事では、そんな「ものを回転させる」という動作をティラノスクリプト でどのように実現するのか、についてまとめます。少し長くなりますがお付き合いください。
※ ティラノスクリプトと javascript の知識を必要とするため、初学者には少し難しいかもしれませんが、できるだけわかりやすく解説します。
ティラノスクリプト(V5)のサンプル (2021/4/1 時点でバージョンは 507a でした) を元に説明します。まずは普通にプレイしてみましょう。途中まで進めると、このようにあかねというキャラクターが表示されるはずです。
ソースコードの該当箇所は、"data/scenario/scene1.ks" 内の 62行目あたり。
#
誰だ！？[p]
;キャラクター登場
[chara_show name="akane" ]
#?
こんにちは。[p]
私の名前はあかね。[p]
#あかね
もしかして、ノベルゲームの開発に興味があるの？[p]ここにコードを挿入して、あかねを回転させてみましょう！
最も簡単な方法：[keyframe][kanim]タグを使って回転させる
最も簡単な方法は、ティラノスクリプトのタグを使って回転させる方法です。タグについての詳細は公式のタグリファレンスが詳しいのでそちらをご参考に。これらのタグによるキーフレームアニメーションは非常に強力で、さまざまなアニメーションを詳細に定義できるのですが、今回は回転に使いましょう。
まずは[keyframe]タグを使ってアニメーションを定義しましょう。今回は360度ぐるっと回転させるので、以下のように定義します。
;キーフレームアニメーションを定義
[keyframe name="spinner"]
[frame p=0% rotate="0deg" ]
[frame p=100% rotate="360deg" ]
[endkeyframe]次に、[kanim]タグでアニメーションを実行させます。パラメータについてはやはり公式のタグリファレンスが詳しいのでそちらをご参考に。
;キーフレームアニメーションを実行（パラメータはお好みで）
[kanim keyframe="spinner" name="akane" time="1000" count="infinite" easing="linear"]また、回転を極めるには、回転を止める方法も知らねばなりません。キーフレームアニメーションを停止させるには[stop_kanim]タグを用います。
;キーフレームアニメーションを停止
[stop_kanim name="akane"]ソースコード全体は下記のようになります。
#
誰だ！？[p]
;キーフレームアニメーションを定義
[keyframe name="spinner"]
[frame p=0% rotate="0deg" ]
[frame p=100% rotate="360deg" ]
[endkeyframe]
;キャラクター登場
[chara_show name="akane" ]
;キーフレームアニメーションを実行（パラメータはお好みで）
[kanim keyframe="spinner" name="akane" time="1000" count="infinite" easing="linear"]
#?
こんにちは。[p]
;キーフレームアニメーションを停止
[stop_kanim name="akane"]
私の名前はあかね。[p]
#あかね
もしかして、ノベルゲームの開発に興味があるの？[p]これで実行すると以下のように回転します！やったね！
余談ですが、キーフレームではrotateX、rotateY、rotateZ で軸を指定して回転させることもできるので、以下のような回転もできます。
;キーフレームアニメーションを定義
[keyframe name="spinner"]
[frame p=0% rotateX="0deg" rotateY="0deg" rotateZ="0deg" ]
[frame p=100% rotateX="360deg" rotateY="360deg" rotateZ="360deg" ]
[endkeyframe]はい。
角度をマイナスにすれば逆回転もできます。
[keyframe name="spinner"]
[frame p=0% rotate="0deg" ]
[frame p=100% rotate="-360deg"]
[endkeyframe]
glink に name を付ければ それも回せます。こんなふうに。
[kanim]は layer を指定することもできるのでこれだけでほとんどのものを回せます。最高ですね。
javascript で回転させる
キーフレームアニメーションだけで回転は事足りる気がするのですが、 javascript で回転させる方法についても後学のために見ていきます。まずは画面上の要素（あかねとか）を取得しなければなりません。そのために一旦ティラノスタジオのデバッグ画面で画面の要素を覗いてみましょう。
ティラノスクリプトでは各要素にクラス名が定義されているため、document.getElementsByClassName メソッドで要素を取得することができます。上画像の赤線で囲った部分があかねの要素なので、あかねを取得してみましょう。
;キャラクターを javascript で取得
[iscript]
let akane = document.getElementsByClassName("akane")[0];
[endscript]getElementsByClassName は配列を返すので、末尾に添字[0]を付けて先頭の要素のみを取得します。このとき、name="akane"の要素が予め画面上に表示されていない場合、getElementsByClassName は空の配列を返す（添字[0]で先頭の要素にアクセスしようとすると undefined になる）点に注意してください。また、akaneが複数存在する場合は上記だとどれか一つしか取得できません。
これでは不便なので、素直に jQuery を使いましょう。（jQuery って何？ってかたはぐぐってみてね。）ティラノスクリプトのプロジェクトには jQuery が含まれているので、[iscript]内で jQuery の構文を使用できます。jQuery の構文だと以下のようにあかねを取得できます。クラス名の先頭には"."を付けてください。
;キャラクターを jQuery で取得
[iscript]
let $akane = $(".akane");
[endscript]クラス名 akane が 複数ある場合もまとめて扱えるため、添字は不要です。
以下、要素を回転させる際には jQuery を使います。
さあ、回転させるぞ〜！！！
javascript から要素の css を書き換えることで回転を実現します。これって実は前述の キーフレームアニメーションとやってることは同じなんですよね。（ティラノのキーフレームアニメーションは元々 CSS のキーフレームアニメーション機能。） ここで言う javascript で回転させる、というのは、 キーフレームアニメーションでの回転を手作りする、みたいなものだと思ってください。
持続的に回転させるためには繰り返し処理が必要です。 javascript で繰り返し処理を実装する方法としては、 setTimeout を使う方法、 setInterval を使う方法、requestAnimationFrame を使う方法があります。（他にもあるかもしれませんがここでは割愛します。）個人的なおすすめは最も処理負荷が軽いと思われる requestAnimationFrame ですが、一応それぞれの実装を見ていきましょう。
● setTimeout を使う方法
setTimeoutを用いて以下のように実装できます。
#
誰だ！？[p]
;キャラクター登場
[chara_show name="akane" ]
;回転開始
[iscript]
let $akane = $(".akane");
let deg = 0;
f.id = 0;
let rotate = () => {
deg += 1;
deg %= 360;
$akane.css( { "transform": "rotate("+ deg +"deg)" } )
f.id = setTimeout(rotate, 1);
}
f.id = setTimeout(rotate, 1);
[endscript]
#?
こんにちは。[p]
;回転停止
[iscript]
clearTimeout(f.id);
[endscript]
私の名前はあかね。[p]
#あかね
もしかして、ノベルゲームの開発に興味があるの？[p]これで無事回りました！また、setTimeout の返り値を変数に保持し、それを clearTimeout に渡すことで回転を停止できます。
● setInterval を使う方法
setIntervalを用いて以下のように実装できます。この方法が一番シンプルかな？
#
誰だ！？[p]
;キャラクター登場
[chara_show name="akane" ]
;回転開始
[iscript]
let $akane = $(".akane");
let deg = 0;
f.id = setInterval(() => {
deg += 1;
deg %= 360;
$akane.css( { "transform": "rotate("+ deg +"deg)" } )
}, 1);
[endscript]
#?
こんにちは。[p]
;回転停止
[iscript]
clearInterval(f.id);
[endscript]
私の名前はあかね。[p]
#あかね
もしかして、ノベルゲームの開発に興味があるの？[p]こうなります。setInterval の返り値を変数に保存し、それを clearInterval に渡すことで回転を止めることができます。
● requestAnimationFrame を使う方法
requestAnimationFrame を用いて以下のように実装できます。実装は setTimeout と似ています。
#
誰だ！？[p]
;キャラクター登場
[chara_show name="akane" ]
;回転開始
[iscript]
let $akane = $(".akane");
let deg = 0;
f.id = 0;
let rotate = () => {
deg += 1;
deg %= 360;
$akane.css( { "transform": "rotate("+ deg +"deg)" } )
f.id = requestAnimationFrame(rotate);
}
f.id = requestAnimationFrame(rotate);
[endscript]
#?
こんにちは。[p]
;回転停止
[iscript]
cancelAnimationFrame(f.id);
[endscript]
私の名前はあかね。[p]
#あかね
もしかして、ノベルゲームの開発に興味があるの？[p]はい。requestAnimationFrame の返り値を変数に保存し、それを cancelAnimationFrame に渡すことで回転を止めることができます
setTimeout や setInterval と比べて回転がゆっくりですね。gif だとわかりづらいですが滑らかに動きます。しかし、setTimeout や setInterval に指定できた実行間隔は、requestAnimationFrame では指定できません。そこだけネックかな。
javascriptでの回転テクニック
●回転速度、回転方向
deg のところを修正すれば、高速回転や逆回転も実現できます。
こうしてみると...
deg -= 10;
deg %= 360;こう。
●3次元回転
親要素の transform-style に preserve-3d をセットすると擬似3Dっぽくなります。これと rotate3Dを使って3次元的な回転をしてみましょう。
#
誰だ！？[p]
;キャラクター登場
[chara_show name="akane" ]
;回転開始
[iscript]
$(".0_fore").css({"transform-style": "preserve-3d", "perspective": "640px"})
let $akane = $(".akane");
let deg = 0;
f.id = 0;
let rotate = () => {
deg += 8;
deg %= 360;
$akane.css( { "transform": "rotate3d(1,0.7,0.5,"+ deg +"deg)" } )
f.id = requestAnimationFrame(rotate);
}
f.id = requestAnimationFrame(rotate);
[endscript]
#?
こんにちは。[p]
;回転停止
[iscript]
cancelAnimationFrame(f.id);
[endscript]
私の名前はあかね。[p]
#あかね
もしかして、ノベルゲームの開発に興味があるの？[p]こうなりました。ちょっとかっこいいですね。
●なんでも回せる
ティラノスクリプト 上で作った要素（chara、image、button、glinkとか）はもちろん、ティラノスクリプト上で作った要素以外も回せるので、例えば 画面自体（tyrano_base）を回転させることもできます。こんなふうに。
とんでもないですね。
終わりに
いかがでしたか？いろんな回転がありましたね。基本的にはタグを使ったキーフレームアニメーションで回転させるのがいいと思います。ただ、 javascript を使えばもうちょっとだけ豊かな回転ができることをご紹介できたのではないでしょうか。ぜひみなさんも、ティラノでいろんなものを回してみてください！よき回転ライフを！
この記事が気に入ったらサポートをしてみませんか？