画面デザイン 1： 画像を直接入れ替える方法
- 画面デザインのもっとも簡単な方法は、画像を直接入れ替えることです。
- 例として、メニュー画面の背景をセピア調にしてみましょう。
上のチェック柄画像を右クリックで保存して「Picture」フォルダにおき、名前を「bg2.png」に変更します。
- ついでに枠もセピア調にします。
- ゲームを実行するとこんな画面になりました。
（タイトルのすぐ下のラインが青色のままですが、ひとまずここは我慢です。）
画面デザイン 2： UDBで設定する方法
- UDBを使用すると、さらに細かい変更が可能です。
- 背景、ボタン、枠の画像を変更する
- パーツの色を変更する
- パーツを非表示にする
- パーツの場所を移動する
- パーツを追加する
画面に表示するパーツのことを、スライドパズルコモンでは「画像オブジェクト」と呼びます。
- 背景画像もボタンも枠も全て「画像オブジェクト」です。
- これらはUDB 「3:画像オブジェクト」で設定を変更することができます。
-
例外として、プログラムで設置されるパーツ（パズルピースやメニュー画面の数字ボタンなど）は「画像オブジェクト」ではありません。
- その場合でも別の方法で設定を変えることが可能です。
- 例として、タイトル画面の背景を別の画像にしてみましょう。
（※ウディタデフォルト背景素材）
上の画像を右クリックで保存して「Picture」フォルダにおきます。
- 次にUDBの設定をします。
新しい画像を使う時はまずUDB 「1:画像ファイル」に登録する必要があります。
データ17にちょうど「タイトル背景」があるので、そこで先ほどの画像を指定しましょう。
（拡大率は、320x240の画像なので100%にします。）
- これで設定は終わりですが、せっかくなので「3:画像オブジェクト」も見ておきましょう。
データにたくさんの項目が並んでいますが、よく見ると「タイトル画面」「メニュー画面」「メイン画面」と画面ごとに分かれています。
タイトル画面の背景は「3:タイトル背景」なので、これを選択します。
設定項目がたくさんありますが、今回見るのは赤い丸で囲んだ部分です。
この内容を簡単に説明すると、
『「タイトル背景」で指定した画像を左上座標(0,0)に描画する』
となります。
（「有効？」は画像をボタンにする時に（クリックでイベントを受け付ける時に）設定します。）
- 今回は眺めるだけで変更はしません。「OK」ボタンを押してUDBエディタを閉じます。
- ゲームを実行するとこんな画面になりました。
（バージョン表示は消しました。→ バージョン表示を消す）
画面デザイン 3： ボタン画像を作る
- 「画面デザイン 1」で作ったセピア調のメニュー画面ですが、
せっかくなのでボタンもセピア調に変更することにします。
変えるボタンは下の２つです。
画像ソフトでセピア色にしてもいいのですが、今回はボタンを１から作り直すことにしましょう。
- まずはボタンを作成するフリーソフトをダウンロードします。
アクア風ボタン作成ソフト「AquaMaker2」
→ 「TAKABO SOFT」からダウンロード （Windowsソフトのページにあります。）
のデータファイルもダウンロードします。→
Btn_start_orange.am2
- 「AquaMaker2」を実行して「スタートボタン（オレンジ）.am2」を開いて下さい。
スタートボタンが表示されるので、赤い丸で囲んだ部分をいじってセピア調にします。
- できあがったら、[ファイル]＞[PNG形式で書き出す]でボタン画像ファイルにします。
Btn_start_brown.am2
- 同様に
のセピア版も作ります。図形の形を変えて、文字を「セーブ」に変更するだけです。
- 矢印
は黄色にしました。Galeという画像ソフトを使って加工しています。
Btn_arrow_blue.am2
- ゲームを実行するとこんな画面になりました。
ボタンサンプル
・セーブボタン抹茶色
・「ButtonMaker」（→窓の杜リンク）で作成したボタン
（※作成したボタンは商用・非商用にかかわらず自由に利用可）
Btn_start_woody.ibd （右クリックで「対象をファイルに保存」）
