イメージリソースの利用

イメージリソースとして、

・HTML内に埋め込まれた <img> 要素
・アップロードされているイメージファイル

が利用できます。

| HTML内にイメージリソースを埋め込む

<body> から </body> の中に以下の記述をします。

<img id="シンボル" src="イメージファイル" style="display:none" />

| HTML内に埋め込まれたイメージリソースを使用する

HTML内に埋め込まれたイメージリソースは、

・「_Main.js」の getResImage()

で取得することができます。

| アップロードされているイメージファイルを使用する

アップロードされているイメージファイルは、

・「_Image.js」の loadImage()

で Image オブジェクトを生成して使用することができます。

| ツール「image2html」の使用

ツール「image2html」を使用すると、イメージファイルの一覧を記述したテキストファイルから、イメージインデックスが定義された js ファイルと、HTML記述を作成することができます。

まず、イメージファイルの一覧を記述したテキストファイルを用意します。記述方法は、ファイルを改行で連ねるだけです。例えば、次のようになります。

res/a.png res/b.png res/c.png

なお、改行のみの行を含めることもできます。

ツール「image2html」使用法：

image2html <in_list_file> <top_str> <out_js> <out_html>

・in_list_file
イメージファイルの一覧を記述したテキストファイルを指定します。

・top_str
イメージファイルの一覧を記述したテキストファイルを元にイメージインデックス定義を構築する際に、各行の先頭の省略する部分を指定します。例えば、テキストファイルに
res/enemy/a.png
と記述されていて、このパラメータに "res/" と指定した場合、イメージインデックス定義では
RES_IMAGE_ENEMY_A
となります。大文字に変換され、"/"は"_"に変換されます。"RES_IMAGE_"は自動的に付加されます。

・out_js
出力する js ファイル名を指定します。

・out_html
出力するHTMLファイル名を指定します。

なお、本ツールを使用して出力されたHTMLファイルの内容を、<body> から </body> の中に別途組み込む必要があります。最も簡単な方法は、組み込む箇所の前と後ろとを別ファイルにしておき、「copy /B」を使用して連結する方法です。

出力された js ファイルを、アプリのソースファイル内にインクルードし、

・「_Main.js」の getResImage()

で取得することができます。例えば、次のように記述します。（出力する js ファイル名に「image.js」を指定したものとします。）

ソースファイルの頭：

#include "image.js" var res_img;

start() 関数の中：

res_img = new Array( RES_IMAGE_NUM ); for( var i = 0; i < RES_IMAGE_NUM; i++ ) { res_img[i] = getResImage( "RES_IMAGE_" + i ); }

paint() 関数の中：

g_drawImage( res_img[RES_IMAGE_A], 0, 0 );

| ツール「image2js」の使用

ツール「image2js」を使用すると、イメージファイルの一覧を記述したテキストファイルから、イメージインデックスが定義された js ファイルと、JavaScript 配列記述を作成することができます。

まず、イメージファイルの一覧を記述したテキストファイルを用意します。記述方法は、ファイルを改行で連ねるだけです。例えば、次のようになります。

res/a.png res/b.png res/c.png

なお、改行のみの行を含めることもできます。

ツール「image2js」使用法：

image2js <in_list_file> <out_id_js> <out_str_js>

・in_list_file
イメージファイルの一覧を記述したテキストファイルを指定します。

・out_id_js
出力する js ファイル名を指定します。

・out_str_js
出力する JavaScript 配列記述ファイル名を指定します。

出力された js ファイルと JavaScript 配列記述ファイルを、アプリのソースファイル内にインクルードし、

・「_Image.js」の loadImage()

で Image オブジェクトを生成して使用することができます。例えば、次のように記述します。（出力する js ファイル名に「image_id.js」を、出力する JavaScript 配列記述ファイル名に「image.js」を指定したものとします。）

ソースファイルの頭：

#include "image_id.js" var res_img;

start() 関数の中：

#include "image.js" res_img = new Array( IMAGE_NUM ); for( var i = 0; i < IMAGE_NUM; i++ ) { res_img[i] = loadImage( IMAGE[i] ); }

paint() 関数の中：

g_drawImage( res_img[IMAGE_A], 0, 0 );