홈>

javascript - 모서리가 제곱이 아닌 타일로 HTML5 캔버스 타일 맵을 만들려면 어떻게해야합니까?

HTML 캔버스 맵을 만들고 있는데 타일이 서로 병합되는 것처럼 타일의 가장자리가 정사각형으로 표시되지 않습니다. 몇 시간 동안 인터넷을 검색했지만 아무것도 찾을 수없는 것 같습니다. 어떻게하면 되나요?

프로젝트로의 드롭 박스 링크

사용 된 이미지를 포함 시켰으므로 프로젝트를 다운로드하여 브라우저에서 실행할 때 맵은 다음 그림과 같아야합니다. 이것이 내가 원하는 방식이 아니라 현재의 모습입니다.

타일 기반 맵을 사용하여이 정확한 효과를 얻을 수는 없으며 완벽하게 표현할 수는 없지만 달성하고자하는 일반적인 아이디어는 다음과 같습니다. 모서리가 더 이상 정사각형이 아니지만 더 둥근 모양을 가지며 다음 색상 타일과 혼합되는 것처럼 보입니다. 그것이 나의 목표입니다.   미리 감사드립니다.

javascripthtml5html-canvas

  • 답변 # 1

    다음과 같은 전환 타일을 만들어야합니다 :

    <하위> 이미지 출처 : http://opengameart.org/content/lpc-more-water-transitions(CC-BY-SA 3.0에 따라 라이센스가 부여됨)

    보시다시피이 세트에는 절반 깊이의 물과 절반 얕은 물인 타일이 있습니다. 이를 통해 이미지 편집기에서 한 텍스처에서 다른 텍스처로의 전환을 디자인 할 수 있습니다.

    한 접지 유형에서 다른 접지 유형으로 전환 할 때마다 동일한 기술을 사용해야합니다. 다음은 모래에서 풀로 전환되는 타일셋의 또 다른 예입니다.

    출처 : http://opengameart.org/content/32x32-water-and-land-map-tilesets CC-0에 따라 라이센스가 부여됨

    이 타일셋에는 텍스처에서 투명도로의 전환도 포함되어 있습니다. 이를 통해 상위 레이어에 반투명 타일을 배치하고 그 뒤에 다른 레이어에 다른 질감을 가진 전체 타일을 자동으로 혼합 할 수 있습니다. 그 모양은 텍스처에 따라 다릅니다.

관련 자료

  • 이전 unity - 다양한 중력 영역에서 발사체 움직임
  • 다음 2D 스타 맵에서 경계/상태 영역을 생성하는 좋은 알고리즘은 무엇입니까?