オブジェクトの表示・非表示
イメージを非表示にしたい場合、例えば、幅と高さを0にすることで一時的にイメージを隠蔽するという方法が考えられますが、スマートな手段とは言えません。幸い、CSSにはオブジェクトの可視性を設定する属性があるため、styleオブジェクト利用することで、イメージに限らずあらゆるHTMLオブジェクトの表示・非表示を制御することができます。
オブジェクトを画面上に表示するかどうかは、スタイル属性のvisibilityで設定することができます。styleオブジェクトでは、この属性に対応するvisibilityプロパティが提供されています。
object.style.visibility [ = sVisibility ]
sVisibilityには、可視性を表すキーワードinherit、visible、hiddenのいずれかを文字列で指定します。既定ではinheritが設定されていて、この場合は親要素の可視性を受け継ぎます。visibleの場合はオブジェクトを表示、hiddenの場合はオブジェクトを非表示にします。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>サンプル 02</title> <script language="javascript"> function vButton_click() { if (image.style.visibility == "visible") { image.style.visibility = "hidden"; vButton.value = "表示"; } else { image.style.visibility = "visible"; vButton.value = "非表示"; } } </script> </head> <body> <h1>サンプルプログラム 2</h1> <input type="button" onClick="vButton_click()" value="非表示" id="vButton"><br> <img src="test00.jpg" id="image" style="visibility:visible"> <p>ボタンを押すとイメージの可視性が切り替わります</p> </body> </html>
このドキュメントを開いて［非表示］ボタンを押すと、表示されているイメージが非表示状態になって見えなくなります。また、ボタンのテキストがスクリプトから変更されて、［表示］ボタンとなります。再度［表示］ボタンを押すと、非表示になっていたイメージが表示され、［非表示］ボタンに戻ります。
visibleプロパティの特徴は、HTMLドキュメント全体のレイアウトを変更せずに対象オブジェクトを非表示にできることです。例えば、イメージ下部に配置されている説明文が詰められることはありません。ゲームの場合は、レイアウトが変更されると不都合になることが多いので、この方が都合が良いと考えられます。もし、ツール的に利用するスクリプトなどで、オブジェクトを隠した際に、ほかのオブジェクトが詰められた方がよいという場合は、visibilityではなくdisplayプロパティを利用してください。
絶対位置指定
HTMLドキュメントの要素は、サイズや相対的な位置関係は設定できるものの、プラットフォームにできるだけ依存しないようにするために、レイアウトの大部分はブラウザなどのクライアントに委ねられています。ドキュメントを表示するデバイスの画面解像度は限定することができないので、本来ならばドキュメントの作り手が固定的なレイアウトをするべきではないというのが本質です。
しかし、ゲームのようなマルチメディアアプリケーションを作ろうと考えた場合、最低限必要な画面サイズを仕様上の制限とした上で、ある程度自由に座標設定などを行ってオブジェクトを表示させる必要があります。こうした座標の設定はHTML要素の属性だけで行うことはできず、CSSを活用しなければなりません。
オブジェクトの位置をピクセル単位の絶対座標で設定するには、最初にstyleオブジェクトのpositionプロパティを設定する必要があります。
object.style.position [ = sPosition ]
sPositionには、オブジェクトのレイアウト方法を表す文字列を設定します。デフォルトでは、HTMLドキュメントのルールに従ってレイアウトを行う「static」が設定されています。この場合、オブジェクトの座標をスクリプトから変更することはできません。absoluteを設定すると、親要素を基準とした絶対座標系で、オブジェクトの位置を指定することができます。親要素を持たない要素の場合はBODY要素が対象となります。relativeの場合は、HTMLに従ったレイアウトで配置された位置を基準とした、相対的な座標になります。
absoluteによる位置指定を絶対位置指定と呼び、relativeによる位置指定を相対位置指定と呼ぶこともあります。
絶対位置指定の場合でも、相対位置指定の場合でも、styleオブジェクトのleftおよびtopプロパティでHTMLオブジェクトの配置を設定することができます。leftプロパティは矩形オブジェクトの左端の座標を、topプロパティは矩形オブジェクトの上端の座標を設定します。
object.style.left [ = sLeft ]
sLeftには目的の座標を、数値または親要素の矩形に対するパーセントで指定することができます。数値の場合は、座標を表す数に続けてCSSの単位を表す文字を指定することができます。例えば "cm" であればセンチメートル、"mm" であればミリメートル、"px" であればピクセルになります。
object.style.top [ = sTop ]
topプロパティに設定するsTopも、leftプロパティと同様です。この2つのプロパティを設定することで、オブジェクトの座標を自由にスクリプトから変更することができます。例えば、マウスカーソルに合わせて動くイメージを作る場合、対象の要素にonMouseMove属性を指定して、イベント発生時にeventオブジェクトのxとyプロパティからマウス座標を取得し、移動させたいオブジェクトのstyle属性のleftとtopに座標を設定します。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>サンプル 03</title> <script language="javascript"> function moved() { image.style.position = "absolute"; image.style.left = event.x - (image.width / 2) + "px"; image.style.top = event.y - (image.height / 2) + "px"; } </script> </head> <body onMouseMove="moved()"> <h1>サンプルプログラム 3</h1> <img src="back.jpg" id="image"> </body> </html>
こうした自由なイメージレイアウトは、より高度なゲーム開発の要となるでしょう。特に複雑なゲーム画面は、背景や前景、演出、テキストウィンドウなどを重ね合わせて構築するため、絶対座標でイメージの描画位置を指定する必要があります。
注意点として、styleオブジェクトから座標系を取得する場合は、値が文字列として返されることが挙げられます。例えば、座標100ピクセルに配置されているオブジェクトのleftプロパティの値は "100px" という文字列です。ゲームでは、座標の計算処理が頻繁に行われますが、文字列のままでは数値として計算することができません。取得した文字列を数値化するにはparseInt()メソッドで変換します。
parseInt(numString, [radix])
numStringには数値に変換する文字列オブジェクトを、radixには文字列が表現している数の基数を2から36までの数値で指定します。省略した場合は、0xから始まる文字列の場合は16進数、0から始まる文字列は8進数、それ以外は10進数として処理されます。
