1-2.画像表示に注目してみる

HTML5では画像の描画方法が何種類か用意されている

samplejpg

前節では幾つかのサンプルゲームを見てみましたが、表示される画像に注目してみると、各ゲームで少し赴きが異なる事が判ります。

その理由は、各ゲームが使用している画像の描画方法が異なるからです。 本節では、それぞれの描画方法について少し細かく見ていきます。

図形の描画

HTML5ではcanvas要素が追加されました。 このcanvas要素ではJavaScriptプログラム用に幾つかのメソッドが公開されています。 それらのメソッドを利用すると、JavaScriptプログラムはcanvas要素として定義された画面領域内に各種の図形とテキストを描画できます。

描画可能な図形には、直線/曲線/四角形/円弧があり、それぞれに関して幾つかのプロパティも指定できます。また、それらの線で囲まれた領域を指定色で塗りつぶす事もできます。

前節で紹介した「テーブルテニス」では画像の描画に直線と円弧を使っています。 コートについてはプロパティで線幅を太くして直線で描画しています。 センターラインは点線になっていますが、これはプロパティで指定している訳ではなく、プログラムで点線となるように複数の直線を描画しています。

提供されているプロパティはあまり多くありませんが、JavaScriptプログラムで使用する事が前提となるため、複雑な図形もプログラミングによって描画させる事ができます。

グラデーションの描画

canvas要素には、簡単にグラデーション描画を行えるメソッドが用意されています。 画面描画を単色で行った場合には貧相に見える画面でも、グラデーションを利用するとリッチな感じに仕上げる事ができます。

前節で紹介したゲームでは「ブロック崩し」以降の全てのゲームでグラデーションを使用しています。 グラデーションの主なターゲットは背景画面ですが、「スピードレーシング」では道路の質感を出すためにグラデーションを利用しています。 また、「三次元迷路ゲーム」では、擬似3D効果を上げるためにグラデーションを利用しています。

グラデーションはプログラムを使って作成することも出来ますが、プログラムで描画するより、canvas要素で提供されるメソッドを利用した方が簡単です。 また、処理に必要なオーバーヘッドも少なくて済みます。

画像データの描画

canvas要素には、四角形の領域をピクセル単位で記述して描画できるメソッドも用意されています。 このメソッドを利用すると、所謂、ドット絵のような画像を指定した位置に描画させる事が出来ます。

前節で紹介した「ブロック崩し」では、ブロック/ボール/ラケットの表示データをプログラムで作成し、このメソッドを使って描画しています。

画像ファイルの描画

canvas要素には、jpg/pngといった画像ファイルを描画するメソッドも用意されています。描画時にはトリミングや回転等の処理を施す事もできます。

前節で紹介したゲームでは「フリーセル」/「神経衰弱ゲーム」/「スピードレーシング」/「15パズル」でこのメソッドを利用しています。 ただし、「スピードレーシング」以外のゲームでは、画像ファイルは一旦ワーク画面に描画後、加工した上で描画しています。

画像の加工と描画

canvas要素には、canvasに描画されている画像データを取り込めるメソッドも用意されています。 このメソッドと画像データを描画するメソッドを併用すると、画像ファイルの内容を加工した上で描画できるようになります。

前節で紹介した「フリーセル」/「神経衰弱ゲーム」では、画像ファイルをワーク用のcanvasに描画し、その画像を取り込んだデータを利用してトランプ画像を作成し、描画しています。 「15パズル」では、取り込んだ画像データに数字を付加したり、プログラムで縮小してサムネイル表示用に使ったりしています。