터치팡팡(a.k.a개미잡기) 개발강좌(4) - 캔버스에 개미를 움직여 보자1.

2 minute read

html5의 캔버스(canvas)를 이용하여 터치팡팡게임을 만드는 과정을 소개합니다. a.k.a 개미잡기
완성된 게임은 터치팡팡 <- 링크를 통해 확인할수 있다.




캔버스위에 개미를 움직여 보자(1)

전에 공을 그려서 움직이는 애니메이션을 해보았는데 이제 공대신 개미를 움직이게 해보자.

일단 개미이미지가 필요하다.

개미1 개미2 개미3

움직임을 표현하기 위해 이미지 3개를 준비하였다.

자 개미가 움직이는 모습을 코드펜을 통해 보자.

See the Pen canvas 007 by mnmsoft (@mnmsoft) on CodePen.

일단 개미가 움직이긴 하나 우리가 원하는 모습은 아니다. 원하는 모습을 취하기 위해서는 여러 단계가 남아 있는데..

일단 소스코드를 보자. 이제부터는 기존과 다른 부분이나 추가된 부분만 살펴보겠다.

const img = new Image();
img.src = "https://mnmsoft.co.kr/content/ant/ant1.png";

캔버스위에 이미지를 그리기 위해 외부 실제로 사용하고 있는 이미지를 불러왔다. 여러분은 로컬 또는 본인의 웹서버에 있는 이미지를 사용하길 바란다.

ctx.drawImage(img,x,30,30,30);

이전에 arc 함수를 통해 원을 그렸었는데 이제는 새로운 drawImage 함수를 이용하여 이미지를 그린다. 매개변수를 보자 (이미지,x좌표,y좌표,가로사아즈,세로사이즈)

준비한 이미지를 [x,30] 에 가로30 세로30의 크리고 그린다.

자 이제 이런식으로 되어 있는 이미지를 여러가지조정을 통해 좀더 우리가 원하는 모습으로 변경해보려고 한다.

무엇을 해야 할지 정리해보자.

  1. 개미의 사이즈가 비율에 맞지 않게 되어 있다 비율에 맞게 고치자.
  2. 개미의 머리 방향이 위로 되어 있다 오른쪽으로 움직이고 있으니 오른쪽을 바로보게 하자.
  3. 개미 이미지 3개를 준비했으니 움직이면서 두번째 세번째이미지로 변경하면서 애니메이션 효과를 주자

일단 이렇게 3가지 진행을 해보겟다.

우선 첫번재 비율을 조정해보자!

See the Pen canvas 008 by mnmsoft (@mnmsoft) on CodePen.

let tempWidth = img.width;
img.width = 30;
img.height = img.width * img.height / tempWidth;

사실 원 이미지가 300x300 사이즈라 변화를 못느낀텐데.. 가로세로 사이즈가 다른경우 가로30 세로30 로 고정크기를 지정했기 때문에 이미지 비율이 틀어질수 있다.

이미지의 기본 좌표를 임시 변수에 담아두고 가로사이즈를 30으로 바꾼뒤 비율에 맞게 세로사이즈를 곱한다.

a:b(원가로사이즈:원세로사이즈) = x:y (변경된가로사이즈:변경된세로사이즈) 에서
a * y = b * x 이미로
y = b * x / a 곧 (변경된 세로사이즈 = 원세로사이즈 * 변경된가로사이즈 / 원가로사이즈) 를 이용하여 계산하였다.

ctx.drawImage(img,x,30,img.width,img.height);

그런다음에 이미지를 그리는 drawImage 함수의 4번째 5번째 매개변수에 이미지의 가로사이즈,세로사이즈를 넣어서 비율에 맞게 표현하였다.

머리방향을 바꾸는건 문서는 나눠서 설명하겠다.

다음에 또 만나요~!

Leave a comment