イメージリソースの利用

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

・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 );