余白(padding)とはボタン間の空白のことです。準備していただく画像のサイズやエフェクトによってはpadding指定を適切に行なう必要があります。 余白を適切に設定することで、ボタン周辺の無駄な空白を取り除く、ことができます。

※余白指定はイージーモード(button_mode = 0)でのみ有効です。

余白指定無し

左は余白指定無しのサンプルです。横335px,高さ255pxの画像を4個のボタン(横2x縦2)として定義しています。 よってFBEはボタンそれぞれを横167.5px (335/2) , 高さ127.5px (255/2)として認識します。

FBEの仕様では、1px未満の箇所が誤差や隙間等といった現象として現れることがあります。 良く御覧頂かないと分からないかもしれません。サンプル1はその現象をお見せするものでもあります。 button3とbutton4のロールオーバーエフェクト終了後、下部に若干オレンジの線が見えると思います。誤差によって背景画像が透けて見える為です。

 

- 回避策 -

  1. FBEの認識するボタンサイズが小数以下の値を含まないように画像を準備又は定義する。
  2. button_mode = 1(個別定義モード)でそれぞれのボタン位置を適切に指定する。

- 備考 -
条件によっては、誤差の影響を受けないこともあります。

例1:背景色と余白色が同一等。

適切な余白を指定

余白(padding)を適切に定義することで、誤差がでないようにしています。

 
横幅高さ上余白下余白左余白右余白ボタン間余白
335px255px5px5px5px5px5px

余白は上下左右それぞれ5px、ボタン間余白が5xpとなっています。

以上のことから余白(padding)を5pxと指定した場合、FBEがどの様にボタンサイズを認識するか?例を示します。

FBEボタンサイズ認識例
ボタンサイズ横幅は160pxボタンサイズ横幅 = (画像横幅 - 左余白 - ボタン間余白 - 右余白) / 列数(col_max)
計算式 160 = (335 - 5 - 5 - 5) / 2
ボタンサイズ高さは120pxボタンサイズ高さ = (画像高さ - 上余白 - ボタン間余白 - 下余白) / 行数(row_max)
計算式 120 = (255 - 5 - 5 - 5) / 2

余白を適切に指定することでFBEが認識するボタンサイズは横160px , 高さ120pxとなり小数点以下の値を含まないことから誤差の現象を回避することができます。

余白イメージ

余白イメージ

青の箇所が余白です。 左図の例ではボタン間の余白が全て5pxとなるように画像を作成しています。

 

余白定義方法

余白はpaddingパラメータで指定します。

btn_bg.jpg
image_easy/btn_bg.
btn_normal.jpg
image_easy/btn_normal.
btn_rollover.jpg
image_easy/btn_rollover.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

<common>

    <copyright>elz.jp</copyright>

    <col_max>2</col_max>
    <row_max>2</row_max>

<!-- 余白の指定 -->
    <padding>5</padding>

    <background>image_easy/btn_bg.jpg</background>
    <button_normal>image_easy/btn_normal.jpg</button_normal>
    <button_over>image_easy/btn_rollover.jpg</button_over>

    <over_effect>3808</over_effect>
    <over_time>20</over_time>

    <click_effect>3702</click_effect>
    <click_time>20</click_time>

</common>

</pagedata>
パラメータ説明
1.padding(余白)

ボタン間の余白をピクセル単位で指定します。
省略時は「0」となります。

パラメータ一覧:padding項も別途ご参照下さい。