レトロゲームの解像度との併用【enchant.js】

今回はあんまり役立たないかもしれない話ですが、個人的にはこれがとても有効な手段だったので紹介したいと思います。

まず先に下のツイートの動画を見てください。

じゃがいもが飛んできてるようにしか見えん。。 pic.twitter.com/aAETQW2dKp

— いんわん＠寒さにすこぶる弱い (@inwan78) April 20, 2019

ぱっと見ではわからないかもしれないですが上のゲーム部分の解像度と下のコントローラー部分の解像度が違います。ゲーム部分はファミコンなどのレトロゲームと同様の256×240、下のコントローラー部分は640×300になっています。

もともと私はいつも640×900でゲームを開発していました。なのでバーチャルキーパッドも同様の解像度で作りました。しかし、レトロゲームを作ろうと思ったときに解像度の違いで困りました。それでしょうがないのでゲーム画面の方を拡大することにしました。

Group単位で拡大

enchant.jsはGroup単位でも拡大縮小させることができます。なので関連するものをGroupにaddChildしてまとめておくと一括して拡大縮小できます。この辺は過去の記事でも書いているので気になる方は読んでみてください。

▷▷▷なんでもsceneに直接addChildするのは良くない

▷▷▷enchant.jsのGroupクラスはとっても便利

で、今回レトロゲームを作ろうと思って256×240と私のいつも作っている640×600(ゲーム画面部分)との比率を出してみたら幅高さどちらも丁度2.5倍。たまたまだけどファミコンと同じアスペクト比だった(ファミコンは224て説もあります。それは上下に画面にちゃんと表示できない部分があるからで本来は240だそうです)。

しかしenchant.jsは画像を拡大するとピンボケします。このボケ具合は拡大率が上がるほど大きくなるんですが、2.5倍程度なら許容範囲です。また、レトロゲームということを考えれば多少ボケた方がブラウン管で見てるかのような感じが出て逆に良い。ものは考えようです(´∀｀)

また、拡大で処理速度に影響があるか心配でしたが拡大が固定されていれば全然影響はないようです。

ちなみにプログラムはこれだけです。

var screen = new Group();//ゲーム画面
screen.scaleX = screen.scaleY = 2.5;
this.addChild(screen);

ゲーム画面用Group作成時に拡大しておきます。Spriteはこれに追加されると自動的に一緒に拡大されます。

まとめ

拡大機能を使うと画面内に違う解像度で表現できることがわかりました。アイデア次第ではもっと面白いことができるかもしれませんね。

ちなみに初代プレイステーションまでの家庭用ゲーム機は基本256×240(224) みたいです。レトロゲームに興味がある方はこの解像度でつくると雰囲気が出ると思いますよ(‘ω’)ノ

あ、あとレトロゲームの解像度で開発すると画像が軽くなるのでロード時間が短縮されて快適になります。これもとても重要なポイントですね(´∀｀)