Gama BackGround

Map Chip と呼ばれる画像を切り分けて、大きな背景画像を描画する手法を BG(Back Ground)と言います。
今回は BG MAP 関係のファイル(.html, .css, .js)の文字コードは utf-8 に統一することにします。
  1. Back Image

    1. 一枚の背景画像を画面全体に描画するのは簡単です。
      bg.gif のサイズは 640*480 ですが、これを画面全体に描画してみましょう。
      画面サイズを変えると背景画像が伸縮することを確認して下さい。
      【game_bg1.html(Back Image)】
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="javascript.css" type="text/css">
      <title>JavaScript</title>
      </head>
      
      <body>
      <img src="bg.gif" width="100%" height="100%">
      </body>
      </html>
      
    2. Window Size
      Mouse Up で画面サイズとウィンドウサイズを確認します。
      マウス操作でウィンドウサイズを変更して、マウスをクリックしてみて下さい。
      【game_size.html(Window Size)】のソースコードは実行画面から右クリックで確認できます。
    3. Set Window Size
      bg.gif のサイズ(640*480)に合わせて "game_bg1.html" を開きます。
      【game_setsize.html(Set Window Size)】
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <script type="text/javascript">
      function openwin()
      {   window.open("./game_bg1.html", "", "width=640,height=480");
      }
      </script>
      </head>
      
      <body>
      <script type="text/javascript">
      openwin();
      </script>
      </body>
      </html>
      
    4. ネットで検索するとウィンドウを指定されたサイズに変更する関数 resizeTo(x,y) がヒットします。
      所が何故か私の環境では "300×200" "600×400" しか効かないようです。 (^_^;)
      (サイズは変わっても指定サイズに合っていない?)
      Window Size を切り替える
      function changeWindow(x,y)
      {   resizeTo(x,y);
      }
      
    5. 大きな背景画像のスクロールは CSS Sprite から CSS Scroll を参照して下さい。
      BG MAP を使った背景画像のスクロールは CSS Scroll と BG MAP の組み合わせです。

  2. BG MAP

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

      幅=32ピクセル, 高さ=32ピクセルに切り分けて、セルの並び情報を使って背景画像を描画します。
      元の画像(javas.gif)は次のように切り分けます。
      01234
      56789
      切り分けたセルを次の順に並べて背景画像を描画します。
      セルの数を増やせば幾らでも大きな背景になります。
      833339
      150052
      105002
      644447
    2. CSS で切り分ける Map Chip(javas.gif)の分割情報は javas.css で定義します。
      このファイルはテキストエディタで直接タイプしても良いのですが、私が提供している Map Editor を使うと簡単に作成することが出来ます。
      文字コードは utf-8 に統一するので Map Editor で作成されたコードを utf-8 に変換して下さい。
      TEXT EDITOR でタイプするときは、各セルの基点が左上になるように 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;}
      
    3. Map Chip を組み合わせて BG を描画する bg_1.html です。
      【bg_1.html(BG 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>
      <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> 
      
    4. <head> <link> で Map Chip を定義した javas.css を取り込みます。
        <link rel="stylesheet" href="javas.css" type="text/css">
      
      javas.css からは Javascript ページ用の javascript.css を取り込んでいます。
      @import url("javascript.css");
      
    5. Map Chip を組み合わせて背景画像を表示します。
      <div id="bg"> で CSS のタグを指定します。
      "bg" は javas.css で #bg として定義されています。
      #bg では、背景画像のサイズ(192 * 128)が指定します。
      #bg {
          width: 192px;
          height: 128px;
      }
      
    6. その後に続く div で javas.css で定義した .c0 ~ .c9 を参照します。
      背景画像は描画されるのですが、これでは余りにも不細工ですよね。 (^_^;)
      <div class="chip c8"></div>
      <div class="chip c3"></div>
        ・
        ・
        ・
      

  3. Map を配列で定義

    1. 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> 
      
    2. 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 ];
      
    3. ループで div のソースコードを吐き出します。
        for(i=0; i<map.length; i++)
        {
          document.write('<div class="chip c', map[i], '"></div>');
        }
      
    4. CSS で切り分ける Map Chip(javas.gif) の並び情報 javas.css は今回も使います。
      <head> の href="javas.css" から参照しています。
      javas.css からは Javascript ページ用の javascript.css を取り込んでいます。
      @import url("javascript.css");
      

  4. Map Editor を使う

    1. ダウンロードサイトから提供している Map Editor を使うと非常に簡単に背景画像を描画することが出来ます。
      javas.css はマップチップ毎に作成しなければならないのですが、背景画像の作成と共に自動的に作成してくれます。
      また背景画像を構成するセルの並び情報も javas.css と同時に javas.js に書き出されます。
      トップページから辿って Map Editor をダウンロードして下さい。
    2. Map Editor で専用のファイルを作成すると JavaScript で簡単に BG の描画が出来ます。
      ダウンロードした Mapedit.exe をダブルクリックで起動します。
      1. [ファイル][開く]から "JavaS.map" を開くと JavaScript テスト用の BGMAP が表示されます。
        MapChip ファイルは JavaS.gif を使っています。
      2. [ファイル][JavaData 作成] から "javas.css" で保存して下さい。
        "javas.css" と "javas.js" のファイルが作成されます。
        そのまま(Shift-JIS)でも動きますが、今回は文字コードを utf-8 に統一しています。
      3. Map Editor を使う をクリックすると作成した背景画像が描画されます。
        如何に簡単なプログラム かをページ上で右クリックして「ソースの表示」で確認して下さい。
        Microsoft Edge では「F12キー」を押すとソースコードが表示されます。
    3. このプログラムでは、次のファイルを使用しています。
      "javas.css" と "javas.js" は Map Editor を使うと簡単に作成することが出来ます。
      ファイル名はサーバーにアップロードするときに全て小文字に変換しています。
      サーバー上では大文字と小文字は区別されるので注意して下さい。
      ファイル名 説明
      bg_3.html BG MAP を描画するプログラム
      javas.css マップチップの分割情報が定義された CSS ファイル
      javas.js BG の並び情報が定義された JavaScript ファイル
      javas.gif 背景画像を構成するマップチップ画像ファイル
    4. 「Map Editor を使う」の全ソースコードです。
      【bg_3.html(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>
      

  5. Game Map-1


    1. ダウンロードサイトから提供している Map Editor を使ってゲームの背景に使用する画面一杯の画像を作成します。
      上の画像(maps.png)を 16*16 で切り分けて gamemap.css と gamemap.js を作成して下さい。
      背景画像は、セルを横方向に64個, 縦方向に32個並べた 1024×512 ピクセルのサイズです。
      Shift_JIS でも動きますが、今回は utf-8 に統一します。
    2. このプログラムでは、次のファイルを使用しています。
      ファイル名 説明
      game_map1.html BG MAP を描画するプログラム
      gamemap.css マップチップの分割情報が定義された CSS ファイル
      gamemap.js BG の並び情報が定義された JavaScript ファイル
      maps.png 背景画像を構成するマップチップ画像ファイル
    3. gamemap.css に書かれている maps.png が大文字のときは小文字に修正して下さい。
      サーバー上ではファイル名を小文字に統一しています。
      gamemap.js からタイトルを表示している次の行を削除して下さい。
      document.write('<div class="info">BG(Back Ground) Map<br></div>');
      
    4. CSS で大きな背景画像を表示する【game_map1.html(Game Map-1)】の全ソースコードです。
      gamemap.css と gamemap.js と maps.png を同じフォルダーに格納して下さい。
      gamemap.css と gamemap.js を使うとプログラムは簡単です。
      <html>
      <head>
        <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8">
        <link rel="stylesheet" href="gamemap.css" type="text/css">
      </head>
      
      <body>
      <script src="gamemap.js"></script>
      </body>
      </html>
      

  6. Game Map-2


    1. Game Map-1 で作成したマップ上でアニメーションGIF のキャラクターを動かします。
      次のファイルを game_map2.html と同じフォルダーに格納して下さい。
      ファイル名 説明
      game_map2.htmlマップ上でキャラクターを動かすプログラム
      gamemap.css マップチップの分割情報が定義された CSS ファイル
      gamemap.js BG の並び情報が定義された JavaScript ファイル
      maps.png 背景画像を構成するマップチップ画像ファイル
      anime1.gif 矢印キーで操作するキャラクター画像
    2. マップ上でキャラクターを動かすプログラム【game_map2.html(Game Map-2)】のソースコードは実行画面から右クリックで表示されます。
      画像の移動キーで移動 を参考にして下さい。
    3. <body> の onLoad で setInterval を設定して 25 ミリ秒ごとに moveImage() を呼び出します。
      <body bgcolor="#f4f8ff" onLoad="setInterval('moveImage()',25)">
      
    4. moveImage() では document.Dog.style.left= x; document.Dog.style.top= y; の座標に画像を移動します。
      画像は img タグで name="Dog" と style で座標を設定して anime1.gif を描画しています。
      <img src="anime1.gif" name="Dog"
        style="position:absolute;left:300px;top:200px;">
      
    5. document.onkeydown = KeyCode; でキーが押されると KeyCode 関数が呼ばれます。
      function KeyCode() では、上下左右のキーを判定して x=300; y=200; を更新します。
        document.onkeydown = KeyCode;
        x= 300;
        y= 200;
        function KeyCode()
        {
            ・・・
        }
      

  7. BG Wall


    1. Game Map-1 で作成したマップからはみ出さないようにキャラクターを動かします。
      Game Map-2 ではアニメーションGIF を使いましたが、今回は進行方向に合わせて2枚の画像を切り替えながらアニメーションします。
      次のファイルを bg_wall.html と同じフォルダーに格納して下さい。
      ファイル名 説明
      bg_wall.htmlマップ上でキャラクターを動かすプログラム
      gamemap.css マップチップの分割情報が定義された背景画像の CSS ファイル
      gamemap.js BG の並び情報が定義された背景画像の JavaScript ファイル
      maps.png 背景画像を構成するマップチップ画像ファイル
      chr47_0.gif~chr47_7.gif 矢印キーで操作するキャラクター画像ファイル
      マップからキャラクターがはみださないように動かすプログラム【bg_wall.html(BG Wall)】のソースコードは実行画面から右クリックで表示されます。
    2. キャラクター画像も Map Editor を使って CSS で切り分ける方法もあるのですが、背景に CSS を使っているので両方リンクすると定義が重複します。
      そこでキャラクターの描画は chr47.gif を8枚の画像に切り分けた chr47_0.gif~chr47_7.gif を使うことにします。
      詳細は Animation から Walk Animation を参照して下さい。
    3. 背景画像の表示は簡単で "gamemap.css" をリンクして "gamemap.js" で描画するだけです。
      <link rel="stylesheet" href="gamemap.css" type="text/css">
              
      <script src="gamemap.js"></script>
      
    4. Game Map-2 では背景画像の範囲を超えてキャラクターが動き回りましたが、今回は背景画像の周辺に壁を用意して超えられないようにします。
      かっこ良く言いましたが、左と上は元々超えられないので、実質的には右と下の移動を制限するだけです。 (^_^;)
      背景画像のサイズは 1024×512 なので、その手前で止めます。
            case 0x27:    //→
                if (x<1000)   x+= 2;
                dir= 2;
                break;
            case 0x28:    //↓
                if (y<484)    y+= 2;
                dir= 4;
                break;
      

  8. BG Map 上を歩く


    1. RPGゲームなどでは、マップチップ(背景を構成する画像)に属性を待たせて、キャラクターを制御します。
      今回は「通過できるセル/通過できないセル」を設定してキャラクターを動かします。
      【map_walk.html(BG Map 上を歩く)】のソースコードは、実行画面からマウスの右クリックで表示されます。
    2. 属性はマップチップに格納されているセルの画像に対して与えます。
      このプログラムで使用したマップチップの画像(maps.png)は 256*384 ピクセルで、16*16 のセルが16列24行で構成されています。
      マップチップに属性を設定する att.js ファイルです。
      0 が通過できるセルで、0 以外が通過できないセルです。画像と見比べて下さい。
      【att.js】
      var att = [
      0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 3, 3, 1, 1, 1, 1,
      1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 3, 3, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 3, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 3, 1, 1, 1, 1,
      1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 3, 3, 1, 1, 1, 1,
      1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 3, 3, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      ]
      
    3. "gamemap.css" をリンクして src で "att.js" を指定して下さい。
      <link rel="stylesheet" href="gamemap.css" type="text/css">
      <script src="att.js" type="text/javascript"></script>
      
    4. KeyCode() 関数では、進行方向の属性を調べてキャラクターを動かします。
      get_att() 関数のリターン値が 0 のとき通行可能です。
        function KeyCode()
        {   ・
            ・
            ・
          xw = x;
          yw = y;
          switch(kcode)
          {    
            case 0x25:    //←
                if (xw>1) xw-= 2;
                dir= 6;
                break;
                 ・
                 ・
                 ・
          }
          if (get_att()==0)
          {   x = xw;
              y = yw;
          }
        }
      
    5. セルの属性を調べる get_att() 関数です。
      (yw+12) の 12 は小数点以下を切り捨てるので、その調整です。
      map[] 配列は "gamemap.js" で定義されているセルの並び情報です。
        function get_att()
        {
          ywk = Math.floor((yw+12)/16);
          xwk = Math.floor((xw+12)/16);
          ps = map[ywk*64+xwk]; 
          return att[ps];
        }
      

  9. BG Map で制御

    1. BG(Back Ground)で作成した画像を背景に、ゲームをコントロールします。
      RPG ゲームなどでは、マップチップ(背景を構成する画像)に属性を待たせて、キャラクターを制御します。
      属性はゲームに合わせて、例えば次のように様々に設定します。
      • キャラクタが通過できるセル
      • キャラクタが通過できないセル
      • ジャンプすれば飛び越えられるセル
      • ジャンプすれば上に乗れるセル
      • アイテムが隠されているセル
      • アイテムを持っていれば通過できるセル
      • 落ちればゲームが終了するセル
      • イベントが発生するセル
      • 別の画面に続くセル
      • その他ゲーム毎に様々な設定が考えられます
      今回はキャラクターが「通れる/通れない」に加えて「アイテムの取得と宝物の箱」をプログラムしてみます。
      att.js で定義されている 2 と 3 がその属性です。
      【map_ctrl.html(BG Map で制御)】のソースコードは、実行画面からマウスの右クリックで確認することが出来ます。
    2. 鍵の取得フラグを定義して 2 のセルに出会うと、alert("鍵を拾った!") を表示して 1 に設定します。
      フラグが 1 のとき 3 のセルに出会うと、alert("宝物を手に入れた!"); を表示して 2 に設定します。
      フラグを 2 に設定するのは、宝物を取得すると 2 や 3 のセルを無効にするためです。
        flg=0;    //鍵のフラグ
        function KeyCode()
        {   ・
            ・
            ・
          switch(get_att())
          { 
            case 2:
                if (flg==0)
                {   window.alert("鍵を拾った!");
                    flg = 1;
                }
                break;
            case 3:
                if (flg==1)
                {   window.alert("宝物を手に入れた!");
                    flg = 2;
                }
                break;
            case 0:
                x = xw;
                y = yw;
                break;
          }
      

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