CocosCreatorでドット絵をきれいに描く方法

はじめに

CocosCreatorではデフォルトで画像にアンチエイリアシングがかかる仕様のようです。写真などはきれいに表示されますが、ドット絵のカクカクを表現したい場合には不向きですね。

本記事ではレトロゲーム作成向けに、アンチエイリアシングを無効化する方法をまとめます。

アンチエイリアシングを無効化しない場合：
（特にビットマップフォントがきれいに表示されない）

アンチエイリアシングを無効化した場合：

※クリスマスツリーとリャマの画像は、ドット絵世界様よりお借りしました。

アンチエイリアシングを無効化する方法

以下のように、初期化処理にてcc.view.enableAntiAlias(false);を呼び出すだけです。
１回呼び出しておけば、Sceneが切り替わった後もアンチエイリアシングは無効のままとなります。

Game.js

cc.Class({
    extends: cc.Component,

    properties: {
    },

    onLoad: function () {
        cc.view.enableAntiAlias(false);
    },
});

なお、CocosCreatorのVersion 1.3系ではバグがあり、以下のエラーが出て中断してしまいます。
（2017.3.10 追記：3月頭に正式リリースされたVersion 1.4.0で対処済み）

Unable to get property 'map' of undefined or null reference

上記バグは1.4系では対処されているようです。
2017.2.22時点ではベータ版(02.07 updated rc.2)で動作確認を行いました。