今回はマップの作り方です。
マップはクマのキャラクターと同じように地面や壁のブロックを
画面上に配置していきます。標準の地面ブロックは「16x16px」なので
320×320のゲーム画面の場合、縦、横それぞれに20づつ計400並べることができますが、これを1つ1つ並べていくのはとても大変です。
enchantMapEditorの使い方
今回はgithubで公開されているenchantMapEditorを利用して
マップを作成していきます。
リンク先：https://github.com/wise9/enchantMapEditor
1.リンク先の「Clone or download」から「Download ZIP」
を洗濯してzipファイルをダウンロードしてください。
2.ダウンロードか完了したらzipを解凍して中にある
mapeditor.htmlをchromeまたはSafariで開いてください
下記の画面が表示されます。
3.パラメータの入力
横幅を20(16pxのブロックが20個ということ)
縦幅を20(16pxのブロックが20個ということ)
画像（Image)を2D Scroll
マップ拡張のチェックを外す
4.作成ボタンを押して次の画面が表示されます。
5.右の地面や爆弾の画像をクリックしてマップに置きたいものを選択
して左の赤枠の中に置いていきます。
6.マップの配置ができたら判定用のフラグを立てていきます。
判定を立てることでキャラの通り抜けを禁止したり地面を定義したり
します。この判定はマップエディタの「判定」を利用します。
判定のフラグを立てたブロックは赤い四角で囲われます。
次が判定を追加したものです。
7.コード生成を押すとコードが表示されます。
これがマップのコードになります。
collisionDataの0と１の部分で1の値が設定されているブロックが衝突判定の
際に衝突とみなすブロックとなります。
全て「−１」が入っているデータは今回は利用していないデータなので
消しても問題ありません。
（詳細を説明するとわかりにくくなるかもしれませんが、マップは
重ねることができます（レイヤー）この-1という数字はブロックがないことを
表していて、データが全くない状態なので影響がないということになります。）
8.実際にマップを表示するコードは次の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
// code.9leap.net default template // based on enchant.js v0.7.1 enchant(); window.onload = function(){ var game = new Core(320, 320); game.preload('map1.gif'); game.fps = 15; game.onload = function(){ //======================== // マップデータ //======================== var backgroundMap = new Map(16, 16); backgroundMap.image = game.assets['map1.gif']; backgroundMap.loadData([ [35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,35,2,35,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,35,2,2,2,35,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,35,2,2,2,2,2,35,35,35,35,35,35,35,35], [35,35,35,35,35,35,2,2,2,2,2,2,2,35,35,35,35,35,35,35], [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,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,-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,-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,-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] ]); backgroundMap.collisionData = [ [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,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] ]; //======================== // マップを画面に表示 //======================== game.rootScene.addChild(backgroundMap) }; game.start(); }; |
17~83行目までのマップデータはマップエディタで作成されますので
そのまま貼り付ければ問題ありません。
88行目でキャラクターを表示するのと同じようにaddChildでマップを
ゲーム画面に表示させます。
code9leapでは次のように表示されます。
マップが表示されない場合は、マップに必要な画像がロードされているか
確認してみてください。
1.自分のオリジナルマップを作って表示してみよう。
1.今回は2DScroll用のマップを作成したのでRPG用のマップも作成して
ゲーム上で表示させてみてください。
