2D Game Engine

Debugowanie

DebugOverlay, LogBuffer i LogPanel, DebugViews, Profiler i raport diagnostyczny JSON. Kompletny toolbox do diagnozowania gier.

Włączenie#

ts
const engine = createEngine({ parent: 'app', debug: true })

debug: true buduje DebugOverlay, LogBuffer (400 wpisów), LogPanel, DebugViews, Profiler i Diagnostics. setDebug(false) obniża próg logowania do info i gasi warstwy widoczne.

DebugOverlay#

Pokazuje FPS, czas klatki, przejście czasu rzeczywistego w grę, aktywną scenę, obiekty, ciała, pary kolizji, pamięć, audio i najdroższe znaczniki profilera.

ts
const overlay = engine.getAdapter().getDebugOverlay()
overlay.setEnabled(true)
overlay.setExtra(['Własna linia debug'])
overlay.getFps()
overlay.getMemory()

Logger i LogPanel#

ts
const logger = engine.getLogger()
logger.setLevel('debug')
logger.info('Gracz wszedł do strefy', { zone: 'las' })
logger.warn('Niski FPS', { fps: 24 })
logger.error('Nie znaleziono assetu', { id: 'hero' })

const child = logger.child('physics')
child.debug('Collider dodany')

logger.addSink((entry) => myExternalService.send(entry))

Panel logów filtruje bufor 400 wpisów po poziomie, kontekście i treści:

ts
logs.filter({ minLevel: 'warn', context: 'physics', text: 'collider' })
logs.counts()
logs.summary()
logs.toJSON()

panel.setVisible(true)
panel.toggleLevel('debug')
panel.setFilter({ text: 'spawn' })

DebugViews#

Widoki rysują obrysy colliderów, siatkę, osie i granice kamery:

ts
views.toggle('colliders')
views.toggle('grid')
views.set({ axes: true, bounds: true })
views.getSupport()
views.reset()

Semantyka idzie przez porty: RenderPort.setDebugLayer i PhysicsPort.setDebugDraw. Brak metody w porcie = getSupport() zwraca false i widok nie jest oferowany — zero błędów runtime.

Profiler#

ts
const profiler = engine.getAdapter().getProfiler()
profiler.setEnabled(true)

profiler.begin('ai')
this.updateEnemies(dt)
profiler.end('ai')

profiler.record('pathfinding', 3.2)
profiler.snapshot()
profiler.getAverage('ai')
profiler.getFps()

Profiler poza debug jest darmowy

Gdy profiler jest wyłączony, begin/end zwracają się natychmiast. Po włączeniu każdy znacznik kosztuje dwa odczyty performance.now(). Możesz zostawić znaczniki w kodzie na stałe.

Raport diagnostyczny#

ts
const report = engine.getDiagnosticsReport()

await navigator.clipboard.writeText(JSON.stringify(report, null, 2))

Format b2d-diagnostics v1 zawiera sekcje: engine, config, time, scene, assets, audio, physics, profiler, wasm, logs, memory, environment i findings.

ts
diagnostics.report()
diagnostics.toJSON()
diagnostics.copy()
diagnostics.download('diag.json')

Raport jest gotowy do wklejenia w issue — zawiera wszystko, czego potrzebuje druga osoba, żeby odtworzyć problem.

Diagnostyka assetów#

ts
const diagnosis = engine.getAssets().diagnose({
  usedIds: ['hero', 'coin'],
  references: []
})

Zwraca registered, unused, missing, failed, unlicensed i heaviest — szybki audyt pamięci i licencji.

Przykład: namierzanie spadku FPS#

  1. Włącz debug i profiler: engine.setDebug(true).
  2. Sprawdź overlay — która scena i ile obiektów/ciał jest aktywnych.
  3. Otwórz panel logów i przefiltruj po warn/error.
  4. Dodaj znaczniki profiler.begin/end wokół podejrzanych systemów.
  5. Pobierz raport diagnostics.download() i porównaj findings.