Individual skill
melonjs-ui-and-text
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
packages/melonjs/skills/melonjs-ui-and-text/SKILL.md
Source commit a41d6a328557d69a0441d79bbeb9cd6c430275b5
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Network or broad shell
- Last checked
- Nov 5, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 6,440
- Repository last updated
- Nov 7, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- html5-game-engine Repository topic
- javascript-game-engine Repository topic
- 2d Repository topic
- agent-skills Repository topic
- canvas Repository topic
- contributions-welcome Repository topic
- game-development Repository topic
- game-framework Repository topic
- gamedev Repository topic
- gltf Repository topic
- design Derived category
- devops Derived category
- design-interface Derived category
- devops-containers Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Read excerpt
# UI, HUD and text
## Outlined text: behind the glyphs, or over them
An outline is centred on the glyph's edge, so half of it lies inside the
glyph. `Text` paints it **behind** the glyphs by default (`paintOrder:
"stroke"`): the letters stay whole and the outline shows only around them, so
a thick outline works on any face. What shows is half of `lineWidth`: ask for
twice the width you want to see.
`paintOrder: "fill"` paints the glyphs first and the outline over them, as a
plain canvas does with `fillText` then `strokeText`, and as melonJS did before
20.13. Its inner half then covers the letters: on a small or thin face a
`lineWidth` of 3 already leaves them solid outline colour.