Atlas.jsブログ

Webブラウザで動作する、教育用JavaScriptゲームエンジン、Atlas.jsに関する知識共有ブログです。

Atlas.jsの機能〜マップ作成〜


こんにちは。moltomheadです。今回はマップを簡単に作ることができるMapクラスを利用したいと思います。

Mapクラス

Mapクラスはその名の通りマップを作成することができるクラスです。一つの画像に沢山の部品が存在し、部品を組み合わせてマップなどを作ることができる画像のことをマップチップと言います。このマップチップを使ってマップを作成していきます。マップチップがない場合はAtlasエディタに素材があるので、それを利用しましょう。

var map = new Map("./images/map.png",16,16);//使用するマップ、縦の大きさ、横の大きさ

縦、横の大きさの指定はスプライトと同じように行ってください。上の画像の例では、16(横)*16px(縦)で30*16等分のマップチップになっています。
mapを定義し終えたら、後は配列にデータ番号を書き込みます。配列とは複数の値を格納できる場所だと考えてください。このように書きます。

map.drawData = [//草原のパーツは0,砂地のパーツは1といった具合に番号を指定することでマップを好きな場所に設置することが可能
      	[0,0,0,0,0,0,0,0,0,0],
      	[0,0,0,0,0,0,0,0,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
     	[0,0,0,0,0,0,0,0,0,0],
      	[0,0,0,0,0,0,0,0,0,0],
	];

また、このマップには当たり判定をつけることができます。
次のように書くことで、マップの番号が1であればtrueを、0であればfalseを返します。

map.hitData = [
      	[0,0,0,0,0,0,0,0,0,0],
      	[0,0,0,0,0,0,0,0,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
      	[0,0,1,1,1,1,1,1,0,0],
     	[0,0,0,0,0,0,0,0,0,0],
      	[0,0,0,0,0,0,0,0,0,0],
     ];

map.touchStart = function(pos){
      if(map.intersect(pos.x,pos.y)){
         	alert("あたっています");
      }
 }

最後にmapもaddChildに入れることを忘れないようにしましょう。
マップのサンプルを作成しました
マップ作成のサンプル
サンプルでは、マップ上の赤い丸がクリックした位置に移動するようになっています。しかし、砂地のマップではmap.hitDataを使い、移動しないようにしています。


blog comments powered by Disqus

エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本