Welcome to Boki's Blog!!
Web Developer-
스크래치 2강 - 귀신 잡기
1강에 이어서 2강 시작!
출처-이 강의들은 코드클럽SW교육기부단 자료를 토대로 재구성하였습니다.
완성사진
마우스 클릭으로 몬스터(귀신)을 잡는 게임입니다!
그림 크기가 너무 작아서 안보인다하시는분들은 그림에 마우스 우측클릭->새 탭에서 이미지 열기를 눌러주시거나 맨 밑에 코드 완성본이 있습니다.
그리고 스프라이트1은 안쓸거기때문에 저기 휴지통 부분을 클릭해서 지워주세요
우측 아래 배경고르기->배경 고르기를 눌러서 Woods를 검색해서 배경을 클릭해서 추가해줍니다.
배경1은 안 쓸 예정이므로 배경1을 클릭해서 아까 스프라이트를 지워준것처럼 지워줍니다.
다시 코드탭을 눌러주세요
우측 하단의 고양이모양(스프라이트)에 마우스를 가져다대고 위에 나오는 메뉴중에 스프라이트 고르기를 눌러주세요
위에 검색 칸에 Gho까지 쳐서 Ghost 스프라이트를 골라주세요.
이벤트-클릭했을때를 쭈욱 끌어서 가운데 빈화면에 옮겨주세요
이 버튼이 프로그램을 시작하는기능입니다! 다른 프로그래밍 언어에서는 main함수라고 부른답니다.
제어-무한 반복하기를 끌어다가 밑에 붙여주세요
그리고 무한 반복하기 안에다가 형태-숨기기를 넣어주세요
다시 제어-1초 기다리기를 숨기기 밑에 붙여주세요
그리고 다시 형태-보이기를 1초 기다리기 밑에 붙여주세요
다시 제어-1초 기다리기를 숨기기 밑에 붙여주세요
동작-x: ~, y:~ (으)로 이동하기를 보이기 위에다 놓아주세요
그리고 연산-1부터 10까지의 난수를 끌어다가 x와 y부분에 2번 원 안에 들어가게 놓아주세요
그리고 x와 y 둘다 -150부터 150까지로 바꿔줄게요
다음으로 형태-크기를 100%로 정하기(10만큼 바꾸기 아님)을 끌어다가 그 밑에다 붙여주세요.
위에서 한것처럼 연산-1부터 10까지의 난수를 끌어서 안에다 넣어주고 숫자를 10부터 200사이의 난수로 바꿔줄게요
이쯤했으면 실행을 한번 해볼까요? 우측에 깃발을 눌러서 동작을 확인해볼게요
오 1초 간격으로 랜덤한 곳에서 나왔다가 사라졌다가 반복하고있죠? 일단 빨간색을 눌러서 종료시켜줄게요
자 이젠 변수탭에 가서 변수 만들기를 누르고 시간, 점수 2개의 변수를 만들어줄거에요
이번엔 또 다른 클릭했을 때를 만들어볼게요. 위에 블럭에 이어붙이지 말고 다른곳으로 끌어서 이벤트-클릭했을 때를 만들어주세요
그리고 변수탭에 들어가서 나의 변수을(를) 0로 정하기를 끌어다가 2번 밑에 붙여주세요
그리고 시간을 15로 바꿔줄게요
제어-~까지 반복하기를 끌어다가 밑에 붙여주세요
연산에서 ~ = 50을 끌어다가 ~까지 반복하기의 ~에 넣어주세요 그리고 숫자를 0으로 바꿔주세요
그리고 변수-시간을 끌어다가 앞에 ~ 부분에 집어넣을게요
제어-1초 기다리기를 끌어서 시간=까지 반복하기 안쪽에 넣어주세요
변수-나의 변수를 1만큼 바꾸기(정하기 아님!)을 끌어다 그밑에 놓고 변수를 시간으로 바꾸고 숫자를 -1으로 할거에요
이제 시간이 다 지나면 멈춰야되기때문에 제어-멈추기(모두)를 끌어다가 그 밑에 붙여주세요
한번 실행해보고 15초 동안 시간이 줄고있다가 0이되면 프로그램이 멈추는걸 확인할 수 있습니다.
이제 클릭했을때 잡히는 동작을 구현해볼거에요
제어-이 스프라이트를 클릭했을 때를 끌어다가 새로운 블럭을 만들어주세요
변수-나의 변수를 1만큼 바꾸기를 끌어서 밑에 붙여주고 나의변수를 클릭해서 점수로 바꿔줍니다
형태-모양을 ~(으)로 바꾸기를 끌어다가 붙여줍니다
그리고 ghost-a를 ghost-c로 바꿔줍니다
그대로 안녕!을 2초동안 말하기를 끌어다가 안녕!을 으악!으로 바꿔주고 0.3초로 바꿔줍니다!
그리고 형태-숨기기를 밑에 붙이고 다시 ghost-a(으)로 바꾸기 블록을 끌어다 놓아줍니다
이제 한번 깃발을 눌러서 실행해볼까요? 이번에는 스프라이트를 클릭하면 사라지고 점수가 올라갑니다!!
1차 완성본
스프라이트 고르기를 눌러서 하나 더추가해줍니다. 마음에 드는 아무거나 해도 돼요! 전 Dot이라는 우주강아지?로 골랐어요
자 이제 여기서 팁 들어갑니다! 첫번째 스프라이트 Ghost를 클릭해주세요
그리고 맨 위에 블럭을 한번 클릭한 후에 Ctrl+C 키를 눌러줍니다
Dot 스프라이트를 다시 눌러서 Ctrl+V를 눌러볼까요?
와 블럭이 똑같이 복사됐네요!
그리고 1초 기다리기 위와 아래 2블록을 0.7초로 바꿔줍니다.
다시 또 고스트 스프라이트를 누르고 이번에는 우측 이 스프라이트 클릭했을때를 클릭해서 Ctrl+C를 해주고
옆에 두번째 스프라이트를 눌러서 Ctrl+V를 해줍니다
도중에 실수했다고치면 Ctrl+Z를 눌러서 뒤로가기를 해주면됩니다!^^
이번에는 점수를 2점으로 바꾸고, 모양을 dot-d로 바꾸고, 맨 밑에 모양을 dot-a로 바꿔줍니다.
아 참! 으악!을 말하기에서 멍멍!으로 말하기로 바꿔줬어요ㅎㅎ
처음 Ghost를 잡으면 1점, 두번째 Dot을 잡으면 2점이 올라가요. 근데 얘는 0.7초만 나오고 사라져서 빨리사라지는거에요!!
이제 마지막 함정 스프라이트를 만들어줄거에요
스프라이트 고르기에서 또 하나를 골라주세요. 저는 Wizard-toad라는 마법개구리를 골랐어요
이번에도 아까처럼 2번째 스프라이트에서 왼쪽 오른쪽 블록을 두번 복사 붙여넣기 해줍시다(동시에는 안돼요)
이번엔 개구리를 클릭했을 때 점수를 -1로 바꿔줄게요.
모양은 wizard-toad-b로 바꿔주고, 멍멍!에서 개굴!로 바꿔주고 맨 밑에 모양을 wizard-toad-a로 바꿔줍니다.
휴 이제 끝났어요! 오류가 있다면 이 완성본을 보기전에 자기힘으로 먼저 에러를 찾아보는것을 권장합니다!
그럼 모두 고생많았어요. 여기까지 마무리해볼게요. 이 파일은 자기 컴퓨터에 저장해서 스크래치 홈페이지에 로그인하고 파일 올려서 자기만의 작업실에 업데이트하는거를 추천합니다!
코드 완성본
추가로 1강에서 배웠던 배경음을 추가해보는것도 좋습니다!
영상입니다.
-
스크래치 1강 - 바다 수영
자 드디어 1강 시작!
출처-이 강의들은 코드클럽SW교육기부단 자료를 토대로 재구성하였습니다.
완성사진
상어와 벽 충돌을 피해 끝까지 도달하는 게임입니다!
시작하기에 앞서 밑의 스크래치 바다수영 배경사진을 다운로드 받아주세요.
다른 이름으로 저장하기에 눌러서 바탕화면 혹은 자기가 원하는 위치에 받아주세요
스크래치 강의 바다수영 배경
그림 크기가 너무 작아서 안보인다하시는분들은 그림에 마우스 우측클릭->새 탭에서 이미지 열기를 눌러주시거나 맨 밑에 코드 완성본이 있습니다.
하얀색 부분에 닿으면 빨라지고, 초록색 이끼에 닿으면 느려지게 만들겁니다.
스크래치를 실행해주세요
그리고 스프라이트1은 안쓸거기때문에 저기 휴지통 부분을 클릭해서 지워주세요
우측 아래 배경고르기->배경 업로드를 눌러서 아까 받은 배경파일을 불러와주세요
그럼 이 화면이 뜰텐데, 위에 배경1은 안 쓸 예정이므로 배경1을 클릭해서 아까 스프라이트를 지워준것처럼 지워줍니다.
다시 코드탭을 눌러주세요
우측 하단의 고양이모양(스프라이트)에 마우스를 가져다대고 위에 나오는 메뉴중에 스프라이트 고르기를 눌러주세요
여기에서 오늘 저희가 이동할 캐릭터(스프라이트)를 골라줄거에요! 전 조금 내려서 Diver1을 고를게요
그럼 우측 화면에 다이버가 화면 한가득 차지하고 있을거에요 엄청 크니까 크기를 줄여줄게요 16정도로 만들어주세요
- 너무 작게 보이지만 어차피 최대화를 해서 게임을 할거기때문에 괜찮습니다!
그리고 가운데에 있는 다이버를 끌어서 맵 왼쪽 아래 시작점으로 옮겨주겠습니다
그럼 이 사진 상태가 되실거에요 이제 코드블럭들을 옮겨가면서 프로그램을 만들어보겠습니다!
이벤트-클릭했을때를 쭈욱 끌어서 가운데 빈화면에 옮겨주세요
이 버튼이 프로그램을 시작하는기능입니다! 다른 프로그래밍 언어에서는 main함수라고 부른답니다.
시작하면 일단 0도를 바라보게 만들거에요 동작 탭에 가서 90도 방향 보기를 끌어서 0으로 바꿔주세요
그리고 처음 시작점에서 시작할 수 있게 만들어줄거에요. x:~, y: (으)로 이동하기를 끌어서 그 밑에 붙여주세요
- 현재 위치가 자동으로 적용이 돼요. 혹시나 캐릭터가 아직 맵 중앙에 있는 사람들은 캐릭터를 끌어서 시작점으로 옮겨주신 후, 그 x,y값으로 바꿔주세요!!
그 다음에는 주황색 제어 블록에 들어가서 무한 반복하기를 끌어서 밑에 붙여주세요
그 밑에 만약 ~라면 블록을 드래그해서 무한 반복하기 안에다 넣어줄게요
초록색 연산 블록에 들어가서 x > 50 블록을 드래그해서 저기 만약 ~라면 블록 안에다 넣어줄게요(하얗게 색이 변해야 안에 들어가져요)
50을 5로 바꿔주세요
이번엔 하늘색 감지 탭에 들어가서 마우스 포인터까지의 거리를 끌어서 x > 5 에서 x부분에 정확히 넣어주세요(하얀색 체크!)
다시 파란색 동작 탭을 눌러서 마우스 포인터 쪽 보기랑 10만큼 움직이기를 끌어서 만약~라면 블록 안에 넣어주시고 10을 1로 바꿔주세요!
우측 상단의 초록색 깃발을 눌러서 실행해보세요 마우스를 따라서 움직이는걸 확인할 수 있을거에요
그리고 추가로 맨오른쪽의 4방향 화살표를 누르면 최대화가 되어서 큰화면에서 테스트해볼수있어요
확인했으면 옆에 빨간색을 눌러서 정지해주세요
이제 충돌을 만들거에요
모양 을 눌러주세요 그리고 diver1을 마우스 오른쪽 클릭에서 복사를 해주세요(다른 캐릭터로 한 친구들도 똑같이 해주세요)
그리고 이름을 crush로 바꿔줄게요!! 그리고 비트맵으로 바꾸기를 눌러주세요
- 벡터로 바꾸기라고 되어있는 분들은 안눌러도돼요 (이미 비트맵임)
그리고 오른쪽아래 사각형이 선택되어있는 상태로 이제….우리 다이버를 찢..(!?!?)어..줄게요
- 벽에 충돌했을때 모양을 나타낼거에요 사각형으로 드래그해서 놓아주면됩니다
- 맘에 안들면 Ctrl+Z를 눌러서 뒤로가기해서 다시하면돼요!
전 이렇게 3단분리(?)를 해줬어요
그럼 다시 코드 탭을 눌러서 돌아올게요
제어 탭에 만약 ~라면을 드래그해서 밑에 붙여주세요
자 이제 하늘색 감지 탭에서 ~ 색에 닿았는가?를 끌어서 만약~라면에 ~쪽에 끌어다 놓아주세요
그리고 안에 색상을 클릭하고 밑에 스포이드를 클릭해주시면 이렇게 맵 화면이 집중될거에요 여기서 벽 색깔인 갈색을 콕 찝어주세요!
그리고 보라색 모양 탭에 들어가서 모양을 crush로 바꾸기를 끌어서 블록 안에 끌어놓아주세요
- 아까 충돌모양을 만들고 이름을 안바꾼 사람들은 crush가 아닐수도있어요! 보통 원래이름2 가 붙습니다. 당황하지마세요!
추가로 맨 위에 안녕!을 2초 동안 말하기를 그 밑에 드래그해주고 안녕!을 안돼!로 바꿔주세요
충돌 후 모양을 원래 모양으로 바꾸고, 처음 위치로 돌려보내주고 0도를 바라보게 해줄거에요.
모양탭에서 crush를 끌어서 crush를 클릭해서 그 위에 원래 모양을 클릭해주고, 동작 탭에 들어가서 0도 방향보기, x:~, y:~ (으)로 이동하기
- x,y는 처음 위치로 가줘야 하기 때문에 초기값으로 바꿔주세요
그럼 최대화를 시켜서 다시 실행해볼까요? 와 이제 게임처럼 된거같아요
이제는 목적지에 도착한 경우를 만들어볼게요
위와 같이 1.제어-만약~라면 2.감지-색에 닿았는가? 색을 클릭하고 스포이드를 클릭해 우측아래 살색깔을 클릭해줘서 색을 바꿔준다
3.형태-안녕!을 2초동안 말하기를 끌어서 안녕!을 도착!으로 바꿔주고, 제어 탭에들어가서 멈추기<모두>를 끌어서 그 밑에 드래그해줄게요
자, 이제 다시 실행해서(큰화면 추천) 끝에 도착하면 정말 도착!이라고 말하면서 프로그램이 멈추는지 테스트해볼게요
전 잘 작동하네요^^ 오류가 있으시면 댓글 달아주세요
그리고 이렇게만 하면 뭔가 아쉽죠? 추가로 시간을 줄거고, 맵에 보시면 하얀색 화살표와 초록색 이끼들이 보일거에요. 그거를 또 활용해줄거에요
주황색 변수 탭에 들어가서 변수 만들기를 누르고 시간이라고 치고 엔터를 눌러줄게요
그럼 이벤트 탭에 들어가서 클릭했을때를 끌어서 이번엔 2번째 블록을 만들어주세요(옆에)
그 밑에 변수를 눌러서 나의변수을(를) 0로 정하기를 끌어서 그 밑에 붙여주세요
그리고 나의변수를 클릭해서 아까 만든 시간으로 바꿔주세요!!(중요)
추가로 제어 탭에 들어가서 무한 반복하기, 그리고 안쪽에 1초 기다리기 / 변수 탭에 들어가서 나의 변수를 1만큼 바꾸기를 밑에 두고 똑같이 시간으로 바꿔주세요
다시 실행해서 살펴보면 시간이 1초마다 증가하는걸 볼수있을거에요!
- 여기에서 안바뀐다면 <나의변수>가 아니라 <시간>으로 되어있나 확인해보세요!
자 이제 빠르게 진행! 1.제어-만약 ~라면 2.감지-~색에 닿았는가?(스포이트 클릭, 흰색 화살표로 색 바꿔주기) 3.동작-10만큼 움직이기를 끌어서 3만큼 움직이기로 바꿔줄게요 하얀 화살표에 닿으면 빠르게 갈수있게만들어줄거에요
위에서 했던것처럼 반복해서 초록색 이끼 구현 1.제어-만약 ~라면 2.감지-~색에 닿았는가?(이끼색으로 변경) 3.제어-1초 기다리기를 0.04초 기다리기로 변경
- 1초로 하면 캐릭터가 진행을 못해요 ㅋ큐ㅠㅠㅠ
게임이 너무 쉬우면 스프라이트 크기를 키우고, 어렵다면 크기를 줄이면 됩니다!
이제 bgm(배경음악)을 넣을거에요 왼쪽 위에 코드 탭이 아닌 소리 탭을 클릭해주세요
왼쪽 아래에 스피커 모양을 클릭해서 소리 고르기를 눌러주세요. 그리고 Bonk, Cave, Tada를 찾아서 추가해주세요!!
- 임의의 소리를 듣고 추가해도 상관없습니다.
다 하시면 이렇게 됐을텐데 다시 코드로 돌아옵니다.
이번에도 시간을 했을때처럼 밑에블록추가가 아닌 옆에다 둘거에요. 1.이벤트-클릭했을때 2.제어-무한반복하기 3.소리-Cave를 *끝까지 재생하기
- Cave가 아니라면 클릭해서 Cave로 바꿔주세요! 이거를 배경음으로 쓸거랍니다.
Cave처럼 소리에서 이번엔 끝까지 재생하기가 아닌 재생하기를 끌고와서 색에 닿았는가 밑에 각각 옮겨주시고 Bonk,Tada로 바꿀게요
시작할때 부서진 모양 상태에서 실행되면 안되기때문에 이렇게 처음에 모양을 기본 모양으로 시작되도록 바꿔주세요.
그리고 다시 실행해볼게요!! 벽에 닿았을 때 소리와 도착했을 때 소리가 나죠? 이제 진짜 게임같네요.
그럼 모두 고생많았어요. 여기까지 마무리해볼게요. 이 파일은 자기 컴퓨터에 저장해서 스크래치 홈페이지에 로그인하고 파일 올려서 자기만의 작업실에 업데이트하는거를 추천합니다!
코드 완성본
추가로 상어와 돌아가는 막대를 추가한 영상입니다.
-
스크래치 프로그램 사용법 간단 소개
자 오늘은 스크래치 프로그램 사용법을 간단하게 소개하겠습니다.
- 1번은 어떤 코드를 쓸건지 메뉴형식의 버튼으로 구분되어있는 탭이에요
- 2번은 실제 코드블럭들이 있는 탭으로, 저 코드들을 3번 탭으로 끌어주면 코드가 동작해요
- 3번은 실제로 코드를 짜주는 곳이에요. 나중에 설명할텐데 코드는 각 스프라이트(캐릭터) 마다 동작해요
- 4번은 실행화면이에요 위에 초록색 깃발을 누르면 실행하고 빨간색 네모버튼을 누르면 정지해요 그리고 우측의 확대,축소,보통버튼으로 크기를 조절할 수 있어요
- 5번은 스프라이트(캐릭터)가 오는 곳이에요
- 6번은 배경이 오는 곳이에요
- 7번은 스프라이트의 모양이나 배경모양, 소리등을 바꿀 수 있는 곳이에요
마지막으로 파일을 눌러서 나오는 것 설명
- 새로 만들기는 프로젝트를 새로 만드는 메뉴!
- Load from your computer는 친구가 만들거나 다운로드 받은 스크래치 프로젝트 파일을 여는 메뉴에요
- 컴퓨터에 저장하기는 내가 만든 프로젝트를 컴퓨터에 파일로 저장하는거에요
프로젝트를 만들고 꼭 저장을 해주고 홈페이지에 로그인해서 자신의 작업실에 파일을 올려요!
-
스크래치 가입
먼저 스크래치를 배우기에 앞서, 홈페이지에 가입하자
- 우측 상단의 스크래치 가입 버튼을 누른다
- 아이디와 비밀번호를 입력한다
- 화살표를 누르고 K를 입력해 Korea, Republic of를 선택해준다. 참고로 위에 Korea, Democratic ~~는 북한이다 ㅋㅋㅋ
- 태어난 날짜를 선택한다
- 성별을 선택한다
- 이메일을 입력하고 계정 만들기를 누른다
- 자신의 이메일로 계정 인증 메일이 날라오는데, 계정 인증 버튼을 눌러주자
로그인 이후에 우측 상단 아이디를 클릭해, 내 작업실에 들어가면 내가 컴퓨터로 만든 스크래치 파일을 올릴 수 있다.
- 집이 아닌 다른 장소(학교 컴퓨터실)에서 작업을 하고 파일로 저장을 하고 업로드를 하면 계속 유지할 수 있다는 뜻이다.
- 우측 상단의 스크래치 가입 버튼을 누른다
-
스크래치 설치
스크래치를 PC에 설치하기
여기 밑에 윈도우, 맥중에 선택해서 밑에 바로 다운로드 버튼을 누른다(열기 혹은 다운로드로 다운로드한다)
Only for me를 선택한 후 설치를 한다설치가 다 끝나면…
바탕화면에 바로가기 파일을 더블클릭 해주거나, 못찾겠으면 Ctrl키와 Alt사이에 윈도우키를 눌러서 Scra라고 입력해주고 Scratch Desktop을 열어준다
실행한 화면
간혹가다 한글이 아닌 경우엔 저기 버튼을 눌러서 한국어를 눌러주자
-
Youtube Computer Recoding with Cover(컴퓨터로 유튜브 영상을 녹화할때 보이고싶지 않은 부분을 가려주는 프로그램)
Youtube Computer Recoding with Cover
컴퓨터로 유튜브 영상을 녹화할때 보이고싶지 않은 부분을 가려주는 프로그램입니다!!
프로그램 종료시 크기를 기억하며, 도움창을 다시 열지 않음 눌렀음에도, 2일동안 프로그램을 사용하지 않는다면 다시 창이 뜨게 됩니다! 계속 사용해주세요
프로그램 문의, 광고 문의는 lsb530@naver.com로 주시면 됩니다^^
다운로드 링크 첨부 밑에!!!
CoverAreaForYoutuber 아래 클릭
Recent Posts
Categories
Tags