상태를 한 번 업데이트하고 디스플레이 파생
코인이 수집되면 게임 이벤트 또는 시뮬레이션 단계에서 model.score를 업데이트하세요. UI 업데이트 지점에서 라벨에 별도로 값을 추가하는 대신 model.score에서 표시된 값을 렌더링합니다. DOM HUD의 경우 값이 변경되면 textContent를 업데이트하세요. 캔버스 HUD의 경우 동일한 모델 필드에서 숫자를 그립니다. 시각적 개수는 커밋된 점수를 향해 애니메이션으로 표시될 수 있습니다.
여러 라벨에 영향을 미치는 이벤트에 대해 단일 전환을 사용합니다. 생명을 잃으면 플레이가 일시 중지되고 패널이 열리는 경우 상태 변경을 한 번 기록한 다음 렌더링에 생명, 상태 및 사용 가능한 작업이 함께 반영되도록 하세요. 충돌 처리기가 이미 변경한 동일한 변수를 패널 콜백이 독립적으로 변경하지 않도록 하세요.
신속한 업데이트 및 최종 상태 테스트
두 개의 픽업을 빠르게 연속해서 실행하고 업데이트를 건너뛰지 않고 HUD에 결과 합계가 표시되는지 확인하세요. 일시 중지하고 실행을 마친 후 다시 시작하세요. 타이머가 중지되고 최종 점수가 의도한 대로 계속 표시되며 다음 실행이 정의된 값에서 시작되는지 확인합니다. 표시를 위해 requestAnimationFrame을 사용하는 경우 이를 렌더링 일정으로 처리하십시오. MDN은 해당 콜백이 일회성이며 다른 프레임에 대해 다시 요청해야 하므로 실수로 프레임당 두 번 실행되는 코드에서 상태 전환을 방지해야 한다고 말합니다.
불필요한 화면 갱신 줄이기
DOM 텍스트의 경우 업데이트가 자주 발생하는 경우 쓰기 전에 다음 형식의 값을 현재 값과 비교하세요. 캔버스 HUD의 경우 모든 이벤트 콜백에서 하나의 레이블을 그리는 대신 시뮬레이션 후 그룹 그리기를 수행합니다. 개발 중에 보이는 HUD 옆에 모델의 디버그 판독값을 추가합니다. 해당 값이 다르면 렌더링에 결함이 있는 반면 잘못된 결과 포인트와 값을 일치시키면 모델 업데이트가 다시 수행됩니다.
게임 HUD 동기화 관련 질문
충돌 처리기 내에서 점수 레이블을 업데이트해야 합니까?
핸들러는 권위 있는 점수 상태를 업데이트할 수 있습니다. 하나의 렌더링 경로가 그 상태를 형식화하고 표시하도록 하세요. 라벨에서 별도로 증가하는 두 번째 점수를 유지하지 마세요.
HUD에 이전 실행의 값이 표시되는 이유는 무엇입니까?
다시 시작하면 HUD 렌더링을 트리거하지 않고 시뮬레이션 상태가 재설정되거나 패널에 오래된 복사본이 보관될 수 있습니다. 한 번의 전환을 통해 모델을 재설정하고 즉시 새로운 상태를 렌더링합니다.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보