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

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

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

ぱっと見ではわからないかもしれないですが上のゲーム部分の解像度と下のコントローラー部分の解像度が違います。ゲーム部分はファミコンなどのレトロゲームと同様の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) みたいです。レトロゲームに興味がある方はこの解像度でつくると雰囲気が出ると思いますよ(‘ω’)ノ

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

どのゲームで遊ぶ?

同じ色の宝石の数字を足してゾロ目や順目を3つ以上作って消すゲームです。
一番最初に作ったシューティングゲームです。まぁ最初はこんなもんですよ。
壁や自分の体に当たらないように餌を食べて蛇を大きくするゲーム。
同色で複数隣り合っているタイルをタッチするとそのタイルのところに他のタイルが集まります...

コメント欄

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

ゲームタグ一覧

ゲーム開発書籍(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))
改訂2版 はじめて学ぶ enchant.jsゲーム開発