Bulles en espace monde

Bulles de dialogue qui suivent des entités en coordonnées monde.

Configuration

// gwen.config.ts
['@gwenjs/renderer-html', {
  layers: {
    background: { order: 0 },
    bubbles:    { order: 20, coordinate: 'world' },
    hud:        { order: 100 },
  },
}]

Acteur

import { defineActor, useEntityId } from '@gwenjs/core/actor'
import { useHTML } from '@gwenjs/renderer-html'
import { Position, Dialogue } from './components'

export const NPCActor = defineActor(NPCPrefab, () => {
  const entityId = useEntityId()
  const bubble = useHTML('bubbles', String(entityId))

  onStart(() => {
    bubble.mount(`<div class="bubble">${Dialogue.line[entityId]}</div>`)
  })

  onUpdate(() => {
    const x = Position.x[entityId]
    const y = Position.y[entityId]
    bubble.syncWorldPosition(x, y - 60) // 60px au-dessus de l'entité
    bubble.setVisible(Dialogue.active[entityId])
  })
})

CSS

.bubble {
  position: absolute;
  background: white;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  white-space: nowrap;
  transform: translateX(-50%); /* centrer horizontalement sur le point d'ancrage */
  pointer-events: none;
}

.bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
}