# HUD and Inventory for large tile maps

**URL:** <https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644>\
**Category:** Arcade\
**Created:** [October 18, 2019, 3:50am UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644 "2019-10-18T03:50:48Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![arivera](https://avatars.discourse-cdn.com/v4/letter/a/e99b99/32.png) [@arivera](https://forum.makecode.com/u/arivera)\
**Post date:** [October 18, 2019, 3:50am UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644/1 "2019-10-18T03:50:48Z")

</div>

Hi there,

I am new to Arcade, and loving it.

Is there a way to have an HUD “glued” to one of the edges of the screen while Player sprites “walks” around in a large tile map?

I want to keep inventory, and other status info, always visible, and I decided to ask before hacking this (if you can get the location of the camera, for example, you could place this info at an offset, but there seem to be no blocks to get this info).

Thanks!

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [October 18, 2019, 4:35am UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644/2 "2019-10-18T04:35:15Z")

</div>

It’s easiest in JavaScript – here’s an example drawing a box just offset from the bottom right corner of the screen with some sample content.

> **[simple ui](https://arcade.makecode.com/75544-40485-51455-83585)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

There’s not currently a great way to do this in just blocks, unfortunately. You can create a sprite and place it an offset as you mentioned, but the offsets of the camera (available as `game.currentScene().camera.offsetX` / `Y`) aren’t directly accessible in blocks, and the tile map constrains the camera in a way that you won’t likely be able to easily deal with in blocks at the moment.

I’ll see if there’s anything we can do to make this easier (I suppose at the very least I can make a quick extension exposing a few more blocks for things like `scene.createRenderable` for doing simple UIs).

---

<div class="post-metadata">

**Author:** ![peli](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/peli/32/12_2.png) [@peli](https://forum.makecode.com/u/peli)\
**Post date:** [October 19, 2019, 5:07pm UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644/3 "2019-10-19T17:07:07Z")

</div>

It would be nice to start making our hud more pluggable/customizable.

---

<div class="post-metadata">

**Author:** ![arivera](https://avatars.discourse-cdn.com/v4/letter/a/e99b99/32.png) [@arivera](https://forum.makecode.com/u/arivera)\
**Post date:** [October 19, 2019, 9:07pm UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644/4 "2019-10-19T21:07:08Z")

</div>

Thanks for the response!

I think having blocks for this would be terrific for beginners.  
I was thinking about something along the lines of a block for “gluing” a sprite to one of the edges of the physical screen.

Something like “glue mysprite to (edge) of screen” where  
edge := top | bottom | left | right | top-left | top-right | bottom-left | bottom-right

For top|bottom|left|right the sprite can be placed in the middle of the indicated edge.  
Also, the sprite should have the highest Z value, so it is on top of everything else.

Hope other people find this useful too.  
Thanks

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [October 19, 2019, 9:38pm UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644/5 "2019-10-19T21:38:16Z")

</div>

Oh, an absolute position for sprites on the screen is definitely an interesting idea. Worth noting the z index is already exposed in blocks (its in the same dropdown as `set x` / `change x by`).

The sprites category is already a bit packed, so we generally have to be careful about adding new blocks - each one we add makes it slightly less likely someone will find the block they need when they start looking. I’ll try and get a quick start on a simple extension for this sort of thing that we can iterate on :).

---

<div class="post-metadata">

**Author:** ![arivera](https://avatars.discourse-cdn.com/v4/letter/a/e99b99/32.png) [@arivera](https://forum.makecode.com/u/arivera)\
**Post date:** [October 19, 2019, 11:20pm UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644/6 "2019-10-19T23:20:57Z")

</div>

Thanks so much for even considering this.😃

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [October 21, 2019, 9:53pm UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644/7 "2019-10-21T21:53:03Z")

</div>

@jwunderl @peli this sounds like a great candidate for an extension. It would also let us finally make a “put this text on the screen” block instead of using splash for everything 🙂

---

<div class="post-metadata">

**Author:** ![peli](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/peli/32/12_2.png) [@peli](https://forum.makecode.com/u/peli)\
**Post date:** [October 21, 2019, 10:30pm UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644/8 "2019-10-21T22:30:23Z")

</div>

We should rewrite our HUD as an extension (internally) so that we know that someone else can inject a different HUD implementation.

---

<div class="post-metadata">

**Author:** ![G30](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/g30/32/5516_2.png) [@G30](https://forum.makecode.com/u/G30)\
**Post date:** [December 31, 2020, 1:15am UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644/9 "2020-12-31T01:15:25Z")

</div>

i have a method that takes no extensions but a lot of blocks, us a set mysprite into the hud that you prefer then use the "place mysprite to place it into whatever edge of the screen set control mysprite with buttons and then set mysprite stayinscreen to ghost so that it goes through the walls of your tile map and set your main character as whatever and set camera follow maincharacter.

---

<div class="post-metadata">

**Author:** ![G30](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/g30/32/5516_2.png) [@G30](https://forum.makecode.com/u/G30)\
**Post date:** [December 31, 2020, 1:15am UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644/10 "2020-12-31T01:15:26Z")

</div>

also btw if you want to be able to add items into the hud you can add more sprites with the same settings also because i dont think i said this you also have to have the main charatcer have set movewith buttons.

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [December 31, 2020, 3:35am UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644/11 "2020-12-31T03:35:54Z")

</div>

Could you use the relative to camera block?

---

<div class="post-metadata">

**Author:** ![G30](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/g30/32/5516_2.png) [@G30](https://forum.makecode.com/u/G30)\
**Post date:** [January 1, 2021, 5:33am UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644/12 "2021-01-01T05:33:46Z")

</div>

well what do you mean by that

---

<div class="post-metadata">

**Author:** ![G30](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/g30/32/5516_2.png) [@G30](https://forum.makecode.com/u/G30)\
**Post date:** [January 3, 2021, 7:23am UTC](https://forum.makecode.com/t/hud-and-inventory-for-large-tile-maps/644/13 "2021-01-03T07:23:19Z")

</div>

ok my account is trusted now, i just wanted to say yes relevant to camera works and also i saw your game otherworldly and i want to help ill continue this conversation on your otherworldly post.
