[스크래치] 학원 크리스마스 파티 컨텐츠 만들기

잠깐 일했던 학원에서 초등학생들을 대상으로 크리스마스 파티를 했다.

아이들을 위해 작은 컨텐츠를 준비했다.

 

원래는 학원을 배경으로 한 크리스마스 테마 픽셀아트만 준비할 예정이었는데, 

만들다 보니 아이들과 상호작용하는 요소가 있었으면 좋겠다는 욕심이 생겼다.

게임도 아니고 터치스크린..이라 스크래치로 만들기로 했다.

---

1. 산타와 루돌프가 만나면 하트가 나온다.

2. 산타를 누르면 선물이 튀어나온다.

3. 선물상자를 누르면 뚱냥이가 등장하고 트리에 별이 생긴다.

4. 창문에서 자는 고양이를 누르면 말풍선이 뜬다.

5. 루돌프를 누르면 말풍선이 뜬다.

 

---

요소 제작

1. 스프라이트 만들기

piskel (piskelapp.com/) 을 활용해서 화면에 놓을 픽셀 캐릭터들을 만들었다.

 

스프라이트 크기에 따라 캔버스 사이즈를 조정하면 된다.

예를 들어 크리스마스 트리는 64px * 64px, 머그컵은 12px * 12px에서 찍어야 

화면에 배치했을 때 픽셀의 크기가 균일해보여서 자연스럽다.

 

여러 가지 자료를 참고해서 개체당 2~6프레임씩 그렸다.

gif로 저장하면 스크래치에 올렸을 때 각 프레임이 하나의 코스튬으로 등록되어서 편리하다.

0123

2. 배경, 효과 만들기

학원 벽지와 바닥, 창문을 비슷하게 그리려고 했다.

배경의 크기를 조정할 수 있는 줄 알고 정사각형 캔버스에 찍었는데, 

스크래치 배경은 4:3 (480*360) 비율이고 변경할 수 없다.

다시 그리기는 싫어서 최대한 자연스럽게 확대했다.

---

선물상자를 열면 뚱냥이가 나오는데,

스프라이트 간의 연결을 자연스럽게 하기 위해 reveal 효과를 추가했다.

하얀색이 잘 안 보이길래 스크래치에서 노란색으로 바꿨다.

3. 말풍선 만들기

스크래치에 "say" 블록이 있긴 하지만, 

픽셀 컨셉을 유지하기 위해 하나하나 피그마로 만들었다.

사용한 폰트는 램체다.

---

스크래치 코딩

코딩이라 부르기 뭐하지만 구상한 대로 구현했다.

christmas_final.sb3

5.65MB

 

---

사운드

배경음악과 효과음은 모두 pixabay에서 다운받아서 사용했다.

사진전 기록용 영상에서 bgm으로 썼는데 여기에도 잘 어울릴 것 같아서 재활용했다.

---

사용자를 위한

1. 설명서 (Instructions)

물론 아이들이라면 전부 막 눌러볼 테지만..

헷갈릴 수 있으니 설명서를 첨부했다.

2. 링크 접속용 포스터

qr코드와 프리뷰를 포함한 A4 포스터를 만들었다.

---

오랜만에 학생들을 보니 반가웠다.

모두 메리 크리스마스!