[NAVER D2]html5 canvas overview
HTML5 Canvas 소개 및 특징
- 소개 및 지원브라우저
- CanvasRenderingContext2D
- 즉시모드 / 보류모드
- Mouse Event 처리
Canvas 로 할 수 있는 것
- Drawing Shape
- Pixel Manipulation
- Animation
Canvas와 WebGL
Canvas와 Flash
Cavnas 적용사례
[NAVER D2]html5 canvas overview
HTML5 Canvas 소개 및 특징
- 소개 및 지원브라우저
- CanvasRenderingContext2D
- 즉시모드 / 보류모드
- Mouse Event 처리
Canvas 로 할 수 있는 것
- Drawing Shape
- Pixel Manipulation
- Animation
Canvas와 WebGL
Canvas와 Flash
Cavnas 적용사례
2. Tile Texture ( Atlas Texture ) ??
• 성능상의 문제로 하나의 파일에 여러 이미지를 모아놓은 텍스처
효율적이긴하나 수정 및 텍스처 공간활용,좌표 추출 등에 애로사항이꽃핀다
1. 구현목표
• Tile X,Y 값
• 애니메이션 되는 시간 조절
• 전체 타일에서 사용되는 특정 범위 지정
• 사용되는 범위의 시작 위치 변경
2
5. 5
• 비교
JavaScript 에서 float 값의 상수 형은 수만 써주면 되지만
C# 에선 상수 뒤에 “f”를 꼭 붙여줘야 한다
JavaScript 에선 int 로 받는 값이 float 형 이어도 문제가 없지만
C# 에선 오류가 발생한다
Float 형 앞에 (int) 선언을 해줘서 변수로 넘겨줘야 한다
6. • 완성된스크립트
3. 구현목표 확인
• Tile X,Y값
• 애니메이션 되는시간 조절
• 전체 타일에서 사용되는특정 범위 지정
• 사용되는 범위의시작 위치 변경
6
7. 4. 나머지 목표 구현…
처음부터 제작한 스크립트가 아니라 모르는 변수들이 너무 많다
분석을 해야…
7
8. 입
력
변
수
5. 모르는 값들은 변수를 선언해서 확인한다
•확인하고싶은 미지의 값들은 알맞은 타입의 변수를선언한 후 실행하여 스크립트 를 분석한다
• 플레이 후 바뀐 변수 값
8
확
인
변
수
10. 10
4
4
U / X
V / Y
0.75~0.99…0.25~0.49… 0.5~0.759…0.0~0.249… 1? = 0.0
11. 11
index = Time x 변수 (1~) // 초당 값이 카운트 됨 1,2,3… 변수가 2이면 2배의 속도로 카운트가 빨라진다
% : 나누기를 한 나머지
index = index % ( 2 x 4 ) // 위에서 받은 값을 8로 나눈 나머지
0,1,2,3… / 8 = 0,1,2,3,4,5,6,7,1,2,3,4,5,6,7,1… // 0~7값 반복
x y x y
size = ( 1 / 2 , 1 / 4 ) = ( 0.5 / 0.25 ) // 전체 1의 단위에 비례한 단일 이미지의 크기
uindex = 0,1,2,3,4,5,6,7,0… % 2 = 0,1,0,1,0,1,0,1.0… // 0과 1만 반복하여 반환
vindix = 0,1,2,3,4,5,6,7,0… / 2 = 0,0,1,1,2,2,3,3,0… // 나머지를 한 값만 반환한다
offset = vector2( 0,1,0,1… x 0.5 , 1-0.25-(0,0,1,1,2,3,3,0… x 0.25) )
vector2(0 , 0.5 , 0 , 0.5… , 0.75 – ( 0 , 0 , 0.25 , 0.25 , 0.5 , 0.5 , 0.75 , 0.75 , 0…) )
0.75 , 0.75 , 0.5 , 0.5 , 0.25 , 0.25 , 0 , 0 , 0.75…
복잡한 순차적 위치 이동을
연산자 2개로 해결!!
12. 12
7. 수정 방향
• 변수 index 값이 반복되는 범위의 크기가 Texture 에서 출력될 이미지의 범위를 지정
( 0~3 , 0~5, 0~7 )
변수 index 시작 값이 범위 안에서 다른 위치의 이미지를 출력하게 해준다
( 0~3 , 2~5 , 4~7 )
그 아래쪽의 구문은 index 값을 받아 UV에 맞게 변조 시켜주는 기능만 한다
중요한 것은 index 값!
index%(uvAnimationTileX*uvAnimationTileY) index%(uvAnimationTileX * 사용범위크기Y) + 시작위치Y
2x2 or 2x3 or 2x4
0~3 or 2~5 or 4~7
16. 11. 남은 문제들…
구현목표
• Tile X,Y 값
• 애니메이션 되는 시간 조절
• 전체 타일에서 사용되는 특정 범위 지정
• 사용되는 범위의 시작 위치 변경
• 행, 열 구분 없이 적용 가능
• 디테일 한 위치 지정
• Once / Loop 구분 설정
사용하시다가문제점이나개선점등이있으면알려주시면감사하겠습니다!!
16