100日後に完成するゲームシステム 85日目「zoom機能」

2021年7月22日

テクノロジー 特集

eyecatch 独自の視力トレーニングで、視力回復をしている、ユゲタです。 人間って左右の視力が違うので、両目を開いてトレーニングしても、効果半減以下なんですよね。 そして、人の目って、片目でモノに焦点を合わせるという感覚がわかると、眼筋運動ができる感覚がつかめるので、 視力運動したいひとは、がんばって目の筋トレをしてあげるといいと思いますよ。 今回はゲームをマルチブラウザとして、いろんなデバイスで遊ぶ時の事を考えて、 画面サイズに応じた表示サイズを考えてみました。

もはや無限大のデバイスサイズ

パソコンとスマートフォンだけを考えても、デバイスの表示領域の差は、かなり大きな開きがあります。 一番最小を、幅320ピクセルと考えると、 PCモニタは、2000ピクセルぐらいの性能を持っているのが、当たり前のように安く販売されているので、 これらで、1つのゲームをする際に、困ったことがある人も多いゲーム開発者も多いのではないだろうか? 確かに、スマートフォンと一言で言っても、通常のポートレート(縦長)と横に倒した際のランドスケープ(横長)のサイズがあるし、 iPhoneとiPadというような、タブレット端末は、PCとスマホの中間サイズのような立ち位置をしていて、且つポートレート、ランドスケープの要素も持っているため、 1つのデバイスで、縦横比も、サイズも可変するというのは、もはや「当たり前」と考えて置かなければいけないようです。 そして、PCでは、ブラウザのウィンドウサイズは、小さく使って他のウィンドウと画面にならべて配置する人もいれば、 マルチモニタで、画面サイズいっぱいに開いて表示している人もいるし、 ユゲタのような開発者は、ブラウザのjavascriptコンソールを開いた状態で見ている場合もあるので、ブラウザサイズがさらに可変しているというのも、想定しないといけませんね。 ユーザーインターフェイスを重要視するゲームは、縦横比が変わることはご法度というタイトルが多いのも事実なんですが、 PCのウェブブラウザを対象にしなくても、サイズ可変には、気を配っておきたいですよね。 実際、縦専用、横専用のゲームは、たくさん存在しているので、おそらくサイズ変更されると具合が悪いんだろうと想像できます。

ゲーム搭載して困った点

今回の「skill-land」は、最小ブラウザサイズから、最大ブラウザサイズまで、対応しようと、次のような方法を試みました。 基本的に3つのサイズグループに振り分けます。
  1. 横幅が500ピクセルよりも小さい場合
  2. 横幅が500ピクセル以上、1000ピクセルよりも小さい場合
  3. 横幅が1000ピクセル以上
この3段階で、ゲーム画面に、zoom処理を施しました。 1の場合は、等倍で、2の場合は1.2倍、3の場合は1.5倍という感じで、スケールチェンジしてみました。 すると、画面に対する印象が比較的どのブラウザでも近しい感じになったので、この仕様を採用したという事です。 でも、単にcssでzoom処理をするというだけでは、ゲーム内に不具合が生じることは想定していたんですが、 マウスクリックや、タッチ処理で行っていた、座標判定が思いっきりzoomに対応していなくて、ズレまくってしまいました。 なので、いっそのこと、zoom値を係数として持っておいて、座標計算する箇所(ブラウザのグローバル座標の場合のみ)に、その係数を掛け合わせて対応してみて、事なきを得ました。 簡単に書いてますが、2日ぐらい費やしたんですよね・・・

そのうち付けたい機能

ゲームの特性として、ステージ内で画面外の見せたくない情報などを持たないようにしたんですが、小さいステージなどは、あまりにも大きなモニタでフルサイズで見た時に、 ショボく感じてしまったので、スケール処理を行ったんですが、 やはりこうしたサイズなども自由に自分でセットできるように、したほうがいいかもと考えて、zoom値を拡縮できる機能も検討しています。 でも、これやりすぎると、迷路などが、全貌丸見えになるのもいかがなものか・・・とゲーム制作サイドの思考もどうしても頭をよぎります。 ユーザーからのニーズが多ければ、考え始めることにしましょう。

サイト公開しています

このブログが公開された時点では、まだアルファバージョンですが、無料でユーザー登録することで、遊んでももらえます。 ズーム機能が実際にどういう効果がでているのかを確かめたい人は、是非、遊んでみて、ご意見をもらえると非常に助かります。 https://skill-land.com

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ