이제 Screen2 차례입니다. 약간 어려울지도 모르지만 완전 새롭지는 않아요.
기억을 잘 되살리거나, 앞 강의들을 잘 살펴보면서 해결해 나갑시다.
Screen2 화면을 구성하기 위해 앱을 다시 살펴봅시다.
필름 위에 찍은 사진이 놓여지고 그 위에 스티커가 붙습니다.
즉, “그림 위에 그림 또 그 위에 그림”이 있는 기본적인 구조를 갖고 있습니다. 이미 카멜레온 게임을 만들면서 비슷한 구조를
다루어 봤었죠! 이렇게 그림 위에 그림이 들어가는 구조는 Canvas와 ImageSprite를 사용합니다. Canvas 위에
ImageSprite가 돌아다닐 수 있다는 것을 기억하세요. 또한 ImageSprite는 클릭에 반응하고, 드래그도 가능합니다.
Screen2의 Designer화면에서 Palette > Drawing and Animation 에서 Canvas를 Viewer에 가져다 놓고, ImageSprite를 두개 가져다 놓습니다. 이 때 ImageSprite는 Canvas위로 드래그해야 위치됩니다.
| Component | 항목 | Propreties |
| Canvas1 | BackgroundColor | None |
| BackgroundImage | None | |
| Width, Height | Fill parent | |
| PictureImageSprite | Z | 1.0 |
| StickerImageSprite | Z | 2.0 |
| FilmButton | Image | BtnFilm.png |
| StickerButton | Image | BtnFilm.png |
| TagButton | Image | BtnTag.png |
| DeleteTagButton | Image | BtnDelTag.png |
| SaveButton | Image | BtnSave.png |
ImageSprite의 Properties에서 Z값을 설정합니다. Z값은 정수값으로써, 공간좌표의 Z축을 의미합니다. ImageSprite들의
위치가 겹쳐질 때 Z값을 통해 어떤것이 위로 갈 것인지 결정이 됩니다.
Z값이 높을수록 위에 배치 됩니다.
잘 이해가 안되면 아래 사진을 참고하세요.
이제 화면의 비율을 설정해 봅시다.
Screen2에서의 특이점은 Screen1에서 건네 받은 사진(startValue)을 화면을 시작하자마자
PictureImageSprite에 넣는 것입니다. 이 점을 주의해서 화면 비율을 설계해 봅시다.
