見出し画像

どうしてもWebGLでゲーム作りたかった話

前置き


制作意欲が地の底あった去年の12月
UnityRoomの1WeekJamを開催するというツイートが流れる

おうこれは参加してみるべきでは?
しかし丁度その頃はお引っ越し直後だったので
あちこちにダンボールがある状態

そんなこんなの12月はアイデアを思いついた後、寝かせたままだった

そして時が流れ、仕事が激務な1月の後半
個人的な事情(割愛)で働けなくなったので
ホコリを被っていたUnityのプロジェクトを掘り返してみることに

彼の目的、それはゲームを完成させることだった…

とかっこよい事を言っているが、実際は、去年Clusterで作ったきりでゲームクリエイターを名乗れるのか葛藤を感じたからである。

なお投稿期間はとっくにすぎているが、個人が自由に書いていることなので
突っ込んではいけない。

Unityで動作するのにWEBGLで動かない!

今回時間を割いたのは、Unityで動くのに、WebGlで動かないという現象
この記事を書く勇気をくれた元凶でもあるが。

体験したことを順を解説しようと思う。

ビルドに時間かかる。

まあビルドするたびに8分くらいか?WebGLにビルドするとまあ時間かかって暇であった、これも複雑な作業を経由してるので諦めて、VRで遊んで気がついたらビルドが終わってる、そんな流れだった。

Char配列をStringにしようとした

画像1

こう書いたのだが、Unityでは上手くいく、だがWabでは動かない。
ちなみにWebでコンソールを開くという発想がまだ無かったので、修正してビルドを繰り返していた。

画像2

そこから脱却したのは「あれファイアフォックスもデバック機能あるよな?」なんて考えてF12キーを押した所、コンソール画面にエラーが表示されていたのを発見出来たからである。

画像3

この問題はConcat関数で変換する事で対処した。

Floor関数がおかしい

作ってるゲームは呪文を表示するので、座標計算がどうしても必要になる、

画像4

ところが呪文のこいつ、座標がずれてバラバラに並ぶ現象が起きる。

この問題も手強いものだったな、Firefoxのコンソールにエラーも表示されないので手がかりが自分のソースコードだけであった

画像5

この時はちょっとソースコードが絡まり始めたので、バグ探す事が面倒になり諦めてリファクタリングから始める作業を行った。
作った部分を作り直すのは無駄かもしれないが、製品寿命が長いケースだとこういうのが効いてくるものだ。
(自分も意味わかってないけど良いこと言ったはずだ)

画像6

さていい感じにクリーンなコードになったので座標計算の部分を睨んだ。

縦方向の整列、つまりY座標計算の途中で、割り算の結果を切り捨てる必要があり、そこでMathf.Floorを使ったのだが、X座標の整列ではこれを使っていない。

そしてX座標だけズレる、もう9割こいつだろうと思った。
しかしWEBにはデバックログを表示する仕組みなどないので、これを実装するところからだった、良い経験だと思って(超面倒だと思っていました)作ることに

そしてこちらが例の写真である

画像7

おわかり頂けただろうか?

画像8

Floor関数は切り捨てを行う関数なのだが、これっぽっちも切り捨てしてないです。お前仕事しろよ!!!

まさか無視されていたとは誰が思うか、そりゃエラー吐かないがな。

画像9

さて対処法は簡単ですよ奥さん。
FloorToIntを使うでOK、まあなんてお手軽なの、これ買うわあなた。

結局の所仕事してないのは自分だったという。。。
このトラブルに6時間費やしましたが、Google先生がこのページを教えてなかったらどうなっていたか考えたくもない。

そして完成へ

これらの困難を超えて出来たゲームがこちらだった訳だが、
普通に完成まで2週間要した、これ以上のクオリティを出すクリエイターの方々は脱帽であると同時に目指すべきものでもあるのだなーと感じました。

おわり。




この記事が参加している募集

この記事が気に入ったらサポートをしてみませんか?