【Defold】端末の傾きに応じたUIを表示する

2019/09/082020/07/12Defold, DEVELOP

縦画面、横画面両方に対応した UI を作成してみます。

※ 公式リファレンス： GUI layouts in Defold

縦画面、横画面用のUIを構築する

新規にGuiコンポーネントを作成し Layouts に Landscape と Portrait を追加します。

追加できると Default しか選択できなかったレイアウトが Landscape、Portrait と切り替えられる様になります。

レイアウトを切り替えた状態でオブジェクトを配置していくことで、縦横画面それぞれでUIを配置することが出来ます。

留意点

縦横のNodeは共有。
PositionやScale、Colorといったものは縦横それぞれで設定できる。

デバイスを縦横に傾けてもGUIが切り替わらない

game.project ファイルを開き Display 設定の Dynamic Orientation のを有効にします。

これでデバイスが傾いた時に縦横検知されてUIが切り替わる様になります。

レイアウトが変更されたことをメッセージで受け取る

layout_changed メッセージでレイアウトの変更通知を受け取ることが出来ます。message.id からは変更されたLayout 名を得ることが出来ます。

function on_message(self, message_id, message, sender)
	if message_id == hash("layout_changed") then
		if message.id == hash("Portrait") then
			print("switching layout to Portrait")
		elseif message.id == hash("Landscape") then
			print("switching layout to Landscape")
		end
	end
end