Amazon Sumerian Tutorial 44:Positioning Static HTML

Pocket

こんにちは、ナレコム前川です。

今回は、Amazon Sumerian の公式チュートリアルの
Positioning Static HTML を進めていきたいと思います。

ここで学ぶことは、静的なHTML要素を配置する方法についてです。
クリック可能な HTML要素を含むボタンをフレームビューの端に配置し、「上、左、右、下」などと表示していきます。

それでは、進めていきましょう。

1. シーン作成

① ダッシュボードからDefault Lighting を選択。
② シーン名を「Positioning Static HTML」にし、作成。

シーンが正常に開いたら、作成完了です。

2. HTML の追加と編集

ここでは、スクリプトを追加し、編集していきます。

Create Entity から HTML</> を選択、追加。

② Inspector パネルから HTML を展開。
Move with Transform のチェックを外す。

※HTMLエンティティのコード内でボタンを画面の辺に合わせるには、
各ボタンのCSSスタイルと位置を設定する必要があります。

Open in Editor を選択。
⑤ 以下のコードと置き換える。

CSS ファイルでは、ボタン配置の位置についてのクラスを9つ作っています。
次に、それぞれのボタンを配置しています。

シーンに戻ると、9つのボタンが配置されていると思います。

シーンを実行してボタンが押せるかどうか確認してください。

今回のチュートリアルは以上です。
お疲れ様でした。