프레임 형상 및 애니메이션 순서 설명
일반적인 그리드에서는 셀 너비와 높이, 열 수, 각 애니메이션의 프레임 인덱스를 저장하세요. 소스 x는 (프레임 인덱스 나머지 열 수) × 셀 너비로, 소스 y는 (프레임 인덱스 / 열 수를 내림한 행 인덱스) × 셀 높이로 계산합니다. 불규칙한 아틀라스에서는 소스 사각형을 명시적으로 저장하세요. 애니메이션 순서와 파일 순서는 분리하세요. 이미지가 순서가 아니라 포즈별로 배치되었다면 8프레임 걷기 애니메이션에 [0, 1, 2, 1, 0, 3, 4, 3] 인덱스를 사용할 수 있습니다.
투명한 여백을 제거하기 위해 스프라이트를 자르는 경우 원래 캔버스 크기와 트림 오프셋도 저장합니다. 캐릭터의 발과 같은 안정된 피벗 주위를 그리면 프레임 경계가 아트웍이 변경될 때 충돌 몸체나 시각적 지면 접촉을 이동하지 않습니다.
의도적으로 소스 직사각형을 사용하십시오.
Canvas drawImage에는 소스 직사각형을 선택하고 대상 직사각형에 맞게 크기를 조정하는 오버로드가 있습니다. MDN은 대상 x, y, 너비 및 높이와 별도로 소스 x, y, 너비 및 높이를 문서화합니다. 렌더링된 크기를 변경하는 동안 아틀라스 자르기를 정확하게 유지하려면 해당 분리를 사용하십시오. 첫 번째, 마지막 및 행 경계 프레임을 테스트합니다. 잘못된 열 개수는 해당 경계에 있는 인접한 스프라이트에서 1픽셀 조각으로 나타나는 경우가 많습니다.
형상을 진단하기 전에 이음새와 하중을 확인하세요
크기 조정해 그릴 때 이웃한 이미지가 번져 보인다면 아틀라스 셀 사이에 투명한 여백을 두고 선택한 필터링 모드가 아트 스타일에 맞는지 확인하세요. 대상 프레임마다 디버그 사각형을 그리고 임시로 인덱스를 표시하세요. 그리기 전에 이미지가 로드되고 디코딩될 때까지 기다린 다음 실제 canvas 배율과 내부 그리기 버퍼 해상도에서 테스트하세요. 크기 조정하지 않은 프레임과 조정한 프레임을 비교하세요. 조정한 경우에만 이음새가 나타나면 소스 좌표를 바꾸기 전에 샘플링과 아틀라스 내부 여백을 살펴보세요.
스프라이트 아틀라스 렌더링 관련 질문
이웃 스프라이트의 일부가 나타나는 이유는 무엇입니까?
소스 직사각형은 이웃 픽셀을 포함할 수 있거나, 스케일링된 샘플링은 촘촘하게 채워진 아틀라스의 가장자리 픽셀을 표시할 수 있습니다. 프레임 순서를 변경하기 전에 자르기를 확인하고 셀 사이에 적절한 여백을 추가하세요.
충돌 상자는 잘린 스프라이트 경계를 사용해야 합니까?
일반적으로 부수적인 투명 픽셀이 아닌 게임 캐릭터에 연결된 충돌 크기를 유지합니다. 안정적인 피벗과 명시적인 충돌 판정 영역는 애니메이션 프레임이 게임플레이 기하학을 변경하는 것을 방지합니다.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보