【enchant.js】Mapの座標に小数が入ると表示が崩れる

個人的にenchant.jsの最大の長所はMapクラスで当たり判定までやってくれることだと思う。
他のゲーム用ライブラリでもMapクラスはあるけどそこまではやってくれない。

そんな便利なMapクラスですが
最近使ったら表示がおかしくなってしまったので
原因を調べたら、座標に小数が入るダメってことが分かったのでメモ。

実験：Mapをちょっとずつ動かしてみる

enchant.js公式のサンプルコードをちょっと弄ります。
こんな感じ。

map.on('enterframe', function() {
    map.y += 0.1;// 少しずつ動かす
})

実行結果はこちら

変な線がでるーーーーー。。

以前から小数が入るとドットがにじんだりして
モヤモヤした気分になることがあったんだけど
ここまで致命的な表示崩れはなかったと思うんだけどなぁ。
最近のブラウザのアップデートでこうなったような気がする。。

解決策：小数をなくす

基本的に小数を無くして
整数にしてあげればいいんだけど
物理エンジンとか使ってると整数で計算するのは厳しい。

なので物理エンジンの計算用変数を別途用意しておきます。

map.realY = 0.0;// 計算用変数
map.on('enterframe', function() {
    map.realY += 0.1;// 少しずつ動かす
    map.y = Math.floor(map.realY);// 整数化
})

めでたし。めでたし。