今回は、RPGツクールMZでピクチャ画像を画面中央に表示する方法を紹介します。
ピクチャの位置設定は、簡単そうに見えて意外とずれやすいところです。特に「原点」がどこにあるかを理解していないと、X座標とY座標を入れても思った位置に表示されません。
結論から言うと、原点を中央にする場合は Graphics.width / 2 と Graphics.height / 2 を使えば、画面サイズが変わっても中央に寄せやすくなります。
1. 原点の違いをおさらいする
ピクチャを中央寄せするときは、まず原点の違いを押さえておく必要があります。
原点とは、画像のX座標・Y座標をどこ基準で考えるかという設定です。RPGツクールMZでは、主に「左上」と「中央」の違いを意識します。
- 原点左上: 画像の左上隅が基準点になる
- 原点中央: 画像の中央が基準点になる
たとえばX0・Y0に表示するとします。原点が左上なら、画像の左上隅が画面のX0・Y0に来ます。
一方で原点を中央にすると、画像の中心がX0・Y0に来ます。同じ座標を指定しても見た目が変わるのは、この基準点が違うからです。
ピクチャがずれるときは、座標そのものよりも「原点がどこになっているか」を先に確認すると原因を見つけやすいです。
2. 原点中央でピクチャを中央寄せする
原点を中央にしている場合、考え方はシンプルです。画面の幅と高さを半分にすれば、ちょうど画面中央の座標になります。
| 軸 | 式 |
|---|---|
| X | 画面の幅 ÷ 2 |
| Y | 画面の高さ ÷ 2 |
つまり、画面の横幅の半分をX座標に、画面の高さの半分をY座標に入れれば、ピクチャの中心が画面中央に来ます。
変数を使う方法
変数を使う場合は、画面サイズを変数に入れてから半分にします。
たとえば画面の横幅が1920、縦が1080の場合は、次のように考えます。
- ピクチャX という変数に画面の幅、例として1920を入れる
- ピクチャY という変数に画面の高さ、例として1080を入れる
- それぞれを ÷2 する
- ピクチャの座標を、ピクチャX・ピクチャYの変数で指定する
これでピクチャは中央に寄ります。
RPGツクールMZのデフォルト設定では、画面の幅が816、高さが624です。実際に使うときは、自分のゲームの「システム2」にある画面の幅・画面の高さに合わせてください。
スクリプトを使う方法
変数でも中央寄せはできますが、画面サイズを変えたときに手直しが必要になります。
そこで便利なのが、スクリプトで画面サイズを取得する方法です。
| 軸 | スクリプト |
|---|---|
| X | Graphics.width / 2 |
| Y | Graphics.height / 2 |
Graphics.width はゲーム画面の横幅、Graphics.height はゲーム画面の高さを取得します。
この書き方にしておけば、システム2で画面の幅や高さを変更しても、中央寄せのために数値を直す必要がありません。画像や画面サイズをあとから変更しやすい、変更に強い指定になります。
スクリプトと聞くと少し難しく感じるかもしれませんが、この2つは短いので覚えておくと便利です。
3. 原点左上でピクチャを中央寄せする
原点を左上にしている場合は、原点中央と同じ指定では中央に寄りません。
原点左上では、画像の左上隅が指定した座標に来ます。そのため、画面中央の座標をそのまま入れると、画像全体が右下にずれて見えます。
中央に戻すには、画像の幅の半分と高さの半分を引く必要があります。画像の中心を画面中央に合わせるために、画像半分ぶんだけ左上へ戻すイメージです。
固定値で引き算する方法
同じ画像だけを中央に寄せたい場合は、画像サイズをあらかじめ確認して、その半分を引けば対応できます。
たとえば画像の横幅が880、縦が640の場合はこうです。
- X: 画像幅の半分である 440 を引く
- Y: 画像高さの半分である 320 を引く
この方法でも中央寄せはできます。
ただし、画像の幅や高さが変わると、そのたびに引く数値も変えなければいけません。固定値での指定は簡単ですが、あとから素材を差し替える予定がある場合はずれやすくなります。
スクリプトで画像サイズを自動取得する
画像ごとに違う幅や高さを自動で取得できると、より扱いやすくなります。
まず、画面中央の座標は原点中央のときと同じです。
X = Graphics.width / 2
Y = Graphics.height / 2そこから、画像の横幅と縦幅の半分を引きます。
| 軸 | スクリプト |
|---|---|
| X（画像幅の半分を減算） | $gameScreen._pictures[ピクチャ番号-1]._bitmap.width / 2 |
| Y（画像高さの半分を減算） | $gameScreen._pictures[ピクチャ番号-1]._bitmap.height / 2 |
鍵括弧の中のピクチャ番号は、実際のピクチャ番号から1を引いた数字になります。
たとえばピクチャ番号1なら、指定する番号は 0 です。ピクチャ番号2なら 1 になります。
注意点
この方法には注意点があります。あらかじめ画像が表示されていないと、画像サイズを取得できません。
この命令は、前もって表示されたピクチャの画像サイズを参照するものです。そのため、先にピクチャを一度表示しておく必要があります。
対策としては、次のようにします。
- 画面外、たとえばX:-1・Y:-1などに一旦表示しておく
- 画像を出した直後はタイムラグが出る場合があるため、ウェイトを3フレームほど挟む
ピクチャを表示してからサイズを取得する。ここを忘れると、式が正しくても想定どおりに動かないことがあります。
まとめ
RPGツクールMZでピクチャを中央寄せするなら、まず原点を確認するのが大事です。
原点中央で中央寄せするなら、基本は Graphics.width / 2 と Graphics.height / 2 です。画面サイズを変更しても対応しやすいので、まずはこの方法を覚えておくと使いやすいです。
原点左上の場合は、そこからさらに画像サイズの半分を引く必要があります。固定値で引いてもいいですが、画像を差し替える可能性があるなら、スクリプトで画像サイズを取得する方が変更に強くなります。
ピクチャの座標がずれるときは、座標だけを見るのではなく、原点と画像サイズも一緒に確認してみてください。
