Boki Web Dev Engineer

스크래치 1강 - 바다 수영

2020-10-01
boki

자 드디어 1강 시작!

출처-이 강의들은 코드클럽SW교육기부단 자료를 토대로 재구성하였습니다.

완성사진

image

상어와 벽 충돌을 피해 끝까지 도달하는 게임입니다!

시작하기에 앞서 밑의 스크래치 바다수영 배경사진을 다운로드 받아주세요.

다른 이름으로 저장하기에 눌러서 바탕화면 혹은 자기가 원하는 위치에 받아주세요

스크래치 강의 바다수영 배경

보트

그림 크기가 너무 작아서 안보인다하시는분들은 그림에 마우스 우측클릭->새 탭에서 이미지 열기를 눌러주시거나 맨 밑에 코드 완성본이 있습니다.

하얀색 부분에 닿으면 빨라지고, 초록색 이끼에 닿으면 느려지게 만들겁니다.

스크래치를 실행해주세요

그리고 스프라이트1은 안쓸거기때문에 저기 휴지통 부분을 클릭해서 지워주세요

image image

우측 아래 배경고르기->배경 업로드를 눌러서 아까 받은 배경파일을 불러와주세요

image

그럼 이 화면이 뜰텐데, 위에 배경1은 안 쓸 예정이므로 배경1을 클릭해서 아까 스프라이트를 지워준것처럼 지워줍니다.

image

다시 코드탭을 눌러주세요

image image

우측 하단의 고양이모양(스프라이트)에 마우스를 가져다대고 위에 나오는 메뉴중에 스프라이트 고르기를 눌러주세요

image

여기에서 오늘 저희가 이동할 캐릭터(스프라이트)를 골라줄거에요! 전 조금 내려서 Diver1을 고를게요

image

그럼 우측 화면에 다이버가 화면 한가득 차지하고 있을거에요 엄청 크니까 크기를 줄여줄게요 16정도로 만들어주세요

  • 너무 작게 보이지만 어차피 최대화를 해서 게임을 할거기때문에 괜찮습니다!

image

그리고 가운데에 있는 다이버를 끌어서 맵 왼쪽 아래 시작점으로 옮겨주겠습니다

image

그럼 이 사진 상태가 되실거에요 이제 코드블럭들을 옮겨가면서 프로그램을 만들어보겠습니다!

image

이벤트-클릭했을때를 쭈욱 끌어서 가운데 빈화면에 옮겨주세요

이 버튼이 프로그램을 시작하는기능입니다! 다른 프로그래밍 언어에서는 main함수라고 부른답니다.

image image

시작하면 일단 0도를 바라보게 만들거에요 동작 탭에 가서 90도 방향 보기를 끌어서 0으로 바꿔주세요

image

그리고 처음 시작점에서 시작할 수 있게 만들어줄거에요. x:~, y: (으)로 이동하기를 끌어서 그 밑에 붙여주세요

  • 현재 위치가 자동으로 적용이 돼요. 혹시나 캐릭터가 아직 맵 중앙에 있는 사람들은 캐릭터를 끌어서 시작점으로 옮겨주신 후, 그 x,y값으로 바꿔주세요!!

그 다음에는 주황색 제어 블록에 들어가서 무한 반복하기를 끌어서 밑에 붙여주세요

image

그 밑에 만약 ~라면 블록을 드래그해서 무한 반복하기 안에다 넣어줄게요

image

초록색 연산 블록에 들어가서 x > 50 블록을 드래그해서 저기 만약 ~라면 블록 안에다 넣어줄게요(하얗게 색이 변해야 안에 들어가져요)

50을 5로 바꿔주세요

image

이번엔 하늘색 감지 탭에 들어가서 마우스 포인터까지의 거리를 끌어서 x > 5 에서 x부분에 정확히 넣어주세요(하얀색 체크!)

image

다시 파란색 동작 탭을 눌러서 마우스 포인터 쪽 보기랑 10만큼 움직이기를 끌어서 만약~라면 블록 안에 넣어주시고 10을 1로 바꿔주세요!

image image

우측 상단의 초록색 깃발을 눌러서 실행해보세요 마우스를 따라서 움직이는걸 확인할 수 있을거에요

그리고 추가로 맨오른쪽의 4방향 화살표를 누르면 최대화가 되어서 큰화면에서 테스트해볼수있어요

확인했으면 옆에 빨간색을 눌러서 정지해주세요

이제 충돌을 만들거에요

image image image

모양 을 눌러주세요 그리고 diver1을 마우스 오른쪽 클릭에서 복사를 해주세요(다른 캐릭터로 한 친구들도 똑같이 해주세요)

그리고 이름을 crush로 바꿔줄게요!! 그리고 비트맵으로 바꾸기를 눌러주세요

  • 벡터로 바꾸기라고 되어있는 분들은 안눌러도돼요 (이미 비트맵임)

image image

그리고 오른쪽아래 사각형이 선택되어있는 상태로 이제….우리 다이버를 찢..(!?!?)어..줄게요

  • 벽에 충돌했을때 모양을 나타낼거에요 사각형으로 드래그해서 놓아주면됩니다
  • 맘에 안들면 Ctrl+Z를 눌러서 뒤로가기해서 다시하면돼요!

전 이렇게 3단분리(?)를 해줬어요

그럼 다시 코드 탭을 눌러서 돌아올게요

image

제어 탭에 만약 ~라면을 드래그해서 밑에 붙여주세요

image

자 이제 하늘색 감지 탭에서 ~ 색에 닿았는가?를 끌어서 만약~라면에 ~쪽에 끌어다 놓아주세요

image image image

그리고 안에 색상을 클릭하고 밑에 스포이드를 클릭해주시면 이렇게 맵 화면이 집중될거에요 여기서 벽 색깔인 갈색을 콕 찝어주세요!

image

그리고 보라색 모양 탭에 들어가서 모양을 crush로 바꾸기를 끌어서 블록 안에 끌어놓아주세요

  • 아까 충돌모양을 만들고 이름을 안바꾼 사람들은 crush가 아닐수도있어요! 보통 원래이름2 가 붙습니다. 당황하지마세요!

image

추가로 맨 위에 안녕!을 2초 동안 말하기를 그 밑에 드래그해주고 안녕!을 안돼!로 바꿔주세요

충돌 후 모양을 원래 모양으로 바꾸고, 처음 위치로 돌려보내주고 0도를 바라보게 해줄거에요.

모양탭에서 crush를 끌어서 crush를 클릭해서 그 위에 원래 모양을 클릭해주고, 동작 탭에 들어가서 0도 방향보기, x:~, y:~ (으)로 이동하기

  • x,y는 처음 위치로 가줘야 하기 때문에 초기값으로 바꿔주세요

image

그럼 최대화를 시켜서 다시 실행해볼까요? 와 이제 게임처럼 된거같아요

이제는 목적지에 도착한 경우를 만들어볼게요

image

위와 같이 1.제어-만약~라면 2.감지-색에 닿았는가? 색을 클릭하고 스포이드를 클릭해 우측아래 살색깔을 클릭해줘서 색을 바꿔준다

3.형태-안녕!을 2초동안 말하기를 끌어서 안녕!을 도착!으로 바꿔주고, 제어 탭에들어가서 멈추기<모두>를 끌어서 그 밑에 드래그해줄게요

image

자, 이제 다시 실행해서(큰화면 추천) 끝에 도착하면 정말 도착!이라고 말하면서 프로그램이 멈추는지 테스트해볼게요

전 잘 작동하네요^^ 오류가 있으시면 댓글 달아주세요

그리고 이렇게만 하면 뭔가 아쉽죠? 추가로 시간을 줄거고, 맵에 보시면 하얀색 화살표와 초록색 이끼들이 보일거에요. 그거를 또 활용해줄거에요

image

주황색 변수 탭에 들어가서 변수 만들기를 누르고 시간이라고 치고 엔터를 눌러줄게요

그럼 이벤트 탭에 들어가서 클릭했을때를 끌어서 이번엔 2번째 블록을 만들어주세요(옆에)

image image image image

그 밑에 변수를 눌러서 나의변수을(를) 0로 정하기를 끌어서 그 밑에 붙여주세요

그리고 나의변수를 클릭해서 아까 만든 시간으로 바꿔주세요!!(중요)

추가로 제어 탭에 들어가서 무한 반복하기, 그리고 안쪽에 1초 기다리기 / 변수 탭에 들어가서 나의 변수를 1만큼 바꾸기를 밑에 두고 똑같이 시간으로 바꿔주세요

image

다시 실행해서 살펴보면 시간이 1초마다 증가하는걸 볼수있을거에요!

  • 여기에서 안바뀐다면 <나의변수>가 아니라 <시간>으로 되어있나 확인해보세요!

image

자 이제 빠르게 진행! 1.제어-만약 ~라면 2.감지-~색에 닿았는가?(스포이트 클릭, 흰색 화살표로 색 바꿔주기) 3.동작-10만큼 움직이기를 끌어서 3만큼 움직이기로 바꿔줄게요 하얀 화살표에 닿으면 빠르게 갈수있게만들어줄거에요

image image

위에서 했던것처럼 반복해서 초록색 이끼 구현 1.제어-만약 ~라면 2.감지-~색에 닿았는가?(이끼색으로 변경) 3.제어-1초 기다리기를 0.04초 기다리기로 변경

  • 1초로 하면 캐릭터가 진행을 못해요 ㅋ큐ㅠㅠㅠ

게임이 너무 쉬우면 스프라이트 크기를 키우고, 어렵다면 크기를 줄이면 됩니다!

image image

이제 bgm(배경음악)을 넣을거에요 왼쪽 위에 코드 탭이 아닌 소리 탭을 클릭해주세요

왼쪽 아래에 스피커 모양을 클릭해서 소리 고르기를 눌러주세요. 그리고 Bonk, Cave, Tada를 찾아서 추가해주세요!!

  • 임의의 소리를 듣고 추가해도 상관없습니다.

image image

다 하시면 이렇게 됐을텐데 다시 코드로 돌아옵니다.

image

이번에도 시간을 했을때처럼 밑에블록추가가 아닌 옆에다 둘거에요. 1.이벤트-클릭했을때 2.제어-무한반복하기 3.소리-Cave를 *끝까지 재생하기

  • Cave가 아니라면 클릭해서 Cave로 바꿔주세요! 이거를 배경음으로 쓸거랍니다.

image

Cave처럼 소리에서 이번엔 끝까지 재생하기가 아닌 재생하기를 끌고와서 색에 닿았는가 밑에 각각 옮겨주시고 Bonk,Tada로 바꿀게요

image

시작할때 부서진 모양 상태에서 실행되면 안되기때문에 이렇게 처음에 모양을 기본 모양으로 시작되도록 바꿔주세요.

그리고 다시 실행해볼게요!! 벽에 닿았을 때 소리와 도착했을 때 소리가 나죠? 이제 진짜 게임같네요.

그럼 모두 고생많았어요. 여기까지 마무리해볼게요. 이 파일은 자기 컴퓨터에 저장해서 스크래치 홈페이지에 로그인하고 파일 올려서 자기만의 작업실에 업데이트하는거를 추천합니다!

코드 완성본

image

추가로 상어와 돌아가는 막대를 추가한 영상입니다.

유튜브


Similar Posts

Comments