Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

JavaScriptとCSSによるアドベンチャーゲームの作成

フィルタによる画像処理で高度な演出を実現する

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/03/15 12:00

本稿では、JavaScriptを使ってInternet Explorerで動作するゲームを開発します。より本格的なゲームでは、画面の切り替え時にフェードイン・フェードアウトなどの演出が行われますが、DHTMLではイメージをピクセル単位で編集し、新しいイメージを構築することはできません。そこで、ゲームに必要な高度な演出を実現する方法を解説します。

目次
完成図
完成図

はじめに

 小さなミニゲームの場合、画像を動かし文字を表示することができれば、ある程度は満足のいくものを作ることができますが、より本格的なゲームを開発する場合はそう簡単ではありません。

 例えばアニメーションであれば、アニメーション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()";

 このように、複数のフィルタを組み合わせることに問題はありません。

サンプルプログラム1
<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()でさらに反転して元に戻ります。全てのフィルタ効果を無効にしたければ空文字""を代入してください。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 赤坂 玲音(アカサカ レオン)

    平成13年度「全国高校生・専門学校生プログラミングコンテスト 高校生プログラミングの部」にて最優秀賞を受賞。 2005 年度~ Microsoft Most Variable Professional Visual Developer - Visual C++。 プログラミング入門サイト Wis...

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5