스크래치 기초 2-1 : 키보드로 움직이는 객체 만들기

오늘은 키보드의 방향키 조작에 의해 움직이는 객체가 있는 스크래치를 만들어보려고 합니다.

그전에 이전 시간에 사용했던 오프라인 스크래치 에디터 대신에 크롬 플러그인이 설치된 크롬에서 열린 온라인 에디터를 사용해 보고자 합니다.

이렇게 하면 온라인 공유, 온라인 저장, 블록 중 특정 단어 검색, 더 많은 스프라이트 검색 등이 가능해집니다.

설치방법은 크롬 앱스토어에서 '스크래치'라고 검색하면 나오는 결과 중에 'Scratch 3 Developer Tools'를 크롬에 플러그인으로 설치하면 됩니다.

 

위와 같이 스크래치 플러그인이 크롬에 설치된 상태에서 스크래치에 로그인해서 상태를 보면 새롭게 'Ctrl + F' 기능을 가진 블록 검색창이 추가되어 있습니다. 또한 검색창은 마우스로 클릭 시 드롭다운 메뉴도 지원합니다.

아래의 이미지는 크롬에서 플러그인을 장착하고 실행된 스크래치와 오프라인용 스크래치 앱 실행화면을 비교하여 올린 사진입니다.

온라인에서는 오프라인에 비해 전체적으로 조금 더 확장성이 좋아지는 느낌입니다. 당연하지만 회원가입까지 완료될 경우 결과물의 공유도 가능합니다.

 

 

이제 본래의 의도인 키보드에 반응하는 스크래치를 만들어 보겠습니다.

기본 스트라이프인 고양이를 삭제하고 스트라이프 고르기에서 버스를 선택합니다.

 

스프라이트 창에 로딩된 스프라이트 이름을 City Bus에서 스쿨버스라고 바꾸어 줍니다.

 

이제 화살표 오른쪽 방향키를 누르면 스쿨버스가 오른쪽으로 나가는 블록을 만들어야 합니다.

스크립트 탭의 팔레트 중 이벤트 팔레트를 클릭한 뒤, '스페이스 키를 눌렀을 때' 블록을 삽입합니다.

스페이스 드롭다운 메뉴를 클릭하고 '오른쪽 화살표'를 선택해 줍니다.

 

다음으로 동작 팔레트를 클릭하고 '10만큼 움직이기' 블록을 삽입합니다. 이때 우 방향 화살표 키보들 눌렀을 때 10씩 이동은 너무 빠르므로 3 정도로 수정해 줍니다.

키보드의 오른쪽 화살표로 테스트해보면 적당히 잘 움직이는 것이 보일 것입니다.

마우스로 클릭해서 자동차를 들어다 원래 위치에 놓을 수 있습니다.

 

이제 스쿨버스가 키보드의 좌측 방향 화살표 키에 반응해서 좌측으로 후진하는 것도 만들어야 합니다.

기존의 블록 옆의 빈 공간에 새로운 블록조합을 그대로 만들면 됩니다.

이벤트 팔레트의 스페이스키를 눌렀을 때와 동작 팔레트의 10만큼 움직이기를 차례로 넣어준 뒤, 내용을 왼쪽 화살표와 -3만큼 움직이기로 바꾸어 줍니다. 오른쪽은 +방향이고 왼쪽은 -방향이라고 생각하시면 됩니다.

잘 작동하는지 키보드의 좌우 방향키를 움직여 확인해 봅니다.

 

시작이 반이라고 했습니다. 이번 포스팅에서는 일단 스트라이프가 키보드의 화살표에 반응하는 것까지만 만들어 보도록 하겠습니다.

다음 포스팅에서는 스쿨버스의 움직임에 따른 색상변경 및 배경 변화 등 몇 가지 요소를 추가해 보도록 하겠습니다.

수고하셨습니다.