제 6 장 풍선 상승 애니메이션 4 (버튼 이미지의 추가작업 등)

7. 버튼 이미지의 추가작업 등

1.  상기 완성된 복수의 블록중에서 나타남사라짐버튼 블록, 풍선의 캔버스 가장자리 도달 블록, 스크린 초기화 블록 등에서는 일부를 변경하고, 캔버스 드래그 블록과 캔버스 터치 블록을 추가한다.

1-1. 디자이너창에서 다른 이름으로 저장하기 버튼(Save As)을 클릭하여 새로운 프로젝트 명칭을 BalloonVersion으로 저장한다.

1-2.  버튼에 사용되는 그림파일(button01.png, button02.png, circlearrow.png)을 준비하여 미디어컬럼에서 업로드한다.  button01.png와 button02.png는 버튼의 이미지용으로 사용하고, circlearrow.png은 앱의 아이콘용으로 사용한다.

  

또는, 제 6 장 풍선상승애니메이션 1 (준비단계 및 학습소개)에 첨부된 압축파일(BalloonVersion.zip)을 풀어서 폴더(assets)안에 있는 그림파일을 사용하여도 된다.

1-3. 하기 디자이너창의 스크린 샷에서의 사라짐은 그림파일(button02.png)에 해당하고, 버튼(StartStopButton)의 속성컬럼의 이미지(Image)난에서 상기 그림파일을 선택하고 속성컬럼의 텍스트(Text)난에 기재된 사라짐을 삭제하면 하기 스크린샷과 같은 형상을 가진 버튼이 나타난다.  에뮬레이터 또는 안드로이드폰에서 이 버튼을 터치할 때마다 반복해서 나타남과 사라짐이 교대로 나타난다.  나타남은 그림파일(button01.png)에 해당한다. 이 그림파일에 해당하는 블록은 버튼블록의 조합시에 사용된다.

나타남사라짐버튼(StartStopButton)은 캔버스의 상측에 배치한다.  또한, 화면의 좌측변과 간격을 두기 위해 폭을 20픽셀로 설정하고 높이를 10픽셀로 설정한 수평배열구성요소(HorizontalArrangement2)를 사용하고, 상기 수평배열구성요소(HorizontalArrangement2)와 버튼(StartStopButton)을 수평으로 정렬하기 위해 폭을 Fill parent로 설정하고 높이를 50픽셀로 설정한 수평배열구성요소(HorizontalArrangement1)를 사용한다.

참고 사항: 에뮬레이터에서는 버튼의 위치가 변경되지 않고 제대로 고정되어 문제가 발견되지 않았다.  그런데, 넥서스 S에서 테스트하는 도중에 버튼의 일부가 화면의 상측에 숨겨져 나타나지 않고 버튼의 터치기능조차도 이용할 수 없게 되었다.  디자인 창에서 설정한 세로의 길이가 넥서스 S의 세로길이보다 약간 길어 세로방향으로 스크롤되어 버튼이 위로 이동하였지만 원래의 위치로 복구되지 않기 때문인 것으로 파악되었다. 캔버스의 높이를 400 픽셀로 정정하고, 버튼의 상부위치가 화면의 상단에서 20 픽셀정도 떨어져 위치하도록 수평배열3(VerticalArrangement3)을 추가하고 높이를 20 픽셀로 하고 폭을 Fill parent로 한다.  따라서, 버튼을 정상적으로 사용할수 있다. 상기 상단 부분을 확대한 스크린샷은 다음과 같다.

1-4. 디자이너창의 스크린샷은 다음과 같다.

  

참고 사항: 상기 디자이너창의 구성요소와 이후에 설명하는 블록에디터창의 기능블록의 조합에 의한 넥서스S의 풍선 화면

 

2. 블록에디터창의 블록조합에 대해 설명한다.

2-1. 나타남사라짐버튼블록(StartStopButton)에 텍스트 대신에 이미지를 사용하여 변경한다.즉, 버튼을 터치할 때마다 사라짐과 나타남의 텍스트 표시가 버튼의 이미지로서 교대로 나타난다. 

  

2-2. 풍선의 캔버스 가장자리 도달 블록 및 스크린 초기화 블록에서는 고정된 좌표를 사용하는 대신에 캔버스의 폭과 높이에 대한 상대적인 좌표를 사용한다.

2-2-1. 풍선의 캔버스 가장자리 도달 블록

2-2-2. 스크린 초기화블록

2-3. 캔버스 드래그블록(Canvas1.Dragged)과 캔버스 터치블록(Canvas1.Touched)을 추가한다.

2-3-1. 캔버스 드래그블록

캔버스에서 풍선을 직접 터치하여 드래그하지 않아도 캔버스의 임의의 위치에서 드래그하면 드래그한 최종위치로 풍선이 이동하고 100msec 동안 진동한다.

  

2-3-2. 캔버스 터치블록

캔버스의 임의의 위치에서 터치하면, 풍선리스트에서 대기하고 있는 다음 풍선이 나타나고 100 msec 동안 진동한다.

3. 지금까지 설명한 블록조합과 기존의 블록조합 전체를 3개로 나타낸 스크린샷은 다음과 같다.

5. 요약

본장에서는 캔버스위에서 이미지스프라이트(풍선)의 애니메이션에 대해서 중접적으로 설명하였다. 이미지스프라이트에 관련된 헤딩설정블록, 좌표설정블록, 속도설정블록의 사용방법에 대해 설명하였다. 이미지스프라이트 또는 캔버스의 터치 및 드래그에 의해 이미지스프라이트를 교체하거나 진동하는 방법에 대해 설명하였다. 또한 토글버튼에 대해 복습도 하였다. 본장에서 배운 것을 바탕으로 간단한 게임으로 발전시킬 수 있는 여지가 충분하다.