5.1.1 멍멍이와 야옹이가 인사해요1 - 순차
우리는 이전 장에서 엔트리 블록코딩에서 코딩하는 것과 파이게임제로에서 코딩하는 것과의 근본적인 구조적차이를 이해했다. 그것을 기반으로 엔트리 기초책의 7가지의 예제를 하나씩 엔트리-파이썬이 아닌 실제 파이썬 코딩을 통해 만들어 보자. 다만, 이를 구현하기 위해서는 파이게임제로 라이브러리만으로 기능적으로 모자란 부분이 있다. 따라서, 이를 보완해 줄추가적인 사용자 라이브러리가 필요하고, 우리는 먼저 이 사용자 라이브러리(user library, 기본 내장이 아닌 사용자가 필요에 의해 추가로 만들어진 라이브러리)인 pgzhelper 라이브러리를 호출하는 것으로부터 시작하겠다.
pgzhelper 는 스크래치 블록코딩 한 것을 파이게임제로 포팅(porting)하는(똑같이 기능구현하는) 과정에서 파이게임제로 자체 한계로 인해 어려움이 있었던 부분을 개선하기 위해 싱가포르의 Cort 라는 개발자가 최초로 만든 것으로, 로보틱스웨어에서도 유사한 이유로 엔트리 블록코딩을 파이게임제로로 포팅을 용이하게 하기위해 이 라이브러리에 추가 기능을 더해 보완하였고, 이를 코드 공개 사이트인 깃허브(https://github.com/roboticsware/pgzhelper)에서 공개하고 있다.
코드의 맨 첫번째 라인은 pgzhelper라는 라이브러리를 호출하는 부분이다. 라이브러리 호출하는 문법은 크게 두 가지가 있는데 기존에 import pgzhelper 라고 사용하는데 익숙할텐데, 이 경우에는 다음과 같은 새로운 문법으로 라이브러리를 호출하는게 필요하다.
from 라이브러리명 import *
이렇게 호출하게 되면, 장점이 기존에는 라이브러리 안에 함수를 호출하기 위한 문법으로 항상 <<라이브러리명.함수명>> 으로 사용했어야 했는데, 이제는 문법이 앞단에 라이브러리명 없이 직접 함수명만 가지고도 종전과 동일하게 호출이 가능하게 된다.
엔트리 좌표계와 파이게임 좌표계의 비교
엔트리의 좌표계는 우리가 익히 잘알고 있듯이 아래의 좌측과 같고, 그 특징이라고 하면 이미 정해진 사이즈(가로 480픽셀, 세로 270픽셀)의 화면크기를 갖고 화면중앙을 x, y좌표의 시작점(0, 0)으로 한다는 것이다. 반면에 파이게임 좌표계는 화면 전체 크기는 사용자가 임의로 정할 수 있으며, 다만, 이 경우 좌표의 시작점은 좌상단 끝을 x, y좌표의 시작점(0, 0)으로 삼고, 좌와 아래로 향할 수록 그 값의 크기가 커지게 된다.
엔트리가 갖고 있는 실행화면 화면크기를 일단 그대로 모사해보자. 따라서, 화면의 가로세로 크기는 각각 480, 270 픽셀이 될 것이고, 이를 기반으로 코딩하면 다음과 같다.
게임이 배경화면 이미지가 따로 존재하지는 않는다. 엔트리는 기본 배경화면색이 흰색으로 이미 칠해져 있지만, 파이게임제로에서는 기본 배경화면색으로 자동으로 칠해지는게 없다. 따라서, 우리의 필요에 의해 배경화면에 흰색을 칠해주는게 필요하다. 이를 코딩하는 방법은 다음의 3가지 방법이 존재한다.
사전 정의된 색상값 키워드을 사용해 코딩하기
draw 라는 함수는 이전 장에서 살펴보왔던 파이게임제로의 게임루프 안에 존재하는 사전에 정의된 콜백함수로 화면에 무언가를 그리고자 할 때 라이브러리로부터 자동호출되어진다. 따라서, 화면의 색깔을 칠하는 코드는 이 안에 기술되어야 하고, 우리는 화면을 칠하기 위해 fill 이라는 함수를 사용하였고, 인자값으로는 흰색(white)를 넘겼다. 여기서 screen. 으로 fill 함수를 호출한 것은 fill 함수는 파이게임제로 라이브러리의 screen 이라는 내장 오브젝트(객체) 안에 존재하기 때문인데, 오브젝트에 대한 상세한 내용은 다음 장에서 더 자세히 다루기 때문에 지금은 이정도 내용이해로 넘어가도록 하겠다.
화면에 칠할 색상값을 넘기는 방법은 총 3가지인데, 위에서 사용해본 것처럼 사전에 언어 내장 키워드처럼 사전에 정의된 값을 활용하는 방법과 RGB 표현법을 사용하는 방법으로 크게 2가지로 나눌 수 있다. 사전 정의된 색상의 키워드는 다음의 색상값 테이블에서 확인할 수 있다.
그리고, 다음과 같이 RGB(Red, Green, Blue)의 3원색의 조합을 통해 색상을 표현하며, 3원색 각각은 최대 256개의 값을 갖을 수 있다. 3원색 각각을 10진수(0 ~ 255) 형태 또는 16진수(00 ~ FF) 형태로 표현해 원하는 색상을 표현할 수 있는 방법이 있다.
RGB 색상값 중 흰색을 10진수 표현법으로 코딩하기
RGB 색상값 중 흰색을 16진수 표현법으로 코딩하기
색생표현법에 관한 내용은 워낙 인터넷에 정리된 자료가 많아서 지면 관계상 각자가 해당 자료들을 직접 참고하는게 훨씬 더 좋은 선택이다. 참고로 색상표현을 위해 RGB의 3원색이 필요한 이유에 대해 이 블로그를 참조할 수 있다.
아래의 같이 지금까지 코딩한 내용을 실행시켜 의도하는데로 동작하는지 확인해보자. 실행을 시키기 위해서는 먼저, 코드내용을 파일로 저장해야 하는데, 소스코드(source code)의 기본 저장위치는 [사용자 계정명]\mu_code\ 이다. (아래 그림 참조)
작성한 소스코드 파일의 저장시, 저장위치는 당연히 고정된 것이 아닌 사용자가 원하는 위치에 저장할 수 있으나, 이 책을 따라 예제실습을 해나갈 때 필요한 리소스(이미지, 폰트, 효과음, 배경음)를 활용하기 위해서는 임의로 저장하지 말고, 위에서 언급된 Mu 에디터의 소스코드 기본 저장위치([사용자 계정명]\mu_code\)에 파일을 저장하길 요청한다. 왜 그래야 하는지에 대한 이유에 계속되는 내용에서 자세히 언급될 예정이다.
소스코드 저장을 완료했다면 이제 f5 단축키를 눌러 실행시켜보자. 화면은 흰색으로 잘 칠해져 있을 것이다. 화면색에 대한 색상값을 위에서 배운 3가지 방법을 적용해 바꿔가며 실습해보는 것은 여러분의 과제로 맡기겠다.
이제 그 다음으로 할 일은 게임의 배우 주인공 오브젝트들인 "멍멍이"와 "야옹이"를 불러오고 화면에 배치시켜야 할 차례이다. 이를 코딩하기 위해선 각 오브젝트의 외관을 표현할 이미지 파일들이 필요하다.
엔트리 블록코딩에서의 경험을 상기시켜 보자. 여러분이 게임을 만들 때 가장 먼저 했던 일은 무엇이었을까? 화면에 게임에 등장할 오브젝트를 배치하는 일부터 였을 것 같다. 텍스트코딩에서도 유사하다. 우리도 주인공 오브젝트를 화면에 등장시키는 일부터 시작할 것이다.
그러나, 엔트리에서도 그랬듯이 게임에 사용할 오브젝트들이 엔트리에 기본 내장된 오브젝트들이 아니라면 별도로 게임에 사용될 이미지 파일들을 불러와 엔트리에 등록한 이후에서야 코딩을 시작할 수 있었다. 유사하게 만약 개발에 사용될 이미지들이 기본 내장 이미지가 아니라면 별도 저장하는 작업이 필요하다. 저장경로는 Mu 에디터 (이하 뮤 에디터) 설치시 자동으로 생성되는 기본 이미지들의 저장소인 [사용자 계정명]\mu_code\images 라는 폴더(디렉토리) 이고, 이미지들은 그 안에 위치되어야 한다.
해당 폴더의 위치를 쉽게 확인하고 싶으면, 뮤 에디터상의 메뉴바의 이미지(images) 라는 버튼을 눌러보자. 현재 코딩시 사용되는 이미지들이 저장되어 있는 폴더를 즉시 열어준다. 폴더 안에는 다음과 같이 이 책에서 사용할 이미지들이 이미 여러분의 편의를 위해 사전에 저장되어 있는 것을 확인할 수 있다. 위의 주의사항에서 소스코드 저장위치를 기본 저장위치에 저장할 것을 요청했던 이유가 바로 이 사전 저장된 이미지들을 그대로 활용하여 추가적인 리소스에 관련된 작업없이 우리는 오직 코딩에만 집중하기 위해서였다.
참고로 우리가 작성한 소스코드 파일 활용하게 될 리소스들(이미지, 폰트, 효과음, 배경음)을 담아 놓는 하위폴더들의 이름은 이미 정해진 이름들(앞에서부터 순서대로 각각 images, fonts, sounds, music)로만 생성해야 한다는 파이게임제로 라이브러리가 갖고 있는 기본제약사항이 존재한다. 그러한 이유로, 뮤 에디터에 메뉴 아이콘의 이름들 역시도 그 하위폴더의 이름들과 일치되어 있는 것이다. 따라서, 우리는 리소스의 종류에 맞춰 각각의 아이콘을 눌러 자동으로 열리는 폴더에 해당 리소스 파일을 저장하는 방식으로 개발하는 것이 편리하기도 하고 실행시 리소스를 발견할 수 없다는 실행에러를 줄일 수 있는 길이다.
Mu 에디터의 관련 메뉴얼 참조: https://codewith.mu/en/howto/1.2/pgzero_sounds_images
다음부터 기술될 내용은 참고사항으로 현재 우리가 사용하는 커스텀 뮤 에디터의 경우, 여러분들의 코딩의 편의를 위해 코딩에 필요한 모든 리소스(이미지, 소리 등)들을 기본 내장시켜 놓았기 때문에 이러한 별도의 추가 작업이 필요하지 않다. 그러나, 여러분들 중에 엔트리에서 각각의 오브젝트 이미지들을 어떻게 가져올 수 있는지 궁금해하는 분들을 위한 보충설명이다.
엔트리로부터 오브젝트 이미지 가져오기
엔트리의 멍멍이와 야옹이 오브젝트 이미지를 가져다 사용하기 위해 엔트리를 열어 해당 오브젝트의 이미지 파일을 가져오자. 가져오는 방법은 모양탭을 누르고, 가져올 모양에 마우스 우측버튼을 눌른 후 팝업메뉴에서 "PC에 저정"을 선택해 위에서 언급된 파이게임제로를 위한 images 폴더([계정명]\mu_code\images) 안에 저장시키면 된다.
참고로 이 책 예제에 필요한 모든 이미지는 여기서도 다운로드 받을 수 있다.
이제 본격적으로 각 오브젝트(멍멍이, 야옹이)를 화면에 나타내고, 두 오브젝트가 상호 인사하는 코딩을 다음절에서 마무리하도록 하자.
Last updated
