はじめに
小さなミニゲームの場合、画像を動かし文字を表示することができれば、ある程度は満足のいくものを作ることができますが、より本格的なゲームを開発する場合はそう簡単ではありません。
例えばアニメーションであれば、アニメーションGIFファイルを使ったり、実行時にImageオブジェクトを連続して変更するという方法が考えられます。しかし、フェードイン／フェードアウトを行うのに、全てのイメージに対して専用のアニメーションを作ることはあまりにも馬鹿げています。
そこで本稿では、よりゲームらしい高度な演出をスクリプトで実現する方法を、JavaScriptを使って説明します。
filterオブジェクトとフィルタ効果
前回、JavaScriptとCSSによるブロック崩しの作成で、スタイルシートを使った絶対座標によるオブジェクトの配置を解説しましたが、さらにスタイルシートを使って高度な演出を実現することができます。本来、ネイティブアプリケーションではグラフィカルな演出を実現するためにピクセル単位の細かなイメージ変換作業が必要でしたが、CSSではこうした作業がまったく不要となります。
CSSを使った特殊な演出には、styleオブジェクトのfilterプロパティを使います。このプロパティはCSSのfilter属性に対応するものです。
object.style.filter[ = filter]
filterには、オブジェクトに適応するフィルタを設定します。フィルタ、またはビジュアルフィルタ呼ばれるこの機能は、あらかじめ用意されたいくつかの機能を使ってオブジェクトに対して視覚的な効果を与えます。半角で区切りながら、複数のフィルタを組み合わせることも可能です。フィルタは、次のように文字列で設定します。
filtername(fparameter1, fparameter2...)
filternameには定められたフィルタ名を、fparamater1以降には、フィルタ名で指定したフィルタが要求するパラメータを指定します。パラメータが不要なフィルタの場合は指定する必要はありません。
最も単純なフィルタは、オブジェクトを水平方向、または垂直方向に反転させるフィルタです。画像を水平方向に反転させるにはFlipHを、垂直方向に反転させるにはFlipVをfilterパラメータに文字列として代入します。
image.style.filter = "FlipH()";
上記の文は、画像オブジェクトimageを水平方向に、すなわち左右に反転させるフィルタを実行します。この方法を使えば、例えばユーザーが操作するキャラクターアイコンが方向を変えたときの反転させた画像をあらかじめ作成して、実行時に画像を読み直して表示させるという処理が不要になります。水平方向と垂直方向の反転を同時に行うには次のように記述します。
image.style.filter = "FlipH() FlipV()";
このように、複数のフィルタを組み合わせることに問題はありません。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=shift_jis">
<title>サンプル 01</title>
<script language="javascript">
function fore_click() {
if (event.button == 1)
fore.style.filter += "FlipH() ";
else fore.style.filter += "FlipV() ";
label.innerHTML = "Filter=" + fore.style.filter;
}
</script>
</head>
<body>
<h1>サンプルプログラム 1</h1>
<p id="label">イメージをクリックしてください</p>
<img src="fore00.jpg" id="fore" onMouseUp="fore_click()">
</body>
</html>
このHTML文書を開いて、表示されているイメージをクリックするとイメージが水平方向または垂直方向に反転します。クリックされたボタンが左クリックであれば水平方向に反転し、そうでなければ垂直方向に反転させます。例えば、「FlipH() FlipH()」と同じフィルタが複数指定された場合は、それぞれのフィルタが順番に実行されます。よって、最初のFlipH()で反転し、次のFlipH()でさらに反転して元に戻ります。全てのフィルタ効果を無効にしたければ空文字""を代入してください。
