UZU Code

テーマ

SafeArea と HUD 回避 ​

UZU アプリ内でゲームを表示する際、システム UI（ノッチ等） と UZU の HUD（メニューボタン等） の2つの領域を避けてコンテンツを配置する必要があります。

図解

Portrait / Landscape 両方で、SafeArea（画面端の赤帯）と HUD inset（左上のオレンジ枠）を避けて UI を配置する必要があります。詳細は以下の CSS で制御します。

SafeArea（システム UI 回避） ​

viewport-fit を指定しない場合 ​

viewport-fit を指定しないと、ゲームの描画領域が SafeArea の内側に縮小されます。 縮小された外側の帯は html の background-color で塗りつぶされます。

推奨: viewport-fit=cover を設定する ​

全画面を使えるようにした上で、UI 要素は env(safe-area-inset-*) で SafeArea を避けて配置してください。

html
<!-- index.html -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
css
/* style.css */
.game-ui {
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}
viewport-fit 未指定viewport-fit=cover
画面SafeArea 内に縮小、端に帯が出る全画面
対応コストなしenv() で UI 配置を調整
おすすめプロトタイプ本番ゲーム

HUD 回避（UZU ボタン・アクションバー） ​

ゲーム画面の左上には UZU の HUD（UZU メニューボタン + アクションバー）がオーバーレイ表示されます。ゲームの UI 要素がこの HUD と重ならないように、回避領域の情報が CSS カスタムプロパティとして注入されます。

CSS カスタムプロパティ ​

SDK の init() が以下の CSS カスタムプロパティを自動で設定します:

プロパティ説明例
--uzu-hud-inset-xHUD 右下の X 座標（SafeArea 左端が原点）56px
--uzu-hud-inset-yHUD 右下の Y 座標（SafeArea 上端が原点）52px

使い方 ​

css
/* style.css */
/* HUD と重なるコンテンツを右下にずらす */
.top-left-ui {
  margin-top: calc(env(safe-area-inset-top) + var(--uzu-hud-inset-y));
  margin-left: calc(env(safe-area-inset-left) + var(--uzu-hud-inset-x));
}

/* 画面上部全体を避ける（シンプルなパターン） */
.main-content {
  padding-top: calc(env(safe-area-inset-top) + var(--uzu-hud-inset-y));
}

仕組み ​

SDK の init() が HUD 回避領域の CSS カスタムプロパティを自動で設定します。

  1. URL のクエリパラメータ（?uzuHudInsetX=56&uzuHudInsetY=52）があればその値を使用
  2. パラメータがない場合（ブラウザで直接開いた場合など）は、players の人数から推定:
    • 2人以上: アクションボタン2個分の幅を確保
    • 1人: アクションボタンなし（UZU ボタンのみ）
    • 不明: 安全側に倒してアクションボタン2個分を確保

ゲーム開発者は init() を呼ぶだけで、CSS 変数が常にセットされます。