CocosCreator v2系でTiledMapを表示する

# はじめに

CocosCreatorもバージョン2系が主流となり、より高度なゲームをよりシンプルに作れるようになりました。
その一方で、いろいろな仕様変更もあり、以前使えた手法の多くが使えなくなってしまいました。
[以前書いた記事(バージョン1系)](https://qiita.com/raichi/items/f4fa68d155e73105fd8b)もおそらく動作しないと思われるので、改めてバージョン2系で再整理していきます。

# 今回の目標

* Tiledマップエディタでマップ作成
* マップをノードインスタンスとして画面表示
* アンチエイリアスの無効化

# 動作環境
* MacOS
* CocosCreator v2.4.3
* Tiledマップエディタ 1.3.4

CocosCreatorとTiledマップエディタはインストール済みの前提で始めます。


# 1. CocosCreatorのプロジェクト作成

マップの置き場所を先に作成しておきたいため、まずCocosCreatorのプロジェクトを作成します。

Cocos Dashboard上で新規プロジェクトを作成します。
今回は20201022_cc2tiledmapという名前でプロジェクトを作成しました。
![20201022_cc201.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94561/5a513615-fbce-fdba-b02e-a5c5b3f2acbe.png)

CocosCreatorが起動したら、最初にシーンを作成します。
左下のassetsフォルダを右クリックし、Create→Sceneの順に選択します。
名前はGameとしました。
![20201022_cc202.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94561/e88a8688-7604-e689-b30e-070e7f833d47.png)

続いて、あとで読み込むためのマップを格納するフォルダを作成します。
左下のassetsフォルダを右クリックし、Create→Folderの順に選択します。
以下のようにresourcesフォルダを作り、またその中にmapsサブフォルダを作成します。
<font color="red">CocosCreatorのリソース読み込みはresourcesフォルダ配下に対して行われるため、リソースを配置するフォルダ名はresourcesとすること。</font>
![20201022_cc203.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94561/464c3354-1873-ac98-b81c-3ff5d5f39e40.png)

ここでいったんプロジェクトを保存しておきます。


# 2. マップ作成

[以前の記事](https://qiita.com/raichi/items/f4fa68d155e73105fd8b)で作成したマップを使用します。
マップやタイルセットの作成方法は[以前の記事](https://qiita.com/raichi/items/f4fa68d155e73105fd8b)を参照してください。

### マップの概要
* タイルの大きさ：32px*32px
* マップの大きさ：16タイル*16タイル
* ２種類のタイルセットを使用
 * mapchip1.tsx
 * mapchip2.tsx
* マップ(map.tmx)は2種類のレイヤで構成
 * foregroundレイヤ
 * backgroundレイヤ

以下のように、Tiledマップエディタでマップを作成します。
![20201022_cc204.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94561/9a4726b4-6e42-0731-44d5-9ca787e35b33.png)

作成したマップに関連する以下5種類のファイルを、CocosCreatorのプロジェクト内にあるassets/resources/mapsフォルダに格納します。
* map.tmx
* mapchip1.tsx
* mapchip1.png
* mapchip2.tsx
* mapchip2.png

# 3. マップの読み込みと画面表示

## 3.1 マップ表示用ノードの作成

Node Tree上で、Canvasノード内にmapノードを新規作成（Create Empty Nodeを選択）します。
![20201022_cc205.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94561/2b979102-6ff3-90a9-d125-2f0ab05812fe.png)

続いて、mapノードのプロパティにて、以下を設定します。
* Position　X:-480　Y:-320
* Anchor　X:0　Y:0

上記の設定によって、mapノードの左下の原点がCanvasの左下に揃います。
![20201022_cc206.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94561/fb80e36b-9c0b-2000-25d2-7277ef0906f3.png)


## 3.2 マップを表示するスクリプトの作成

assetsの中にscriptsフォルダを作成し、JavaScriptを作成します。
スクリプトの名前は「Map」に変更します。

mapノードを選択し、プロパティ上の「Add Component」を押し、「Custom Component」→「Map」を選択します。
以下のように、mapノードにMapスクリプトが関連付けられます。
![20201022_cc207.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94561/1efed215-d0f3-fd56-78ce-633a640d6e77.png)

Map.jsを以下の内容に書き換えます。

```javascript:Map.js
cc.Class({
    extends: cc.Component,

    properties: {
    },

    start () {
        const self = this;
        cc.resources.load("maps/map", function (err, map) {
            let component = self.node.addComponent(cc.TiledMap);
            component.tmxAsset = map;
        });
    }
});
```

※バージョン1系との差分
* cc.resources.load()でアセットを読み込む
　（バージョン1系のcc.loader.load()はdeprecatedになりました)
* タイルセットの読み込みは不要

ブラウザでプレビューすると以下のようにマップが表示されるはずです。
![20201022_cc208.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94561/4a763053-dcfa-8c17-8f9b-895fe3935344.png)


# 4. アンチエイリアスの無効化

レトロ風のゲームを作成する場合など、画像にアンチエイリアス（ギザギザの平準化）がかかっていない方がよいケースもあります。
デフォルトではアンチエイリアスがかかっているため、以下の手順で無効化します。

画像（mapchip1.png）を選択し、プロパティのFilter ModeをPointに変更します。

![20201022_cc209.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94561/5e91b3a8-c10b-2a02-bcaf-ff8887d135ee.png)

画像（mapchip2.png）も同様に変更します。

ブラウザでプレビューすると、（この例ではわかりづらいですが）マップのアンチエイリアスが無効化されているのが確認できます。

* アンチエイリアス有効（デフォルト：変更前）
![20201022_cc211.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94561/96fce2fa-ed65-2644-3579-d0cfb0d39a1b.png)

* アンチエイリアス無効化後
![20201022_cc212.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94561/14bddad7-1791-bc9a-5221-96793c984174.png)