ゆにてく備忘録

Unityやその他学んだ事を忘れないために書くぶろぐ

【Unity】iPhoneXでのみStatusBarを表示する設定


iPhoneXでのみStatusBarを出したいみたいなことがあると思い,作りました.

IPhoneXStatusBarSetting.cs

機能としては,デフォルトでのStatusBarの設定をきる.実行時にIphoneXならばStatusBarを表示するという感じです.

StatusBarのデフォルト設定はPlayerSettingsのIOSの設定で切っても良かったんですけど,なんとなく,ビルド後にInfo.plistを変更してStatusBarを非表示にしてます

StatusBarの表示,非表示はViewControllerのprefersStatusBarHidden関数で制御でき,YESを返すとStatusBarの表示,NOを返すとStatusBarの非表示となります.UnityはIOSビルドでViewControllerを継承したUnityViewControllerBase+iOSというファイルを生成し,そこにprefersStatusBarHiddenが定義されているので,その関数をIphoneXの解像度での条件分岐に書き換えています

gist4b20e2e153f2e0d09484dddcca0e1861

以下で紹介されているスクリプトを参考に作っています.というかほぼ同じ

qiita.com

【Unity】uGUIでのiPhoneXの対応

iPhoneX対応のスクリプトを書きました.最後にスクリプトは貼っておきます.

iPhoneX対応について

ざっくり説明すると,iPhoneXは上部のディスプレイの上の部分の出っ張りと,ホームボタンの代わりとなるホームインジケータが表示される部分にボタンなどをおいてはいけません.ボタンをおいて良い部分はSafeAreaと言います.詳細は下

iPhone X - Overview - iOS Human Interface Guidelines

Unity対応

UnityではUnity 2017.2.0p1からSafeAreaを取得する関数(Screen.safeArea)が実装されました.それを用いて,UIのアンカーポイントを変更するスクリプトを書きました.例えば,画面の端にアンカーポイントを設定していたものは,実行時にSafeAreaの端に変更されます.Screen.safeAreaは現状iPhoneX以外はScreenと同じサイズを返します

SafeAreaBounds.cs

f:id:n_taku:20171119145644p:plain

このスクリプトをつけると,実行時にアンカーポイントをSafeArea内に自動で補正します.Editor上で解像度をiPhoneX(1125x2436)にして実行するとiPhoneXのsafeAreaのエミュレーションができます.

実行結果

SafeAreaBounds.csをつけた左下揃えのボタンと,デフォルトの右下揃えのボタンの比較です.

f:id:n_taku:20171119151455p:plain

f:id:n_taku:20171119151704p:plain

f:id:n_taku:20171119152821p:plain

最後に

多分デザインによって対応方法はまちまちだろうけども,とりあえず一案ということで.上のスクリプトは下を参考に作りました.

p12tic / iOSSafeAreasPlugin / source / — Bitbucket

SafeAreaBounds.cs

gista83409ec6274fc4cccd686da13e3bfe0

【Unity】TextMeshProでアーチ状のカーブした文字表現

TextMeshProでAnimationのカーブに沿って文字を並べるスクリプトを書きました

ArchedText.cs

スクリプトは下に貼っときます.カーブの傾きを使って1文字ずつ再配置をしてるだけです.

f:id:n_taku:20171118180403p:plain

VAlignmentは縦揃えの設定でBase,Top,Bottomの3種類

HAlignmentは横揃えの設定でLeft,Center,Rightの3種類

Vertex Curveに沿って文字を配置

f:id:n_taku:20171118181229p:plain

f:id:n_taku:20171118181239p:plain

CurvedText.cs

スクリプトは下に貼っときます.Animation Curveの傾きでrotationさせ,y座標のoffsetを位置に使う方法.TextMeshproのアセットに入っているWarpTextExampleをいじった感じです

f:id:n_taku:20171118182600p:plain

CurveScaleでカーブの高さのスケール

Vertex Curveに沿って文字を配置

f:id:n_taku:20171118182828p:plain

f:id:n_taku:20171118182836p:plain

比較

Vertex Curveは横幅が変わらないので,カーブの角度によっては文字幅が大きくなることもあるかも.状況に応じて使いわけようかなと

ArchedText.cs

gistf7f39cbc55bed56082496d68270cfdf5

CurvedText.cs

gistda51c0b3be050d56c8921a432d7899c1

uGUIチュートリアル まとめ7 UI Slider

UnityのuGUIのチュートリアル(UI Slider)のまとめです.


UI Slider - Unity Official Tutorials

UI Slider

f:id:n_taku:20170425233850p:plain

音量調節や体力ゲージなどに用いられ,Slider(Script)で制御する.Sliderは基本的に3つの要素から成り立つ.背景グラフィックとSliderの選択中の値を示すFill(塗りつぶし)グラフィック,選択中の値の位置を示すハンドルにより成り立つ.背景とハンドルはなくても良い

f:id:n_taku:20170426004426g:plain

Slider(Script)

f:id:n_taku:20170426005709p:plain

Interactable

対象スライダーが入力を受け入れるかどうか.スライダーを表示のみでユーザーに操作をさせない場合(HPバーなど)はInteractableをオフにする.Interactableがオフの場合Transitionの状態が無効状態となる.

Transition

スライダーが通常時,選択時,押下時,無効時などの状態での見た目や状態遷移時の見た目を設定する.Transition時の挙動は他のUI要素と共通だが,Sliderの場合ハンドルにしか適応されない. Transitionの詳細は次回

navigation

キーボードによるUIのフォーカスの際の移動の仕方を設定.

  • None
  • キーボードナビゲーション無し
  • Horizontal
  • 水平方向にナビゲート
  • Vertical
  • 垂直方向にナビゲート
  • Automatic
  • 自動でナビゲート方向を指定
  • Explicit
  • 手動でナビゲーション方向を指定
  • Visualize
  • シーンビューにナビゲーションの矢印が表示される.

Fill Rect

要素の塗りつぶしに使われるグラフィックのRectTransformへの参照で,スライダーの値までスライダーが塗りつぶされる.

Handle Rect

ハンドルに使われる,グラフィックのRectTransformへの参照で,設定しなくても良い.HPバーなどの時には指定しないで良さそう.

Direction

値の増減の方法を設定できる.以下の4種類を選べる.

  • Left To Right
  • Right To Left
  • Bottom To Top
  • Top To Bottom

f:id:n_taku:20170429192418g:plain

Min Value, Max Value

スライダーの選択範囲の最小値と最大値を設定できる.DirectionがLeft To Rightの時は一番左が0で一番右が1となる.Min Valueはマイナスの値を設定することができるが,Max Valueより小さい値を設定しなければならない.

Whole numbers

これにチェックを入れると,スライダーの値が常に整数になる.少数をスライダーが指定している状態からWhole numbersを指定すると,最も近い整数値に調整される.

Value

スライダーの現在値が表示される.Inspectorで数値を入れておくと,それが初期値となる.

On Value Changed (Single)

f:id:n_taku:20170430021741p:plain

スライダーをタップした時や,動かした時に呼び出されるイベント.On Value Changedは現在のスライダーの値をfloat値としてイベントの関数に渡すことができる.Dynamic Floatと書いてある下にある関数はスライダーの値を受け取ることができる関数で,Static Parameterと書いていある下にある関数はスライダーの値を受け取ることができない関数である

f:id:n_taku:20170430021749p:plain

f:id:n_taku:20170430021754p:plain

f:id:n_taku:20170430021800p:plain

詳細は以下

unitech.hatenablog.com

Scriptからのスライダーの値設定

HPバーなどでスライダーを用いる時は,スクリプトから値を設定することが多い.以下がスクリプトからスライダーの値を設定した例である. またスクリプトから値を設定する時は,スライダーに対する入力を制限するためにinteractiveをoffにする.

gist9332e8ec48b42118ec3fca74700a2f02

uGUIチュートリアル まとめ6 UI EventとEvent Trigger

UnityのuGUIのチュートリアル(UI EventとEvent Trigger)のまとめです.


UI Events and Event Triggers - Unity Official Tutorials

UI EventとEvent Trigger

f:id:n_taku:20170417234215p:plain

UIを選択した時や押した時,タップなどのイベントを制御している. EventSystem(Script)とStandAloneInputModule(Script)で制御する.

EventSystem(Script)

f:id:n_taku:20170420234741p:plain

FirstSelected

開始時にデフォルトで選択状態にするUIを指定する.
PCとかで設定する項目で,ButtonでいうとHighlighed状態となる.

Send Navigation Event

Onにすると,キーボードなどで選択操作をした時に発生するナビゲーションイベント(OnMove,OnSubmit,OnCancelイベント)を有効にする.

Drag Threshold

ドラッグを開始したと判定される移動距離をピクセル単位で指定する.ScrollViewなどで使用するドラッグの閾値

StandAloneInputModule(Script)

f:id:n_taku:20170420234736p:plain

Horizontal Axis,Vertical Axis,Submit Button,Cancel Button

それぞれの操作に対応するInput Managerの設定を指定する. Input Manager↓

f:id:n_taku:20170418231809p:plain

f:id:n_taku:20170418231802p:plain

Input Action Per Second

1秒間に何回入力を受け入れるかを指定できる.デフォルトで10が設定されている.

Repeat Delay

連続して入力を行っていると判定するまでの時間の指定.この指定により予期せず連続して入力が行われていると判定されなくなる.

Force Module Active

モバイルデバイスでも上の設定を有効にするのかどうかを指定する.基本的にスマホなどにコントローラーは使用しないので,オフでしか使わなそう.

Eventの種類

インタラクティブなUI要素(ボタンなど)でUIごとに決められているデフォルトイベントと,Event Trigger経由で設定できるイベントがある.

デフォルトイベント

uGUIのボタンではOnClickイベントがデフォルトで設定できるようになっていて,関数をInspector上もしくはScript上から設定できる.Inspector上から設定する時.

f:id:n_taku:20170419233438g:plain

Script上から設定する時

gist38baba7df6bfaf8d0b03c52758d1d5d6

Event Triggerイベント

デフォルト以外のイベントをキャッチしたい時はEvent Trigger(Script)を用いる.Event Trigger(Script)を用いれば,デフォルトではタップイベントを受け付けないUI ImageなどにもEventを設定できる.ここから設定できるイベントの詳細はここ.このイベントをInspector上から設定する時f:id:n_taku:20170420232935g:plain

Script上から設定する方法は,EventTriggerを継承する方法とEventTriggerに対してdelegateを設定する方法の二つある.EventTriggerを継承する場合

gist611e5aaf40a767e572bb93d0d8a0f11e 

delegateを設定する場合

gist0208ddb430476bced981c38a0b909df9

設定できるEventTriggerType

gist8cf9d0b1eec69c253992564d9f845446

 

 

参考URL

uGUIチュートリアル まとめ5 UI Text

UnityのuGUIのチュートリアル(UI Text)のまとめです.


UI Text - Unity Official Tutorials

Text

f:id:n_taku:20170402200325p:plain

TextはUIの一部として文字を表示するのに使われる

Text(Script)

f:id:n_taku:20170402200534p:plain

Text

Text欄で指定した文字が表示される.改行もできる.

f:id:n_taku:20170402201138p:plain

Character

Characterで文字設定を変更できる

  • Font
  • フォントの種類を変える
  • Font Style
  • フォントの太字,斜体,太字斜体を切り替える
  • Font Size
  • フォントのサイズを切り替える.フォントサイズが四角形内に収まらない場合はParagraph設定でoverflowの設定がされていない限りフォントは表示されない
  • Line Spacing
  • 行間の設定
  • Rich Text
  • onの場合HTMLのようにタグを指定して書式を指定できる

Paragraph

Paragraphで段落設定を変更できる

  • Font
  • フォントの種類を変える
  • Alignmennt
  • 文章の水平方向の左,中央,右揃え,垂直方向の上,真ん中,下揃えの設定ができる
  • Align By Geometry
  • グリフ配置量よりもグリフジオメトリの範囲を使って水平配置を行う.とりあえず,ちゃんとした範囲をとって左右の揃えを正確にする設定.

f:id:n_taku:20170403232015g:plain

  • Horizontal Overfloe

水平方向に文字がはみ出した時の挙動の設定をする.Wrap設定の時は折り返して,改行する.Overflow設定の時は,折り返さずに表示する.

  • Vertical Overfloe

垂直方向に文字がはみ出した時の挙動の設定をする.Truncate設定の時はRectに収まらない場合は文字が表示されない. Overflow設定の時は,Rectを無視して表示する.

  • BestFit

この設定をすると,OverFlowの設定は無視され,RectTransformに収まるようにフォントサイズを調整する. その際に最小と最大のフォントサイズを指定できる

f:id:n_taku:20170403233408p:plain

Color

文字の色を変更できる

Material

Materialの設定による質感はフォント自体には影響を与えない,ほぼ使うことはないはず

Raycast Target

このUI要素の下にボタンなどのタップ判定をとるUI要素が重なっている場合,Raycast Targetがonだと重なっている部分のタップ判定はこのUI要素以下には通らない,offだとタップ判定が下のUI要素に届く

uGUIチュートリアル まとめ4 UI Image

UnityのuGUIのチュートリアル(UI Image)のまとめです.


UI Image - Unity Official Tutorials

Image

f:id:n_taku:20170330223428p:plain

ImageはUI全般の背景画像とかで使われる
ImageはImage(Script)からなる

Image(Script)

f:id:n_taku:20170330224332p:plain

Source Image

表示されるSpriteを選択できる.何も選ばないとColorプロパティの色の四角形となる

Color

Spriteに対して乗算する色を指定する.

Material

デフォルトではMaterialの指定は不要だが,Imageでシェーダーのプロパティを使いたい時に使用する.
この時,SourceImageがあるので指定したMaterialのテクスチャ設定は無視されるというか,内部的にSourceImageをmaterialの_MainTexに代入しているのかな

uGUIにmaterialを適用した例

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp

Raycast Target

このUI要素の下にボタンなどのタップ判定をとるUI要素が重なっている場合,Raycast Targetがonだと重なっている部分のタップ判定はこのUI要素以下には通らない,offだとタップ判定が下のUI要素に届く

f:id:n_taku:20170402192325g:plain

Image Type

Image TypeはSource Imageの使用方法に関する設定でSimple,Sliced,Tiled,Filledがある

Simple

SpriteをRectTransformのサイズに引き延ばす.
Preserve AspectOptionオプションははRectTransformに収まるギリギリまでAspect比率を保って拡大する
Set native Size ボタンはRectTransformをSource ImageのSpriteの大きさ(拡大縮小されてないサイズ)にする

Sliced

Source Imageで設定したSpriteを9つの領域に分け,4つ角以外の部分のみを拡縮し表示をする
Fill Centerオプションは輪郭部分のみを表示するか中央部分もぬりつぶすのかを指定できる

f:id:n_taku:20170402161914g:plain

Spriteの9つの領域はSprite Editorで編集することができる

f:id:n_taku:20170402163503g:plain

Tiled

RectTransformの左下を基準にSpriteを並べて表示する.
Sprite Modeの設定がsingleならば,RectTransformが大きくなるに連れて画像が敷き詰められるように配置される

f:id:n_taku:20170402174247g:plain

Sprite ModeがMultipleならば拡大縮小する4つ角以外の部分が敷き詰められる

f:id:n_taku:20170402174441g:plain

Filled

Spriteをどのように(Fill Method),どこ基準(Fill Origin)で,どのくらい(Fill Amount)塗りつぶすのかを設定できる.
Fill Amountは0~1の間の値で,0の時は何も塗らない,1の時は全部塗る,0.5の時は半分塗るという意味
円状に塗りつぶす時はClockwiseオプションで時計回りに塗りつぶすのか反時計周りに塗りつぶすのか設定できる.

Fill Methodは以下の4種類

  • Horizontal
  • 水平方向に塗りつぶす
  • Vertical
  • 垂直方向に塗りつぶす
  • Radial 90
  • 4つ角から90度塗りつぶす
  • Radial 180
  • 4辺から180度塗りつぶす
  • Radial 360
  • Rectの中心から360度塗りつぶす

Fill Origin(基準位置)の種類は以下

  • Horizontal => LeftとRight
  • Vertical => TopとBottom
  • Radial 90 => Bottom Left,Bottom Right,Top Left,Top Right
  • Radial 180 => Bottom,Left,Top,Right
  • Radial 360 => Bottom,Left,Top,Right

Preserve Aspectは画像のアスペクト比を保ったまま拡大縮小する設定で
Set Native SizeボタンはSprite画像のサイズをRectTransformにする設定である

f:id:n_taku:20170402182048g:plain