본문 바로가기

앱인벤터

[앱인벤터 기초] 그리기&애니매이션 - 공 이해하기 앱인벤터에서 공은 '캔버스'라는 공간 안에서 움직일 수 있는 컴포넌트입니다. 캔버스와 비슷하게 손가락으로 할 수 있는 액션(드래그, 플링, 터치)에 대해서 이벤트를 호출할 수 있습니다. 터치되는 위치는 X, Y 좌표 값으로 가져올 수 있습니다. X는 왼쪽에서부터 떨어진 픽셀 수입니다. Y는 위쪽에서부터 떨어진 픽셀 수입니다. 다른 이미지스프라이트 또는 공과 충돌하는지 이벤트를 호출할 수 있습니다. 공과 이미지스프라이트의 차이점은 이미지를 파일로 넣을 수 있으면 이미지스프라이트이고, 이미지를 넣을 수 없으면 공입니다. 공 블록 블록 설명 현재 공과 다른 스프라이트가 충돌했을 때 실행되는 이벤트입니다. 회전된 상태의 충돌까지 감지하진 않습니다. 따라서 얇고 긴 스프라이트의 경우 눈으로 보이는 것과 충돌이벤트.. 더보기
[앱인벤터 기초] 그리기&애니매이션 - 이미지스프라이트 이해하기 앱인벤터에서 이미지스프라이트는 '캔버스'라는 공간 안에서 움직일 수 있는 컴포넌트입니다. 캔버스와 비슷하게 손가락으로 할 수 있는 액션(드래그, 플링, 터치)에 대해서 이벤트를 호출할 수 있습니다. 터치되는 위치는 X, Y 좌표 값으로 가져올 수 있습니다. X는 왼쪽에서부터 떨어진 픽셀 수입니다. Y는 위쪽에서부터 떨어진 픽셀 수입니다. 다른 이미지스프라이트 또는 공과 충돌하는지 이벤트를 호출할 수 있습니다. 이미지스프라이트는 움직이는 애니매이션이 있는 컴포넌트로 게임 앱에서 가장 많이 활용합니다. 이미지스프라이트 블록 블록 설명 현재 이미지스프라이트와 다른 스프라이트가 충돌했을 때 실행되는 이벤트입니다. 회전된 상태의 충돌까지 감지하진 않습니다. 따라서 얇고 긴 이미지스프라이트의 경우 눈으로 보이는 것.. 더보기
[앱인벤터 기초] 그리기&애니매이션 - 캔버스 이해하기 앱인벤터에서 캔버스 컴포넌트는 그림을 그리거나 '공' 또는 '이미지스프라이트'가 움직일 수 있는 공간입니다. 손가락으로 할 수 있는 액션(드래그, 플링, 터치)에 대해서 이벤트를 호출할 수 있습니다. 터치되는 위치는 X, Y 좌표 값으로 가져올 수 있습니다. X는 왼쪽에서부터 떨어진 픽셀 수입니다. Y는 위쪽에서부터 떨어진 픽셀 수입니다. 캔버스 안에 선, 원, 원호, 도형, 글자를 그리거나 표시할 수 있습니다. 캔버스 블록 블록 설명 사용자가 캔버스를 드래그 할 때 발생하는 이벤트입니다. 드래그는 처음 시작하는 지점(시작X, 시작Y), 이전 지점(이전X, 이전Y), 현재 지점(현재X, 현재Y) 값을 가져올 수 있습니다. 사용자가 캔버스를 플링(빠른 스와이프) 했을 때 발생하는 이벤트입니다. 왼쪽 상단을.. 더보기
[앱인벤터 예제] 메모장/일기장 앱 만들기 앱인벤터를 이용해 글을 작성해서 저장하는 메모장/일기장 앱을 만들어보도록 하겠습니다. 글을 작성해서 저장하기 때문에 메모장으로 사용해도 되고 혼자 사용하는 일기장으로 사용해도 됩니다. 비밀번호 기능을 추가하면 좀 더 개인적으로 쓸 수 있습니다. 먼저 완성된 앱을 사진으로 확인해봅시다. 동작사진 1. 처음화면입니다. 2. 내용을 클릭해서 글을 입력한 후 저장하기 버튼을 클릭합니다. 3. 파일이름을 입력한 후 저장 버튼을 클릭하면 알림창이 뜹니다. 4. 불러오기 버튼을 클릭하고 파일이름을 입력한 후 열기 버튼을 클릭하면 메모 내용이 화면에 표시됩니다. 5. 메모를 삭제하고 싶으면 삭제하기 버튼을 클릭한 후 파일이름을 입력한 후 삭제 버튼을 클릭하면 됩니다. 이미지 1) 메모 배경 : www.freepik.c.. 더보기
[앱인벤터 예제] 인형뽑기 게임 앱 만들기 앱인벤터를 이용해 인형 뽑기 게임 앱을 만들어보도록 하겠습니다. 인형 뽑기 게임 앱은 기울기 센서를 이용해서 집게를 뽑고 싶은 인형 위로 가져다 놓고 버튼을 터치한 후 입구까지 가져간 후 버튼을 땠을 때 인형을 뽑을 수 있는 게임입니다. 먼저 완성된 앱을 사진으로 확인해봅시다. 동작사진 1. 4개의 인형이 화면에 랜덤하게(무작위로) 배치됩니다. 2. 스마트폰을 기울여서 파란공(집게역할)이 인형 위로 올라가게 합니다. 3. '잡기' 버튼을 누르고 있으면 인형과 파란공이 같이 움직입니다. 4. 검은공(출구역할) 위로 이동한 후 '잡기' 버튼에서 손을 때면 인형이 뽑혔다고 알림창이 뜹니다. 이미지 1) 인형 www.freepik.com/free-icon/matryoshka_921819.htm#page=1&qu.. 더보기
[앱인벤터 예제] 두더지 게임 앱 만들기 앱인벤터를 이용해 두더지 게임 앱을 만들어보도록 하겠습니다. 두더지 게임은 화면에 두더지가 나타날 때 두더지를 터치하면 점수가 늘어나는 게임입니다. 일정 시간안에 점수를 많이 획득해야 합니다. 먼저 완성된 앱을 사진으로 확인해봅시다. 동작사진 1. 앱 시작화면입니다. 게임시작 버튼을 클릭하면 게임이 시작됩니다. 2. 9마리 두더지가 화면에 나타나고 무작위로 두더지가 밖으로 나옵니다. 3. 밖으로 나온 두더지를 터치하면 점수가 5점씩 늘어나게 됩니다. 4. 30초가 지나면 두더지가 사라지고 최종점수만 남게 됩니다. 이미지 1) 배경이미지 www.freepik.com/free-vector/man-digging-hole-park_4932759.htm#page=1&query=hole&position=18 화면구.. 더보기
[앱인벤터 예제] 스톱워치 앱 만들기 앱인벤터를 이용해 스톱워치 앱을 만들어보도록 하겠습니다. 지금 만들 스톱워치는 '시작'버튼을 눌렀을 떼 분과 초를 재고 '기록' 버튼을 누르면 화면 아래에 목록에 시간이 기록되도록 구성했습니다. 먼저 완성된 앱을 사진으로 확인해봅시다. 동작사진 1. 시작 버튼을 클릭해서 스톱워치를 동작시킵니다. 시작 버튼이 정지 버튼으로 바뀝니다. 2. 정지 버튼을 클릭하면 스톱워치가 멈춥니다. 정지 버튼이 시작 버튼으로 바뀝니다. 3. 다시 시작 버튼을 클릭하면 처음부터 시작하고 기록 버튼을 클릭하면 아래 목록에 시간이 기록됩니다. 화면구성 전체적인 화면구성입니다. 가장 위에는 수평배치 안에 레이블을 3개 넣어서 시간을 구분하며 표시하게 구성하였고, 가운데에는 버튼을 2개 넣어서 시작버튼과 기록버튼으로 구성하였습니다... 더보기
[앱인벤터 예제] 벽돌깨기 앱 만들기 앱인벤터를 이용해 벽돌깨기 앱을 만들어보도록 하겠습니다. 벽돌깨기 게임(Breakout-style game)은 고전게임 중 하나인데 화면 안에서 움직이는 볼을 화면 아래로 떨어지지 않게 바(막대기)를 움직여서 벽돌들을 전부 깨뜨리는 게임입니다. 먼저 완성된 앱을 사진으로 확인해봅시다. 동작사진 1. 스위치를 터치해서 게임을 시작합니다. 막대기를 드래그하면 좌우로 이동합니다. 2. 공이 벽돌을 깨도록 합니다. 3. 공이 바닥에 닿으면 게임이 종료됩니다. 이미지 이번 앱에서 사용되는 이미지를 다운받을 수 있도록 하였습니다. 다운로드 받아서 사용하시면 됩니다. 1) 바(막대기) 2) 주황색 벽돌 3) 연두색 벽돌 4) 하늘색 벽돌 화면구성 전체적인 화면구성입니다. 가장 위에는 레이블을 넣어서 점수를 보여주게 .. 더보기

티스토리툴바