BG

BG(Back Ground)

プログラムの説明

Map Chip を切り分けて、画面サイズの何倍もの大きな背景を描画する手法を BG(Back Ground)と言います。
ページ先頭の画像(マップチップ)をセル(16*16 のサイズ)に切り分けてタイル状に並べて背景画像などを描画します。
ダウンロードサイトから提供している Map Editor を使うとマップチップを組み合わせて大きな背景画像を作成出来ます。
また背景画像を構成するチップの情報を記述した *.css ファイルと背景画像を構成するセルの並びを記述した *.js ファイルを保存することが出来ます。
今回は Map Editor で作成した bg.css と bg.js を使います。

bg.css と bg.js を組み込めばプログラムは簡単です。
BG(Back Ground) を描画するプログラムの全ソースコードです。

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

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

背景画像を構成するセルの並びを記述した bg.js ファイルです。

var map = [
48, 49, 30, 50, 51, 6, 28, 6, 48, 49, 30, 31, 30, 31, 50, 51, 
68, 2, 2, 2, 71, 56, 57, 6, 68, 2, 2, 2, 2, 2, 2, 71, 
44, 2, 2, 2, 12, 76, 77, 6, 43, 2, 2, 2, 2, 2, 2, 12, 
15, 2, 2, 2, 62, 30, 30, 30, 63, 2, 2, 2, 2, 2, 2, 32, 
35, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 52, 53, 2, 2, 12, 
35, 2, 2, 52, 53, 2, 2, 2, 2, 2, 2, 72, 73, 2, 2, 12, 
35, 2, 2, 72, 73, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 32, 
64, 65, 41, 2, 2, 2, 2, 54, 55, 2, 2, 2, 2, 2, 2, 12, 
13, 14, 61, 2, 2, 2, 2, 74, 75, 2, 2, 2, 2, 2, 2, 32, 
33, 34, 15, 2, 2, 2, 2, 2, 2, 2, 40, 36, 41, 2, 2, 32, 
13, 14, 35, 2, 2, 2, 2, 2, 2, 2, 60, 4, 61, 2, 2, 47, 
33, 34, 64, 36, 36, 36, 37, 8, 9, 66, 67, 4, 64, 65, 66, 67, 
];
document.write('<div id="bg">');
for(i=0; i<map.length; i++)
{ document.write('<div class="chip c', map[i], '"></div>'); }
document.write('</div>');

チップの並び情報を記述した bg.css ファイルです。
ページ先頭の画像(320*64)を切り分けて８０枚のチップ情報を定義します。

#map {
    width: 320px;
    height: 64px;
}
#bg {
    width: 256px;
    height: 192px;
}
.info {
    clear: both;
    padding: 10px 0;
}
.chip {
    float: left;
    width: 16px;
    height: 16px;
    background-image: url("chip.png");
}
.c0 {background-position: -0px -0px;}
.c1 {background-position: -16px -0px;}
.c2 {background-position: -32px -0px;}
.c3 {background-position: -48px -0px;}
.c4 {background-position: -64px -0px;}
.c5 {background-position: -80px -0px;}
.c6 {background-position: -96px -0px;}
.c7 {background-position: -112px -0px;}
.c8 {background-position: -128px -0px;}
.c9 {background-position: -144px -0px;}
.c10 {background-position: -160px -0px;}
.c11 {background-position: -176px -0px;}
.c12 {background-position: -192px -0px;}
.c13 {background-position: -208px -0px;}
.c14 {background-position: -224px -0px;}
.c15 {background-position: -240px -0px;}
.c16 {background-position: -256px -0px;}
.c17 {background-position: -272px -0px;}
.c18 {background-position: -288px -0px;}
.c19 {background-position: -304px -0px;}
.c20 {background-position: -0px -16px;}
.c21 {background-position: -16px -16px;}
.c22 {background-position: -32px -16px;}
.c23 {background-position: -48px -16px;}
.c24 {background-position: -64px -16px;}
.c25 {background-position: -80px -16px;}
.c26 {background-position: -96px -16px;}
.c27 {background-position: -112px -16px;}
.c28 {background-position: -128px -16px;}
.c29 {background-position: -144px -16px;}
.c30 {background-position: -160px -16px;}
.c31 {background-position: -176px -16px;}
.c32 {background-position: -192px -16px;}
.c33 {background-position: -208px -16px;}
.c34 {background-position: -224px -16px;}
.c35 {background-position: -240px -16px;}
.c36 {background-position: -256px -16px;}
.c37 {background-position: -272px -16px;}
.c38 {background-position: -288px -16px;}
.c39 {background-position: -304px -16px;}
.c40 {background-position: -0px -32px;}
.c41 {background-position: -16px -32px;}
.c42 {background-position: -32px -32px;}
.c43 {background-position: -48px -32px;}
.c44 {background-position: -64px -32px;}
.c45 {background-position: -80px -32px;}
.c46 {background-position: -96px -32px;}
.c47 {background-position: -112px -32px;}
.c48 {background-position: -128px -32px;}
.c49 {background-position: -144px -32px;}
.c50 {background-position: -160px -32px;}
.c51 {background-position: -176px -32px;}
.c52 {background-position: -192px -32px;}
.c53 {background-position: -208px -32px;}
.c54 {background-position: -224px -32px;}
.c55 {background-position: -240px -32px;}
.c56 {background-position: -256px -32px;}
.c57 {background-position: -272px -32px;}
.c58 {background-position: -288px -32px;}
.c59 {background-position: -304px -32px;}
.c60 {background-position: -0px -48px;}
.c61 {background-position: -16px -48px;}
.c62 {background-position: -32px -48px;}
.c63 {background-position: -48px -48px;}
.c64 {background-position: -64px -48px;}
.c65 {background-position: -80px -48px;}
.c66 {background-position: -96px -48px;}
.c67 {background-position: -112px -48px;}
.c68 {background-position: -128px -48px;}
.c69 {background-position: -144px -48px;}
.c70 {background-position: -160px -48px;}
.c71 {background-position: -176px -48px;}
.c72 {background-position: -192px -48px;}
.c73 {background-position: -208px -48px;}
.c74 {background-position: -224px -48px;}
.c75 {background-position: -240px -48px;}
.c76 {background-position: -256px -48px;}
.c77 {background-position: -272px -48px;}
.c78 {background-position: -288px -48px;}
.c79 {background-position: -304px -48px;}