Melonjs UI And Text
Use this skill for HUDs, buttons, menus, options screens, dialogue panels, progress...
Install
npx skills add melonjs/melonJS --skill melonjs-ui-and-text -g -a claude-code -y- Repository
- melonjs/melonJS6.4k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Use this skill for HUDs, buttons, menus, options screens, dialogue panels, progress bars and on-screen text in melonJS. Covers UIBaseElement/UISpriteElement/UITextButton, UICheckbox, UISlider, ProgressBar, UIPanel (skins, layout, scrolling), Draggable and DropTarget, the floating screen-space container pattern, which of two overlapping panels gets the pointer, Text and BitmapText, web font loading, and NineSliceSprite panels. Triggers on: UI, HUD, button, checkbox, radio button, UICheckbox, slider, UISlider, volume slider, options menu, settings screen, scrolling list, scroll panel, layout, column, grid, UI skin, UIBaseElement, UISpriteElement, UITextButton, ProgressBar, progress bar, health bar, gauge, Draggable, DropTarget, menu, dialogue, overlapping panels, moveToTop, onOver, onClick, bindKey, keyboard shortcut, button keyboard, Tween, easing, animate a label, wavy text, per-glyph effect, glyphEffect, shake text, rainbow text, Text, BitmapText, fillStyle, fillGradient, gradient text, tint, font, fontface, wordWrapWidth, NineSliceSprite, score display, floating., fullscreen, full screen, requestFullscreen, exitFullscreen, isFullscreen, fullscreen button, fullscreen option
UI, HUD and text
Outlined text: the stroke eats into the glyph
Text draws fillText and then strokeText, so the outline lands on top of
the fill and is centred on the glyph edge, half of it inward. On a small or
chunky face a lineWidth of 3 leaves the letters solid black. Keep it to 1,
and raise the font size rather than the stroke.
The stroke used to cost you the top row of pixels as well, and a display face whose glyphs overshoot the nominal ascent did the same on its own: the render box was sized from the line height alone, with no allowance for either. That is fixed, the bake is padded by the ink's real extent and the blit shifts back by the same amount, so nothing is clipped and the reported bounds are unchanged. Write the string you mean:
new Text(x, y, { font: "Display", lineWidth: 1, lineHeight: 1.45, text: "" });
hud.setText("SCORE 100");
If you have a label carrying a leading \n to buy headroom, that workaround is
now dead weight, drop it, and take the line height back off the position you
shifted it by.
The outline's corners are set by lineJoin, the same property a canvas
context has, and miterLimit:
| setting | corners | use it for |
|---|---|---|
lineJoin: "round" (default) | rounded: the outline is the same width all around | almost everything: HUDs, buttons, titles |
lineJoin: "bevel" | cut flat | a harder edge with no spikes |
lineJoin: "miter" | pointed, as a plain canvas strokes text | a sharp, angular look |
miterLimit: n (default 10) | with "miter" only: a corner pointing further than n half line widths is cut flat instead | taming the spikes "miter" grows on "A", "V", "M" |
At the canvas default of 10, a thick "miter" outline grows spikes several
times its width from sharp glyphs; 2 to 4 keeps the corners pointed and the
spikes short:
