『RPGツクールMZ』のレイアウト用数値を調べてみた
『RPGツクールMZ』の画面周りは色々定数が入ってて、予想外の挙動をしがちです。
以前にウィンドウ周りについては調べましたので、それ以外の部分も付け加えてまとめておきたいと思います。
また、カスタムメニュー作成プラグインを代表に、画面のレイアウトを行う際に把握しておきたい数値は結構あります。
行き当たりばったりでも、なんとかなりはするのですが、まとまった情報があって損はないでしょう。
レイアウト関連メソッド・プロパティ
レイアウト関連メソッド・プロパティはかなりあちこちに散らばっていて把握するのが難しいので、とりあえずとにかく並べてみました。
値は規定値であり、大抵はエディタからは変更できません。ただし[UIエリアの幅]、[UIエリアの高さ] を元にした値は変わります。
[フォントサイズ]に関しては、なぜか大きさを変えてもレイアウトに影響はありません。
ユーザの設定によって変化する値には「•」をつけておきます。逆にいうとそれ以外は固定ということで、ちょっとツクール融通効かなすぎではないか、と思います。
また、Rectangle は、x, y, width, heightをまとめたデータで、値は書いてませんが、だいたい近くにあるそれらの値が入ってます。
Graphics
| スクリプト | 大きさ | 説明 |
|---|---|---|
Graphics.width |
816• | 画面の幅 |
Graphics.height |
624• | 画面の高さ |
Graphics.boxWidth |
808• | [UIエリアの幅] - 8 |
Graphics.boxHeight |
616• | [UIエリアの高さ] - 8 |
UIエリアが画面中央に配置され、ウィンドウなどの各部品はこの領域の左上を原点(0, 0)として配置されます。
さらにウィンドウの中にある項目はウィンドウの左上を原点とします。
ImageManager
| スクリプト | 大きさ | 説明 |
|---|---|---|
ImageManager.iconWidth |
32 | アイコンの幅 |
ImageManager.iconHeight |
32 | アイコンの高さ |
ImageManager.faceWidth |
144 | [顔]画像の幅 |
ImageManager.faceHeight |
144 | [顔]画像の幅 |
Game_Map
| スクリプト | 大きさ | 説明 |
|---|---|---|
$gameMap.tileWidth() |
48 | タイル幅 |
$gameMap.tileHeight() |
48 | タイル高さ |
$gameMap.screenTileX() |
17• | 一画面中の横のタイル数 |
$gameMap.screenTileY() |
13• | 一画面中の縦のタイル数 |
Game_System
| スクリプト | 大きさ | 説明 |
|---|---|---|
$gameSystem.windowPadding() |
12 | 詰め物幅 |
$gameSystem.mainFontSize() |
26• | フォントサイズ |
枠と内容の間につける隙間を padding(詰め物)と言って、プログラム的にはよく使われる識別子で、特にHTMLでお馴染みです。
ただし、HTML(CSS)の padding とは指し示す箇所が異なります。
Window_Base
| スクリプト | 大きさ | 説明 |
|---|---|---|
calcWindowHeight() |
※1 | ウィンドウ高さ |
width |
※2 | ウィンドウ幅 |
height |
※1 | ウィンドウ高さ |
innerHeight |
※2 | 内容幅 |
innerWidth |
※1 | 内容高さ |
baseTextRect() |
※3 | 内容の文字表示領域 |
lineHeight() |
36 | 行高さ |
itemWidth() |
※4 | メニュー項目幅 |
itemHeight() |
※5 | メニュー項目高さ |
itemPadding() |
8 | メニュー項目詰め物 |
※1 ウィンドウの種類ごとに違う値だが、だいたい種類ごとには固定。
例えば Window_Message は行数が4固定なので、高さも固定になる。
※2 [UIエリアの幅] に応じて変わるか、mainCommandWidth() の240固定。
※3 innerHeightはそのままinnerWidthだけ itemPadding()ぶん縮めた内容の矩形範囲。座標は縮んだ分だけ原点から横にずれてます。
※4 使われるクラスによって変わりますが、ざっくりいうとinnerWidthを横の項目数で割った値です。
※5 規定値は36ですが、実際項目として使われる Window_Selectableでは40です。
Window_Selectable
| スクリプト | 大きさ | 説明 |
|---|---|---|
Window_Selectable.prototype.colSpacing() |
※ | 列隙間 |
Window_Selectable.prototype.rowSpacing() |
※ | 行隙間 |
| スクリプト | 説明 |
|---|---|
Window_Selectable.prototype.maxCols() |
項目列数 |
Window_Selectable.prototype.maxRow() |
項目行数 |
Window_Selectable.prototype.maxItems() |
項目数 |
Window_Selectable.prototype.itemRect() |
項目矩形範囲 |
Window_Selectable.prototype.itemRectWithPadding() |
項目矩形範囲(詰め物抜き) |
Window_Selectable.prototype.itemLineRect() |
項目行矩形範囲 |
※Window_Selectable のメソッドは子孫クラスで上書き(オーバーライド)されるので、大きさは都度変わります。
itemRectWithPadding()は名称的に逆じゃないかという気もしますが、詰め物抜きの大きさです。
Window_NameInput
| スクリプト | 大きさ | 説明 |
|---|---|---|
groupSpacing() |
24 | グループの隙間 |
Scene_Base
| スクリプト | 真偽値 | 説明 |
|---|---|---|
isBottomHelpMode () |
true |
ヘルプ上下位置 |
isBottomButtonMode () |
false |
ボタン上下位置 |
isRightInputMode () |
true |
入力項目左右位置 |
このクラスでは、UI部品の位置を設定するメソッドがいくつかありますが、返るのは全て固定値 なので下記の表の値は事実上固定の値です。
| スクリプト | 大きさ | 説明 |
|---|---|---|
buttonAreaBottom() |
52 | ボタン領域の下辺位置 |
buttonAreaHeight() |
52 | ボタン領域の高さ |
buttonAreaBottom() |
0 | ボタン領域の上辺位置 |
mainCommandWidth() |
240 | メインコマンドの幅 |
buttonY() |
2 | ボタンのy位置 |
Scene_MenuBase
| スクリプト | 大きさ | 説明 |
|---|---|---|
helpAreaBottom() |
616• | [ヘルプ]領域の下辺座標 |
helpAreaHeight() |
96 | [ヘルプ]領域の高さ(2行での計算) |
helpAreaTop() |
520• | [ヘルプ]領域の上辺座標 |
helpWindowRect() |
Rectangle |
[ヘルプ]ウィンドウの矩形範囲 |
mainAreaBottom() |
520• | メイン領域の下辺座標 |
mainAreaTop() |
52• | メイン領域の上辺座標 |
mainAreaHeight() |
468• | メイン領域の高さ |
各値に「•」が付いてて融通効くのかなと思うかもしれませんが[UIエリアの高さ]に応じて変わるだけで、実質固定値です。
Sprite_Button
| 名前 | 大きさ | 説明 |
|---|---|---|
blockWidth() |
48 | ボタンの単位幅 |
blockHeight() |
48 | ボタンの単位高さ |
これはタイルと同じサイズですが、ボタンの基本単位。意味的には別の数字です。固定ですけどね。
ざっくりまとめ
- 全体の画面サイズがあり中にUIエリアがあるけど、実際にウィンドウなどが描かれるのは各辺から-4した範囲。
- ウィンドウから内容までは12ピクセルの隙間(
padding)が空いていいる。 - つまりウィンドウサイズに対して、内容は縦横共に24ピクセル小さいということ。
- ウィンドウ内容はその範囲(
innerWidh,innerHeight)に好きに描かれる。 - 文字に関してはいくつか規定のサイズがあり、行高さは32、項目高さは基本40ピクセルに固定。
- 各所の隙間用の値が用意されていて代表的なのは
itemPadding()の8ピクセル。
paddingと枠の画像の見た目は、全然関連はないので気をつけろ!!
えー、すごく抜けがありそうなんですが気づいたら順次追記する予定です。皆さんも気づいたらコメント等でお知らせください。
そこそこコードを追っかけたので、その辺もまた別記事で書きます。
エンジョイツクールライフ! したっけ!
Discussion