Gama BackGround

Map Chip 切り分けて、大きな背景画像を作成することも出来ます。
今回は BG MAP 関係のファイル(.html, .css, .js)の文字コードは utf-8 に統一することにします。

BG MAP(bg_1.html)

Map Chip を切り分けて、画面サイズの何倍もの大きな背景を描画する手法を BG(Back Ground)と言います。
手始めに CSS で画像を切り分けて小さな背景画像を描画してみましょう。

次の画像が Map Chip 画像(javas.gif) です。

幅＝32ピクセル, 高さ＝32ピクセルに切り分けて、セルの並び情報を使って背景画像を描画します。
元の画像(javas.gif)は次のように切り分けます。

0 1 2 3 4

5 6 7 8 9

切り分けたセルを次の順に並べて背景画像を描画します。
セルの数を増やせば幾らでも大きな背景になります。

8 3 3 3 3 9

1 5 0 0 5 2

1 0 5 0 0 2

6 4 4 4 4 7

CSS で切り分ける Map Chip(javas.gif)の分割情報は javas.css で定義します。
このファイルはテキストエディタで直接タイプしても良いのですが、私が提供している Map Editor を使うと簡単に作成することが出来ます。
文字コードは utf-8 に統一するので Map Editor で作成されたコードを utf-8 に変換して下さい。
TEXT EDITOR でタイプするときは、各セルの基点が javas.gif の左上になるように background-position: を計算して下さい。
【javas.css Source Code】

@import url("javascript.css");
@charset "utf-8";

#map {
    width: 160px;
    height: 64px;
}
#bg {
    width: 192px;
    height: 128px;
}
.info {
    clear: both;
    padding: 10px 0;
}
.chip {
    float: left;
    width: 32px;
    height: 32px;
    background-image: url("javas.gif");
}
.c0 {background-position: -0px -0px;}
.c1 {background-position: -32px -0px;}
.c2 {background-position: -64px -0px;}
.c3 {background-position: -96px -0px;}
.c4 {background-position: -128px -0px;}
.c5 {background-position: -0px -32px;}
.c6 {background-position: -32px -32px;}
.c7 {background-position: -64px -32px;}
.c8 {background-position: -96px -32px;}
.c9 {background-position: -128px -32px;}

【bg_1.html のソースコード】

<html>
<head>
  <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8">
  <link rel="stylesheet" href="javas.css" type="text/css">
</head>

<body>
<div id="bg">
<div class="chip c8"></div>
<div class="chip c3"></div>
<div class="chip c3"></div>
<div class="chip c3"></div>
<div class="chip c3"></div>
<div class="chip c9"></div>

<div class="chip c1"></div>
<div class="chip c5"></div>
<div class="chip c0"></div>
<div class="chip c0"></div>
<div class="chip c5"></div>
<div class="chip c2"></div>

<div class="chip c1"></div>
<div class="chip c0"></div>
<div class="chip c5"></div>
<div class="chip c0"></div>
<div class="chip c0"></div>
<div class="chip c2"></div>

<div class="chip c6"></div>
<div class="chip c4"></div>
<div class="chip c4"></div>
<div class="chip c4"></div>
<div class="chip c4"></div>
<div class="chip c7"></div>
</div>

</body>
</html>

<head> <link> で Map Chip を定義した javas.css を取り込みます。
<link rel="stylesheet" href="javas.css" type="text/css">
javas.css からは Javascript ページ用の javascript.css を取り込んでいます。
@import url("javascript.css");
Map Chip を組み合わせて背景画像を表示します。
<div id="bg"> で CSS のタグを指定します。
"bg" は javas.css で #bg として定義されています。
#bg では、背景画像のサイズ(192 * 128)を指定します。
#bg { width: 192px; height: 128px; }
その後に続く div で javas.css で定義した .c0 ～ .c9 を参照します。
背景画像は描画されるのですが、これでは余りにも不細工ですよね。 (^_^;)
<div class="chip c8"></div> <div class="chip c3"></div> ・・・

Map を配列で定義(bg_2.html)

BG MAP で紹介した div を並べる方法は余りにも芸がありません。
そこで BG を構成するセルの番号を配列で定義した bg_2.html を紹介します。
【bg_2.html(Map を配列で定義)】

<html>
<head>
  <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8">
  <link rel="stylesheet" href="javas.css" type="text/css">
</head>

<body>
<script type="text/javascript">
var map = [
8, 3, 3, 3, 3, 9, 
1, 5, 0, 0, 5, 2, 
1, 0, 5, 0, 0, 2, 
6, 4, 4, 4, 4, 7 ];

  document.write('<div id="bg">');
  for(i=0; i<map.length; i++)
  {
    document.write('<div class="chip c', map[i], '"></div>');
  }
  document.write('</div>');
</script>

</body>
</html>

map[] で BG を構成するセルの番号を配列で定義します。

var map = [
8, 3, 3, 3, 3, 9, 
1, 5, 0, 0, 5, 2, 
1, 0, 5, 0, 0, 2, 
6, 4, 4, 4, 4, 7 ];

ループで div のソースコードを吐き出します。

  for(i=0; i<map.length; i++)
  {
    document.write('<div class="chip c', map[i], '"></div>');
  }

CSS で切り分ける Map Chip(javas.gif) の並び情報 javas.css は今回も使います。
<head> の href="javas.css" から参照しています。
javas.css からは Javascript ページ用の javascript.css を取り込んでいます。
@import url("javascript.css");

Map Editor を使う(bg_3.html)

ダウンロードサイトから提供している Map Editor を使うと非常に簡単に背景画像を描画することが出来ます。
javas.css はマップチップ毎に作成しなければならないのですが、背景画像の作成と共に自動的に作成してくれます。
また背景画像を構成するセルの並び情報も javas.css と同時に javas.js に書き出されます。
私のトップページから辿って Map Editor をダウンロードして下さい。

Map Editor で専用のファイルを作成すると JavaScript で簡単に BG の描画が出来ます。
ダウンロードした Mapedit.exe をダブルクリックで起動します。

[ファイル][開く]から "JavaS.map" を開くと JavaScript テスト用の BGMAP が表示されます。
MapChip ファイルは JavaS.gif を使っています。
[ファイル][JavaData 作成] から "javas.css" で保存して下さい。
"javas.css" と "javas.js" のファイルが作成されます。
そのまま(Shift-JIS)でも動きますが、今回は文字コードを utf-8 に統一しています。

【bg_3.html(Map Editor を使う)】の全ソースコードです。
Map Editor で作成したファイルを組み込むと本当に簡単です。

<html>
<head>
  <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8">
  <link rel="stylesheet" href="javas.css" type="text/css">
</head>

<body>
<script src="javas.js"></script>
</body>
</html>

このプログラムでは、次のファイルを使用しています。
"javas.css" と "javas.js" は Map Editor を使うと簡単に作成することが出来ます。
ファイル名はサーバーにアップロードするときに全て小文字に変換しています。
サーバー上では大文字と小文字は区別されるので注意して下さい。

ファイル名	説明
bg_3.html	BG MAP を描画するプログラム
javas.css	マップチップの分割情報が定義された CSS ファイル
javas.js	BG の並び情報が定義された JavaScript ファイル
javas.gif	背景画像を構成するマップチップ画像ファイル

ダウンロードサイトから提供している Map Editor を使ってゲームの背景に使用する大きな画像を作成します。
Map Editor を起動して gamemap.map を開いて下さい。
maps.png を 16*16 で切り分けて、背景画像を作成したファイルです。
「ファイル／JavaData作成」を選ぶと gamemap.css と gamemap.js が保存されます。
背景画像は、セルを横方向に６４個, 縦方向に３２個並べた 1024×512 ピクセルのサイズです。
これを使って bg_3.html と同じようにプログラムすると、大きな背景が表示されます。
「サイズ」メニューからマップのサイズを変えれば、幾らでも大きな背景を作成することが出来ます。

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)