Help us understand the problem. What is going on with this article?

enchant.jsとtmlib.jsを使ったゲーム作成フレームワーク「enforce」チュートリアル(12)Map機能を使う

More than 5 years have passed since last update.

ここでは、「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機能サンプル

チュートリアル(11) <--- ⬛︎ ---> チュートリアル(13)


enforceチュートリアル一覧

digitarhythm
いろいろ作っています。 フルスタックフレームワーク「ViewllerJS」 https://www.digitarhythm.net/viewllerjs ブラウザでWebゲーム開発「enforceIDE」 https://www.prominence.tv/enforceIDE WebブラウザでProcessing「InstaProc」 https://processing.fun/
http://www.digitarhythm.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away