【Storyboard】立体的演出【Storybrew】

難易度: Advanced
範囲: Parameter, Vector Scale, Loop等

初めに.
そもそも、osuのStoryboardはXY平面上で動作しているため、立体的な処理が出来ません。ですが、ちょっとした工夫をすればある程度立体的な表現をすることが出来るようになります。

Paramete (FlipH, FlipV): 画像を反転させる働きをします。
Vector Scale (ScaleVec):X, Yそれぞれの拡大率を設定します。

演出01.
これらのコマンドを組み合わせてみましょう。

        public override void Generate()
        {
      var layer = GetLayer("");
            var BG = layer.CreateSprite("SB/bg_1.jpg", OsbOrigin.TopLeft);

            var startTime = 175627;
            var endTime = 233912;
            var beat = Beatmap.GetTimingPointAt(startTime).BeatDuration;

            BG.Scale(startTime - beat, endTime, 480/768.0 * 1.1, 480/768.0);
            BG.Fade(startTime - beat, startTime, 0, 1); 
            BG.Fade(endTime, endTime + beat, 1, 0);
            BG.Move(startTime, -107, 0);

            var n_sakura = 500;
            var sakura = new OsbSprite[n_sakura];

            for (var i = 0; i < n_sakura; i++){
                if (i % 2 == 0){sakura[i] = layer.CreateSprite("SB/sakura_1.png");}
                else {sakura[i] = layer.CreateSprite("SB/sakura_2.png");}

                var sakuraStart = Random(startTime - beat, endTime - beat);
                var sakuraTime = Random(3000, 8000);
                var sakuraEnd = sakuraStart + sakuraTime;
                var Ys = Random(50, 600);
                var Ym = Random(-400, -50);
                double Ss = Random(40, 75); Ss /= 100.0;
                double Srx = Random(-6, 6) * Math.PI;
                var Srz = Random(1, 8);

                sakura[i].Fade(sakuraStart, sakuraEnd, 1, 1);
                sakura[i].Scale(sakuraStart, Ss);
                sakura[i].Rotate(sakuraStart, sakuraEnd, 0, Srx);
                sakura[i].MoveX(sakuraStart, sakuraEnd, -120, 800);
                sakura[i].MoveY(sakuraStart, sakuraEnd, Ys, Ys + Ym);
                sakura[i].Additive(sakuraStart, sakuraStart);

                if(Srz > 0)
                {
                    sakura[i].StartLoopGroup(sakuraStart, Srz);
                    sakura[i].ScaleVec(OsbEasing.InSine, 0, (sakuraTime / Srz) / 2, Ss, Ss, Ss, 0);
                    sakura[i].FlipV((sakuraTime / Srz) / 2, (sakuraTime / Srz) /2);
                    sakura[i].ScaleVec(OsbEasing.OutSine, (sakuraTime / Srz) / 2, (sakuraTime / Srz), Ss, 0, Ss, Ss);
                    sakura[i].EndGroup();
                }
            }

先ほどの2コマンドとRotateを組み合わせることによって二軸回転をさせています。現実的にはこのような動きはしないのですが、SBの演出としては十分でしょう。
最後のIF内にあるLoop処理が特徴的です。LoopGroupの記述方法は公式wikiを参照してください。

演出02.
Scaleを第三の軸, Z座標として扱うことが可能です。サイズを大きくすれば近づく、小さくすれば遠くなるのと同じような見え方をします。遠近法的なアレです。
具体例は割愛。

演出03.
Animationに頼る方法。その方が楽な場合もあるので覚えていても良いと思います。


補足.

var beat = Beatmap.GetTimingPointAt(startTime).BeatDuration;

公式wikiにはBeatmap Dataのページに載っています。
Beatmap.GetTimingPointAt(time)でtimeにおけるデータを取得します。今回の場合、BeatDurationと続けることで一拍の長さを変数"beat"に入れています。

var BG = layer.CreateSprite("SB/bg_1.jpg", OsbOrigin.TopLeft);

OsbOriginは重心の設定だと導入編で説明しました。今回の場合はTopLeft, 左上が重心となっています。

【Storyboard】雪エフェクト【Storybrew】

難易度: Basic

雪エフェクトの使用例: EMILIA (CV: Rie Takahashi) - Stay Alive

範囲: Move, Scale, for構文, Random

EGOIST - Ame, Kimi o Tsurete

今回はこの譜面で進めていきます。

http://puu.sh/wi0cM/d2c0772602.png

雪の画像はこちらからどうぞ。

STEP 01.

public override void Generate()
        {
            int number = 200;

     var l = GetLayer("");
            var SnowPath = "SB/dot_0.png";
            var Snow = new OsbSprite[number];

        }

number: 雪の個数を指定。
SnowPath: 雪画像のパスを指定。自分のmapsetに合わせて変更すること。
Snow = New Osbsprite[数]: 同じ画像を複数回用いるときに使う。

STEP 02.

public override void Generate()
        {
            int number = 200;

            var l = GetLayer("");
            var SnowPath = "SB/dot_0.png";
            var Snow = new OsbSprite[number];

            int startTime = 55246;
            int endTime = 76116;

            for (var i = 0; i < number; i++){

                var snowStart = Random(startTime, endTime);
                Snow[i] = l.CreateSprite(SnowPath, OsbOrigin.Centre);
            }

        }

for (---; ---; ---){}: 超重要。適当に解説しているサイトを見ると良い。
int startTime / endTime: 雪の降り始める時間の範囲を指定。
snowStart: startTime~endTimeの間のランダムな数値が入る。これによりそれぞれの雪画像が別々の時間に降り始めるような設定が出来るようになる。
snow[i]: 先ほどforの中身がnumber回繰り返されると説明したが、i値はの1週するたびに1ずつ増えていくため、Snow[0], Snow[1], Snow[2], ...., Snow[199]と同じ役割を果たす。

STEP 03

public override void Generate()
        {
            int number = 200;

            var l = GetLayer(""); 
            var SnowPath = "SB/dot_0.png";
            var Snow = new OsbSprite[number];

            int startTime = 55246;
            int endTime = 76116;

            for (var i = 0; i < number; i++){

                var snowStart = Random(startTime, endTime - 4000);
                var startX = Random(-120, 840);
                var MoveX = Random(-50, 50);
                var FallTime = Random(4000, 8000);
                Double sScale = Random(40, 80); sScale /= 100.0;

                Snow[i] = l.CreateSprite(SnowPath, OsbOrigin.Centre);

                Snow[i].MoveX(snowStart, snowStart + FallTime, startX, startX + MoveX);
                Snow[i].MoveY(snowStart, snowStart + FallTime, -20, 500);
                Snow[i].Scale(snowStart, sScale);

            }

        }

Double sScale: Scaleは小数になるため、varではなくdoubleを使用している。40~80のランダムの数値を生成→100で割るという手順を踏むことで0.01単位の0.40~0.80の範囲のランダムな数値を得ることが出来る。
MoveX: 一直線に落ちてくるだけだと見栄えが良くないため左右の揺れ幅を追加。範囲をRandom(20, 100)のようにすると風が吹いているかのような演出にすることが出来る。


以上で雪エフェクトの作成完了です。

Additiveコマンドを入れるとより綺麗に見えると思います。
自分なりに数値をいじったり、画像を変更したりして是非応用してみてください。