ITGギミック作成記2: 続・Red Swan D21の最初を作る (FGテンプレ)

一通りStepManiaもしくはITGの譜面が作れるようになって、ちょっとギミックを使って演出を強化したりプレイヤーの邪魔をしたりしたいな、という方向けにいくつか記事を書いていこうと思います。第2回です。

 

第1回では譜面をワープさせる方法と、背景を光らせる方法について紹介しました。しかしながら、目標とするギミックでは背景ではなく矢印の手前側が光るようにしなければなりません。なので、今回はその方法について書いていきます。

 Red Swan D21 (Pump It Up Prime)

前回から引き続いて、これの最初の、同時を踏むと画面が光って譜面がワープしてくる演出を作ります。そのために、矢印の手前側を弄る方法を紹介します。

 

#FGCHANGESを使う (ポッター三部作を目指す)

矢印の手前側を弄りたいなら、BG (background) ではなくFG (foreground) を弄るしかありません。ですが、#FGCHANGESは一筋縄では動きませんので、かなり長くなります。

しかし#FGCHANGESが少しでも使えるようになれば

 こんな譜面が簡単に描けるようになりますので、ここを覚えるだけでかなり幅が広がるはずです。頑張りましょう。

まずは完成形からコピペしてくるのが一番簡単です。天下りになってしまいますが、まずはこの通りに動かしてみてください。

 

1. 曲フォルダ内に"fg"フォルダを作成

f:id:paraphrohn:20190616231905p:plain

前回の記事で作成した曲フォルダです。まずはここに、適当な名前の新規フォルダを作成します。今回は"fg"という名前で行きます。

 

2. smファイルの#FGCHANGESにフォルダ名を記載

f:id:paraphrohn:20190616232125p:plain

前回のsmファイルです。10.000のタイミングでfgを表示させたいので、そこに命令を入れます。フォーマットは

(FGを入れたい拍)=(フォルダ名)=1=0=0=1

です。ファイルではなくフォルダを指定するので拡張子は不必要です。

 

3. "fg"フォルダ内に"default.xml"を作成

f:id:paraphrohn:20190616233138p:plain

分かりにくいですが先ほど作成したfgフォルダの中身です。default.xmlを作成しました。前回の記事でも軽く触れましたが、StepMania3.9はiniを、openITG/notITGはxmlを、StepMania5はluaを読みに行きます。なので、今回はnotITGでのみ動くことを想定しています。

あと書き忘れていましたが、この手のファイルはメモ帳で編集しないほうが良いです。notITGの公式サイトでも七色に光る文字でメモ帳は使うなって書いてあります。代わりにお勧めされてるのはSublime Textですが、これは日本語非対応なので……筆者はTeraPadを使っていますがこれもお勧めしないです。この手のエディタは戦争に発展しかねないのでこれ以上はやめておきます。

 

4. FGに表示したいファイルを"fg"フォルダ内に用意

f:id:paraphrohn:20190616235439p:plain

画像でも動画でも大丈夫です。画像はpng、動画はxvid形式のaviを推奨します。pngは透過画像でも対応しますが、aviの場合透過に対応する形式は再生できませんので実質透過不可能です。ご注意ください。また画像・動画サイズは640x480*1にしておくと色々楽です。

今回は

・透過情報のないpng画像 (fg.png)

・背景が透過されているpng画像 (fg2.png)

・動画 (fg.avi)

の3種類を用意してみました。動画はNHKクリエイティブ・ライブラリー様から拝借させていただきました。

 

5. default.xmlの中身を書く

このテンプレだけ用意しておけば何でもできます。

f:id:paraphrohn:20190617002247p:plain

<ActorFrame><children>

<Layer File= "fg.png"

OnCommand="

x,SCREEN_CENTER_X;

y,SCREEN_CENTER_Y;

zoom,640/(SCREEN_WIDTH);

diffusealpha,1.0;

sleep,2.0;

diffusealpha,1.0;

linear,1.0;

diffusealpha,0.0;

"

/>

</children></ActorFrame> 

 （コピペ用）

詳しい説明は省きますが、こうやって打ってnotITGで再生してみますと、

こうなります。10拍目にfg.pngが表示されて、2秒後に薄くなり始めてやがて消える感じです。邪魔すぎて何も見えませんね。

試しにFileを "fg.png"から"fg2.png"に変更してみます。こちらは背景が透過されているものです。

背景がフラッシュしてるのが分かりますね (BGCHANGESによるものです)。また、矢印も（身体で隠されている部分以外は）見えるようになっています。これが透過pngです。

 

さらにFileを "fg.avi" に変更してみましょう。これは動画ファイルですが……

かき氷ができる動画のはずなんですが、ちょっと何が起こってるかわかりませんね。表示時間が短すぎるためです。譜面は元から見えてませんので、表示時間を伸ばしてみましょう。そのためには上のテンプレを少し理解する必要があります。見るべきはOnCommandのあとの、"で囲まれた範囲内です。

 

1. x,SCREEN_CENTER_X; y, SCREEN_CENTER_Y; zoom, 640/(SCREEN_WIDTH)

なんとなくやってることは分かると思います。画像の表示位置をスクリーンの真ん中にして、サイズを640x480に合うように拡大しているだけです。

解像度が別の場合は、適当にzoomの後を960/(SCREEN_WIDTH)にしたりすればいいです。

 

2. diffusealpha,1.0; (以下省略)

ここでFGの動かし方が決まります。各個説明します。

diffusealpha: FGの不透明度 (0～1) を決めます。0ならば表示されず、1なら完全に不透明になります。

sleep: 今その瞬間の状態で、数字 (秒) ぶんだけ静止します。

linear: 今その瞬間の状態から、次の状態 (diffusealphaなど) に向けて、数字 (秒) だけかけて滑らかに変化させます。

つまり、sleep,2.0の、2.0を大きくすれば動画の表示時間が伸びるはずです。試しにこの行をsleep,10.0;にしてみます。

かき氷が表示されました！　動画の表示時間が伸びたことがよくわかります。

基本は上の3つだけで何とかなりますが、例えばFGを動かしたいときは

linear, 2.0; addx, 320;など入れてやれば右方向に動画がヌルヌル動いていきます。

また、linearだけだと動きが単調すぎる！ という場合にはaccelerateもしくはdecelerateを使うことで、それぞれ加速的に、減速的に動いてくれます。色々試してみてください。

 

ともあれこれでFGが表示できました。正直この後の需要がどれだけあるかと言えばほとんどない気がするんですがこれを使って画面を光らせてみましょう。

 

画面を光らせる

画面フラッシュというのは、簡単に言えば画面が一瞬真っ白になる→少しずつ薄くなるだけです。これをFGで考えれば、真っ白い画像を表示させて、その不透明度を下げていけば再現できそうですね。やってみましょう。

f:id:paraphrohn:20190617004854p:plain

640x480の真っ白画像を用意しました。

 

f:id:paraphrohn:20190617005015p:plain

default.xmlはこんな感じです。不透明度MAXでまっ白い画像を出して、それが0.5秒で加速度的に薄くなる命令です。

光りました。完璧ですね。あとはソフランさせたり同時にしたりすればどう見てもRed Swan D21の完成です。記事2回分にわたって解説してきたRed Swan D21の作り方ですが、終わりはあっけないものです。

 

ところで毎回真っ白い画像を用意するのはめんどくさいです。というかこの程度のエフェクトで外部ファイルに頼らないといけないというのはなんとなくアホらしいです。何せStepManiaは外部ツール無しで球体のモデルを表示したりできますからね。

 実際、ITGには長方形を出力する命令があります。それがType= "Quad"です。これは真っ白な長方形を出力してくれます。

f:id:paraphrohn:20190617005854p:plain

というわけでType= "Quad"を使ってxmlを書いてみました。Quadには縦横の情報がありませんのでzoomto,x,y;でサイズを命令しています。あとはそのままです。

上のwhite.pngを使った例と一緒のエフェクトができています。こっちの方が楽でいいですね。しかも、Quadはレイヤーとしては最も軽いレイヤーで、動作に影響をほとんど及ぼしません。なので目的がこれだけならQuadを使う方が賢いです。

あとQuadを使うことにはこんな利点もあります。

f:id:paraphrohn:20190617010401p:plain

diffusealphaでは不透明度だけを指定しますが、diffuse,x,y,z,aという表記にするとxyzがそれぞれ赤青緑に対応して色を付けることができ、残ったaが不透明度になります。上の例では、1,0,0 (真っ赤) から0,1,0 (真っ青) に変化しつつ、透明になっていくという命令になっています。

こんな気持ち悪いエフェクトになります。いろんな色で光らせたいときは是非Quadを使いましょう。

 

 

そんなQuadですが、次回以降大活躍します。次は今回覚えたフラッシュを利用して、Twist of Fate D20の低速の作成に挑戦します。それではまた次回。

分からないことや動かないなどあればtwitter @paraphrohnまでお願いします。

 

 

追記

addxで動画をヌルヌル動かしていく例です。

f:id:paraphrohn:20190617013006p:plain

 

*1:普段のプレイ環境の画面サイズが違う場合、そのサイズ