前回と同じパノラマを使って、上下左右拡縮などのボタンをいじってみます。
まずは、コードの説明から。
skinフォルダにある、defaultskin.xml を開いて、14行目あたりを見ます。これがボタンの設定になります。

ボタンの設定部分

 
	<!-- the container layer that contains the buttons -->
	<layer name="defaultskin_buttons" type="container" width="360" height="40" align="bottom=" y="10" scalechildren="true" scale="1.0" keep="true">
		<layer name="btn_in"       x="0"   style="defaultskin_button" crop="320|0|80|80" onovercrop="320|80|80|80" ondown="set(fov_moveforce,-1);"     onup="set(fov_moveforce,0);"     />
		<layer name="btn_out"      x="40"  style="defaultskin_button" crop="400|0|80|80" onovercrop="400|80|80|80" ondown="set(fov_moveforce,+1);"     onup="set(fov_moveforce,0);"     />
		<layer name="btn_left"     x="80"  style="defaultskin_button" crop=  "0|0|80|80" onovercrop=  "0|80|80|80" ondown="set(hlookat_moveforce,-1);" onup="set(hlookat_moveforce,0);" />
		<layer name="btn_right"    x="120" style="defaultskin_button" crop= "80|0|80|80" onovercrop= "80|80|80|80" ondown="set(hlookat_moveforce,+1);" onup="set(hlookat_moveforce,0);" />
		<layer name="btn_up"       x="160" style="defaultskin_button" crop="160|0|80|80" onovercrop="160|80|80|80" ondown="set(vlookat_moveforce,-1);" onup="set(vlookat_moveforce,0);" />
		<layer name="btn_down"     x="200" style="defaultskin_button" crop="240|0|80|80" onovercrop="240|80|80|80" ondown="set(vlookat_moveforce,+1);" onup="set(vlookat_moveforce,0);" />
		<layer name="btn_ctrlmode" x="240" style="defaultskin_button" crop="800|0|80|80" onovercrop="800|80|80|80" onclick="switch(control.mousetype,moveto,drag2d); switch(control.touchtype,moveto,drag2d); update_ctrl_mode();" />
		<layer name="btn_autorot"  x="280" style="defaultskin_button" crop="480|0|80|80" onovercrop="480|80|80|80" onclick="switch(autorotate.enabled);" />
		<layer name="btn_fs"       x="320" style="defaultskin_button" crop="560|0|80|80" onovercrop="560|80|80|80" onclick="switch(fullscreen);" visible="true" devices="fullscreensupport" />
	</layer>

ボタンの作り

結構面食らいそうな勢いですが、まず、大枠を説明するために、name以外の属性を消してみます。

 
	<layer name="defaultskin_buttons" >
		<layer name="btn_in" />
		<layer name="btn_out"/>
		<layer name="btn_left" />
		<layer name="btn_right" />
		<layer name="btn_up" />
		<layer name="btn_down"/>
		<layer name="btn_ctrlmode"/>
		<layer name="btn_autorot" />
		<layer name="btn_fs" />
	</layer>

なんとなく、構造が見えますね。defaultskin_buttons という箱があって、その中に、拡縮上下左右などのボタンが入っているわけです。
layer(レイヤー)とは、ブラウザ画面に固定するボタンを指します。これとは違って、パノラマ画像に固定するタイプをhotspot(ホットスポット)といいますが、これは後の話題。

まず注目したいのが、defaultskin_buttons の閉じタグの位置です。それぞれのボタンを挟み込んで、一番最後にあります。このような書き方をすることで、囲んでいる中のレイヤーを、defaultskin_buttonsレイヤーの「子供(children)」として扱うことができます。defaultskin_buttonsレイヤーを「親(parent)」といいます。
親子の関係を記す書き方にすると、下記のようになり、まったく同じ意味になりますが、同じ属性を全てに書き込まないといけないので煩雑です。ただ、子レイヤーの記述を別のところで書けるメリットがあります。

 
	<layer name="defaultskin_buttons"/ >

		<layer name="btn_in" parent="defaultskin_buttons"/>
		<layer name="btn_out" parent="defaultskin_buttons"/>
		<layer name="btn_left"  parent="defaultskin_buttons"/>
		<layer name="btn_right"  parent="defaultskin_buttons"/>
		<layer name="btn_up"  parent="defaultskin_buttons"/>
		<layer name="btn_down" parent="defaultskin_buttons"/>
		<layer name="btn_ctrlmode" parent="defaultskin_buttons"/>
		<layer name="btn_autorot"  parent="defaultskin_buttons"/>
		<layer name="btn_fs"  parent="defaultskin_buttons"/>

defaultskin_buttonsの属性

さて、レイヤーには画像などが貼り付けられるのですが、defaultskin_buttons には、type=”container” という属性が与えられています。これは画像を使わず、枠をコードだけで設定できます。枠に、塗りつぶし色や枠線を付けたりもできるのですが、ここでは、width=”360″ height=”40″ で幅と高さだけが指定されていて、要するに透明な箱が作られています。

align=”bottom=” y=”10″ でブラウザ画面の中の底中央基準で、縦に10ピクセル上に配置。(bottom= の=は間違いですね。消しておきましょう。)

scalechildren=”true” で子レイヤーのサイズを、親レイヤーのscaleに従わせる。従わせない時は、false(偽)にする。

scale=”1.0″ は、元画像のサイズそのままで表示(試しにこのサイズを変えると、親子全てのサイズが変わります。

keep=”true” は、パノラマ画像が変わったりしても常に表示する指定ですが、別のxmlで指定する場合などでも必要な属性です。

それぞれの値を変更すると、ボタン全体の配置を変えることができます。

子レイヤーの属性

子レイヤーはそれぞれのボタンの指定になり、だいたい似ていますので、btn_in (拡大)だけ見ていきます。

このあたりを変更することで、ボタンの画像やサイズ、位置を変えたり、拡大のスピードを変えたりできます。

 

futter