Skip to content

Commit

Permalink
Add UI to tutorial
Browse files Browse the repository at this point in the history
  • Loading branch information
FredrikNoren committed Sep 19, 2023
1 parent dd9d440 commit 89126d2
Show file tree
Hide file tree
Showing 5 changed files with 38 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/src/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
- [Chapter 3: Scene](./tutorials/game/3_scene.md)
- [Chapter 4: Player interaction](./tutorials/game/4_player_interaction.md)
- [Chapter 5: Models](./tutorials/game/5_models.md)
- [Chapter 6: UI](./tutorials/game/6_ui.md)

# Reference Guide

Expand Down
2 changes: 2 additions & 0 deletions docs/src/tutorials/game/4_player_interaction.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,5 @@ Paint::subscribe(|_, msg| {

Great, let's run it and you should now be able to "paint" by pressing `Q`:


## [ ⇾ Chapter 5: Models](./5_models.md)
2 changes: 2 additions & 0 deletions docs/src/tutorials/game/5_models.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,5 @@ You should now see something like this:
Great! We've learned how to load models into Ambient.

> Tip: Use `prefab_from_url` instead of `model_from_url` if you also want to include a collider. [See the physics example.](https://github.com/AmbientRun/Ambient/tree/main/guest/rust/examples/basics/physics)
## [ ⇾ Chapter 6: UI](./6_ui.md)
33 changes: 33 additions & 0 deletions docs/src/tutorials/game/6_ui.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# Chapter 6: User interface (UI)

Many games rely on showing some kind of UI on top of the 3d game, so let's try adding some basic UI to our game.

## Showing the players position

Add the following to `client.rs`:

```rust
#[element_component]
fn PlayerPosition(hooks: &mut Hooks) -> Element {
let (pos, _) = use_entity_component(hooks, player::get_local(), translation());
Text::el(format!("Player position: {}", pos.unwrap_or_default()))
}
```

> UI in Ambient is losely inspired by React. See [the UI docs for more info](../../reference/ui.md).
> Tip: See [the UI examples](https://github.com/AmbientRun/Ambient/tree/main/guest/rust/examples/ui) to learn
> how to use layout, buttons, editors and much more.
And then add this to the `main` function in `client.rs`:

```rust
PlayerPosition.el().spawn_interactive();
```

You should now see something like this:

![UI](ui.png)

> Challenge: Try adding a `Button`, which when clicked sends a message to the server and moves the characters position somewhere else.
Binary file added docs/src/tutorials/game/ui.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 89126d2

Please sign in to comment.