Skip to content
Talegates Interactive
Log in Create account

Tutorials

Step-by-step guides: your first menu, a responsive HUD, a reusable button and more.

These guides take you from an empty place to working interfaces. They use only what Bloxma already includes. Bloxma is in BETA, so if a control looks different from what is described, tell us. Not installed yet? Start with Download and install. For every control in detail, see the documentation.

Your first menu

You will build a main menu with a panel and three buttons: Play, Settings and Quit.

  1. Open a place in Roblox Studio and open Plugins → Bloxma UI Editor. Make the window large or dock it.
  2. Click ＋ Screen. Double-click the new screen in Layers and rename it MainMenu. Pick Desktop in the device menu.
  3. Press F and drag on the screen to draw a frame. Rename it Panel. Because new layers use Scale, it looks the same at any resolution.
  4. With Panel selected, open Layout → Auto layout and choose Column. Set a gap and some padding so the buttons stack neatly with room around them.
  5. Press B and drag inside Panel to draw a button. Double-click its text and type Play. Press Ctrl+D twice to duplicate it, then change the text of the copies to Settings and Quit.
  6. Select the three buttons (click one, then Shift+click the others) and set the width to Fill % so they follow the panel’s width. Because several layers are selected, one edit changes all three.
  7. Style them. In Appearance set the corner radius (choose Pill for fully rounded ends), in Fill pick a colour or a gradient, and in Text choose a font and size.
  8. Switch the device menu to Tablet and Mobile to see how it adapts. Adjust the panel until it looks right on all of them.
  9. Save with File → Save. In the Explorer you will find MainMenu under StarterGui, containing Panel and three TextButton objects. They are ordinary Roblox objects you can edit with or without Bloxma.
A finished main menu with a title, a short tagline and Play, Shop and Settings buttons, shown in Bloxma Preview at Tablet size.
An example of a finished main menu in Preview. The design here is a little more polished than the three-button menu you build above, but it uses the same tools.

A responsive HUD

A heads-up display has to stay in place on every screen size. You will build a top bar with a coin counter.

  1. Click ＋ Screen and name it HUD. Select the screen and, in the Inspector, turn on Always on so Bloxma never hides it when you add prototype screens later.
  2. Press F and draw a bar across the top of the screen. In Layout, set the horizontal pin to Left & Right (stretch) and keep the height Fixed.
  3. Add Auto layout → Row to the bar with a small gap and some padding, so whatever you put inside lines up from the left.
  4. Open Library → Icons, search for money and click an icon to add it. Icons are recolourable image layers, so change its colour in the Inspector.
  5. Press T and draw a text layer beside the icon. Type a number. In Text choose a size and turn on Shrink to fit box so longer numbers stay inside.
  6. Select the icon and turn on Keep aspect ratio so it is never squashed. Use Min / max size if you want it to stop growing on very large screens.
  7. Go through the device menu (Mobile, Tablet, Desktop, Ultrawide). The bar should stay attached to the top edge and keep its contents together. Turn on Clip to screen in Settings (⚙) to see exactly what players will see.
The Preview device menu listing Desktop, Laptop, Small laptop, Ultrawide, Tablet, Mobile and Mobile landscape sizes.
Check the bar at every size: open the device menu in Preview and step through Mobile, Tablet and Desktop.

Icons are drawn from an in-memory picture. Before you publish a game, upload the icon as an image asset so it also shows in-game.

A reusable button with hover and press looks

  1. Draw a button as in the first tutorial and style it. Name it PrimaryButton.
  2. In the Inspector open States → Create and choose Hover. Change the button as you normally would, for example a lighter fill, then press Done. Repeat for Pressed with a slightly darker fill. The looks animate automatically.
  3. Open the Animation section, choose the hover trigger and a preset such as pop. Press ▶ to preview it on the canvas.
  4. Right-click the button and choose Create component. It becomes a Component Set with a Default variant.
  5. Open Library → Components and drag copies of PrimaryButton onto your screens. Change the text of each copy: every instance keeps its own name, position and text.
  6. Change the master, for example its corner radius, and press Update instances in the Inspector. Every copy updates and keeps its own text.
  7. Press ▶ Preview, move the pointer over a button and click it to see the hover and press looks. Choose Exit preview when you are done.
The Inspector showing a button with its Hover and Pressed states marked as set.
A button with its Hover and Pressed looks set. States follow the layer if you move or resize it.
The Library Components tab listing a component with 2 variants.
Your component appears under Library > Components. Drag copies onto any screen.
  1. Start with a MainMenu screen that has a Settings button, and add a second screen named Settings with a Back button.
  2. Switch the right panel to Prototype.
  3. Drag the purple dot on the Settings button onto the Settings screen. Bloxma creates On click → Navigate To Settings.
  4. With the button selected, open Interactions and set the transition, for example Slide ←, 0.3 s, Ease Out.
  5. On the Settings screen, select the Back button and add an On click event with the Back action.
  6. Optional: on the Settings button’s click trigger, press ＋ Add event and choose Play Sound. Paste a sound asset ID and press Test sound. Use ↑ to move it to the top so it starts first.
  7. Click the empty area of MainMenu and choose it as the Start screen.
  8. Press ▶ Preview and click through. When it works, press Play in Studio. The first time you add an interaction, Bloxma adds its small runtime to your game for you.
The canvas in Prototype mode with purple lines connecting the Main Menu buttons to the Shop, Settings and HUD screens.
The finished prototype: each purple line is an On click > Navigate To connection.
Click through it in Preview: each button slides to its screen, and Back returns to the menu.

Check your UI with the UI Linter

  1. Open one of your screens and switch the right panel to UILinter.
  2. Press ANALYZE UI. You get a score from 0 to 100 and a list of issues grouped by category.
  3. Click an issue. Bloxma selects the affected layers and draws the problem on the canvas.
  4. Press FIX ALL SAFE to apply only the fixes Bloxma is certain about. For suggestions that need your judgement, tick them and press FIX SELECTED.
  5. If you do not like a change, press Ctrl+Z. Every fix is one undo step.
  6. Press RE-SCAN to see your new score.
The UILinter on a first draft: a quality score of 83 out of 100 and 20 issues.
Before: 83 / 100 and 20 issues on a first draft.
The UILinter after fixes and a re-scan: a quality score of 92 out of 100 and 9 issues.
After fixing the flagged layers and pressing RE-SCAN: 92 / 100 and 9 issues.

Sign in with your Talegates account

You never need an account to design. Signing in lets Bloxma show your plan.

  1. Open Settings (⚙) and choose Talegates account → Sign in with Talegates.
  2. Studio asks once whether the plugin may contact talegates.io. Allow it. If you refuse, Bloxma keeps working and you can allow it later in Studio’s plugin management.
  3. Bloxma shows a short code (for example VHMQ-ZQBF) and the address talegates.io/link. Open the address, log in, enter the code and press Approve. Only approve a sign-in you started yourself. The code expires after 10 minutes.
  4. Within a few seconds Bloxma signs in by itself and shows your plan: Free, Premium or Lifetime.
  5. Use Refresh plan to check again, or Sign out to end the session.
The Bloxma settings menu with the Talegates account section at the top showing the signed-in plan, a Refresh plan button and a Sign out button.
Once you are signed in, the account section shows your plan, with Refresh plan and Sign out.

Don’t have an account yet? Create a free one. Questions? See the documentation or contact support.