ティラノスクリプト:メニューボタンの画像変更・表示位置の変更

メニューボタンとは?

メニューボタン(公式ではメニュー画面表示ボタンと書いてありました)とは、そのボタンを開いたらセーブやらロードやらタイトルに戻るやら色んな機能の集合体のページへと繋ぐためのボタンです。デフォルトでは右下の方に三本線の丸いアイコンで表示されていると思います。
拙作「醍醐くんの飯活!!」では、右下のここにスマホのアイコンで表示させていました。

ここからセーブとかコンフィグとか表示されるメニュー画面を表示させることが出来ます。

メニューボタンの画像の変更をしたい

メニュー画面の画像の変更は実に簡単です。
(myprojects→自身の制作中ゲーム名フォルダ→tyrano→images→systemに投入。)

  1. メニューボタンとなる画像(png形式)を作成する
  2. 画像の名前をbutton_menu.pngに設定する
  3. myprojectsの中から制作中のゲーム名フォルダを選択
  4. tyranoフォルダ内にあるimagesフォルダを選択
  5. systemフォルダ内に作成したbutton_menu.pngをドラッグ&ドロップして元々あったファイルに上書きをする

メニューボタンとなる画像(png形式)を作成する

まずはメニューボタンとなる画像をpng形式(背景は透過したいので)で作成しましょう。画像サイズについては、実際に一文字の作ったアイコンのサイズは64×64(単位:px)でした。60~70pxくらいのサイズ感で作成すると良いかも知れません。

画像の名前をbutton_menu.pngに設定する

作成した画像の名前をbutton_menu.pngにして保存してください。というのも、既存のメニュー画像に上書きをする方が色々とプログラムの名前を書き換えたりする面倒ごとが省けるからです。もしも気になるようであれば、先にsystemフォルダ内にあるbutton_menu.pngという画像を別の場所に置いておくなどして保管しておくと良いと思います。(特別必要ないとは思いますけど)

myprojectsの中から制作中のゲーム名フォルダを選択

ご自分が制作に使用されているソフト、例えばティラノビルダーだったりティラノスタジオだったりティラノスクリプトだったりのフォルダがあると思いますが、そこをクリックしてmyprojectsというフォルダがあると思うのでその中にあるご自身が制作中のゲーム名のフォルダを選択してください。

tyranoフォルダ内にあるimagesフォルダを選択

そのまま、tyranoフォルダ内にあるimagesフォルダを選択しましょう。

systemフォルダ内に作成したbutton_menu.pngをドラッグ&ドロップして元々あったファイルに上書きをする

1の工程で作成していた画像を、systemフォルダ内にドラッグ&ドロップし、もしも上書きしますか?と問われたら「はい」を選択してください。それだけで終了です。

メニューボタンの表示位置の変更

メニューボタンの表示位置の変更は、myprojects→自身の制作中ゲーム名フォルダ→data→system→Config.tjsというファイルの設定を変更することで可能です。

ファイルの開き方が分からない…!と言う人は、エディタを使用しましょう。PCの既存ソフトであるメモ帳で開くことも可能かと思いますが、無料で手に入る便利なエディタもありますのでそちらを使用してください。ちなみに一文字はvisualstudiocodeという無料のエディタソフトを使用しました。

HTML/CSSで記事を書いていますが、Javascriptなどプログラミングにも使用できるソフトですし、行数表示もあって分かりやすい(一文字がよく〇行目のところにある~と説明しています)のと、検索機能も付いていますので探したい部分を見つけるのにも便利です。

// ◆ コンフィグ(メニュー)機能表示

Config.tjsを開いたら、// ◆ コンフィグ(メニュー)機能表示の項目を探してみてください。多分ですが160行目くらいにあります。

// ◆ コンフィグ(メニュー)機能表示
// セーブ・ロードやタイトルに戻るといった一連の機能を表示するかを指定します
;configVisible = true;  //コンフィグアイコンを表示
;configLeft    = -1     //コンフィグアイコンの左位置を指定できます。-1の場合は画面右下
;configTop     = -1     //コンフィグアイコンの上位置を指定できます。-1の場合は画面右下

恐らくデフォルトではこうなっていることと思います。このconfigLeftとconfigTopの値をいじることによって位置を変更することが可能です。
configLeftはX(横)軸、configTopはY(縦)軸の値だと思ってください。そして= -1と書かれている-1を削除し、そこに自分の設定したい位置の値を入力します。
実際、一文字はこのように設定しました↓

// ◆ コンフィグ(メニュー)機能表示
// セーブ・ロードやタイトルに戻るといった一連の機能を表示するかを指定します
;configVisible = true;  //コンフィグアイコンを表示
;configLeft    = 1207     //コンフィグアイコンの左位置を指定できます。-1の場合は画面右下
;configTop     = 565.5     //コンフィグアイコンの上位置を指定できます。-1の場合は画面右下

画面サイズは1280×720ですので、右下の方の微妙に上あたりに設定しました。この右下にあるきのこの画像が今作のゲームのメニューボタンです。ちなみに今作で初めてメニューボタンの位置を変更しました。

タイトルとURLをコピーしました