한국어

Programming

twin 주소복사
조회 수 2966 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

 앱 기획하기

 1. 스마트폰을 흔들면 가위 바위 보 그림이 랜덤하게 나온다. 

 2. 무엇을 냈는지 음성으로 말한다.

 

  *가위 바위 보 이미지는 autodraw.com에서 그림

 

 1.png    2.png    3.png     frame.png    rock-icon.png 첨부이미지 미리보기 첨부이미지 미리보기 첨부이미지 미리보기 첨부이미지 미리보기 첨부이미지 미리보기

 

 

 

 

* 컴포넌트 구성하기

 1. 새 프로젝트 생성하기

 2. Screen1 속성에 제목을 Rock-Paper-Scissors로 바꾸기

 

 

 3. 앱 사용법을 설명하기 위해 [레이블] 컴포넌트를 추가한다.

   : 텍스트 상자는 사용자가 텍스트를 입력할 수 있는 상자인 반면, 레이블은 텍스트 속성에 지정된 글을 화면에 표시하는 컴포넌트 이다.  

 

 

 4. 레이블 속성 : 배경색-노랑, 글꼴 굵게-선택, 글꼴 크기-28, 너비-부모에 맞추기, 텍스트-흔들면 가위바위보가 됨, 텍스트 정렬-가운데

 

 

 5. 가위, 바위, 보 이미지 추가를 위한 [이미지] 컴포넌트 추가. 속성은 기본 설정값

 

 

 6. 스마트폰이 흔들리는 것을 감지하기 위해 [가속도 센서] 컴포넌트 추가

 

 7. 가속도 센서의 속성 값 : 최소간격-1000, 나머지는 기본 설정 값

 

 8. 텍스트를 음성으로 바꾸기 위해 [음성 변환] 컴포넌트 추가. 속성은 기본값

 

 

 9. 가위, 바위, 보 이미지를 [미디어]-[파일 올리기]로 올린다.

 

 

 

 

* 프로그래밍 하기

 1. 선택된 값(가위, 바위, 보)을 저장하기 위한 변수를 만들기 위해 [공통 블록]-[변수]에서 [전역변수 초기화. 변수 이름. 값]을 가져온다.

 

 2. [공통 블록]-[텍스트]에서 [텍스트 블록]을 가져와 연결한다.

 

 3. 스마트폰을 흔들면 가위, 바위, 보가 나타나기 때문에 [가속도 센서]에서 [언제 가속도 센서 흔들림] 블록을 가져온다.

 

 4. 가위,바위,보 세가지 이미지를 임의로 선택하여 선택된 값을 변수에 넣기 위해 [지정하기 .global 변수 이름. 값] 블럭을 연결한다.

 

 

 5. 리스트 항목 중에서 임의의 항목을 선택하기 위해 [공통 블록]-[리스트] 블록에서 [임의의 항목 선택하기 리스트]와 [리스트 만들기] 블록을 연결한다.

 

 6. 리스트를 3개로 만든다.


 

 7. [공통 블록]-[텍스트] 블록의 [텍스트 블록] 3개를 연결하고, 파일명을 입력한다.

 

 8. [이미지1] 컴포넌트의 사진을 선택된 값의 이미지로 지정하기 위해 [지정하기. 이미지1.사진. 값] 블록을 가져온다.

 

 

 9. [공통 블록]-[변수]에서 [가져오기. global 변수_이름] 블록을 연결한다.

 

 

 10. 선택된 값에 따라 음성으로 말하기 위해 [만약 그러면]과 같은 조건 블록을 사용한다. [공통 블록]-[제어]에서 [만약 그러면] 블록을 클릭하여 [만약 아니고... 만약 아니면]으로 만든 후 [언제 가속도_센서1. 흔들림] 블록 아래에 결합한다.

 

 

 

 11. [가져오기. global 변수_이름]과 이미지의 파일명을 비교하여 선택된 값이 1.png(가위)와 같으면 [음성_변환1] 컴포넌트의 [호출. 음성_변환1. 말하기] 블록을 [그러면]에 연결하고 텍스트를 '가위'라고 입력한다. 2.png(바위)와 같으면 '바위', 그 외의 경우엔 '보'라고 입력한다.

 

 

 

 

 

 

 

 

 

 

 

 

*디자인 하기

 1. [디자이너]에서 [팔레트]-[레이아웃]의 [수평배치] 컴포넌트를 뷰어로 가져온다. 수평배치는 컴포넌트들을 화면에 가로로(왼쪽에서 오른쪽으로) 배치시키는 레이아웃 요소이다.

 

 2. 수평배치 속성 : 수평 정렬-중앙, 수직 정렬-가운데, 배경색-없음, 높이, 너비-부모에 맞추기, 이미지-frame.png

 

 3. [수직 배치] 컴포넌트를 [수평 배치1] 안으로 드래그 한다.

 

 4. 수직 배치의 속성 : 수평정렬-중앙, 수직 정렬-가운데, 배경색-없음, 너비, 높이-부모에 맞추기

 

 

 5. 컴포넌트의 [이미지1]을 [수직배치1] 안으로 드래그 한다.

 

 

 

 6. [수평배치] 컴포넌트를 [이미지1] 위로 드래그 한다. 속성은 배경색-없음, 너비-부모에 맞추기이다.

   : 이렇게 하는 이유는 프레임 안에 가위 바위 보 그림이 보이게 하기 위함이다. 그렇지 않으면 가위, 바위, 보 그림이 화면에 꽉 차서 프레임 그림이 의미가 없게 된다.

 

 7. [블록]에서 앱이 처음 실행될 때 화면을 설정하기 위해 [언제 Screen1. 초기화] 블록을 가져온다.

 

 8. [레이블1]의 배경색을 지정하기 위해 [지정하기 레이블1.배경색. 값] 블록을 가져온다.

   : 디자이너에서 색을 지정할 수도 있지만 블록으로 색상을 지정하는 연습을 위해 실습한다.  

 

 

 9. [공통 블록]-[색상]에서 [색상 만들기]+[리스트 만들기] 블록을 연결하고 연두색인 127, 174, 9를 입력한다.

 

 

 10. [레이블1]의 높이를 화면 높이의 1/12로 조정한다.

 

 

 

 

 

* 앱 아이콘 만들기 

 1. [디자이너]의 [Screen1] 컴포넌트를 크릭하여 준비한 아이콘 파일을 올린다.

 

 

 

* 앱 실행하기

 1. [빌드]-[앱(.apk 용 QR 코드 제공)] 클릭

 

 


List of Articles
번호 제목 글쓴이 날짜 조회 수
51 2020 게임제작과 직업교육 실습 자료  twin 2020.12.07 290
» [앱인벤터2 강좌] 가위 바위 보 앱  twin 2019.09.18 2966
49 [앱인벤터2 강좌] 폭탄 돌리기  twin 2019.09.17 1496
48 앱인벤터2 강좌 : 숫자 암기 게임  twin 2018.10.12 2286
47 앱인벤터2 강좌: fingerFind5 게임  twin 2018.10.12 1737
46 과제알림장 앱 만들기  twin 2018.10.12 2431
45 문자메시지 보내기  twin 2018.10.12 1794
44 메모장 앱 만들기  twin 2018.10.12 1633
43 앱인벤터 동영상 강좌 app123.kr  twin 2018.09.17 51716
42 색상 팔렛트 만들기  twin 2018.09.14 1535
41 지도에 내 위치 표시하기  twin 2018.09.14 5742
40 스톱워치 만들기  twin 2018.09.14 7688
39 [앱 인벤터2] 두더지 잡기 게임2  twin 2018.09.14 2620
38 [앱인벤터] 예제 - 두더지 게임  twin 2018.09.11 11717
37 [앱 인벤터2] 우주선게임  twin 2018.08.30 2701
36 [앱 인벤터2] 간단한 계산기  twin 2018.08.30 3013
35 [앱 인벤터2] 공튀기기  1 twin 2018.08.30 2422
34 [앱인벤터2] Extension(확장기능)을 사용한 깜박이는 플래시라이트  twin 2018.08.27 2130
33 [앱인벤터2] PasswordTextBox와 TinyDB를 사용한 PIN 번호 체크  twin 2018.08.27 3036
32 [앱인벤터] ListPicker와 WebViewer를 이용한 내가 즐겨찾는 사이트 앱  twin 2018.08.27 2783
Board Pagination Prev 1 2 3 Next
/ 3