Hako.png(402 byte) サイズ変更可能なオブジェクトをつくるには?

objd02_01.png(28387 byte)
オブジェクトがサイズ変更できると、
いろいろといいことがあります。
たとえば文字を表示するウインドウ
だったり、敵や自分の体力を表すバー
だったりと、いろいろな
使い道があります。

右図は同梱のサンプルゲームですが、
赤枠部分はサイズ変更可能な
オブジェクトでつくられています。

今回は、オブジェクトのサイズ変更と、
サイズ変更の際につかえる機能を
紹介・説明します。


もくじ

  1. その1:サイズ変更可能なオブジェクトにするには
  2. その2:オブジェクトサイズ変更時のアニメーション画像
  3. その3:オブジェクトサイズ変更時のあたり判定矩形


その1:サイズ変更可能なオブジェクトにするには

オブジェクトの情報編集画面にて、以下の画像の赤枠部分にチェックをいれます。
画像2:フリーサイズを有効にする

(クリックで拡大)

たったこれだけです。この操作をしたら、マップ編集画面にして、マップ上にあるこのオブジェクトの
配置オブジェクトを確認してみましょう。
(もちろん、マップ上になければ配置してみてください。)

下図部分のように、配置オブジェクトをクリックすると、サイズを変更するための点が現れます。
画像3:オブジェクトのサイズ変更

(クリックで拡大)
この点をマウス左ボタンを押しながらカーソルを移動させると(=ドラッグ操作)、オブジェクトの大きさを
自由に変えられます。




その2:オブジェクトサイズ変更時のアニメーション画像

配置オブジェクトのサイズを変更したとき、通常は下図の
ようにアニメーション画像も引き伸ばされます。

画像をそのまま引きのばすため、粗いドットが表れて
いますね。

ステージデザイナーでは、配置オブジェクトのサイズを
変更したとき、画像がどのように描画されるかを設定する
ことができます。


「画像をならべて表示」モード

画像を並べて表示モードは、右図のようにオブジェクトの
大きさを変更したとき、1つのアニメーションをオブジェクトの
大きさ分だけ並べて表示するモードです。

このモードを有効にするには、オブジェクト情報の編集画面
(下図:画像6参照)から、「画像を並べて表示」チェック
ボックスにチェックを入れます。
マップ編集画面でオブジェクトサイズを変更すると、右図の
ようにアニメーションが並べて表示されていることが確認
できます。

画像6:画像を並べて表示モードを有効にする

(クリックで拡大)


「領域分割」モード

たとえばメッセージボックスなどのオブジェクトは、
文字の量や表示する状況においてサイズを変更しなければ
なりませんね。

そこで、サイズ変更可能なオブジェクトをつくるのですが、
先ほど説明したように、オブジェクトサイズを変更すると
荒い画像となってしまい、見栄えが悪いです。

そこで、「領域分割」モードを使うと便利です。
右図のようなオブジェクトを拡大した時、なにも
しない場合はそのまま拡大してしまうため、枠線も
太くなってしまいます。

そこで、領域分割モードを使用すると、拡大具合が調整されるため、枠線部分は拡大せずにきれいに
拡大することができます。

もうすこし具体的に説明すると、アニメーション
フレームを右図のように9分割し、画像拡大される部分と
されない部分、縦(もしくは横)方向のみの拡大とする
部分を設定することで、枠などの表現がきれいにできる
ようにする機能です。

たとえば、メッセージボックスや選択ボックスなどの、状況によって大きさを変える必要のある枠や、 HPなどを示すステータスバーなどの作成に役立ちます。

画像9:領域分割モード設定画面

(クリックで拡大)
画像9(上図)赤枠部分の「領域分割を有効にする」チェックを入れ、分割サイズを入力すると
領域分割が有効になります。

同時に「画像を並べて表示」モードも有効にしておくとよいでしょう。



その3:オブジェクトサイズ変更時のあたり判定矩形

設定を行えば、オブジェクトサイズを変更すると同時に当たり判定矩形サイズも変更することが
できます。

通常の場合は、右図のようなあたり判定矩形をもった
オブジェクトをサイズ変更した場合、あたり判定矩形は
サイズ変更されません。

「アンカー」を設定したあたり判定矩形は、オブジェクト
サイズ変更時に、変更したサイズに応じてあたり判定矩形
大きさを自動で調整します。

アンカーは、オブジェクト外枠とあたり判定矩形を
つなぎとめる役割をします。

オブジェクトサイズを変更しても、オブジェクト外枠とあたり判定矩形はつなぎとめられているため、
アンカーを設定した判定矩形はオブジェクト外枠と同様に大きさを変えるのです。
つまり、画像11(下図)のようにアンカーを設定した辺はオブジェクトサイズ変更時に判定矩形が
変化しますが、設定していない辺はそのままのサイズとなります。
画像11:アンカー動作イメージ



画像12:アンカー設定画面

(クリックで拡大)
画像11(上図)赤枠部分を押すと、アンカー設定ダイアログが表示されます。
矩形のどの辺にアンカーを設定するかを、設定画面で設定しましょう。
(設定画面を画像12:下図に示します。)

画像13:アンカー設定画面2

(クリックで拡大)




←もくじへもどる