ここでは、「game01」というディレクトリ内で作業しているという前提で説明しています。

キャラクターをタイル状に並べて表示する「Map」機能を使う

それでは、表示するコードを書いてみます。
前回と同じく、「gameControl.coffee」の「when 1」の最後にある「@nextjob()」の直前に、マップ定義の配列を作成します。


                map = [ 
                    [0, 0, 0, 0, 0, 0, 0, 0, 0]
                    [0, 5, 5, 5, 5, 5, 5, 5, 0]
                    [0, 5, 5, 5, 0, 5, 5, 5, 0]
                    [0, 5, 5, 5, 0, 5, 5, 5, 0]
                    [0, 5, 5, 5, 0, 5, 5, 5, 0]
                    [0, 5, 5, 5, 0, 5, 5, 5, 0]
                    [0, 5, 5, 5, 5, 5, 5, 5, 0]
                    [0, 0, 0, 0, 0, 0, 0, 0, 0]
                ]

Map配列の定義はenchant.jsそのままなので、地形データ作成ツールで作ったものをそのまま使えます。
この配列のデータで使っている数字は、後でaddObjectするときに指定するimageのキャラ番号です。
通常キャラのanimlistで指定するのと同じ数字です。
次にこの配列定義の真下に、下記のコードを追記してください。

                mapobj = addObject
                    type: MAP 
                    map: map 
                    mapcollision: map 
                    x: SCREEN_WIDTH / 2 
                    y: SCREEN_HEIGHT / 2 
                    image: 'bear'
                    width: 32
                    height: 32
                GLOBAL['map'] = mapobj

「type」で「MAP」を指定しています。
これでこのオブジェクトはMAPオブジェクトになります。
「map」パラメータで先ほど作成した配列を渡しています。
「mapcollision」は、インスタンスメソッド「@isCollision(x, y)」で判定するための配列を指定します。
このCollision配列は、基本的には0と1で作成するのですが、「0とそれ以外」という動作をするので、mapで使用するために作成した配列をそのまま使用しても構いません。

次に、「bearChara.coffee」を開き、「when 0」の最後に、下記のコードを追記します。

                map = GLOBAL['map']
                if (map.isCollision(@x, @y))
                    @animnum = 1
                else
                    @animnum = 0

修正／追記が終わりましたら、保存してコンパイルしてください。
Webブラウザをリロードし、「z」キーを押すと左上に作成した配列と同じ形の絵が出ていると思います。
そして、クマをジャンプさせ白いクマの上に重なると自キャラの茶色いクマが白いクマに変わると思います。

ExtendMapについて

enchant.jsのプラグインである「extendMap.enchant.js」もデフォルトで読み込まれるようになっています。
ExtendMapを使用する場合は「type」パラメータに「EXMAP」を指定し、ExtendMapで使用する2つのマップ配列のうち2つ目は、

                    map2: map2

のように「map2」パラメータで指定します。
（当然ですが、ExtendMapはenchant.js使用時のみ利用可能です）

Map機能サンプル

チュートリアル（１１） <--- ⬛︎ ---> チュートリアル（１３）

enforceチュートリアル一覧