Storyboardingについての簡易的なまとめになります。
SBを今後作ってみたい人が対象ですが、Modderとして勉強する方も軽く読んでみるとよいでしょう。
※公式wikiに載っていることを、私見を交えつつまとめたスレッドになります。
※このまとめは情報のみを取り扱い、センスに関わる部分は一切触れません。
センスください。
※画像の編集に関しては扱いません。
というか私が苦手なので、それに関する知識を募集しております。
※一部古い知識が混ざっていることがあります。
※思いつきで書いたので、誤字脱字/説明不足な点があるかもしれません。何かあれば指摘して頂けると助かります。
※質問には私がアクティブな間は対応をするつもりです。書かれていないことで分からないことは気軽に質問してください。
※「ここの考えはおかしくね?」「こうした方がよくね?」等の突っ込みは歓迎します。
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
Storyboardingとはなにか
SBで使用するもの
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
ランクのためのルール
Editorの使用法
Scripting
上記の解説でEditorを通してできることを説明しました。
しかしそちらでは"粗い"設定しかできず、細かな設定をしようとするとスクリプトを記述しなくてはいけません。
ここではSBの作成で避けて通れない記述について触れます。
コードの構成
オブジェクト定義
静止画
アニメーション
コマンドの記述箇所
SBコマンド
サウンド
マクロ
osbファイルに限定されますが、マクロも対応しております。
しかし経験則上、不幸な事故が多々発生しているので、個人的には使用は勧めません。
小ネタ/その他の情報
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
リンク集
wiki:Storyboarding
wiki:Storyboard Scripting
The new SGL Tool (Beta) - Generate (C#によるコーディングを可能にするツール)
osu!dots V0.11 (大量の小さなドットを表示するエフェクトのコード化を補助するツール)
日本語フォーラム : 初心者Modder向け - Moddingガイド
Clibor (クリップボードにコピーしたものを履歴として一覧に保存できるフリーソフト、地味に便利)
GIMP (画像の簡易的な編集ができ、osu用途では一通り必要なことができます)
waifu2x (劣化を抑えて画像を拡大してくれるサイト)
サクラエディタ (テキストエディタ、メモ帳だとできないあれこれができるので入れておくと何かと便利です)
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
最後に
SBと聞いて特殊な技術が必要で、難易度の高い事だと感じてしまい手を出さない方は多いと思います。
しかし実際はメモ帳に落書きをするだけの単調作業、強いて言うなら計算が面倒なだけで大した事はありません。
最初は試行錯誤を繰り返し、浮かんだアイデアを試し、コードのミス探しをすることになるでしょう。
その楽しみはストーリーボードを作る人にしか分からない楽しさです。
アニメやゲームのOPを見て、どうすればこの表現ができるのかを分析し始める域にまで達すれば、立派なストーリーボーダーです。
まずは背景画像を試しに動かすところから始めてみてください。
SBを今後作ってみたい人が対象ですが、Modderとして勉強する方も軽く読んでみるとよいでしょう。
※公式wikiに載っていることを、私見を交えつつまとめたスレッドになります。
※このまとめは情報のみを取り扱い、センスに関わる部分は一切触れません。
センスください。
※画像の編集に関しては扱いません。
というか私が苦手なので、それに関する知識を募集しております。
※一部古い知識が混ざっていることがあります。
※思いつきで書いたので、誤字脱字/説明不足な点があるかもしれません。何かあれば指摘して頂けると助かります。
※質問には私がアクティブな間は対応をするつもりです。書かれていないことで分からないことは気軽に質問してください。
※「ここの考えはおかしくね?」「こうした方がよくね?」等の突っ込みは歓迎します。
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
Storyboardingとはなにか
そもそもStoryboarding(以下SB)とは何か?というお話です。
動画が入っていないのに背景の画像が動いたりしていませんか?それがSBです。
拘りの塊のようなものは複雑なコードから成り立つため、高度な技術や外部ツールの使用が必要となりますが、
ゲストマッパーの名前を表示したり、背景画像の入れ替え程度であれば初心者でもできます。
ここでは外部のツールを使用せず、Editorとテキストエディタのみでできる事を解説していきます。
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――動画が入っていないのに背景の画像が動いたりしていませんか?それがSBです。
拘りの塊のようなものは複雑なコードから成り立つため、高度な技術や外部ツールの使用が必要となりますが、
ゲストマッパーの名前を表示したり、背景画像の入れ替え程度であれば初心者でもできます。
ここでは外部のツールを使用せず、Editorとテキストエディタのみでできる事を解説していきます。
SBで使用するもの
- 使用する画像
- テキストエディタ
- 電卓
- 少々の英語力
- 挫けぬ心
- 時間
- センス
- 使用する画像
これに関してはランクのためのルールを守っているサイズを採用しなければいけません。
また同時に大量に画像を表示する場合、その容量が大きいと処理落ちでまともにSB作成ができなくなるため、適したファイル容量の画像を採用してください。 - テキストエディタ
サクラエディタなどのテキストエディタがコードを手打ちで作成する時に必須になります。早い話がメモ帳でもいけます。 - 電卓
計算さえできれば電卓でもエクセルでもなんでも良いです。
マニュアルで作っていく場合、数字の計算は避けて通れません。
頭の中で計算すると疲れます。 - 少々の英語力
osu!は外国のゲームです。英語ができないからといって、全てを投げ出すことは許されません。
google翻訳やweblioのようなサイトを使って乗り越えてください。 - 挫けぬ心
コードを手打ちしていると、"何故か画像の表示がおかしい"、"計算が複雑すぎて心が折れそう"と言った場面にはよく出会います。
日常茶飯事です。
SBの作成には忍耐力が必要なのです。 - 時間
どの程度のコードを作るのかによって左右されます。
力を注ごうと思うといくら時間はあっても足りません。 - センス
知識があってもアイデアが無ければ意味を成しません。
というか私もこれが欲しいです。
ランクのためのルール
Rankを狙う者に付き纏う面倒なルールたちです。
狙わないで自由気ままに作る人は無視しても構いません。
ただしエロ画像は狙う狙わないに関わらず許されません。
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――狙わないで自由気ままに作る人は無視しても構いません。
ただしエロ画像は狙う狙わないに関わらず許されません。
- 画像サイズ
1920x1200ピクセルがルール上使用できる上限となります。つまりそれ以下であればどんなサイズであっても許容されます。
内部の解像度は854*480ですが、近年は4Kといった高解像度の普及に伴って、ある程度の大きさの画像の使用が容認されています。
ただし「1920x1200以下であっても大きい画像を極端に縮小して使用すること」は避けてください。
画像は"適度な大きさ"のものを使用してください。 - 画像の回りに不必要な透明なエリアを設けてはいけない
上記の説明通りですが、透明部分が何かしらの理由で必要な場合はそれの説明をすることで使用が許可されます。 - 画像が激しく点滅したり、振動するエフェクトを入れる場合、"epilepsy warning"を有効にしなくてはならない
てんかんの人への対応として、そのマークを必ず入れなくてはいけません。
その設定はsong setup>designからできます。
Editorの使用法
まずEditorのDesignタブを開いたときの表示を画像で説明します。
上記選択肢にない設定、微妙な数字の設定などはSBコマンドとScriptingの項目で扱います。
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――- Layer Toggles
どのレイヤーを表示するかになります。Backgroundが一番下で、Failing、Passing、Foregroundの順に再生時に手前に表示されていきます。
FailingとPassingはプレイヤーのHPに依存し、条件を満たしている一方のみが再生されます。 - Transformation
各種エフェクトの追加をします。ここで画像にエフェクトを与えます。- Move
画像移動させます。画像の表示位置を設定する際に使用することも多々あり、他のエフェクトと合わせてよく使用されるコードとなります。
画像を選んでクリックした状態でカーソルを動かすと、指定した場所に画像を移動させることができます。
この際、Shiftを押しながら動かすと、X軸もしくはY軸をズラさずに綺麗に移動させることができます。
W、A、S、Dキーでも一応移動はさせられます。少ししか動きませんが…。 - Scale
画像の拡大縮小をします。
画像をクリックをしたまま、カーソルを上下に動かすと左右の画像比率をそのままに、サイズ変更が可能になります。
また画像では説明をしていませんが、このScaleのみさらに3つのコードを有しています。- Vector
Scale同様に画像のサイズを変更しますが、上下と左右で別々の拡大/縮小率を設定できます。
つまり画像を横長にさせる、といったことが可能ということです。 - Horizontal Flip
左右反転させます。これは回転のエフェクトとは違い、画像をそのまま反転させるので使い分けが必要になります。
キーフレームに入れた段階でエフェクトが適用されます。 - Vertical Flip
上下を反転させます。それ以外は上記の左右反転と同じです。
- Vector
- Fade
画像の透過をします。
他のものと同様に、クリックをしたまま上下にカーソルを移動させることで透過率を変えられます。 - Rotate
画像を回転させます。
クリックをしたまま上下にカーソルを移動させることで回転させられます。
何周も回すとその分だけさらに回転します。 - Colour
画像の色を変更します。
キーフレームを入れる際にその色を選ぶことで、画像に対してその色を加えて色合いを変えます。
画像を選択してからタイムライン下の"+"でキーフレームを挿入できます。
キーフレームが入った後は画像に各種エフェクトの調整(透明度や座標変更など)をするだけです。
2箇所に正しく入ると上記の画像のように、タイムライン上の対応したエフェクト欄に線が引かれ、
どこからどこまでエフェクトが入っているのかを確認できます。
間違えて入れた場合や消したい場合、削除したいエフェクトを左クリックで選び、消したいラインへ移動してから"-"で削除できます。
その横にある巻き戻しと早送りのような記号は、選んでいるエフェクトの次のキーフレームに移動します。
スナップしていない箇所に引いてしまったキーフレームは、この機能を使わなければ削除が困難です。
EditorでSBを作る場合、この入れたいタイミングに移動して、エフェクトを選んでタイムラインを入れる一連の作業がメインとなります。 - Move
- Tweening
同じエフェクトで、変化していく過程を補うかどうかを設定します。
例えばAからBへと移動させていくエフェクトに対してこれが有効な場合、再生時にAからBまでスムーズに画像が移動していきますが、
無効な場合は再生時にBのキーフレームになった瞬間、画像がAからBへと瞬間移動します。 - Easing
エフェクトを徐々に早めていく、あるいは徐々に遅くしていく効果を入れます。
Inで最初が遅く/終わりは早く、Outで最初が早く/終わりは遅くとなります。 - Origin
画像の中心点を決めます。Centreで中心、Top-Leftで左上
例えば画像にRotateエフェクトを追加する場合、中央のときは画像を中心としてぐるぐると回りますが、
Top-Leftの場合は画像の左上を中心として回ります。 - Advanced
コードをosuファイルに記述するかどうかです。デフォルトではosbファイルに書かれますが、この難易度にだけSBを入れたい…と言った場合にこのチェックを入れます。
osbファイルはフォルダ中全ての難易度に、osuファイルはその難易度だけに影響を与えます。
上記選択肢にない設定、微妙な数字の設定などはSBコマンドとScriptingの項目で扱います。
Scripting
上記の解説でEditorを通してできることを説明しました。
しかしそちらでは"粗い"設定しかできず、細かな設定をしようとするとスクリプトを記述しなくてはいけません。
ここではSBの作成で避けて通れない記述について触れます。
コードの構成
まず最初にコマンドの構成を解説します。
コマンドはどの画像を表示するか指定するオブジェクト定義。
その画像にどういったエフェクトを追加するかを設定するコマンド。
以上の2つから成り立ちます。
あらゆる定義、コマンドは一つ記述する毎に改行を入れます。
またコマンドは一つのオブジェクトに対して複数有効で、1つのオブジェクト定義の下でエフェクト毎に改行をして入れていきます。
コマンドはそれぞれコードの頭に半角スペースを1つ、一部のコードは2つ入れる必要があります。
1つの定義は1つのオブジェクト表示にのみ対応します。
コマンドはどの画像を表示するか指定するオブジェクト定義。
その画像にどういったエフェクトを追加するかを設定するコマンド。
以上の2つから成り立ちます。
あらゆる定義、コマンドは一つ記述する毎に改行を入れます。
またコマンドは一つのオブジェクトに対して複数有効で、1つのオブジェクト定義の下でエフェクト毎に改行をして入れていきます。
コマンドはそれぞれコードの頭に半角スペースを1つ、一部のコードは2つ入れる必要があります。
Sprite,Foreground,CentreLeft,"SB\ef1.png",-30,400 <-オブジェクト定義その1ちなみに同じ画像を同時に複数の場所で表示したい場合、それぞれのオブジェクトに対して定義をし直す必要があります。
F,0,-100,300,0,1 <-コマンドその1
S,0,0,,0.8 <-コマンドその2
Sprite,Foreground,CentreLeft,"SB\ef2.png",210,160 <-オブジェクト定義その2
F,0,-100,300,0,1 <-コマンドその1
S,0,0,,0.8 <-コマンドその2
1つの定義は1つのオブジェクト表示にのみ対応します。
オブジェクト定義
静止画
全てのコードの根幹となるオブジェクトを指定する記述から解説します。
この記述の後、改行をしてそこに各コマンドを打ち込むことで、初めてコードとして意味を成します。
Sprite,<レイヤー>,<原点>,"<ファイルの場所>",<x座標>,<y座標>これが普通の画像を指定するときのオブジェクト定義となります。
- レイヤー
オブジェクトが表示されるレイヤーを指定します。
Background/Fail/Pass/Foreground
上記の内4つのどれかを入れます。
ただ個人的には混乱を避けるためにForegroundの使用を推奨します。 - 原点
中心点を決めます。Editorだとここで中心か左上しか選べませんが、
ここで記述すると中心と四隅に加え、特定の面の中心を原点として設定できます。
TopLeft/TopCentre/TopRight:順に左上、上中央、右上
CentreLeft/Centre/CentreRight:順に左中央、中央、右中央
BottomLeft/BottomCentre/BottomRight:順に左下、下中央、右下
Top、Centre、Bottomで原点のY座標を決め、Left、Centre、Rightで原点のX座標を決めます。
特に何もなければ中央を選ぶCentreを記述するのが良いでしょう。 - ファイルの場所
表示したい画像のファイルパスを記述します。
ただし記述は曲のフォルダ内以下のファイルパスのみの記述となります。
D:\osu!\Songs\artist - title(creator)\SB\BG02.jpg
例えば表示したい画像が上記のファイルパスを持つ時、実際の記述では"SB\BG02.jpg"のみを書くことになります。
もし画像がosuファイルやmp3と同じ階層にある場合は、"BG02.jpg"のみを書くことになるでしょう。
拡張子は忘れずに。 - x座標/y座標
デフォルトでは320,240になっています。
後述のMoveコマンドと競合する場合、Moveコマンドが最優先となるため、デフォルトの数字を当てはめたままでも問題は起こりにくいです。
Sprite,Foreground,Centre,"SB\BG02.jpg",320,240大文字小文字でも判別されます。完全に同じように記述をしてください。
この記述の後、改行をしてそこに各コマンドを打ち込むことで、初めてコードとして意味を成します。
アニメーション
アニメーションも対応しています。
アニメーション用のファイルは「SB0.png」「SB1.png」「SB2.png」といった具合で、「○○数字.png」(jpgも可)と記述していきます。
この際の注意点は0からカウントを始めるという点です。
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――アニメーション用のファイルは「SB0.png」「SB1.png」「SB2.png」といった具合で、「○○数字.png」(jpgも可)と記述していきます。
この際の注意点は0からカウントを始めるという点です。
Animation,<レイヤー>,<原点>,"<ファイルの場所>",<x座標>,<y座標>,<フレームカウント>,<フレームディレイ>,<ループタイプ>既に静止画で説明をしている箇所についてはそちらを参照。
- ファイルの場所
ファイルの場所は静止画と同じように記述をしますが、「BG0.jpg」「BG1.jpg」「BG2.jpg」…といった画像をアニメーションとして指定していく場合、
数字の部分を省いた「BG.jpg」のみを記述します。 - フレームカウント
アニメーションに使う画像のフレーム数を記述します。
上でも説明したように0から数えるので、そこのズレが発生しないように注意。 - フレームディレイ
1フレーム当たりの時間を単位はmsで記述します。
その時間が過ぎると次のフレームへと移動します。 - ループタイプ
LoopForever、LoopOnceのどちらかが入ります。
前者はアニメーションをループさせ、後者は一度アニメーションが流れたらそれで終了となります。
Animation,Foreground,Centre,"SB\Anime1\Anime.png",320,240,4,320,LoopForeverこの後には静止画同様にコマンドを普通に記述していきます。
コマンドの記述箇所
では次にこの記述の実際の使用方法を解説します。コマンドの詳細については別の箇所で解説します。
テキストエディタでosuファイル、もしくはosbファイルを設定したい方に合わせて開いてください。
そして[Events]タブを確認すると以下のような記述がされていると思います。
基本的に"//Storyboard Layer 0 (Background)"、"//Storyboard Layer 3 (Foreground)"の下で改行をしてコードを記述します。
"//Storyboard Layer 1 (Fail)"、"//Storyboard Layer 2 (Pass)"の下で記述をしてしまうと、FailもしくはPassの状態でしか発生しなくなります。
間違えた所に記述をしないように注意してください。
幾つかのオブジェクトを記述する場合、特定のオブジェクトに関する記述の一番最後で改行を入れることで、次のオブジェクトへの記述となります。
また注意点として、複数のオブジェクトが同じレイヤーとして記述されている場合、
テキストで見て上にあるオブジェクト定義はEditor再生時には奥側に、下の方にある定義は手前側に表示されます。
つまり手前に表示させたいオブジェクトは、下の方に記述をしなければ他の画像の下に隠れて表示されてしまい、実際には見えないということが起きます。
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――テキストエディタでosuファイル、もしくはosbファイルを設定したい方に合わせて開いてください。
そして[Events]タブを確認すると以下のような記述がされていると思います。
[Events]これはBGなど一切の設定をしていないときの表示です。
//Background and Video events
//Break Periods
//Storyboard Layer 0 (Background)
//Storyboard Layer 1 (Fail)
//Storyboard Layer 2 (Pass)
//Storyboard Layer 3 (Foreground)
基本的に"//Storyboard Layer 0 (Background)"、"//Storyboard Layer 3 (Foreground)"の下で改行をしてコードを記述します。
"//Storyboard Layer 1 (Fail)"、"//Storyboard Layer 2 (Pass)"の下で記述をしてしまうと、FailもしくはPassの状態でしか発生しなくなります。
間違えた所に記述をしないように注意してください。
幾つかのオブジェクトを記述する場合、特定のオブジェクトに関する記述の一番最後で改行を入れることで、次のオブジェクトへの記述となります。
[Events]実際にコードを書くとこういった形式になります。
//Background and Video events
//Break Periods
//Storyboard Layer 0 (Background)
Sprite,Foreground,Centre,"SB\BG\S02.jpg",400,240
F,0,-100,300,0,1
S,0,-100,,0.63
F,0,500,152443,1
//Storyboard Layer 1 (Fail)
//Storyboard Layer 2 (Pass)
//Storyboard Layer 3 (Foreground)
Sprite,Foreground,CentreLeft,"SB\logo\AP.png",-30,400
L,4100,1
F,0,-100,300,0,1
S,0,0,,0.8
L,4100,1
F,0,-100,300,1,0
Sprite,Foreground,CentreLeft,"SB\logo\CP.png",-24,400
L,8100,1
F,0,-100,300,0,1
S,0,0,,0.8
L,8100,1
F,0,-100,300,1,0
また注意点として、複数のオブジェクトが同じレイヤーとして記述されている場合、
テキストで見て上にあるオブジェクト定義はEditor再生時には奥側に、下の方にある定義は手前側に表示されます。
つまり手前に表示させたいオブジェクトは、下の方に記述をしなければ他の画像の下に隠れて表示されてしまい、実際には見えないということが起きます。
SBコマンド
コマンドの一覧となります。
実際に使用する際は、上記に記したオブジェクト定義のすぐ下に記述をする形となります。
大文字小文字の判別がされるので、記述する際はそちらにも注意してください。
またwikiに倣って半角スペースは"_(アンダーライン)"に置き換えてここでは表記をします。
その場合はendtimeの部分は以下のカンマだけ打って数字を入力し、開始時のエフェクトの値を入力して記述を終わらせます。
他にも以下のように終了時のエフェクトの値のみを省略することもできます。
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――実際に使用する際は、上記に記したオブジェクト定義のすぐ下に記述をする形となります。
大文字小文字の判別がされるので、記述する際はそちらにも注意してください。
またwikiに倣って半角スペースは"_(アンダーライン)"に置き換えてここでは表記をします。
- 以下の用語について
- easing:エフェクトの加速について設定します。変更無しは0、1で最初が早く徐々に減速、2が最初が遅く徐々に加速。
- starttime:エフェクトの開始タイム。単位はms。
- endtime:エフェクトの終了タイム。単位はms。
- Move
オブジェクトを移動させます。_M,<easing>,<starttime>,<endtime>,<start_x>,<start_y>,<end_x>,<end_y>
start_xとyにはそれぞれ開始時のX座標とY座標を入れ、end_xとend_yには終了時のX座標とY座標を入れます。 - MoveX
オブジェクトをX軸方向にのみ移動させます。_MX,<easing>,<starttime>,<endtime>,<start_x>,<end_x>
start_xとend_xでそれぞれ開始時と終了時のX座標を入れます。 - MoveY
オブジェクトをY軸方向にのみ移動させます。_MY,<easing>,<starttime>,<endtime>,<start_y>,<end_y>
start_yとend_yでそれぞれ開始時と終了時のX座標を入れます。 - Scale
オブジェクトの表示サイズを変更します。_S,<easing>,<starttime>,<endtime>,<start_scale>,<end_scale>
start_scaleとend_scaleでそれぞれ開始時と終了時のX座標を入れます。
サイズは1が素の大きさで、値が0に近づくほど小さく、より大きな値を入れればその分だけ大きくなっていきます。
小数点以下の記述が有効です。 - Vector
オブジェクトの表示サイズを縦と横でそれぞれ別々に変更します。_V,<easing>,<starttime>,<endtime>,<start_scale_x>,<start_scale_y>,<end_scale_x>,<end_scale_y>
start_scale_xとstart_scale_yには開始時の横と縦のそれぞれの画像拡大率、
end_scale_xとend_scale_yには終了時の拡大率をぞれぞれ入れます。
1がオリジナルと同じ大きさ、0に近づくにつれ小さく、大きな値になればなるほど大きくなります。
こちらも小数点以下の記述が有効です。 - Parameter
画像反転等の特殊なコマンド類となります。_P,<easing>,<starttime>,<endtime>,<parameter>
パラメーターにはH、V、Aの3つの文字のどれかが入り、
順に画像を左右反転、上下反転、アルファブレンドの代わりに中間色を使用となります。 - Fade
オブジェクトを透過します。_F,<easing>,<starttime>,<endtime>,<start_opacity>,<end_opacity>
start_opacityとend_opacityには透明度を記述します。透明度は1が100%、0で0%(完全透明)で小数点以下の記述が有効です。 - Rotate
画像を回転させます。_R,<easing>,<starttime>,<endtime>,<start_rotate>,<end_rotate>
start_rotateとend_rotateにはそれぞれ角度を記述します。単位はラジアンで小数点以下の記述が有効です。
ゼロ基準でプラスの値にすると時計回りに、マイナスの値になると反時計回りとなっていきます。
ラジアンでの記述となる関係上、"3.14"のような短い数値でここを記述すると、意図していない僅かな傾きが発生するので、
個人的には小数点以下8桁までを記述するのが良いかと思います。 - Colour (アメリカ英語だとColorですが、osuではイギリス英語で対応しています。)
オブジェクトの表示色を変更します_C,<easing>,<starttime>,<endtime>,<start_r>,<start_g>,<start_b>,<end_r>,<end_g>,<end_b>
start_r、start_g、start_b>は開始時の赤、緑、青を、end_r、end_g、end_bは終了時の赤、緑、青を設定します。
設定の値は0-255までで、0だとより濃く、255だとその色による影響を0にします。
255,255,255にすると元画像をそのまま映します。 - Loop
指定したコードを複数回連続してリピートさせます。_L,<starttime>,<loopcount>
loopcountにはループしたい回数を入れます。
__(いずれかのコード)
そしてこの後に記述されたコードを、指定した回数再生させます。
ループさせたいコードは、頭に2つの半角スペースを入れることで、このループコマンドの影響を受けられるようになります。
スペースが一つだと、別の独立したコードとして扱われてしまうので注意。
ループ用の記述は1行目以降も有効であり、2行目からも1行目と同じように記述をすることで、同時に複数のエフェクトを追加可能です。
ただしその後に入れたコードは、曲開始からのoffsetではなく、ループが発生したタイミングからのoffsetで計算されます。
これはトリガーも同様の仕様となっています。
よって下記のコードのように、ループ発生からのタイミングで計算をし、コードをし直す必要があります。_L,5200,10
また2回目以降のループは、ループ用記述で最も最後にあるエフェクトが終了した段階で、すぐにループが始まります。
__F,0,0,1000,1,0
__F,0,1000,2000,0,1
遅延を入れたい場合、Fade等の適当なコードを空打ちし、ループタイミングを操作してください。 - Trigger
特定の条件が満たされた時に続くコマンドを発動させます。_T,<triggerType>,<starttime>,<endtime>
triggerTypeにはPassing/Failingに加えてヒットサウンドが鳴った時のコマンドを設定させることができます。
__(いずれかのコード)- HitSound[SampleSet][AdditionsSampleSet][Addition][CustomSampleSet]で設定されます。
- [SampleSet][AdditionsSampleSet][Addition]にはAll / Normal / Soft / Drumのいずれかが入ります。
- [Addition]にはWhistle / Finish / Clapのいずれかが入ります。
- [CustomSampleSet]にはカスタムヒットサウンドのカスタムの値が入ります。ただし0はデフォルトのものです。
- HitSound (全てのヒットサウンドをトリガーに)
- HitSoundClap (clapが鳴った時)
- HitSoundFinish (finishが鳴った時)
- HitSoundWhistle (whistleが鳴ったに)
- HitSoundDrumWhistle (drumのwhistleが鳴った時)
- HitSoundSoft (softのサンプルセットが鳴った時)
- HitSoundAllSoft (全てのsoftヒットサウンドをトリガーに)
- HitSoundDrumClap0 (デフォルトのdrumのclapが鳴った時)
- HitSound6 (カスタム6のサウンドが鳴った時)
Sprite,Foreground,Centre,"BG.png",320,240
またLoopと同じように下に書くコードは、頭に2つの半角スペースを入れる必要があります。
_T,HitSoundClap,2000,8200
__S,0,0,500,1,1.3
__F,0,0,500,1,0
Loop同様にスペースが一つだと、別の独立したコードとして扱われてしまうので注意。
その場合はendtimeの部分は以下のカンマだけ打って数字を入力し、開始時のエフェクトの値を入力して記述を終わらせます。
_S,0,1000,,1.2カンマを2連続で打っていないと、1.2と記述された部分がendtime扱いにされてしまうため、正常な動作ができません。
他にも以下のように終了時のエフェクトの値のみを省略することもできます。
_S,0,1000,2000,1.2
サウンド
サウンドもSBとして鳴らすことができます。
ただし譜面のヒットサウンドを追加する目的での使用は避けてください。
というか違いが分からない…。
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――ただし譜面のヒットサウンドを追加する目的での使用は避けてください。
Sample,<time>,<layer_num>,"<filepath>",<volume>
- timeには再生したい時間をms単位で入れます。
- layer_numにはレイヤーに対応した数字を入れます。
Backgroundは0、Failは1、Passは2、Foregroundは3と入力します。 - filepathには流したいサウンドファイルを画像と同じように指定します。
- volumeには再生時の音量を0~100までの間で入力します。
100よりも大きい数字を入れても、100として扱われ大きな音量にはなりません。
マクロ
osbファイルに限定されますが、マクロも対応しております。
しかし経験則上、不幸な事故が多々発生しているので、個人的には使用は勧めません。
まず[Event]の上に"[Variables]"という箇所を新たに入力して作り、そこに"$(任意の名前)=置き換え用のコード"と入力します。
こちらも改行をして複数のマクロを入力することができます。
一例として以下のようなコードが出来上がります。
先程の例で例えると以下のようになります。
これらのマクロは譜面をEditor内で保存した時、
variablesのタブとそこに含まれるコードを削除し、マクロを入力していた箇所は実際にコードが置き換えられます。
つまり一度Editorで保存をしてしまうと、マクロの記述が間違っていたときの修正が大変な手間になるということです。
よってマクロを使う場合、Editorで保存する前にバックアップを用意することを強く勧めます。
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――こちらも改行をして複数のマクロを入力することができます。
一例として以下のようなコードが出来上がります。
[Variables]実際に使うときは簡単で、Eventタブ内で置き換えたい名前を入力するだけです。
$code1=Sprite,Foreground,TopLeft,"l\bar.png",320,268
$move1=182,240
$rgb=120,184,30
先程の例で例えると以下のようになります。
$code1この場合だと$code1がSprite,Foreground…、$move1が182,240に置き換えられて下のコードのよう認識されます。
M,0,0,1000,$move1
Sprite,Foreground,TopLeft,"l\bar.png",320,268こうすることで楽にコードが組み上げられるようになる、というのがマクロ機能になります。
M,0,0,1000,182,240
これらのマクロは譜面をEditor内で保存した時、
variablesのタブとそこに含まれるコードを削除し、マクロを入力していた箇所は実際にコードが置き換えられます。
つまり一度Editorで保存をしてしまうと、マクロの記述が間違っていたときの修正が大変な手間になるということです。
よってマクロを使う場合、Editorで保存する前にバックアップを用意することを強く勧めます。
小ネタ/その他の情報
- msでのタイムのコピー方法
タイムラインからタイムをクリップボードにコピーすることができます。
Designタブを開いている状態でCtrl+Cを押してください。 - 動画にもSBの記述は実は有効
//Background and Video events
ただしeditorで保存した瞬間、これらのデータは全て消失し、正しい動画に関する記述のみに修正されます。
0,0,"BG.jpg",0,0
Video,0,"video.avi",160,90
V,0,0,,0.7,1.1
R,0,0,,3.14
C,0,0,,120,0,0
Video,0,"video.avi",-160,-90
S,0,0,,0.7
仮にsubmitで通っても、これがrank可能であるかどうかは要検証です。 - Loopコマンドはループを1回に設定して記述することで、好きなタイミングで楽にエフェクトを入れられるようになる。
例えば下記のように入力することで、タイムを変えるだけでエフェクトをお手軽に入れられます。L,(入れたい時間),1
この例だと時間を指定するだけで、画像を1000msの間にフェードアウトさせることができます。
F,0,0,1000,1,0
単調なエフェクトを多数入れる場合、この方法で計算を大幅に省略できるので是非活用してください。 - Variablesを用いたマクロで、一部のoffsetや値を楽に弄ることができる。
[Variables]
例えば上記のようなコードを作ると、タイミングのズレがあった場合や、エフェクトの開始タイミングを調整したい場合などにおいて、
$offset1=0
$offset2=102000
$offset3=254000
[Event]
//Background and Video events
//Storyboard Layer 0 (Background)
Sprite,Foreground,Centre,"SB\BG1.jpg",320,240
L,$offset1,1
F,0,-1000,0,0,1
L,$offset2,1
F,0,-1000,0,1,0
Sprite,Foreground,Centre,"SB\BG2.jpg",320,240
L,$offset2,1
F,0,-1000,0,0,1
L,$offset3,1
F,0,-1000,0,1,0
Sprite,Foreground,Centre,"SB\BG3.jpg",320,240
L,$offset3,1
F,0,-1000,0,0,1
L,338000,1
F,0,-1000,0,1,0
Variablesの部分に記された値を一箇所変更するだけで、一度にマクロが仕込まれた複数の場所を一斉に変更させることができます。
例として挙げたものは最低限のコードなので、その恩恵はあまり大きくありません。
しかし膨大な量のコードを一気に作成する場合、こういった技術を使うことで保険として役立ちます。
なおマクロの箇所でも説明はしましたが、Editorで保存をすると[Variables]の箇所が削除され、eventのコードも置き換えられてしまいます。
なので必ずローカルでバックアップを用意し、変更に応じてコードを上書きしなければいけません。
忘れるとこの仕込みが吹っ飛びます。
もし譜面とSBをsubmitしている場合、フォーラムにバックアップ用のコードをpostして保存しておくと安心です。 - コードのエフェクトの簡略化
SBでは一部の記述を簡略化することができます。Sprite,Foreground,Centre,"SB\effect1.jpg",320,240
このコードは以下のコードと同じ意味を持ちます。
F,0,100,1100,0,1,0.5Sprite,Foreground,Centre,"SB\effect1.jpg",320,240
このようにエフェクトのコードの最後、効果の度合いや座標などを示すコードは、2つ以上記述することができます。
F,0,100,1100,0,1
F,0,1100,2100,1,0.5
この例で挙げると、効果の変化を記した部分"0,1,0.5"は文字通り0、1、0.5と続けて透過エフェクトを発生させます。
通常は2つまでしか記述しませんが、カンマを打ち、続けて変化部分をさらに打つと追加で効果を得るのです。
そして0->1までの効果開始タイムと終了タイムの間の効果時間1000ms。この時間をもう一度繰り返して再び1->0.5のエフェクトを発生させます。
例では3回変化するので、2000msの間にそれぞれ変化をします。より多くのコードを追加することでさらに長く効果を発生させることも可能です。
素の効果時間を元にエフェクトの発動タイミングを切り替えることしかできないので、使い勝手は悪いですが一応こういったこともできると覚えておいてください。
普通に別々でコードを書いたほうが分かりやすい…のは間違いないです。 - 譜面のoffsetが変わったときはDesign>Move all elements in timeを選ぶことで、指定した数値分だけ前後に動かせます。
ただし全てを一斉に動かすことしかできないため、BPM変動のある譜面だと一部のコードを抜き出した難易度を作り、それを通じて細かな調整をする必要があります。
大雑把な調節しかできませんが、これは必要なコードだけを抜き出すことで、2サビで同じSBを使用したい場合などにも役立ちます。 - ラジアンの計算について
osu!のRotateコマンドは全てラジアンで計算されます。
(ラジアン*180/π)=角度、(角度*π/180)=ラジアンでそれぞれ計算します。
正直計算面倒臭いです。
ということで3分で作ったデータなので若干見にくいとは思いますが、簡易的なデータを一覧として作成しました。
角度ラジアン早見表
10桁までまとめてあります。ここから探し出して当てはめていってください。
ラジアンに限らずエクセルで算出するためのシートを作っておくとSBでは何かと便利です。 - SBロードについて
右上にSBloadという項目がSB作成時に表示されます。
これは画像の表示量に応じて変化し、この数字が高いほど負荷が高いとされる数値です。
しかしこの数値は実際にはあてにならない数値で、
小さい画像を大量に表示するだけでは、明らかな処理落ちが発生しても低負荷扱いとなります。
逆に大きな画像を数枚同時に表示すると、処理落ちがほとんど無くてもこの数値は跳ね上がります。
ちなみに完全に画像をエフェクトで透過すると、その画像は負荷を与えていない扱いとなります。
このように実際の負荷に対して比例した数値を出しているわけではないので、この数値が高いだけでは何の問題もないと考えています。
リンク集
wiki:Storyboarding
wiki:Storyboard Scripting
The new SGL Tool (Beta) - Generate (C#によるコーディングを可能にするツール)
osu!dots V0.11 (大量の小さなドットを表示するエフェクトのコード化を補助するツール)
日本語フォーラム : 初心者Modder向け - Moddingガイド
Clibor (クリップボードにコピーしたものを履歴として一覧に保存できるフリーソフト、地味に便利)
GIMP (画像の簡易的な編集ができ、osu用途では一通り必要なことができます)
waifu2x (劣化を抑えて画像を拡大してくれるサイト)
サクラエディタ (テキストエディタ、メモ帳だとできないあれこれができるので入れておくと何かと便利です)
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
最後に
SBと聞いて特殊な技術が必要で、難易度の高い事だと感じてしまい手を出さない方は多いと思います。
しかし実際はメモ帳に落書きをするだけの単調作業、強いて言うなら計算が面倒なだけで大した事はありません。
最初は試行錯誤を繰り返し、浮かんだアイデアを試し、コードのミス探しをすることになるでしょう。
その楽しみはストーリーボードを作る人にしか分からない楽しさです。
アニメやゲームのOPを見て、どうすればこの表現ができるのかを分析し始める域にまで達すれば、立派なストーリーボーダーです。
まずは背景画像を試しに動かすところから始めてみてください。