diff --git a/site/docs/community/snippets/boilerplate.md b/site/docs/community/snippets/boilerplate.md index 3cb4cb8b..9270af43 100644 --- a/site/docs/community/snippets/boilerplate.md +++ b/site/docs/community/snippets/boilerplate.md @@ -19,7 +19,7 @@ Any images or downloadable modules should reside in the assets folder docs/community/snippets/// index.md <-- main snippet file /assets/demo.gif <-- optional visual demonstration or static assets -/assets/myComponent.ts +/assets/myComponent.ts <-- optional downloadable module ``` **Categories** might include: @@ -46,7 +46,6 @@ description: Adds hover and click effects to buttons in ExcaliburJS. tags: [ui, component] author: Jane Doe date: 2025-10-18 -demo: .assets/demo.gif --- ``` diff --git a/site/docs/community/snippets/components-systems/basic-healthbar/index.md b/site/docs/community/snippets/components-systems/basic-healthbar/index.md index 83b03ff7..76b7a889 100644 --- a/site/docs/community/snippets/components-systems/basic-healthbar/index.md +++ b/site/docs/community/snippets/components-systems/basic-healthbar/index.md @@ -24,12 +24,6 @@ The `HealthBar` component provides a **visual health bar** that can be attached ## Usage -You can download the full TypeScript module here: - -[Download HealthBar.ts](./assets/healthbar.ts) - -[LifeBar.png](./assets/lifebar.png) - ```ts import { Actor, Engine, Scene } from 'excalibur'; import { HealthBar } from './HealthBar'; @@ -58,13 +52,21 @@ player.getComponent(HealthBar).health -= 10; // decrease health player.getComponent(HealthBar).health = 50; // set health directly ``` -Demo +## Demo The demo shows the health bar above a player entity, dynamically updating as health changes. ![Demo](./assets/demo.png) -Notes & Tips +## Downloadable Content + +You can download the full TypeScript module here: + +[Download HealthBar.ts](./assets/healthbar.ts) + +[LifeBar.png](./assets/lifebar.png) + +## Notes & Tips Make sure lifeBarSS is properly loaded before adding the component.