[인벤터]코딩을 배우자 - 고양이잡기 게임어플 만들기 1

[인벤터 코딩 배우기 ]

"고양이 잡기" 게임 어플 만들기

 

 

"고양이잡기" 게임 어플을 만들어 보며 인벤터 코딩을 배워 봅시다

단순히 인벤터 코딩에 대하여 설명하는 것 보다 게임 어플을 만들어 가며 인벤터 코딩에 대하여 알아가는 것이 좋겠죠

그래서 이번 시간에는 고양이 잡기 게임어플을 만들어 보며, 인벤터 코딩에 대하여 조금씩 알아 가도록 하겠습니다

 

[1단계] 코딩을 위해 개발 웹페이지로 이동 하기 → http://ai2.appinventor.mit.edu/

[2단계] 디자인화면 만들기

디자인 화면에는 팔레트, 뷰어, 컴포넌트, 미디어, 속성 영역으로 구분됩니다

아래 이미지는 뷰어 영역입니다 아래와 같은 화면을 만들어 보도록 하겠습니다

 

 

1) 팔레트 → 레이아웃 → 수평배치 를 드래그 합니다

2) 팔레트 → 사용자 인터페이스 → 버튼을 수평배치 안으로 드래그 하여 넣습니다

3) 팔레트 → 사용자 인터페이스 → 레이블을 수평배치 안으로 드래그 하여 넣습니다

4) 팔레트 → 그리기&애니메이션 → 캔버스를 드래그 하여 넣습니다

5) 팔레트 → 그리기&애니메이션 → 이미지 스프라이트를 캔버스 안으로 드래그 하여 넣습니다

 

  

 

6) 뷰어 안으로 드래그 한 것들이 컴포넌트 영역에 표시 됩니다

   클릭하면 선택 된 컴포넌트의 속성이 속성 영역에 표시 됩니다

   컴포넌트들의 컴포넌트 영역 하단 이름 바꾸기를 클릭하여 이름을 변경하고, 각각 속성을 설정 해 줍니다

   속성의 경우 너비, 텍스트 등 만 설정 해 주면 됩니다

7) 미디어 영역에서 파일 올리기로 고양이 이미지를 업로드 합니다

   그리고 Cat 컴포넌트를 클릭하여 속성에서 업로드 한 사진을 선택하면 뷰어 영역에 이미지가 변경됩니다

 

 

8) 팔레트 → 센서 → 시계를 드래그 하여 넣습니다

9) 팔레트 → 미디어 → 소리를 드래그 하여 넣습니다

 

 

 

 

여기 까지 디자이너 부분 작업이 완료 되었습니다

속성들을 변경 해 보며 화면을 디자인 해 보시고, 기초 설정 값들 또한 변경 해 보셔도 됩니다

 

화면 우측 상단의 디자인부분을 하였고 이제 블록 부분을 작업 해 보도록 하겠습니다 

블록 부분은 크게 블록 부분과 뷰어 부분으로 구분됩니다

스크래치 코딩을 해 보신 분들은 바로 아실 것 입니다

블록 부분을 선택하여 뷰어 영역으로 드래그, 조각을 맞추며 코딩하는 방식입니다

 

 

 

공통블록 부분을 펼쳐 보도록 하겠습니다

블록 영역을 보시면 공통블록 아래에 추가한 컴포넌트드리 있는 것을 확이 할 수 있습니다

컴포넌트를 클릭하면 각각의 사용할 수 있는 블록형태가 보입니다

 

   

 

이 블록들을 조합하며 코딩을 하게 됩니다

고양이 잡기 게임어플 만들기 첫 시간에는 디자이너 부분 작업 및 블록 부분에 대하여 간단하게 알아보았습니다

디자인에 생명을 불어 넣는 블록 코딩 부분은 다음 포스팅에 올리도록 하겠습니다

 

혹, 기다리시는 분들을 위해 내일 저녁에 다시 포스팅 하도록 하겠습니다

 

지금 시간이 2017년 9월 12일 11시 42분

이후 2시간 동안은 아래 바코드로 지금 하고 있는 어플을 다운 할 수 있습니다

 

 

궁금하신 분들은 다운 받아서 실행 해 보세요