홈>
HTML 캔버스 맵을 만들고 있는데 타일이 서로 병합되는 것처럼 타일의 가장자리가 정사각형으로 표시되지 않습니다. 몇 시간 동안 인터넷을 검색했지만 아무것도 찾을 수없는 것 같습니다. 어떻게하면 되나요?
프로젝트로의 드롭 박스 링크
사용 된 이미지를 포함 시켰으므로 프로젝트를 다운로드하여 브라우저에서 실행할 때 맵은 다음 그림과 같아야합니다. 이것이 내가 원하는 방식이 아니라 현재의 모습입니다.
타일 기반 맵을 사용하여이 정확한 효과를 얻을 수는 없으며 완벽하게 표현할 수는 없지만 달성하고자하는 일반적인 아이디어는 다음과 같습니다. 모서리가 더 이상 정사각형이 아니지만 더 둥근 모양을 가지며 다음 색상 타일과 혼합되는 것처럼 보입니다. 그것이 나의 목표입니다. 미리 감사드립니다.
-
답변 # 1
관련 자료
- javascript - Google 크롬에서 HTML5 캔버스가 깜박임
- javascript - HTML5 캔버스 개체 그리기
- javascript - HTML5 캔버스로 이미지 크기 조정
- javascript - HTML5 Canvas에 "펜 다운"방법이 있습니까?
- javascript - 반응에서 비디오 내부에 (html5 캔버스를 사용하여) 그리고 싶습니다
- javascript - 브라우저 캐시에서 이미지를로드하는 HTML5 Canvas
- jquery - HTML5 Canvas 및 JavaScript에서 작동하는 변수가 두 개 이상인 이유는 무엇입니까?
- jquery - 자바 스크립트로 HTML5 캔버스 크기 조정 (원하는 결과를 얻지 못함)
- HTML5 Canvas에서 외부 CSS로 SVG를 그리는 방법
- Tcl을 사용하여 HTML5 캔버스를 PDF로 변환
- javascript - 태그를 사용하여 HTML5 캔버스를 이미지로 저장
- javascript - 프레임 목록에 HTML5 캔버스를 이미지로 저장하는 방법은 무엇입니까?
- javascript - 전체 HTML5 캔버스에 링크 첨부
- javascript - 다음 예제에서 첫 번째 텍스트 행의 첫 번째 행이 HTML5 캔버스에 표시되지 않는 이유는 무엇입니까?
- javascript - 이미지 크기 조정을위한 HTML5 캔버스 drawimage 메소드를 구현하는 방법
- javascript - HTML5 캔버스 세트 상단/왼쪽
트렌드
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- javascript - swiperjs에서 정지, 재생 버튼 추가
- vue.js - axios를 사용하여 서버에 이미지를 업로드하는 방법
- python - 문자열에서 특정 문자 제거
다음과 같은 전환 타일을 만들어야합니다 :
<하위> 이미지 출처 : 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에 따라 라이센스가 부여됨
이 타일셋에는 텍스처에서 투명도로의 전환도 포함되어 있습니다. 이를 통해 상위 레이어에 반투명 타일을 배치하고 그 뒤에 다른 레이어에 다른 질감을 가진 전체 타일을 자동으로 혼합 할 수 있습니다. 그 모양은 텍스처에 따라 다릅니다.