MUGEN Lifebar

MUGENで良いキャラを作るポイントは… 「良いキャラのソースコードを読む」->「コピペ」->「記述を理解」->「自分でアレンジ」


準備するツール

  • IrfanView
    - 多機能なツール。今回は画像の減色に使用。軽いしいろいろ便利なので入れておいて損はなし。
  • FontFactory
    - 名前の通りフォント作成ツール。他にもあるけど個人的に1番使いやすいかな
  • Jtrimjointogether
    - 画像の分割・結合に使います。
  • GimpとかedgeとかPictBearとか・・・
    - 画像の編集に
  • ImageTrimmer
    - 画像の余白部分をカットしてくれる。

準備編

フォントに使用したい画像準備。
今回使用する元画像
Jtrimで欲しい部分を選択して「Ctrl + T」これでカットしたものを保存
アーイじゃなくて、数字を切り取っている様子
今回はPictBearでいらない部分をぬりぬり
PictBearでぬりぬり
jointogetherに作成したファイルをドラッグ&ドロップして適当に並べて保存
jointogetherで画像を連結している様子
ImageTrimmerで「ツール->一括変換処理」を選択、入力元・出力先フォルダ・上書き確認・画像形式を設定。その他の設定は自分で勉強してね!(別にさわらなくて大丈夫)
iTrimmerの一括変換処理の画面
そして整理したもの。
フォントファイルで使用される画像
で!
IrfanViewを起動、「ファイル->一括変換 形式/名前」を選択。「ファイル形式の一括変換の設定」で、変換後の形式でBMPとかPNGとかGIF好きなのを選択、「詳細設定を使用」にチェックを入れる。「保存フォルダ」で変換したファイルをどこに保存するか設定。で、右上の今回使用するファイルを選択して「追加」をクリックして右下にファイル名が表示されたらOK。
IrfanViewの一括変更の設定画面
詳細設定をクリックすると下の画面が出るので、色数の変更にチェック、256色を選択、でOK押して実行をクッリク。
IrfanViewの一括変更の詳細設定画面
次にedgeを起動先ほど変換したファイルを読み込む。パレットボタンを押して、パレットを表示
パレット->未使用色の削除と整理を実行。パレットのドラッグで位置を変更できるようにして、
左上0番に背景色を持ってきて、右下255番目にそれ以外の色を持ってくる。
edgeを使ってパレットを編集している様子
IrfanViewを使ってPCXに変換

さあ作ろうか

ここでようやくFontFactoryを起動
Open Imageボタン(フォルダから画像が出でるやつ)をクリック。先ほど作ったPCXファイルを読み込む。
  1. 【Zoom】
  2. 表示されてる画像の表示倍率を調整できます。読み込んだ時、表示がおかしくなったらこれを使うと元に戻ることもあります。
  3. 【Definitions】
  4. ここではフォント全体の設定をします。
  5. Type of size
  6. Fixedにした場合、1文字ごとに大きさが設定できません。全て【Char size】で設定した大きさに固定されます。Variableの場合は、個別に設定できます。表示する文字の大きさ全部一緒だよって人はFixedで大丈夫です。ばらばらならVariableで。
  7. Char size
  8. ここではフォントの平均的な幅と高さを決定します。 widthは横幅が一番小さい文字に,heightは高さが一番大きい文字の大きさに合わせればいいです。
  9. Color Depth
  10. このフォントがどれだけの色を使っているかを設定します。先ほどのカラーパレットの作業で、背景色を除いて何色使ったか数えて、入力しましょう。
  11. Space between letters
  12. MUGENで、このフォントを表示した時に、文字と文字の間隔をどれだけ空けるかを設定します。こだわりとかがないなら両方0で大丈夫です。
  13. Offset
  14. 文字を表示する時に、基準位置からどれだけずらすか設定します。こっちも、細かい設定なのでこだわらない人は全部0で大丈夫です。

    あらかた設定が済んだらAdd characterボタン(Aと書いてるやつ)を押す。
    そしたら、
  15. Characters
  16. に、空の文字が表示されるのでそれをクリック そこに設定したい文字を入力して、
  17. 【Letter position】
  18. ここで、どこの文字を表示するか設定します。
  19. Start in the pixel
  20. その文字が、左から何ピクセル目から始まるか、というのを設定します。
  21. Width
  22. その文字の幅は、何ピクセルか設定します。

で、本来ならStart in the pixelとwidthの値で、画像の黄色い線が表示されるはずなんだけど、これはなぜか一度作成したフォントファイルを読み込み直さないと表示されません。なので、一度保存して読み込み直すとイイかも。フォントファイルの保存は左上のフロッピーボタンで保存できます。
FontFactoryで作ったfntファイルを読み込んだ時

■設定できる文字一覧

ABCDEFGHIJ
KLMNOPQRST
UVWXYZ
abcdefghij
klmnopqrst
uvwxyz
0123456789
~`!@#$%^&*
()-_+=
0x5B【[】]{}|:0x3B【;】"'
<>,./?
MUGEN本体のfntより、引用。赤いのは、予約文字といって直接その文字を使用できないので、別の形に置き換えられています。0x3Bみたいに入力したらそれは;として扱われます。別に全部設定しなくても大丈夫です。ですが、設定しなかった文字は空白として表示されます。

■おまけ

  1. 公式のFont Document
  2. Capture STAFF
    - 画像のキャプチャ
  3. aviutl + Display2AVI
    - 動きが早いものを録画して、フレーム単位で確認できる

■ちょっと応用

  1. コンボとかの表示について・・・
    [Combo]の設定を見てもらうと分かるんですけど、コンボでは背景画像を設定できません。そこでフォントファイルに背景画像をあらかじめ読み込んでおき、数字以外の何か適当な文字に設定しておきます。そして、textに「%i 【設定した文字】」みたいに書いてやると背景画像を表示できます。ただし、文字に変わりないので調整とかは難しいかもです。
  2. Color Bankを使って、複数のカラーを使えるようにしてみよう
    応用編(Color Bank)の説明がわかりやすいです。自分の言葉で説明すると、さっきカラーパレットで、背景色以外の色を設定しましたが、その後ろに空きがあるなら、先ほどと同じ数だけの適当な色を設定しておけばfontの設定で色を変更することができます。
この記事は役に立ちましたか?
ご意見・ご要望はございますか?
記事に不備があった場合

不備があればGithubTwittersuteadddayov@gmail.comにご報告下さい。

記事を編集してみませんか?

ページ編集・翻訳にご協力いただける方を募集しております。お気軽にご連絡下さい。

We are looking for someone who can cooperate on page editing / translation. Please feel free to contact us.