본문 바로가기

렌파이/GUI 꾸미기

스크린 언어 (2) - 스크린 사용 예제와 정렬용 UI

예제 1

게임 화면에 특정한 수치를 계속해서 나타내는 글자, 여기서는 d-day를 표시하는 글자를 넣어보겠습니다.
우선 init 블럭에 dday를 저장할 변수와 새로운 스크린 블럭을 만듭니다.


그리고 스크린 블럭에 dday 를 띄울 수 있는 명령어를 추가해줍니다.
스크린에 글자를 띄우는 명령어는 text 고, 그 옆에는 대괄호 안에 변수이름을 적은 문자열을 적으면 변수를 글자로 나타낼 수 있습니다.



그리고 text 명령문 옆에는 위치 스타일 속성을 적어 dday 글자의 위치를 정해줍니다.



이제 이렇게 만든 d-day 스크린을 레이블 블럭 안에서 show screen 문으로 화면에 띄우면 됩니다.


스크린에 있는 UI의 모습을 꾸미려면 해당 명령문에 적용할 수 있는 스타일 속성을 매뉴얼에서 찾아 적용하면 됩니다. text의 경우는 text 페이지에서 찾아보면 공통속성, 위치 스타일 속성, 텍스트 스타일 속성을 적용할 수 있다는 것을 알 수 있습니다.


UI의 속성을 적을 때는 UI 명령문을 블럭으로 만들어 그 안에 적을 수도 있습니다. 기능상 다른 점은 없지만 스크립트를 알아보기 편하다는 장점이 있습니다.



예제 2

이번에는 클릭하면 특정한 레이블로 넘어가는 텍스트 버튼과 스크린샷을 찍는 이미지 버튼을 게임 화면에 넣어보겠습니다.
아까와 마찬가지로 init 블럭에 screen 블럭을 하나 만듭니다.


그 밑에 텍스트버튼과 이미지버튼을 만드는 textbutton, imagebutton 명령문을 한 줄씩 적어줍니다.
텍스트 버튼에는 버튼에 표시할 글자를 입력하면 되고, 이미지 버튼에는 마우스가 올라갔을 때 표시할 이미지버튼의 그림과 마우스가 안 올려진 이미지 버튼의 그림 파일 이름을 각각 idle 과 hover 에 입력해야 합니다.


그리고 각 버튼을 눌렀을 때 작동할 action 을 적어줍니다. textbutton 에는 레이블로 점프하는 기능을 하는 Jump() 액션을, imagebutton에는 스크린샷을 찍는 Screenshot() 액션을 적어줍니다. Jump()액션은 대상이 될 레이블 이름을 문자열로 적어줘야 합니다.


이렇게 만든 스크린은 띄워야 할 부분에서 call screen 명령문으로 부르면 됩니다.


아까도 적었지만 UI 명령문에 사용할 수 있는 스타일 속성은 매뉴얼에서 확인할 수 있습니다.


정렬 UI

예제 스크립트에서는 UI를 조금만 써서 일일히 위치를 정해주었습니다. 하지만 대부분의 경우에는 게임 화면에서 쓸 버튼이나 텍스트를 대량으로 사용합니다. 이 때는 스타일 속성으로 위치를 일일히 지정하기보다는 정렬 UI를 이용해 위치를 자동으로 정해주는 것이 좋습니다.

정렬용 UI에는 vbox, hbox, grid 가 있습니다. 각각 세로 정렬, 가로 정렬, 격자판 형태로 정렬한다는 것을 뜻합니다. 이 정렬 UI 명령문을 블록으로 만든 다음 그 아래에 text, textbutton, imagebutton 같은 명령문을 적으면, 정렬 UI는 블록 안에 적힌 UI를 자동으로 정렬합니다. 이 때 다른 UI를 포함한 UI를 상위 위젯이라고 하고, 포함된 UI를 하위 위젯이라고 합니다.



vbox 안에 hbox를 적는 것도 가능하고, 그 역도 성립합니다. 단, 무엇이 하위 위젯이고 상위 위젯인지 헷갈리니 각 정렬 위젯에 주석을 다는 것이 좋습니다. (아래 스크립트처럼 모든 명령문에 주석을 달 필요까진 없습니다.). 같은 블럭 안에 포함된 UI들은 상위 위젯이 같다는 것을 기억해야 합니다.

grid 의 경우에는 grid 로 만들어진 격자판을 다 채우지 않으면 오류가 발생합니다. 예를 들어 2x2 의 정렬판을 만들었다고 가정했을 때, 그 grid 블록에 4개의 하위 위젯이 들어있지 않으면 해당 스크립트에서는 오류가 발생합니다. 따라서 while이나 for같은 반복문으로 여러 하위 위젯을 만들 때는 grid 보다 vbox, hbox를 조합하는 것이 좋습니다.