ホーリーのプログラミング日記

ホーリーのプログラミング日記

エキセントリック・スーパーアプリクリエイター / アプリ総DL数 約180万 / 全然分からない 俺は雰囲気でアプリを作ってる / iOS : apple.co/3m3HxSm / Android : bit.ly/3ma0liZ

X対応の謎

 

こないだ「Unity製のアプリをXcodeのシュミレーターで立ち上げられることを知らなくて、めっちゃ恥ずかしい」みたいな話を書いたんですけど、どうもこれそんなに恥ずかしいことではなかったみたいですね。

結構ガチで恥ずかしいやつ - ホーリーのプログラミング日記

 

全国に2人は同志がいるはず、なんて書いたんですが、とりあえず身近なところに2人いらしたので、即座に考えを改めた次第ですw

 

そいや本とかにも、実機転送のやり方は書いてあっても、シュミレーターを作ったビルドは書いてないですよね。

「うおお。知らんかった。どうしよう。さすがにブログに書くのは恥ずかしいかな?ど、どなんだろ。。」なんて悩んでた自分こそ恥ずかしい。

恥晒してなんぼのブログなので、今回もバーンと書いていこうと思います。

 

===

 

えー、そんなわけで、シュミレーター繋がりから、iPhoneX対応の話を書きたいと思います。

書きたいっていうか、聞きたいって方が正しいかな?

iPhoneXが出てからというもの、画面サイズに対応するのって、めっちゃ面倒くさくなったじゃないですか。

 

(てかこれ書きながら画面サイズ一覧表みたいなの見たら、AndroidもXみたいな比率のスマホ多いんですね)

https://sounansa.net/archives/2796

 

それで、これってみんなどうしてるんですか?

Xcode × Swiftで開発されてる方は、Xcodeの方で合わせられるようになってると思うんですが、問題はUnityですよ。

僕も思いっきりUnityなわけですけど、UnityでXに対応するのって、どうしたらいいんでしょうか?

 

実はそんなに知らないんですよねw

 

僕のUnityは2017.4とかそのくらいのバージョンで、2018にすらしてないんですが、最新に近いバージョンだと、普通に対応出来るのかな?

本当に知識が浅いので、とりあえず自分がやってることと、最近悩んだことについて書いてみたいと思います。

 

===

 

僕が今日まで作ったUnity勢のアプリって、基本uGUIを使ったものが多いんですよ。

最初にCanvasを画面に置いて、サイズを設定して、そこにボタンとかイメージとかテキストを置くみたいな。

和尚本に出てくる脱出ゲーとか放置ゲーの作り方、そのままでやることが多いです。

 

んで、この場合のX対応なんですが、それはCanvasを縦に合わせるのか横に合わせるのかで変えています。

 

f:id:gevvoihorry:20190308172725p:plain



Matchってとこですね。この画像ではHeight(高さ)に合わせてるので1になっています。

 

んで、普段は9:16で開発してるんですが、Xにすると横が見切れちゃうので、横で合わせるように変えてるんですよ。

 

if(1.0f * Screen.width / Screen.height < 9.0f / 16.0f){
    GetComponent<CanvasScaler>().matchWidthOrHeight = 0.0f;
} else {
    GetComponent<CanvasScaler>().matchWidthOrHeight = 1.0f;
}

 

コードはこんな感じで、9:16を下回ってるかどうかを判定、それで縦横どっちに合わせるかを変える感じです。

このコードをCanvasにアタッチさせています。

 

実際の見た目なんですが、横に合わせるので、上下に黒帯が出ちゃうんですよ。

 

f:id:gevvoihorry:20190308173524p:plain


手元にX系統の実機がないので、これシミュレーターの画像なんですが、まあ大丈夫でしょう。綺麗に溶け込んでますよw 

(実機で確認しても、僕にとっては全然OKです。かなり自然な感じ)

 

Canvasにポチポチ置いてく系のアプリは、基本的にこうやって対応しています。

 

この記事と同じかな?

UnityのiPhoneX対応案 - Qiita

 

===

 

えー、そんなこんなでX対応をしてたんですけど、最近作ってるゲームのワンシーンで、オブジェクトをプレファブにして、画面に沢山出すところがあったんです。

 

f:id:gevvoihorry:20190308174045p:plain

 

これですね。まだ世を忍ぶ仮の姿だと信じたいんですが、こんなシーンがあるんです。

青い点々がプレファブ。

 

それで、この画面をXの比率にすると、どうも変なことになってしまうんです。

 

f:id:gevvoihorry:20190308174142p:plain

 

プレファブのポジション変わらずそのままで、他のが変わった分おかしくなる、みたいな。

 

Canvas内のことは先ほどの小手先テクで何とかなるんですが、ワールド座標で指定しているプレファブを、どうやって管理すればいいのか分かりませんでした。

てか正直な話、今も分かってませんw

 

とりあえずカメラを引いたらいい感じになったんですよ。

 

f:id:gevvoihorry:20190308174325p:plain

 

Main CameraのSizeってとこですね。

 

f:id:gevvoihorry:20190308174405p:plain

 

通常は5なんですけど、画面比率によって、それを6にしたりとすれば、現状いい感じになってます。

 

この手のアプリをそんなに作ったことがなかったんで、Canvas外のことがよく分かってないんですよ。

普通はどうやってXに対応するんでしょう?

てかさっきのuGUIのやつも、みんなどうやってるんでしょうか?

 

非常に重要なことだと思うんですが、とりあえず僕は適当です。全然分かっておりませんw