初心者でもプロ並みの恋愛ゲームに！トランジション活用術【吉里吉里Z開発】

[temp id=2]

トランジションとは？

トランジションは簡単にいってしまうと、

画面切り替え時に、アニメーションさせる仕組みです。

吉里吉里/KAGでは、様々なトランジションを使うことができるので

上手く使いこなすことで、ゲームの演出がぐっと華やかになります。

この記事でどういった演出が可能になるか

サンプルを紹介していきますので

ぜひ参考にしていただければと思います。

【必須の前提知識】表画面と裏画面について

トランジションのサンプル紹介の前に

1つだけ必須の前提知識があるので説明させてください。

この部分は初めての方にはいまいちピンと来ない部分かと思いますので

しっかり読んで頂ければと思います。

吉里吉里/KAGにはレイヤーという概念があることは

こちらの記事で説明しましたが、

さらに「表画面」「裏画面」という概念が存在します。

表画面は現在見えている画面で

裏画面は現在見えていない画面です。

ぶたまんさん

見えていない画面を使うことなんてあるまんか？

かがや

うん、ここでトランジションが登場してくるんだよ

例えば

表画面の背景レイヤー画像に

裏画面の背景レイヤー画像に

と設定していたとします。

ゲーム上では当然、

表画面に設定されている画像が表示されているので

が表示されてますね。

さて、ここから場面の切り替えを行うとして

裏画面に設定している画像へ、表示を切り替えることにします。

今回はトランジションの一つ

クロスフェードトランジションで場面を切り替えたいと思います。

いかがでしょうか？

表画面で設定していた画像から

裏画面で設定していた画像へ

徐々にアニメーションしながら、

切り替わったのがわかりましたでしょうか？

さて、実際コードを書いて試してみましょう。

今回もきまぐれアフターさんから背景素材をお借りしておりますので

素材1

素材2

の2点をダウンロードして、

「data」→「bgimage」

の中に入れてください。

※画像名が長いため、それぞれforest.jpg、fantasy.jpgへ変更しています

次に「1.ks」に下記コードを書いてみてください。

;背景レイヤーに背景を表示
[image storage=forest.jpg page=fore layer=base]
[wait time=200]
*start|スタート
[cm]

;メッセージレイヤー0をテキスト表示に使用
[position layer=message0 width=800 height=195 left=0 top=420 frame=text_area.png margint=40 marginb=20 marginl=60 marginr=20]
;これから操作するレイヤー名を指定
[current layer=message0]
背景を切り替えます[l][r]

[er]

[backlay]
[image storage="fantasy" layer=base page=back]
[trans method=crossfade time=1500]
[wt]

背景が切り替わりました。

ここまで書けたら、保存をして、実行してみましょう。

いかがでしょうか？

こちらの動画と同じ動きになりましたか？

ぶたまんさん

[image]タグで変化させたい背景を裏画面に読み込んでいるまんね？

かがや

うん。

裏画面に画像を読み込む場合は、[image]タグのlayer属性でbackを指定するんだったね

ぶたまんさん

なるほど。

で、次の[tran]タグでトランジションの実行をしてるまんね

かがや

うん、そうだよ。

新しく出てきたタグについて、詳しく説明するね

まずbacklayタグの説明からしていきます。

backlayタグは、表画面のレイヤー情報を裏画面へコピーするタグです。

ぶたまんさん

ちょっと待つまん。

どうして表画面のレイヤー情報を

裏画面にコピーする必要があるだまん？

かがや

ここ、最初ピンとこないよね。

じゃあbacklayだけ消してもう一度実行してみようか

実行していただくとわかるかと思いますが

メッセージレイヤーに指定してあった背景画像が消えてしまいましたね＾＾；

文字も途中で消えてしまったのも確認できたかと思います。

もう一度おさらいすると

トランジションは、裏画面を徐々に表画面へ変化させていくものでした。

backlayタグを消すと

メッセージレイヤーの背景画像や文字が消えてしまったのは

裏画面にメッセージレイヤーの情報がなかったからです。

ぶたまんさん

なるほどまん。

トランジションは裏画面を徐々に表画面へ変化させていくから

トランジションの前に、今見えている画面をすべてコピーしないといけないまんね

かがや

そういうこと。

今回消えたのはメッセージレイヤーだけだったけれど

もし立ち絵を表示させている状態だったら、立ち絵も消えてしまうことになるんだよ

ここまで読んでみて

「小難しいことはやめて」

と思われた方は、とりあえず

トランジションを実行するにはbacklayタグが必須！

という風に覚えてしまってもOKです。

つまり

[backlay] 

[image storage="fantasy" layer=base page=back]

 [trans method=crossfade time=1500] 

[wt]

でワンセット、と覚えてください。

backlayタグは忘れがちなので

もしトランジションを実行してみて、おかしな動作をしたら

「backlayタグ書いたっけ？」

と見直して頂くと、解決することが多いかと思います。

ぶたまんさん

最後のwtタグはなんだまん？

かがや

wtタグはトランジションが終わるのを待つためのタグだよ。

これを忘れるとトランジションが終わらないうちに

次の処理に入っちゃうから、backlay同様忘れないようにしてね

さて順番が前後しましたが、次はtranタグについてです。

ぶたまんさんが先で言っていた通り、

tranタグはトランジションを実行するタグです。

今回tranタグで使用している属性を下記にまとめました。

■今回使用しているtranタグの属性

method

トランジションの種類を指定する

種類は、crossfade(クロスフェード)、scrooll(スクロール)、universal(ユニバーサル)の3種類ある

time

指定した時間に従ってトランジションを行う

※今回の例だと1500m(1.5秒)かけてクロスフェードを行う

ぶたまんさん

トランジションの種類の中にある、ユニバーサルってなんだまん？

かがや

ユニバーサルは、クロスフェードやスクロール以外のアニメーションをしたい場合に使うよ。

つまりユニバーサルにすると、より凝ったことができるかな。

ユニバーサルでは

ルール画像と呼ばれる画像を指定することで

どうトランジションするか、指定することができます。

・・・と言葉で書いてもピンと来ないかと思いますので

次の章で動作サンプルを動画つきで紹介していきます！

トランジション動作サンプル集(動画付き)

前章でトランジションには

クロスフェードトランジション
スクロールトランジション
ユニバーサルトランジション

の3種類あると説明しました。

ここではそれぞれどういう動きになるのか

サンプルを動画で紹介していきたいと思います。

クロスフェードトランジション

クロスフェードトランジションは

前章で動作サンプルも取り上げているので

ここでは説明を割愛しますが、

フェードイン・フェードアウトさせながら

アニメーションするトランジションです。

ベーシックなトランジションですが

場面切り替えでは使用しやすいトランジションかと思います。

スクロールトランジション

その名前の通り、

スクロールしながらアニメーションするトランジションです。

特徴的なのはstay属性を指定する点です。

stay属性には「stayfore」「stayback」が指定でき

これらを指定すると、表画面の画像をその場に留まらせながら

トランジションする演出になります。

それぞれの違いは

下記動作サンプルを確認してみてください。

■stay属性でnostayを指定(stay属性を指定しない)

■stay属性でstayforeを指定

■stay属性でstaybackを指定

ちなみにこのトランジション、

私は使ったことがありません＾＾；

とても特徴的なトランジションのため

少なくとも場面切り替えで使うことはないかな、、、

と思っています。

ユニバーサルトランジション

ユニバーサルトランジションで特徴的なのは

ルール画像とvauge属性を指定して

トランジションの仕方を指定する点です。

vagueはあいまいさ指定になり、

値を大きくすると、演出の切り替わりがぼやっとした感じになります。

先述した通り、

ユニバーサルトランジションを使用すると

クロスフェードやスクロールより凝った演出ができます。

次からは動作サンプルを合計17個紹介していきますので

よろしければ参考にしてみてください。

（ルール画像はFor Youさまのルール画像をお借りしました）

カーテン

■使用ルール画像：01.png

■動作サンプル

ハート

■使用ルール画像：10.png

■動作サンプル

中心から上下左右へ(ひし形)

■使用ルール画像：06.png

■動作サンプル

中心から上下左右へ(渦巻)

■使用ルール画像：223.jpg

■動作サンプル

中心から上下左右へ(波紋)

■使用ルール画像：92.png

■動作サンプル

中心から上下左右へ(ハート)

■使用ルール画像：13.png

■動作サンプル

上下から中心へ

■使用ルール画像：08.png

■動作サンプル

上から下へ(四角)

■使用ルール画像：22.png

■動作サンプル

斜め上から斜め下へ(四角)

■使用ルール画像：26.png

■動作サンプル

中心へ(渦巻状)

■使用ルール画像：150.png

■動作サンプル

中心へ(迷路)

■使用ルール画像：39.jpg

■動作サンプル

放射状(花形)

■使用ルール画像：80.png

■動作サンプル

上から下へ(渦巻状)

■使用ルール画像：137.png

■動作サンプル

下から上へ(波状)

■使用ルール画像：181.jpg

■動作サンプル

左から右へ(矢印状)

■使用ルール画像：186.jpg

■動作サンプル

左から右へ(ノイズ状)

■使用ルール画像：192.jpg

■動作サンプル

四角状

■使用ルール画像：202.jpg

■動作サンプル

なお動作サンプルのコードは下記になります。

;背景レイヤーに背景を表示
[image storage=forest.jpg page=fore layer=base]
[wait time=200]
*start|スタート
[cm]

;メッセージレイヤー0をテキスト表示に使用
[position layer=message0 width=800 height=195 left=0 top=420 frame=text_area.png margint=40 marginb=20 marginl=60 marginr=20]
;これから操作するレイヤー名を指定
[current layer=message0]
背景を切り替えます[l][r]

[er]

[backlay]
[image storage="fantasy" layer=base page=back]
[trans method=universal vague=1 time=1500 rule="ルール画像名"]
[wt]

背景が切り替わりました。
[s]

ユニバーサルトランジションは

設定次第で様々な演出をすることが可能ですので

ルール画像を変更してみたり、vaugeやtimeを調整してみたりして

お手元でいろいろ試してみてください＾＾

かがやのおすすめトランジションは？

ここまでトランジションの動作サンプルを

紹介してきましたが、いかがでしたでしょうか？

最後にちょっとした応用バージョン、

私も実際のゲームで使用している

おすすめのトランジションを紹介したいと思います。

暗転を使用して、次の場面へ切り替える

トランジションです。

動作サンプルはこちら↓

見ていただくとわかるかと思いますが

これまで紹介してきたトランジションよりも

ワンクッションおいた演出になっていることが

確認できるかと思います。

内部の動き的には

次の場面の画像を表示させる前に、

一度黒背景を表示させてから、次の場面の画像を表示させる

という動きをしています。

コードは下記になります。

;背景レイヤーに背景を表示
[image storage=forest.jpg page=fore layer=base]
[wait time=200]
*start|スタート
[cm]

;メッセージレイヤー0をテキスト表示に使用
[position layer=message0 width=800 height=195 left=0 top=420 frame=text_area.png margint=40 marginb=20 marginl=60 marginr=20]
;これから操作するレイヤー名を指定
[current layer=message0]
背景を切り替えます[l][r]

[er]

[backlay]
[image layer=base storage=black page=back]
[trans method="crossfade" time=1500]
[wt]

[backlay]
[image layer=base storage=fantasy page=back]
[trans method="crossfade" time=1500]
[wt]

背景が切り替わりました。
[s]

上記のコードでは

別途、黒背景の画像を使用しているので