【Fungus】Menuダイアログをカスタマイズしてみる

今回は、FungusのMenuダイアログのボタンの画像とフォントをデフォルトのものから新しいものに変更してみました。完成すると以下の画像のようになります。

f:id:futanoue:20160603103531j:plain
© びたちー素材館 *1
© 2002-2012 M+ FONTS PROJECT
© 2012 Fontna.com *2
© きまぐれアフター *3

以前に試したSayダイアログのカスタマイズと同じような方法で、簡単にカスタマイズできました。

【Fungus】Sayダイアログをカスタマイズしてみる
今回は、Sayダイアログの画像をデフォルトの画像から別の画像に変更してみました。フォントも変更しています。 完成すると下の画像のようになります。 © Unity Technologies Japan/UCL *1 © きまぐれアフター *2 © 空想曲線 *3 © 2002-2012 M+ FONTS PROJECT © Inform...

目次

ボタンの画像を準備する

Menuダイアログに表示するボタンの画像を準備します。

必要な画像を作成する

今回使用したボタンの画像は、通常の状態ハイライトの状態の2種類がありました。これ以外にも、ボタンが押された状態無効の状態の2種類の画像が必要です。

PhotoshopGIMPなどの画像編集ソフトを使用して、これらの画像を作成します。また、画像の大きさは268×76(縦・横とも4の倍数)に変更しました。

f:id:futanoue:20160604132111j:plain

Unityにインポートする

ボタンの画像をUnityのProjectウィンドウにドロップするなどしてインポートします。

インポートしたら、Inspectorウィンドウに表示されるImport Settingsで調整を行います。今回使用した画像の場合は、Pixels Per Unit25にし、Generate Mip Mapsチェックを外しました

f:id:futanoue:20160604134328j:plain

スプライトエディターで調整をする

Import SettingsにあるSprite Editorボタンを押してスプライトエディターを開き、Borderを調整します。

ボタンを拡大して表示するときに、緑色の線で囲まれた部分だけが拡大され、外側の部分は拡大されないようにできます。

f:id:futanoue:20160604135835j:plain

メニューから Tools > Fungus > Create > Menu Dialog を選択して、MenuDialogオブジェクトを作成します。

f:id:futanoue:20160529173541j:plain

MenuDialogオブジェクトの子孫のオブジェクトには ButtonGroupOptionButton0OptionButton5TimeoutSlider があります。これらのオブジェクトの画像、位置、サイズなどを調整することでMenuダイアログをカスタマイズしていきます。

f:id:futanoue:20160529181404j:plain

ボタンの画像を変更する

HierarchyウィンドウでOptionButton0OptionButton5オブジェクトを選択し、各状態のボタンの画像をInspectorウィンドウにドロップします。

Layout ElementコンポーネントPreferred Heightでボタンの高さを調整します。

ボタンが画面からはみ出る場合は、ButtonGroupオブジェクトのRect Transformコンポーネントで位置を調整します。

f:id:futanoue:20160604144055j:plain

フォントを変更する

HierarchyウィンドウでTextオブジェクトを選択し、TextコンポーネントFontにフォントをドロップします。Font Sizeでサイズを調整します。

f:id:futanoue:20160604145420j:plain

シーンを実行する

シーンに背景画像を追加し、Menuコマンドでメニューを表示すると下の画像のようになりました。

f:id:futanoue:20160603103531j:plain

*1:ボタンの画像は、びたちー素材館様の「シンプルフレーム(&発光ボタン)」を使用しました。■ びたちー素材館 ■ ゲーム・サウンドノベル フリー素材 シルエット立ち絵 声素材 ホラーボイス BGM

*2:フォントは、フォントな様の「やさしさゴシックボールド」を使用しました。フォントな。無料日本語フリーフォント

*3:背景画像は、きまぐれアフター様の「背景素材 駅前 駅名看板有りver」を使用しました。きまぐれアフター

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする