Stack, Snake and Hop re-tessellate rounded rectangles every frame

Aberta
  • Algo errado?
#35 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
55/100
Tipo de issue
Refatoração
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
typescript
Domínio
game-dev, performance

Direção de pesquisa

Start by reading the drawing code in games/stack/scenes/GameScene.ts, games/snake/scenes/GameScene.ts, and games/hop/scenes/GameScene.ts, then compare it with the sparkTexture example in shared/ui.ts. Run npm run dev and use a Performance trace to check how frame time changes as the Stack board fills or the Snake grows. The issue is done when drawing cost no longer measurably grows with board fill or snake length and the visuals remain unchanged; run npm run typecheck and npm run build.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

help wanted performance severity: medium

Summary

Three games clear a Graphics object and redraw every cell or segment with fillRoundedRect each frame. Phaser's WebGL Graphics renderer tessellates each arc with a fixed step and does not cache geometry, so cost grows with board fill and snake length.

Where

  • games/stack/scenes/GameScene.ts:458-497, games/stack/scenes/GameScene.ts:500-512 (three rounded rects per cell)
  • games/snake/scenes/GameScene.ts:437-452, games/snake/scenes/GameScene.ts:404-412 (two per segment plus three colour objects)
  • games/hop/scenes/GameScene.ts:396-435

Details

Estimated from the Phaser 3.90 source, not measured in a browser:

  • A rounded rect is about 400 points and 400 triangles.
  • Stack with about 100 visible cells: about 300 paths and 120,000 point allocations per frame.
  • Snake at length 50: about 40,000 allocations and triangles per frame.

Impact

Likely GC pauses and dropped frames on phones and low-end laptops, worst when the Stack board is full or the snake is long, which is when timing matters most.

Steps to reproduce

  1. Play Stack until the board is half full, or Snake to length 50.
  2. Record a Performance trace and compare scripting time and minor GC frequency with the start of the run.

Suggested fix

Pre-render one white cell texture with generateTexture (as sparkTexture in shared/ui.ts already does) and draw cells as pooled tinted Images, or stamp into a RenderTexture updated only when the board changes. Cache Snake's gradient colours per length. A cheaper stopgap is fillRect for the glow and highlight layers.

Acceptance criteria

  • Frame time in Stack and Snake does not grow measurably with board fill or snake length
  • Visuals are unchanged

Getting started

  • Relevant files: games/stack/scenes/GameScene.ts, games/snake/scenes/GameScene.ts, games/hop/scenes/GameScene.ts, shared/ui.ts
  • Run locally: npm install, then npm run dev
  • Checks: npm run typecheck and npm run build (there is no test suite yet)
  • Related docs: README.md

Filed by repo-audit/full-audit at b001f5d. Severity: medium. Effort: M. audit-key: performance|games/stack/scenes/GameScene.ts|drawCell

Linguagem predominante
TypeScript
Estrelas
3
Forks
3
Nenhum PR com merge em 30d

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TMHSDigital/GH-Arcade

Todas as issues de TMHSDigital/GH-Arcade

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.