ブロックくずしを携帯で開いたら、指がパドルを端まで運べませんでした
Unity と C# で3Dのブロックくずしを1本作り、そのあとブラウザで開ける形にして、携帯でも動かしました。自分でも何か作ろうとしている方に向けて、移していった順番と、つまずいた場所と、確かめていないことを書き残します。
先に3つ、正直に書いておきます。1つめ、この記事に載せている画面は、パソコンのブラウザで開いたものです。iPhoneの画面そのものではありません。2つめ、Androidの端末を持っていないので、Androidでどうなるかは確認していません。3つめ、この記事の下書きを書いているのはAIです。順番を決めたのも、直したのも私です。
キーがないと、1つも動かせなかった
携帯へ移す前は、こういう状態でした。3つあります。
1つめは、動く場所です。Windowsのパソコン用に組み立てた1本で、パソコンの画面の中でしか動きませんでした。Unity というゲームを組み立てるためのソフトと、そこで使うプログラミング言語の C# で作っています。
2つめは、操作のしかたです。矢印のキーでパドルを左右に動かし、別のキーでボールを出す。キーを押すことが、操作のすべてでした。
3つめは、画面の形です。横と縦の長さの比が16対9の画面を前提にして、3Dのカメラの構図を決めていました。構図というのは、3Dの世界のどこを、どれくらいの広さで画面に映すかの決めごとです。16対9は、パソコンやテレビでよく使われる形です。
これは個人が自分のために作った1本で、商品ではありません。
携帯にはキーがありません。この形のままでは、画面に触っても1つも動きません。
5回に分けて、携帯のほうへ寄せた
これが、いま置いてある画面です。手前の板で奥のブロックを崩します。左右のグレーの壁が、ボールの跳ね返る場所です。
分けたのは、5回です。
1つめ。パソコン版を先に1本仕上げました。
2つめ。操作の受け口を分けました。キーを直接読んでいた場所をゲーム本体から切り離して、あとから別の操作に差し替えられるようにする作業です。
3つめ。その受け口に、指で触る操作を差し込みました。押さえている間、その位置にパドルが付いてきます。画面を叩くと、ボールが出ます。
4つめ。ブラウザの中でそのまま動く形（WebGL）に書き出して、URLで開ける場所に置きました。アプリを入れずに、ブラウザだけで動かす出し方です。
5つめ。自分のiPhoneで開いたところ、指の動きの合わせ方を作り直すことになりました。
2番目を先にやったのは、仕上げたパソコン版の動きを1つも変えずに、あとから別の操作を足せるようにするためです。
ここまでで、はじめの3つはこう変わりました。動く場所は、ブラウザで開ける形になり、携帯からURLで開けるようになりました。操作は、押さえた位置にパドルが付いてくる形と、画面を叩くとボールが出る形です。画面の形は、16対9を前提にした構図は変えず、指の動きの換算のほうを画面の横長さに合わせて作り直しました。ただし、これは一度で決まらず、あとで作り直しています。
iPhoneのアプリとして出す道も調べましたが、私の環境では手順が長くなりすぎると判断して、選びませんでした。
鳴るのは効果音だけです。音楽も作りましたが、同じ音がずっと鳴っているように聞こえたので、鳴らすのをやめました。
私が試した3回では、遊べるようになるまで49秒・71秒・67秒かかりました。読み込み中は進み具合の棒が出るだけで、あと何秒かは画面に出ません。ブラウザで動く形にして、URLを知っていれば開ける場所に置いてあります。
指が、壁のところまで届かなかった
自分のiPhoneで開いて遊んだところ、パドルが動かなすぎると感じました。そこから作り直しています。
何が起きていたか。構図は、横と縦が16対9の画面を前提に決めてあります。携帯を横に持つと、それよりさらに横長になります。すると、左右の壁の外側に、背景の余白が見える状態になります。ところが指の位置は、画面の端から端までを基準に換算していました。だから、その余白のところまで指を動かさないと、パドルが壁際まで来なかったのです。
これはバグではなく、作った時の前提と、動かした場所とのズレでした。
直し方は、換算の基準を変えることでした。画面の幅ではなく、カメラが実際に映している範囲を基準にし直しています。画面の幅は端末によって変わりますが、カメラが映している範囲は、こちらが決めた値です。そこを基準にすれば、画面の形が変わっても、指の位置と壁の位置が同じ意味になります。
もう1件あります。点数と残りの数を画面の隅に出していたのですが、画面の比率によっては外へ押し出されて、見えなくなりました。画面の角を基準にして置き直しています。こうだろう、という見当をつけて直したら、症状は出なくなりました。原因が本当にそれだったかは、確かめられていません。
どちらも、自分の手元の画面では一度も表に出てきませんでした。
確かめたことと、確かめていないこと
この記事に載せる画面を用意していて、いま初めて気づいたことがあります。公開しているブラウザ版では、日本語の文字が1文字も表示されていません。
タイトル画面で難しさを示している行が、「: Normal」とだけ出ていて、その前にあるはずの日本語が抜けています。画面のいちばん下の案内の行も、日本語の部分だけが落ちて「1/2/3Space/Enter」という並びになっていました。
ゲームのデータの中に、日本語の文字そのものは入っていました。消えたのではなく、画面に出す時に字の形が出ていないようです。日本語の字形を持たない書体が使われているのだろう、という見当はついていますが、確かめていないので断定はできません。
いまも、公開しているものはこの状態のままです。英語の表示だけで操作の意味は通るので、次に同じあたりを触る時に直すつもりです。
上から2行めの「: Normal」と、下のほうにある小さい文字が、日本語の抜けたところです。
ここからは、確かめたことと確かめていないことを、分けて書きます。
iPhoneのSafariでは、自分の端末で実際に開いて動かして確認しました。パドルが指に付いてくること、画面が勝手に拡大しないこと、この2つです。Androidは端末を持っていないので、確認していません。どうなるかは言えません。
ブロックが壊れる時の火花で動きが重くなるかどうかは、負荷を測っていないので言えません。パソコンで遊んだ時と同じ手触りかどうかも、並べて比べていません。
一度だけ、ボールが壁もブロックも突き抜けていったことがあります。そのあと同じことは起きていません。原因が分からないままなので、直したとは言えません。
画面を縦長にして開くと、ブロックの列が左右からはみ出して、横長で見えていた壁が画面に入りません。横に持って遊ぶ前提で作ってあり、縦は直していません。
縦長にした時の画面です。ブロックの列が両側に出ていて、横長で見ていた画面にあった左右の壁が見えていません。
これは個人が自分のために作った1本です。だれかに渡したことも、お金を取ったこともありません。URLを知っている人が開ける状態で置いてあるだけで、iPhoneのアプリとしては出していません。
まとめ
パソコンの画面の中で動いていたものを、携帯のブラウザへ持っていきました。持っていって最初に出てきたのは、新しく足した部分の不具合ではなく、作った時に決めたきりの前提のほうでした。画面の比、指の位置の数えかた、字の形。どれも、動く場所が変わらなければ、一度も表に出てこないものです。
動かす場所を変えると、それまで気にしなくてよかった前提が1つずつ表に出てきます。私の場合それは、画面の横と縦の比でした。
この記事で書いたことについての連絡先は、お問い合わせのページにあります。