こんにちは、ナレコム前川です。
今回は、Amazon Sumerian の公式チュートリアルの
Positioning Static HTML を進めていきたいと思います。
ここで学ぶことは、静的なHTML要素を配置する方法についてです。
クリック可能な HTML要素を含むボタンをフレームビューの端に配置し、「上、左、右、下」などと表示していきます。
それでは、進めていきましょう。
1. シーン作成
① ダッシュボードからDefault Lighting を選択。
① ダッシュボードからDefault Lighting を選択。
② シーン名を「Positioning Static HTML」にし、作成。
シーンが正常に開いたら、作成完了です。
2. HTML の追加と編集
ここでは、スクリプトを追加し、編集していきます。
① Create Entity から HTML</> を選択、追加。
② Inspector パネルから HTML を展開。
③ Move with Transform のチェックを外す。
各ボタンのCSSスタイルと位置を設定する必要があります。
④ Open in Editor を選択。
⑤ 以下のコードと置き換える。
1Top2 Right3 Bottom4 Left5 Bottom right6 Bottom left7 Top left8 Top Right9 Center
CSS ファイルでは、ボタン配置の位置についてのクラスを9つ作っています。
次に、それぞれのボタンを配置しています。
シーンに戻ると、9つのボタンが配置されていると思います。
今回のチュートリアルは以上です。
お疲れ様でした。
