루프 및 애니메이션
루프 생성
overflow: hidden;
=> body에 기본적으로 적용할 수 있는 상자 밖으로 넘칠 때, 잘려서 보이게 하는 스타일 옵션
ctx.translate(width/2, height/2);=> 원점을 화면 중앙으로 오게 하는 거
=> 화면 디자인들이 중앙이 중심이기 때문에 매우 유용하다
애니메이션
캔버스 내용을 지웁니다. (fillRect() or clearRect())
=> 공을 그리는건 아직 내 실력으로 무리... 함수들도 잘 모르겠다
간단한 캐릭터 애니메이션
=> 참 신기하게 걸어다니는 애니메이션을 완성했다
=> 단순히 이 코드를 이용하는것만으로도 이런 걷는 애니메이션 효과는 앞으로 활용할 수 있을 것 같다
- JavaScript의 맨 아래에 다음 줄을 추가하여 다시 한 번 좌표 원점이 캔버스 중앙에 오도록 합니다.
ctx.translate(width/2, height/2);=> 페이지 전체에서 결과물을 보여주게 하기에 중앙을 좌표 중심으로 잡는다
- 이제 새 HTMLImageElement객체를 만들고 src로드하려는 이미지로 설정하고 이미지가 로드될 때 함수가 실행되도록 하는 onload이벤트 핸들러를 추가해 보겠습니다 draw().
let image = new Image();
image.src = 'walk-right.png';
image.onload = draw;=> 전에 배웠던 image객체를 만들어주고 src, onload 속성을 넣어준다
=> 참고로 walk-right.png 파일은 같은 위치에 존재한다
- 이제 스프라이트가 화면에 그려질 위치와 표시하려는 스프라이트 번호를 추적하기 위해 몇 가지 변수를 추가합니다.
let sprite = 0;
let posX = 0;=> 스프라이트가 뭔지 정확히 안알려주는 바람에 고민을 했다.
=> posX가 그림을 그릴 위치에 해당하는 x 좌표구
=> sprite의 번호가 주어진 스프라이트 시트 (sprite sheet)
- 이제 draw()코드 맨 아래에 빈 함수를 삽입하여 일부 코드를 채울 준비가 되었습니다.
=> 사전 준비는 끝냈고 이제 본격적인 애니메이션 알고리즘
- 이 섹션의 나머지 코드는 draw(). 먼저 캔버스를 지우는 다음 줄을 추가하여 각 프레임을 그릴 준비를 합니다. 앞에서와 -(width/2), -(height/2)같이 원점 위치를 지정했기 때문에 직사각형의 왼쪽 위 모서리를 지정해야 합니다 width/2, height/2.
ctx.fillRect(-(width/2), -(height/2), width, height);=> 말그대로 다음 그림을 그리기 전에 리셋하는 과정을 거친다
=> 하지만 컴퓨터가 하는 이 리셋 작업은 너무 빠르기 때문에 우리가 인지하지는 못한다 그러므로 연속된 액션이 등장한다.
- 다음으로 9개 매개변수 버전인 drawImage를 사용하여 이미지를 그립니다. 다음을 추가합니다.
ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);=> drawImage라는 함수에 각자 위치에 따른 역할들이 존재한다.
- 이제 우리는 sprite각 무승부 후에 값을 변경할 것입니다. 음, 어쨌든 일부 후에. draw()함수 의 맨 아래에 다음 블록을 추가합니다 .
if (posX % 13 === 0) {
if (sprite === 5) {
sprite = 0;
} else {
sprite++;
}
}=> 한마디로 전체그림의 위치가 13이 됐을때 splite에 변화를 주는것
- 다음 posX으로 각 프레임 의 값 을 변경하는 방법을 알아내야 합니다 . 마지막 코드 바로 아래에 다음 코드 블록을 추가하세요.
if(posX > width/2) {
newStartPos = -((width/2) + 102);
posX = Math.ceil(newStartPos);
console.log(posX);
} else {
posX += 2;
}=> 그림 그리기의 시작은 중앙인 width/2에서 시작된다 그러므로 추가적으로 width/2가 되면 오른쪽 끝이라는 뜻 그러므로 왼쪽으로 돌려주는 역할
- 마지막으로 함수 requestAnimationFrame()의 맨 아래에서 호출하여 애니메이션 루프를 만들어야 합니다 draw().
window.requestAnimationFrame(draw);https://github.com/2taesung/JSOfficialDoc/tree/master/ani
어렵....다 근데 .... 재밌다 ....
