OP・EDの作り方



キャラが完成したら、最後にOPやEDを付けてみてはどうでしょうか?
キャラ作成に比べると、数段簡単なので、意外にすぐ作れます。
(OP・EDにはWinとDosで作り方が変わるということは、ほぼないです。)

ココでは、伊吹川のOP・EDの作り方を説明しようと思います。
とりあえず、基本的なことだけしか教えませんので、後は各自、研究してみてください。



はじめに


OPとEDは、作り方は両方同じです。Defファイルの設定で、

[Arcade]
intro.storyboard = Arcade/oping.def
ending.storyboard = Arcade/ending.def

の部分のどっちに当てはめるかで決まります。

なので今回は、EDのサンプルのみで説明しようと思います。



サンプルをDL
サンプルEDの動画を見る。


OPとED用のSFFの作り方



と、いっても
簡易的なWin版のSFFの作り方でOKです。
(Win&Dos関係なく
こっちの作り方でOKです。)
別にパレットの統一など、気にする必要はありません。
わざわざ、DOS版のようにパレット統一する必要がないので、楽といえば楽です。

ただ、少しだけ注意する必要があります。
それは、OP・EDを見るには、かなりのマシンパワーが必要だということです。
マシンパワーが足りないと画像と音がずれるなんてことが発生するようです。
なので、あまりにもアニメーションを多用するのは、止めたほうが無難かもしれません。(笑)

参考までに、今回のサンプルEDにおける音のずれを記入しておきます。

OS:WinMe
CPU:PentiumVの1Ghz
メモリ:255Mb
音ずれなし
OS:WinMe
CPU:Celeronの700Mhz
メモリ:184Mb
少し音がずれる(気にならない程度)
OS:Win98
CPU:PentiumMMXの233MHz
メモリ:64Mb
音が大幅にずれる(音楽がED中盤には終わってしまう)


EDに使う画像用に伊吹川がよく使うテクニックを数例あげておこうと思います。
よかったら参考にしてみてください。


上の画像を見てください。文字が、上に向かうにつれて
黒くフェードアウトしていってます。

上のように2つの画像を重ね合わせることで表現しています。
右の画像を黒透過画像(Airファイルで使う
,,S です。)で重ねることにより黒フェードアウトを
表現しているわけです。



同じように、画像の黒フェードイン&黒フェードアウトも画像の重ね合わせで
おこなっています。(MUGENのOP・EDは画像ごとのフェードイン・フェードアウトが
出来ないようなので。(汗))



スタッフロールは、ひとつの長い画像で表示させています。
その画像が、Velset(画像の速度を決める記述)を使って
上のほうに少しづつ移動してると思ってくれればわかりやすいと思います。



OP・EDの記述の説明



MUGENのOP・EDは、制限が多く、たいした表現は出来ませんが、その分簡単です。
ここでは、伊吹川のEDの作り方を説明したいと思います。
サンプルのDEFファイルをメモ帳で開いてください。

上から順に説明していきたいと思います。

[SceneDef]
spr = ed.sff
startscene = 0

;---------------------------------------------------------------

[SceneDef]
まぁ、意味なんてありません。(苦笑)こっから下の記述はOP、EDの記述ですよ〜ってな感じの
はじめに書くヤツです。とりあえず、入れといてください。(笑)

spr = ed.sff
このEDに使うSFFを指定します。EDに使う画像を登録したSFF名を書いてください。

startscene = 0
EDを始めるシーンを指定する箇所です。
EDはシーンごとに区切って作るのが基本なのですが、出来具合を確認するのに、
いちいち最初っから見るのは、結構イライラします。(笑)
それを、ある程度解消できる記述です。(笑)
DVDのチャプターみたいなもんだと思って頂ければ、わかりやすいかな?
startscene = 0の数値を変えることで途中のシーンからエンディングを見ることができます。

ちなみに、サンプルEDもシーン分けをされていて、以下のようになっています。

シーン0

シーン1
[Scene 1]と書かれている箇所がココにあたります。
はげ親父がKFMを蹴るシーンです。 KFM、道場から落っこちます。
シーン2
[Scene 2]と書かれている箇所がココにあたります。
そして、スタッフロールです。

シーンをとばして見たいときに活用しましょう。


さて、続いて、シーンごとの説明をしていこうと思います。まずは、[Scene 0](シーン0)の説明をします。

シーン0

 

;KFMvsハゲ ラストのトドメ
[Scene 0]
; Fade
fadein.time = 60 ;現れるまでの時間(layer0.starttime の時間、含む)
fadein.col = 0,0,0 ;フェイドイン時のカラー設定Use 255,255,255 for white-fade
; Screen color
clearcolor = 0,0,0
fadeout.time = 60
fadeout.col = 0,0,0

;Overlay Anims (from 0 to 9);描かれるアニメの設定
layerall.pos = 0,0 ;全てのLayerでの基本となる位置。所謂初期値。
layer0.anim = 30;アニメーションするNo設定_(戦闘_ハゲ親父VSKFM)
layer0.offset = 0,0;位置の指定
layer0.starttime = 0;表示させる時間(0の場合は勿論"最初から"の意味)

;Music
bgm = 5_4.s3m;流すBGMのファイル名。このintro.defと同じ位置からの相対パス
bgm.loop = 0 ;ループするか否か…
volume = 255

;Total time ;このシーンをトータルで表示させておく時間の設定
end.time = 244 ;全体での終了する時間
;------------------------------------------------------------------------

[Scene 0]
このシーンの番号を指定してください。今回は、一番はじめのヤツなので、0となっています。
ココの箇所は、おもに
startscene = ???のところで重要になってくる項目ですので。(笑)

fadein.time = 60
フェードイン(だんだんと表示される)時間を指定する項目です。60フレーム=1秒です。
今回の場合は黒から、だんだんと表示されていってます。

fadein.col = 0,0,0
フェードインの時の色の指定が出来ます。といっても、未完成らしく、黒と白の2色しか
選べません。(苦笑) RGBのような体裁はとっていますが、G,Bの位置にくる値は関係がなく、
Rの位置にくる値も fadein.col=0〜127では黒、fadein.col=128〜255では白と2値化されているそうです。

clearcolor = 0,0,0
背景色(画像を表示していない箇所)の色を指定できます。
下のヤツは試しに、サンプルのシーン2の背景色を(220,0,0)にしてみました。
背景色を(220,0,0)にした時。
こんな感じになります。

fadeout.time = 60
フェードアウト(だんだんと表示が消える)時間を指定する項目です。60フレーム=1秒です。
今回の場合はシーン終りの画像が、だんだんと暗くなっていってます。

fadeout.col = 0,0,0
フェードアウトの時の色の指定が出来ます。といっても、未完成らしく、黒と白の2色しか
選べません。(苦笑) RGBのような体裁はとっていますが、G,Bの位置にくる値は関係がなく、
Rの位置にくる値も fadein.col=0〜127では黒、fadein.col=128〜255では白と2値化されているそうです。

layerall.pos = 0,0
layer0.anim = 30
layer0.offset = 0,0
layer0.starttime = 0

EDの重要な部分であるレイヤーの記述です。といっても、『レイヤー』自体を
知らない人もいるかもしれませんので、まず、『レイヤー』から説明したいと思います。

・・・といってもレイヤーって、どう説明すればいいんだろう。(汗)
簡単にいうと、下のような画像の重ね方をするのがレイヤーです。(苦笑)

・・・こんなんで、えぇかな。(苦笑) え〜と、次いきます。(笑)

layerall.pos = 0,0
すべてのレイヤーの初期位置の設定です。これは、
0,0のまま、変更しない方がいいです。
このまま、使用しましょう。(笑)

layer0.anim = 30
サンプルのed.defの中の1番下の方を見て頂けるとAirファイルのようになっているのが、確認できると思います。
ココは、そこで設定したアニメの番号を指定することで、アニメを表示させます。

layer0.offset = 0,0
レイヤー0の配置の座標を設定します。
ココの数値を変更することで表示された画像の配置を変更できます。

layer0.starttime = 0
このレイヤーのアニメをスタートさせるタイミングを指定します。



続いて、音楽の設定です。音楽は各シーンごとに違う曲が流せますので、
うまく活用しましょう。また、EDには、Playsnd(音を鳴らす記述)は存在しないようです。(涙)
なので、曲に組み込んで鳴らすしかありませんので、ご注意を。(苦笑)

bgm = 5_4.s3m
鳴らす音楽の設定です。上の例では.s3m形式のファイルを選択していますが、
mp3やoggなどで、OKです。ここの記述は、Win版とDos版で書き方が違うのでご注意を。

例:Win版の場合

bgm = 5_4.s3m

例:Dos版の場合

bgm = chars/!hageteru/Arcade/5_4.s3m

上のように、Dos版では、階層をちゃんと記述する必要があるようです。
それに対し、Win版は、階層を書いてはダメで、上のようにファイル名のみにする必要があります。
また、mp3ファイルなどを置く場所もWin版では、ed.defと同じ階層でなければ、なりません。
気をつけましょう。それと、Win版では、プラグインによっては、音は鳴らないこともあります。
充分に注意してください。

bgm.loop = 0
音楽をループさせて再生するかどうかを指定します。
パソコンのスペックによっては音がズレることを考慮にいれてください。(苦笑)
EDの最後の方にちょっとループしたりすると少しマヌケですから。(笑)
基本的に、繰り返してOKなBGMを使用してない場合の時以外は、
bgm.loop = 0 にした方が無難だと思います。

volume = 255
音のボリュームです。伊吹川には、コレ、ちゃんと機能してるのかわかりませんです。(苦笑)
まぁ、適当にドウゾ。(笑)



最後の項目は、シーンのトータルな時間の設定です。


end.time = 244
このシーンの全体のシャクの長さを指定する項目です。
音楽にあわせて、EDを進めたい方は、(音楽の全部の時間(秒))×60+α(ちょびっと多めにする)
とすると、うまく全体のシャクの長さを設定できると思います。



さて、コレでシーン0の説明は終わりました。続いては、シーン1の説明をします。
シーン1は、シーン0の応用編です。がんばっていきましょう。(笑)

シーン1
[Scene 1]と書かれている箇所がココにあたります。

 

;------------------------------------------------------------------------
[Scene 1]
; Fade
fadein.time = 60 ;現れるまでの時間(layer0.starttime の時間、含む)
fadein.col = 0,0,0 ;フェイドイン時のカラー設定Use 255,255,255 for white-fade
; Screen color
clearcolor = 0,0,0
fadeout.time = 30
fadeout.col = 0,0,0

; Overlay Anims (from 0 to 9);描かれるアニメの設定
layerall.pos = 0,0 ;全てのLayerでの基本となる位置。所謂初期値。
layer0.anim = 0;街見下ろし
layer0.offset = 0,0
layer0.starttime = 0

layer1.anim = 10;クローズアップ
layer1.offset = 0,0
layer1.starttime = 0

layer2.anim = 20;カンフーマン
layer2.offset = 74,45
layer2.starttime = 0

; Music
bgm = 11_0.mp3;流すBGMのファイル名。このintro.defと同じ位置からの相対パス
bgm.loop = 0 ;ループするか否か…
volume = 255


; Total time ;このシーンをトータルで表示させておく時間の設定
end.time = 155 ;全体での終了する時間

;------------------------------------------------------------------------

さて、上の箇所がシーン1の全記述です。シーン0とは、使用されているレイヤーの数が違っているのが、
わかるでしょうか?
シーン0では、レイヤーを1つ(layer0)しか使っていなかったのに対し、
シーン1では、レイヤーを3つ(layer0,layer1,layer2)使っています。

ココでEDにおける、レイヤーについて、少し 説明したいと思います。

EDでは、ひとつのシーンに対し、(0〜9)の10個のレイヤーが使えるようです。
そして、上の図のように、レイヤーの数字が大きいほど、上に重なっていきます。

以上がレイヤーの性質です。


これくらいわかれば、シーン1の記述は大丈夫かな?



さて、最後のシーンである[Scene 2](シーン2)の説明をします。
ここが一番、説明がややこしいトコなので心して読んでください。(笑)

シーン2
[Scene 2]と書かれている箇所がココにあたります。

このシーン2は、記述が長いので分割して説明します。(苦笑)

;------------------------------------------------------------------------
;スタッフロール&思い出のスライド
[Scene 2]
; Fade
fadein.time = 150 ;現れるまでの時間(layer0.starttime の時間、含む)
fadein.col = 0,0,0 ;フェイドイン時のカラー設定Use 255,255,255 for white-fade
bg.name = BG2
; Screen color
clearcolor = 0,0,0
fadeout.time = 300
fadeout.col = 0,0,0

layerall.pos = 0,0 ;全てのLayerでの基本となる位置。所謂初期値。
layer0.anim = 1100;フェードイン下
layer0.offset = 0,212
layer0.starttime = 0

layer1.anim = 1101;フェードイン上
layer1.offset = 0,0;117
layer1.starttime = 0

; Music
bgm = My_wish.mp3;流すBGMのファイル名。このintro.defと同じ位置からの相対パス
bgm.loop = 0 ;ループするか否か…
volume = 255


; Total time ;このシーンをトータルで表示させておく時間の設定
end.time = 7100 ;全体での終了する時間

bg.name = BG2
この記述は、使用するBG(背景の記述)の名称を指定します。このシーン2では、『背景の記述』を使いますので、
必ず入れましょう。(笑) 名前は適当に。
あとは、全部、前のシーンと同じような記述なので省略します。(苦笑)


続いて、背景の記述についての説明をします。
さて、この『背景の記述』。どんな時に使うかと申しますと、伊吹川は以下の2つの場合に使用しています。

・Velset(画像を動かす記述)を使いたくなった時。
・表示された画像の上にスタッフロールなどを流したい時。

1つ目の理由は、そのままデス。スタッフロールの画像を上にスクロールさせたい時などに使います。
2つ目の理由は、ちょっとわかりずらいので、 詳しく説明します。

例えば、上の画像の部分をバラバラに見てみるとだいたいこんな感じになっています。

この図を見てもらえばわかると思いますが、
背景の記述で表示する画像は、レイヤーの下になる性質があります。
そのためスタッフロールの下に表示させたい画像がある場合、その画像は
レイヤー表示ではなく、『背景の記述』で表示させる必要があるのです。


今回のシーン2では、まさにこの理由で使っているわけです。(笑)

さて、背景の記述の部分を見てみるとしましょう。

[BG2Def];スタッフロール

[BG2 Credits];京vsリュウ
id = 3
type = anim
actionno = 40
start = -10,70;280

[BG2CtrlDef]
CtrlID = 3
looptime = -1

[BG2 Credits];京vsリュウ_フェードイン&フェードアウト
id = 4
type = anim
actionno = 41
start = -10,70;280

[BG2CtrlDef]
CtrlID = 4
looptime = -1

[BG2 Credits];ほたりゅん
id = 5
type = anim
actionno = 50
start = -10,70;280

[BG2CtrlDef]
CtrlID = 5
looptime = -1

長いので、とりあえずココまで。(笑)

ココの部分は、シーン2における、アニメのスライドの部分です。

この部分は、スタッフロール(これも背景の記述の画像デス。)の下にくる画像なので、
背景の記述で表示する画像は、レイヤーの下になるという性質上
レイヤーだと表現できませんので『背景の記述』で表示させています。

では、記述を上から順に適当に説明していきます。

[BG2Def]
ココは、
bg.name = ???で選んだ名前を記述してください。
サンプルの場合はBG2となっています。
コレは、こっから下に『背景の記述』を書きますよ〜っていうタイトルみたいなものです。(笑)
まぁ、適当にドウゾ。(笑)

[BG2 Credits];京vsリュウ
id = 3
type = anim
actionno = 40
start = -10,70

[BG2CtrlDef]
CtrlID = 3
looptime = -1

『背景の記述』は、これでひとつのセットです。id =???CtrlID =???は、同じ数字を指定してください。
伊吹川もココ、完全に理解してるわけではないのですが、大事なのは次の2つです。


actionno = 40
サンプルのed.defの中の1番下の方を見て頂けるとAirファイルのようになっているのが、確認できると思います。
ココは、そこで設定したアニメの番号を指定することで、アニメを表示させます。

start = -10,70
画像を配置する座標を設定します。
ココの数値を変更することで表示された画像の配置を変更できます。


とりあえず、これで、画像は表示はされます。
しかし、 背景の記述で表示する画像は、レイヤーのlayer0.starttime = 0
に相当する記述がありませんので、[Begin Action??]の方で、はじまるタイミングを制御してやる必要があります。



どういうことかわかりずらいと思うので、とりあえず例をあげて説明しようと思います。
例として、上の
;京vsリュウを使います。

EDを見ていただければ、わかると思いますが、この、京VSリュウというのは、
サンプルEDにおけるシーン2の最初にでるアニメです。
京VSリュウのアニメ部分
この京VSリュウのアニメは、シーン2が始まってから、約20秒後ぐらいたってから表示するようにしています。
しかし、
背景の記述で表示する画像は性質上、シーンが始まると同時に表示されてしまいます
なので、ちょっと工夫する必要があるのです。
このように表示したい場合
[Begin Action 40]を下のように記述します。

京VSリュウのアニメの
表示の流れ
   画像なし     ・・・・・
[Begin Action 40]
の記述の内容
Group:40
Image:−1
X座標:0
Y座標:0
1210フレーム表示
Group:40
Image: 0
X座標:0
Y座標:0
54フレーム表示
Group:40
Image: 1
X座標:0
Y座標:0
10フレーム表示
Group:40
Image: 1
X座標:0
Y座標:0
10フレーム表示

わかりますかね?つまりは、透明な画像(SFFに登録してない範囲のGroup番号とImage番号)をワザと表示させ、
表示するタイミングを制御しているわけです。

ちょっとややこしかったかな?まぁ、試してみれば、すぐわかると思いますので。(苦笑)
続いて、『背景の記述の画像』の表示される優先順位について説明します。



背景の記述で表示する画像の優先順位



おおげさに書いてますが、実はそれほど、難しくはありません(苦笑)
ただ、重要なので大げさに書いています。(笑)

簡単にいうと、ed.defの下の方に書くほど、優先順位はあがります。
コレだけです。

例を使って説明します。

[BG2 Credits];さっちんE六番目(この中では一番下)に表示
id = 7
type = anim
actionno = 130
start = -10,70;280

[BG2CtrlDef]
CtrlID = 7
looptime = -1

[BG2 Credits];さっちん_フェードイン&フェードアウト
D五番目に表示
id = 8
type = anim
actionno = 131
start = -10,70;280

[BG2CtrlDef]
CtrlID = 8
looptime = -1

[BG2 Credits];ストU
C四番目に表示
id = 9
type = anim
actionno = 60
start = -10,70;280

[BG2CtrlDef]
CtrlID = 9
looptime = -1

[BG2 Credits];ストU_フェードイン&フェードアウト
B三番目に表示
id = 10
type = anim
actionno = 61
start = -10,70;280

[BG2CtrlDef]
CtrlID = 10
looptime = -1

[BG2 Credits];しんご
A二番目に表示
id = 11
type = anim
actionno = 70
start = -10,70;280

[BG2CtrlDef]
CtrlID = 11
looptime = -1

[BG2 Credits];しんご_フェードイン&フェードアウト
@一番上に表示
id = 12
type = anim
actionno = 71
start = -10,70;280

[BG2CtrlDef]
CtrlID = 12
looptime = -1

わかりますかね?こんな感じになっています。
ちなみに、スタッフロールは、一番上に表示したいので、この理屈から、一番下に書いてるわけです。(笑)

優先順位の説明はコレくらいですかね。



ラストは、画像のスクロールなどのさせ方(Velsetの使い方)です。


これも、たいして難しくはありません。ed.defの下のような箇所を見てください。

[BG2 Credits];スタッフロール_白文字
id = 1
type = anim
actionno = 1200
start = -160,210
mask = 1

[BG2CtrlDef]
CtrlID = 1
looptime = -1

[BG2Ctrl]
type = VelSet
time = 0
y = -0.34

伊吹川もよくわかってはいませんが、上のように追加してやれば、
動きます。(笑)

timeは動かすタイミングを設定でき、y = ???は、
移動速度を設定できます。x座標方向に動かしたい場合は、x = ???と
いれれば、動くでしょう。



だいたい伊吹川が説明できるところは、こんなところですかね。






最後のおまけ



OP・ED講座の補足です。


サンプルed.defの最後のAirファイルのような記述部分について、
ちょっと補足しておこうと思います。
ココの書き方はAirファイルとまったく同じでOKです。
ちなみに、伊吹川は、なんとなく一番下にまとめて書いてますが、
実は、別に一番下にまとめて書く必要はありません。
コレを見ていただければ、判ると思いますが、
こんな風に、シーンごとの終りに、書いてもぜんぜんOKです。
自分の好きな方で書きしましょう。(笑)



Win版のOP・EDのちょっとしたバグ

Win版に限り、OP・EDにちょっとしたバグがあります。
次のサンプルをWin版に登録して拝見してみてください。


サンプル2をDL


サンプル2を見てもらえれば判ると思いますが、以下のようなバグがWin版にはあります。

このようにホワイトアウト(じょじょに白くなっていき終わる)などで終わると・・・。

次の画面にまで影響が残ってしまう。
上のようにホワイトアウト(じょじょに白く)などで、終わると…    次の画面にまで影響が残ってしまう。

対処法として、以下のように記述を足せば、大丈夫だと思います。
これは、サンプルの場合です。まんまコピペしないように。(笑)
上のようにシーンの最後に、赤い範囲のようなシーンを追加して、黒フェードアウトで再び終了する。
黒フェードアウトのみ、次の画面に影響を与えないようなので、
このように記述しておけば、とりあえず安心というわけです。(苦笑)



ついでに・・・。


伊吹川が現在、作っているEDなどのサンプルを置いておきます。
よかったら使ってみて参考にしてください。
コレを元に、EDなど作ってもらって結構ですので。(笑)

七夜EDです。上のサンプル2の姫EDとは、少し記述が違います。こっちのほうがすっきりしてます。(笑) 東方萃夢想のED。コレ作るために、伊吹川、10回はクリアしたよ・・・。(苦笑)
メルブラReActの七夜ED。Win&Dos共用 東方萃夢想の伊吹 萃香ED。Win&Dos共用





戻る