画像の作成・設定 1: パズルに適した画像を作る →(サイズ・形式の変更)
- ダウンロードした状態では、パズル画像が自動的にサイズ調整される設定になっています。
これは便利な機能ですが、できるだけ綺麗に画像を表示するためにも
前もって画像のサイズを整えておきましょう。
またサイズの大きすぎる画像は表示に時間がかかるので
適正なサイズに縮小しておく必要があります。
※パソコン上で早く表示されてもブラウザやスマートホン上では遅くなります。
画像加工ソフト(例:「PictBear」)を使って以下のサイズと形式に変更します。
パズル画像のサイズ
- 幅 → 480px 以内
- 高さ → 440px 以内
パズル画像の形式
- JPEG →おすすめ。特に写真に適しています。
- PNG →イラスト画像ならこちらでも可。
- 次に自動サイズ調整を無効にします。
UDBエディタを開いてタイプ「9:[SlidPuz]基本設定」を選び、
「▼基本設定」の「パズル画像表示倍率」を「50%(推奨)」に変更します。
- 最大サイズ → 自動でサイズ調整されます。
- 50%(推奨) → 画像を50%に縮小して表示します。
- 100% → 使いません。
(※ver1.03では最初から「50%」に設定されていることがあります。
その場合は設定を変えずに「OK」ボタンを押してUDBエディタを閉じて下さい。)
- 変更が終わったら「OK」ボタンを押してUDBエディタを閉じて下さい。
- ゲームを実行して正しく表示されているか確認してみましょう。
(参考): 表示倍率50%のワケ
先ほど「パズル画像表示倍率」で「50%(推奨)」を選びました。
ここでは「なぜ100%ではなく50%なのか」について説明します。
画面デザインを変更したい方はぜひお読み下さい。
ゲーム画面のサイズについて、
ウディタでは 「320x240」 「640x480」 「800x600」 の3種類から選択ができますが、スライドパズルでは最も小さい 「320x240」 を採用しています。(ゲーム速度を早くするため。)画面デザインをする時にも 「320x240」 の範囲でボタンや枠の配置を行います。
ところが実際にパソコン上やPLiCy上に表示される画面は 「640x480」 のサイズです。
つまりプレイヤーが見ているのは、縦横が2倍に拡大された画面というわけです。これではせっかくのパズル画像もキレイに表示されませんね。
そこでミラクル必殺技 「50%の倍は100%だ!」 を使います。
「640x480」 の画像を50%指定でウディタの画面に配置するとアラ不思議!
ゲーム画面ではちゃんと 「640x480」 の画質で表示されます。まとめると、
「画像は640x480基準で作り、50%指定で配置するとキレイに表示される」
ということになります。
画像の作成・設定 2: メニュー用画像の作成・登録
- メニュー画面に表示される画像はパズル画像の縮小版ですが
他の画像を表示することもできます。
また別に画像を用意した方が、メニュー上での表示も速くなります。
メニュー用画像のサイズ
作成した画像は「パズル絵」フォルダにおいてください。
- 幅 → 184px 以内
- 高さ → 228px 以内
- 次にUDBの設定を行います。
UDBエディタを開いてタイプ「10:[SlidPuz]出題設定」を選びます。
- ジャンルを選び、変更したい問題の「メニュー用別画像」を設定します。
(右にある「File」ボタンを押して画像を選択します。)
- 変更が終わったら「OK」ボタンを押してUDBエディタを閉じて下さい。
- ゲームを実行して正しく表示されているか確認してみましょう。
問題の設定 3: 完成後おまけ画像の作成・登録
- パズル完成のご褒美として、
絵をクリックしている間、別の画像を表示することができます。
完成後おまけ画像のサイズ
作成した画像は「パズル絵」フォルダにおいてください。
→ パズル画像と同じサイズ
- 次にUDBの設定を行います。
UDBエディタを開いてタイプ「10:[SlidPuz]出題設定」を選びます。
- ジャンルを選び、変更したい問題の「完成後用別画像」を設定します。
(右にある「File」ボタンを押して画像を選択します。)
- 変更が終わったら「OK」ボタンを押してUDBエディタを閉じて下さい。
- ゲームを実行して正しく表示されているか確認してみましょう。