WEBゲーム開発で気をつけたい！6つの気づきをシェア

デザイナー&コーダーのゲーカーです。

最近、タブレット/スマホ向けWEBゲームの開発に携わりました！

デザインを作成したり、開発担当が詰まったときには一緒にウンウン唸ってバグの原因を探ったり、テストをしたり、盛り沢山の経験をさせてもらいました。
アプリ開発中心の弊社では珍しい案件でしたが、その中で得た知見や伝えたいことをシェアしていきたいと思います。
「これからWEBゲームを実装してみたい！」という方の参考になると幸いです。

1. ど頭から注意ー！！！音声ありのコンテンツの自動再生はできません。

画面に遷移したらすぐにBGMが始まって、さあゲームスタート…ってやりたいじゃん？
ダメです。
ブラウザの仕様上、ユーザーのジェスチャーなしに音声ありのコンテンツは自動再生できません。
無音のムービーなら大丈夫。
これは各ブラウザの開発者が本気でUXを考慮して実装した仕様なのです。
メディアおよびウェブオーディオ API の自動再生ガイド

一回タップした時点で音声再生して、その後任意のタイミングでまた再生させる…というのは2021年現在ギリ大丈夫です。
なので、BGMや自動再生SEを入れたい場合は「スタートボタン」などのワンクッションを入れましょう。

2.ライブラリ選定時から気をつけよ！マナーモード時に音を出す？出さない？

通常のaudioタグやvideoタグで埋め込まれたメディアは、端末がマナーモードでも音声は出ます。
ですが、web audio APIという方式で音声を再生する場合、端末がマナーモードだと音声が出ません！
「端末がマナーモードの場合、それに従うか否か」を念頭に置きつつ、開発にライブラリを使用する場合、音声の再生形式がどんなものか確認しておきましょう。

3.クオリティを上げよう！タッチインタラクション必須です

要素をタップしたら反応がある。
まあ実装しますよね。

例えそこに何もなくとも、タップしたら軌跡が出る。
実装もれていませんか？
それを入れるだけで、UXクオリティ爆上がりです。

ゲームはインタラクション命。
細かい実装をめんどくさがらずに積み重ねることがクオリティアップの秘訣ですね。

4.クオリティを上げよう！その2 ローディング必須です

ゲームはとかく、画像や動画や音声やらアセットファイルが膨れ上がりがち。
ゲームのURLにいざ入って、しばらく真っ白い画面が続く…なんて、ユーザーは不安になりますよね。
ローディング画面は必須です。例え当初の予定になかったとしてもねじ込みましょう。

5.オフショア開発注意！！！！htmlの日本語文字コード設定

ゲームと直接は関係ないのですが、
「日本語のテキストを流し込む部分がsafariでだけ文字化けしている」というバグがありました。
アルファベットは文字化けしない。Androidでも大丈夫。おや？？？
よくよく見ると、htmlに日本語の文字コード設定がされていませんでした。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
この記述をhtmlのheadに入れておかないと、日本語が文字化けします。
今回、メインの開発をオフショアにお願いしたのですが、普段から日本語のコンテンツを開発していないと、このあたりの知識がなかったりします。
文字化けしたら、utf-8の設定がなされているかチェックしましょう。

6. タブレットとスマホ、canvas実装でもワンソースできれいに収めたい〜！

普通のレスポンシブウェブサイトだったら、タブレットでもスマホでもきれいに収まるようにCSSを書きますね。
ゲームって、canvas要素を使うようなライブラリで実装することが多いと思います。
ここでネックなのがレスポンシブ対応。

タブレットとスマホ、縦横比が違いますよね。
どっちも表示領域いっぱいにゲーム画面を収めたい。
ユーザーエージェントで切り分けてゴニョゴニョする？？？
でも実装はなるべくワンソースで簡略化したい…

そこで我々の取った手はこれでした。

16:9(スマホ)の画面内に収まるようにゲームの要素のデザインを作成。
ゲームのフレーム自体は3:4(タブレット)の画面で作成。

canvasは端末の横幅に合わせた3:4に設定します。
そして、画面に対して上下左右中心にくるように設定。
16:9のスマホ画面では、CSSを駆使して余分な部分をカット！
canvasの位置や大きさはお使いのライブラリなどでも設定できると思いますが、
だいたいこんなCSSです。
canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } body { position: relative; height: 100%; width: 100%; overflow: hidden; margin: 0; }