BLOG ARTICLE 이동 | 2 ARTICLE FOUND

  1. 2008.03.21 4.1 [중급] 대전게임 케릭터 만들기
  2. 2008.01.28 3.5 [초급] 키보드로 움직이는 우주선

아래의 이미지들을 가지고 대전게임에서 나오는 캐릭터와 같은 에니메이션을 간단하게 만들어 보겠습니다. 좌측을 클릭하시면 이미지들을 압축한 파일만 다운로드 받으실 수 있습니다.

사용자 삽입 이미지

사용되는 키는 아래와 같습니다.
  • 위 방향키 - 점프
  • 아래 방향키 - 방어
  • 좌우 방향키 - 이동
  • a, s - 공격

1. 이미지(Costume) 준비

사용자 삽입 이미지
좌측과 같이 각 동작에 필요한 이미지들을 준비합니다. [Paint] 버튼을 눌러 직접 그리거나 [Import] 버튼을 클릭하여 준비된 이미지를 가져 옵니다. 제가 사용한 아래의 파일을 다운로드 받으셔서 사용하셔도 됩니다.




act1, act2는 평상시 동작, act3은 손공격, act4는 발공격, act5는 점프, act6은 방어 동작입니다.


사용자 삽입 이미지
주의 하실 점은 크기가 다른 각 이미지 마다 중심점을 맞추기 위해 모든 코스튬에서 [Edit]를 클릭하여 Paint Editor에서 [+] Set rotation center를 클릭하여 좌측과 같이 좌측 하단에 중심점을 맞추어 줍니다.



2. 변수 생성
변수(Variable)는 말 그대로 변할 수 있는 수입니다. 스크래치에서는 여러 유동적인 값을 저장하기 위해 사용합니다.

사용자 삽입 이미지
이번 장에서는 현재동작과 현재 프레임을 저장하기 위해 'curAction'과 'curFrame' 두개의 변수를 생성합니다. 변수를 생성하기 위해서는 좌측과 같이 Variables 를 클릭하고 [Make a variable]을 클릭합니다.



사용자 삽입 이미지
입력창에 좌측과 같이 curAction을 입력한 후에 하단의 [OK] 버튼을 클릭합니다.

완료되면 다시 [Make a variable]을 클릭해서 curFrame을 입력하고 [OK]버튼을 클릭합니다.





3. 사용자 키입력 처리
각 동작들은 한두개의 차이를 제외하고는 모두 비슷하기 때문에, 여기서는 가장 복잡한 점프 동작만 설명하겠습니다. 다른 동작들은 아래의 전체 스크립트를 참조하시기 바랍니다.

사용자 삽입 이미지
좌측은 위 방향키가 눌러졌을 때, 동작을 지정하는 블록들입니다.

[if <[curAction] = (0)>] 은 현재 동작(curAction)이 공격이나 점프가 아닌 일반 동작(0)일 경우에 실행되도록 합니다.

[set curAction to (1)] 현재 동작(curAction)을 1로 설정해 이제 현재 동작이 일반 동작이 아님을 나타냅니다.

[set curFrame to (20)] 현재 프레임을 20으로 설정합니다. 모든 동작은 40 프레임이 되면 초기화 되는데 20 프레임 동안 점프 동작을 보여주기 위해  (40-20=)20으로 설정합니다.

[change y by (30)] 다른 동작과 달리 점프 동작은 일반 동작 보다 위에 출력해야 하기 때문에 y 값에 30을 더해 30pixel 만큼 위로 올립니다.

[switch to costume [act5]] 현재 동작을 점프 동작(act5)으로 설정합니다.


4. 에니메이션
[forever]로 실행되는 동안 반복되면서 에니메이션을 출력하는 핵심 부분입니다. 한번 반복될 때 마다 프레임을 증가 시키고 현재 상태(curAction, curFrame)에 따른 필요한 작업을 수행합니다.

사용자 삽입 이미지
[if <[curAction] = (0)>] 블록은 현재 동작이 사용자가 동작 키를 입력하지 않은 일반동작(0)일 경우에만 실행됩니다.

현재 프레임이 0~19면 모양을 act1로 설정하고 20 이상이면 act2로 설정합니다. act1과 act2를 반복적으로 보여줌으로서 일반상태의 움직임을 표현합니다.

[change curFrame by (1)] 현재 프레임을 1 증가 시킵니다.

[if <[curFrame] > (40)>] 블록은 현재 프레임이 40보다 클경우 실행되며 각종 변수들과 동작을 초기화 합니다.

[if <(costume #)=(3)>] 현재 이미지가 점프 동작이면
[change y by (-30)]으로 점프시에 30 증가했던 값을 본래 위치로 설정합니다. (저는 코스튬을 몇번 삭제하고 다시 올렸기 때문에 3이지만 등록 순서에 따라 틀릴 수 있습니다. 점프 커스튬의 좌측 상단 숫자를 입력하시면 됩니다.)

[set curAction to (0)] 현재 동작을 일반동작(0)으로 설정합니다.

[set curFrame to (0)] 현재 프레임을(curFrame)을 0으로 만들어 프레임 값이 항상 0~39로 한정되게 합니다.

5. 완료

전체 스크립트는 아래와 같습니다. 조금 복잡하지만 이전 내용과 비슷한 부분이 많고 반복되는 부분을 제외하면 이해할 부분은 많지 않습니다.
사용자 삽입 이미지

웹에서 실행되는 모습과 프로젝트 파일 다운로드는 스크레치 사이트의 제 프로젝트에서 확인하실 수 있습니다.

사용자 삽입 이미지
이번 장에서는 키보드의 입력에 따라 움직이는 우주선을 만들어 보겠습니다. 그리고 우주선의 불꽃 부분이 움직이는 에니메이션 효과와 우주선의 움직임에 따라 선을 그리도록 추가해 보겠습니다.

1. 에니메이션

1) 스프라이트 추가

사용자 삽입 이미지
먼저 우주선 스프라이트를 추가해 보겠습니다. 우선 스크래치를 실행하고, 좌측과 같이 스프라이트의 메뉴에서 Costumes를 선택합니다.

페인트 에디터를 이용하여 직접 그릴 경우에는 [Paint] 버튼을 클릭하고 기존의 이미지에서 불러 올 경우에는 [Import] 버튼을 클릭합니다. 아래의 압축 파일을 다운로드 받으시면 이 예제에서 사용한 2개의 우주선 이미지를 사용할 수 있습니다.

 
사용자 삽입 이미지
기존의 사용하지 않는 costume들은 삭제합니다. 각 이미지 우측 하단의 [X] 버튼을 클릭하여 삭제합니다.


2) 기준점 설정
사용자 삽입 이미지
기존 커스텀은 삭제되고 좌측과 같이 불꽃 모양이 다른 우주선 커스툼 두개가 등록되어 있습니다.

만약 페인트 에디터를 사용하여 직접 그리거나 다른 이미지를 불러 왔다면, 이름을 더블클릭하여 좌측과 같이 커스툼 이름을 변경하여 줍니다.

좌측을 보시면 39X39와 36X39로 두개의 이미지 크기가 다릅니다. 이는 번갈아 보여주는 에니메이션시 두개의 우주선의 위치가 바뀌어 보일 수 있습니다.

사용자 삽입 이미지
좌측과 같이 똑 같은 위치에 우주선을 보여 주면 너비가 다르기 때문에 위치가 변경되어 우주선이 흔들리는 것처럼 보여 집니다.

이와 같이 크기가 틀린 커스툼들을 보여줄 경우에는 위치를 보정하기 위해 기준점을 설정합니다. 기준점은 페인트 에디터에서 설정할 수 있습니다. 커스텀 영역내에 있는 [Edit] 버튼을 클릭하여 페인트 에디터를 실행합니다.
 

사용자 삽입 이미지
기준점 설정을 위하여 페인트 에디터의 좌측하단에 있는 [Set rotation center] 버튼을 클릭합니다.

사용자 삽입 이미지
좌측과 같이 기준점을 비행기 중앙의 원의 중심에 일치하도록 설정합니다. 두번째 그림(ship2)도 이와 동일하게 적용합니다.

이제 크기가 다른 이미지가 번갈아 가며 보여지더라도 정확한 위치에서 흔들림 없이 불꽃의 길이만 변경됩니다.


3) 스크립트
사용자 삽입 이미지
에니메이션을 위해 좌측과 같이 블럭을 스크립트 영역에 배열합니다.

[When flag Clicked] 사용자가 시작 버튼을 클릭하면 연결된  명령들이 실행됩니다.

[point in direction [0]] 우주선의 초기 방향을 위로 향하도록 합니다. 방향에 대한 설명은 아래에서 다시 하겠습니다.

[forever] forever내의 명령들은 프로젝트가 실행되는 동안 무한으로 반복되어 실행됩니다.
    [switch to costume [sihp]] 모양을 ship 커스툼으로 변경합니다.
    [wait [0.1] secs] ship 커스텀 모양을 0.1초 유지하도록 합니다.
    [switch to costume [sihp2]] 모양을 ship2 커스툼으로 변경합니다.

이제 깃발 버튼을 클릭하여 프로젝트를 실행 하고 에니메이션이 되는지 확인합니다.

2. 이동
사용자 삽입 이미지
방향키가 클릭되었을 때 이미지를 선택된 방향으로 회전하고 이동하도록 하여 줍니다. 좌측과 같이 각각의 블럭들을 배치합니다.

[when [up arrow] key pressd]
위 방향키가 클릭되었을 때 연결된 블럭들이 실행됩니다.

[change y by [10]]
현재 y 좌표에 10을 더합니다. y의 수가 클수록 위로 이동합니다.

[point in direction [0]]
주어진 각도로 이미지를 회전합니다. 이미지 회전 위치는 아래와 같습니다.

다른 방향키도 위와 같은 방법으로 설정된 방향으로 방향을 바꾸고 이동하도록 되어 있습니다.



사용자 삽입 이미지
[point in direction [값]] 블럭은 값에 따라서 좌측의 이미지와 같은 방향으로 커스툼을 회전합니다. 방향에 따른 각각의 값들은 아래와 같습니다.

위: 0
아래:180
좌측:-90
우측:90


3. 선 그리기
사용자 삽입 이미지
이제 마지막으로 우주선이 움직이는 경로에 선이 그려지도록 하겠습니다. 이와 관계된 블럭들은 [pen] 분류에 있습니다.

사용자 삽입 이미지
좌측과 같이 기존의 [when flag clicked]에 펜에 관련된 초록색 블럭들을 세개 추가합니다.

[clear] 펜으로 그려진 선들을 모두 지웁니다.

[pen down] 해당 스프라이트가 이동 시에 현재 스프라이트 위치에 선을 그리도록 설정합니다.
 
[set pen size to [5]] 선 굵기로 5로 설정합니다.





이제 실행하여 보면 아래와 같이 우주선의 이동경로를 따라 지정된 선이 그려지는 것을 확인할 수 있습니다.
사용자 삽입 이미지
웹에서 실행되는 모습과 프로젝트 파일 다운로드는 스크레치 사이트의 제 프로젝트에서 확인하실 수 있습니다.