タイル状配置のチラつき問題

cocos2dxのゲーム製作において、タイル状に画像を配置して
ステージなり背景なりを作る、というは割とポピュラーなやり方だと思うけど、
画像をスクロールする際（あるいは移動の際に）に画像と画像の間に
隙間のような切れ目ができてチラついて見えるっていう、あのお決まりの現象と、
その解決法について。



解決法っていうか、ある種の逃げの策だと思うので、
原因を理解した上できちんと解決したいのであれば
おすすめできない方法だけども。

おそらくcocos2dxに限らず、タイル状に画像を配置するような
ゲーム製作においてはついてまわる問題なのかもしれないけれど、
画像と画像をピッタリと並べて表示させると、
表示させているだけだと特に問題がなくても
その画像を移動させると画像と画像の間に切れ目が見えるわけですよ。
こんな感じ。

原因としては座標点の数値が端数切り捨てられてしまうことらしい。
コレに関してはこのブログさんがとてもわかりやすく説明されてました。

なるほど。
で、正統派な解決策としては座標点の指定方法を変える、とか
もしくは一旦座標点の数値を整数に丸める、なんていうやり方を
書いてくれているサイトさんなんかもありました。

ど、どれも自分には難しいッす…

というわけで、そういう正統派なやり方でなく
ちょっと邪道（？）的なやり方。
（本当にコレで良いのかどうかは保証しません）

画像と画像に隙間ができちゃうなら、隙間ができてもいいように
最初から重ねておけばいいじゃない。っていう。

例えば幅320（ピクセル）の画像を2つ並べるとして、
画像間隔を320きっかりで並べると移動の際に隙間ができてしまうので、
幅340くらいのサイズで画像を作っておいて、320間隔で並べていけば、
多少ずれた所で画像の端と端は重なっているので切れ目は見えないのでは？
仕組み的にはこんな感じ。

わかりやすく1と2の高さを変えてみると、重なっているのがわかる。

端と端の高さが揃っていれば揃っていればパッと見わからない。

そんなわけでちょっとやってみたら、できた。

一応、このやり方ができるのは、
画像の端と端が重なっていても違和感のない、ループ仕様の画像のみなので
いつでもコレでOKというわけでもないけど、
一応、初心者にやさしい解決方法ということで、メモ。

こういうやり方をしている人が他にもいるのかどうか、
調べても見つからなかったのだけど、もしかして結構当たり前の手法？
個人でやっていると、そういう情報が全くないのがデメリットですな。

ちなみに、コレでも解決しねぇ！って人、
Spriteのアンチエイリアスをオフにしてみましょう。
（やり方は各自でググってね）
アンチエイリアスによって隙間ができている、というケースもあるみたいですので。

☆★というわけでcocos2d-xで制作しました★☆

☆★このゲームのステージは上記方法でチラつきを抑えてます★☆

レッド・ザ・パニッシャー　―スタイリッシュレトロアクション―
カテゴリ: アクション
Google Playで詳細を見る

今なら（永久に）無料！ 今すぐチェック！！