Skip to content

Commit

Permalink
Fix more Japanese anchors
Browse files Browse the repository at this point in the history
  • Loading branch information
willeastcott committed Jan 30, 2024
1 parent 7a6377a commit 5f9d146
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 42 deletions.
14 changes: 7 additions & 7 deletions docs/user-manual/user-interface/elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ In addition to the local position, rotation and scale which are used to calculat

These new properties give you the plenty of control to layout your user interfaces, including align them with other Elements or position them with fixed distances to Elements.

## Element Positioning
## Element Positioning {#element-positioning}

![Element Guide][1]

## Element Resizing
## Element Resizing {#element-resizing}

To resize your Element activate the Resize gizmo or press '4':

Expand All @@ -23,33 +23,33 @@ Then drag the corners around to adjust the size of the Element:

![Resize Gizmo Viewport][6]

## Pivot
## Pivot {#pivot}

The pivot property of an Element determines at which point the position, rotation and scale. The pivot is defined by two numbers between 0 and 1 which determine the pivots position in the X and Y direction along the total width and height of the element. For example, `[0,0]` sets the pivot to the bottom left of the element, `[1,1]` sets the pivot to the top right of the element.

![Pivot][2]

## Anchor
## Anchor {#anchor}

The anchor property determines where the point or points on the parent that the Element's position is calculated from. The anchor value is specified by two points `[minX, minY]` and `[maxX, maxY]`. In the Editor this is displayed as 4 numbers: [minX, minY, maxX, maxY]

![Anchor][3]

For example, setting the anchor to `[0,0,0,0]` will anchor the element to the bottom left of its parent. The position of the element will set the offset from the bottom left of the parent

## Split Anchors
## Split Anchors {#split-anchors}

Sometimes it is useful to anchor different edges of an element to different places. For example, if you wish to make a element that stretches to fill the screen whatever the resolution. You can do this by splitting the anchor's min and max values.

![Split Anchor][4]

In this image the Anchor is set to `[0,0,1,1]` so we are anchoring the edges of the element to the edges of the parent. Each edge has a margin of 50 pixels so the Element is fixed to fill the parent with 50 pixels from edge.

## Margin
## Margin {#margin}

The margin property is only available when the anchor value is split in one axis. The margin sets the number of Screen component pixels from the anchor that the edge of the element will be. Shortcuts to the margin values are available in scripts on the Element component as the properties `left`, `right`, `top` and `bottom`.

## Loose Elements
## Loose Elements {#loose-elements}

Whilst the primary use-case of Elements is to be part of a User Interface Screen Component. It is valid to have an Element component which is not part of a screen. For example, a single in-world piece of text.

Expand Down
28 changes: 14 additions & 14 deletions docs/user-manual/user-interface/layout-groups.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,35 +7,35 @@ The Layout Group Component is used to automatically set the position and size of

The Layout Group Component can be used to generate common layouts, for example, a [grid][10], a fixed width [vertical column][11], or [horizontal row][12].

## Creating a Layout Group
## Creating a Layout Group {#creating-a-layout-group}

Add a Layout Group by adding the LayoutGroup Component to an existing Element Entity.

![Create Layout Group][1]

## Layout Group Properties
## Layout Group Properties {#layout-group-properties}

#### Orientation
#### Orientation {#orientation}

Set the `Orientation` to Horizontal to organize your layout from left-to-right or right-to-left. Or Vertical to organize your layout top-to-bottom or bottom-to-top

#### Reverse
#### Reverse {#reverse}

ReverseX and ReverseY properties are used to set the direction the layout group is built out in. The default is left-to-right and bottom-to-top.

#### Alignment
#### Alignment {#alignment}

Alignment is used to align the child elements to the edges of the Layout Group. `[0,0]` aligns to the bottom left, `[1,1]` aligns to the top right.

#### Padding
#### Padding {#padding}

Padding adds a space to the inside of the Layout Group before positioning any children.

#### Spacing
#### Spacing {#spacing}

Spacing determines the gap between each child.

#### Fitting
#### Fitting {#fitting}

The Width Fitting and Height Fitting properties determine how a child element's width or height will be adjusted by the Layout Group.

Expand All @@ -55,11 +55,11 @@ A value of **Shrink** will shrink the children to fit the container using the fo

A value of **Both** will apply both **Stretch** and **Shrink**.

#### Wrap
#### Wrap {#wrap}

The wrap property causes children that are outside of the width (for vertical groups) or height (for horizontal groups) to be moved to a new row or column. Using the wrap property you can create grid-based layouts.

## Layout Children
## Layout Children {#layout-children}

A Layout Group applies its rules to all of its direct children. If you want to override these rules for a specific child you can do that by adding a LayoutChild Component to that child.

Expand All @@ -69,25 +69,25 @@ In this example, the horizontal layout is using the **Stretch** width fitting to

![Layout Child Setup][9]

## Example Layouts
## Example Layouts {#example-layouts}

### Vertical Leaderboard
### Vertical Leaderboard {#vertical-leaderboard}

![Leaderboard][2]

This Leaderboard is setup as vertical column aligned to the top center. We're using the Width Fitting property to stretch each item to be the full width. And using the Padding and Spacing properties to leave clear gaps between the cells.

![Leaderboard Setup][3]

### Horizontal Buttons
### Horizontal Buttons {#horizontal-buttons}

![Horizontal Buttons][4]

This row of buttons is laid out using a Horizontal Layout Group with some Spacing and Padding settings to make the buttons fit the correct width. No width or height fitting is used.

![Horizontal Setup][5]

### Grid
### Grid {#grid}

![Grid][6]

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ Elementコンポーネントでは、親に対するエンティティの位置

これらの新しいプロパティは、他のエレメントとの配置を整えたり、エレメントとの固定距離で位置を指定したりするなど、ユーザーインターフェースのレイアウトを細かく制御するための豊富なオプションを提供します。これにより、エレメント同士を整列させたり、エレメントとの距離を固定したりするなど、柔軟なUIデザインが可能となります。

## エレメントの配置
## エレメントの配置 {#element-positioning}

![Element Guide][1]

## エレメントのサイズ変更
## エレメントのサイズ変更 {#element-resizing}

エレメントのサイズを変更するには、サイズ変更gizmoを有効にするか、'4'を押します。

Expand All @@ -23,33 +23,33 @@ Elementコンポーネントでは、親に対するエンティティの位置

![Resize Gizmo Viewport][6]

## ピボット (Pivot)
## ピボット (Pivot) {#pivot}

エレメントのピボット (pivot) プロパティは、位置、回転、スケールが適用される基準点を決定します。ピボットは、エレメントの全体の幅と高さに対して、X方向とY方向の位置を示す0から1までの2つの数値で定義されます。例えば、`[0,0]`はピボットをエレメントの左下に設定し、`[1,1]`はピボットをエレメントの右上に設定します。ピボットの位置は、エレメントの変換に対して重要な影響を与えます。

![Pivot][2]

## アンカー (Anchor)
## アンカー (Anchor) {#anchor}

アンカー(anchor)プロパティは、エレメントの位置が親のどの点または点群から計算されるかを決定します。アンカーの値は、`[minX, minY]` および `[maxX, maxY]` の2つの点で指定されます。エディタでは、これは [minX, minY, maxX, maxY] のように4つの数値として表示されます。アンカーは、エレメントの相対位置やサイズを制御する上で重要な役割を果たします。

![Anchor][3]

例えば、アンカーを `[0,0,0,0]` に設定すると、エレメントは親エレメントの左下にアンカーされます。エレメントの位置は、親エレメントの左下からのオフセットとして設定されます。

## アンカーの分割
## アンカーの分割 {#split-anchors}

エレメント (Element) の異なる辺を別の位置に固定することが便利な場合もあります。たとえば、解像度を問わず、画面を満たすよう伸びるエレメントを作成する場合などです。これは、アンカーの最小値と最大値を分割することで行うことができます。

![Split Anchor][4]

この画像では、アンカーが`[0,0,1,1]`に設定されており、エレメントのエッジを親のエッジにアンカーしています。各エッジにはマージンとして50ピクセルがあり、エレメントは親を50ピクセルのマージンで埋めるように固定されています。

## マージン (Margin)
## マージン (Margin) {#margin}

マージン(margin)プロパティは、アンカー(anchor)の値が1つの軸で分割されている場合にのみ使用できます。マージンは、エレメントのエッジからアンカーまでのScreenコンポーネントのピクセル数を設定します。Elementコンポーネント上のスクリプトでは、`left``right``top``bottom`というプロパティでマージンの値を簡単に指定することができます。

## 自由なElement
## 自由なElement {#loose-elements}

エレメント(Element)の主な使用用途は、ユーザーインターフェースScreenコンポーネントの一部であることですが、スクリーンの一部ではないElementコンポーネントを持つことも有効です。例えば、ワールド内の単一のテキストエレメントなどです。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,35 +7,35 @@ Layout Groupコンポーネントは、子エレメントの位置とサイズ

Layout Groupコンポーネントは、[グリッド][10][縦列][11]または [横列][12]の固定幅等、一般的なレイアウトの生成に使用できます。

## レイアウトグループを作成する
## レイアウトグループを作成する {#creating-a-layout-group}

Layout Groupコンポーネントを既存のエレメントエンティティに追加するとレイアウトグループが追加されます。

![Create Layout Group][1]

## レイアウトグループプロパティ
## レイアウトグループプロパティ {#layout-group-properties}

#### オリエンテーション (Orientation)
#### オリエンテーション (Orientation) {#orientation}

`オリエンテーション` を水平に設定するとレイアウトが「左から右」または「右から左」に並びます。「上から下」または「下から上」に並べるには垂直に設定します。

#### リバース (Reverse)
#### リバース (Reverse) {#reverse}

リバースXプロパティやリバースプロパティYはレイアウトグループがビルドされる方向を設定するのに使用します。デフォルトでは「左から右」かつ「上から下」になります。

#### アラインメント (Alignment)
#### アラインメント (Alignment) {#alignment}

アラインメントは子エレメントをレイアウトグループの端にそろえるのに使用します。`[0,0]`にすると左下に、`[1,1]`にすると右上にそろいます。

#### パディング (Padding)
#### パディング (Padding) {#padding}

パディングは、子をポジションイングする前のレイアウトグループの中にスペースを追加します。

#### スペーシング (Spacing)
#### スペーシング (Spacing) {#spacing}

スペーシングは子同士間のギャップを決定します。

#### フィッティング (Fitting)
#### フィッティング (Fitting) {#fitting}

WidthフィッティングプロパティとHeightフィッティングプロパティは子エレメントの幅または高さがレイアウトグループでどのように調整されるかを決定します。

Expand All @@ -55,11 +55,11 @@ WidthフィッティングプロパティとHeightフィッティングプロパ

値が **Both** の場合、 **Stretch** and **Shrink** の両方が適用されます。

#### ラップ (Wrap)
#### ラップ (Wrap) {#wrap}

ラッププロパティは、(垂直のグループの場合)幅を超えた子または(水平のグループの場合)高さを超えた子を新しい行や列に動かします。ラッププロパティを使用して、グリッドベースプロパティの作成ができます。

## 子レイアウト (Layout Children)
## 子レイアウト (Layout Children) {#layout-children}

レイアウトグループは、そのグループのルールを直接の子に適用します。これらのルールについて特定の子に上書きする場合は、上書きする子にLayoutChildコンポーネントを追加して行います。

Expand All @@ -69,25 +69,25 @@ WidthフィッティングプロパティとHeightフィッティングプロパ

![Layout Child Setup][9]

## レイアウトの例
## レイアウトの例 {#example-layouts}

### 垂直のリーダーボード (Vertical Leaderboard)
### 垂直のリーダーボード (Vertical Leaderboard) {#vertical-leaderboard}

![Leaderboard][2]

このリーダーボードは上部中央に揃えられた垂直の列として設定されています。幅フィッティング (Fitting) プロパティを使用して各アイテムの幅を最大に引き延ばします。パディング (Padding) プロパティとスペーシング (Spacing) プロパティを使用してセル同士の間にはっきりとギャップを残しています。

![Leaderboard Setup][3]

### 水平のボタン (Horizontal Buttons)
### 水平のボタン (Horizontal Buttons) {#horizontal-buttons}

![Horizontal Buttons][4]

このボタンの列は、スペーシング (Spacing) とパディング (Padding) が設定された水平レイアウトグループ (Horizontal Layout Group) を使用して並べられており、ボタンが正しい幅に合うようにされています。幅 (Width) や高さ(Height) のフィッティングは使用されていません。

![Horizontal Setup][5]

### グリッド (Grid)
### グリッド (Grid) {#grid}

![Grid][6]

Expand Down

0 comments on commit 5f9d146

Please sign in to comment.