본문 바로가기

렌파이/GUI 꾸미기

스크린 언어 (5) - 바


렌파이에서 바(bar)란 어떤 값을 막대모양으로 보여주는 GUI입니다. 수치를 막대로 나타내거나, 오른쪽 그림처럼 어떤 값을 설정하는 때에도 써먹을 수 있습니다.[각주:1]

값을 막대로 표시하기

먼저 스크린 블럭을 만듭니다. 그리고 bar 문을 적어줍시다.


bar 문에는 두 가지 정보가 필요합니다. value 와 range 인데, 둘을 일단 적어둡니다.



그리고 value 오른쪽에는 현재 이 바가 표시해야할 값을, range에는 이 바에서 나타낼 값의 최대치를 적어둡니다.
그러니까 분수랑 비슷하다고 보시면 되는데, range 에는 분모 값을, value 에는 분자값을 적어주면 됩니다.

..더 쉽게 예를 들면, 바를 이용해 호감도를 나타낸다고 쳐봅시다. 호감도의 최대치를 100으로 하고, 호감도수치는 5으로 하고 싶다면, range 에는 100을, value 에는 5이라고 적어주면 됩니다.


이리 적으면 화면에 나타난 바는 value/range 의 비율로 막대를 그려 해당 값을 나타냅니다. 일단 눈으로 직접 보시져.


이렇게 파란 부분의 길이가 저 막대 전체 길이의 value/range..즉 5/100 으로 나타나게 됩니다.

하지만 특별한 경우를 제하고 이런 단순한 동작은 전혀 쓸모 없을 겁니다. 바를 이용하는 이유는 대개 시시각각 변하는 값, 즉 변수를 그래프 형태로 나타내고 싶은 것이기 때문입니다. 범위를 나타내는 range 속성이야 100이면 100, 200이면 200 적어주면 된다 쳐도, value 는 5나 10처럼 고정된 수를 입력해서야 써먹을 데가 없다는 얘기입니다. 즉, 호감도가 love 라는 변수에 저장되어 있다면, value 속성은 love 변수에 저장된 값을 반영해야 할 것입니다.

그러려면 value 속성에는 나타내고 싶은 데이터가 저장된 변수이름을 적어주면 됩니다.


테스트 스크립트를 작성하고 확인해봅시다.


바의 모양

바의 길이는 xmaximum, ymaximum 등의 스타일 속성으로 길이를 정해주면 됩니다. 위치 스타일 속성을 받으니 위치같은 것도 자유롭게 바꿀 수 있습니다. 혹은 바에만 적용되는 이른바 바 스타일 속성이라는 것도 있는데, 이 중에서 bar_vertical 속성을 True 로 하면 바가 세로로 그려집니다. bar 명령문 대신 vbar를 써도 바가 세로로 그려집니다. vbar 는 세로로 그려진다는 점만 다를 뿐 나머지는 bar 와 다 같으니 각각 상황에 따라 사용하면 됩니다.[각주:2]



AnimatedValue

value 속성에 AnimatedValue 를 이용하여 값을 입력하면 값이 변함에 따라 바가 움직이도록 만들 수 있습니다.


AnimatedValue를 이용할 떄는 기본 bar 명령문에서 못 보던 old_value와 delay를 추가로 적어주면 됩니다. old_value 란 말 그대로 이전 값을 뜻합니다. 이전 값에서 현재 값(value에서 정한 값)까지 막대가 늘어나는 데 걸리는 시간은 delay에 적어주면 됩니다. 

예를 들어서 "맛난 걸 먹어서 100이었던 스트레스가 40이 되었다"라고 상황을 가정해봅시다. 스트레스 최대치는 range 에 적으면 되고, 현재 스트레스값은 40이니 이건 value에 적습니다. 그리고 이전의 스트레스 값은 100이었으니 이걸 old_value 에 적어주는 겁니다. 막대가 움직이는 데 걸리는 시간은 delay에 적어주면 됩니다.


물론 아까 bar 문에서 그랬던 것처럼 value, old_value 자리에는 변수이름을 적어서 사용할 수 있습니다.
이때는 이전값과 현재값을 저장하는 변수가 따로 있어야합니다. 그리고 animation을 끝냈으면 현재값에 새로운 값을 저장해야할테니 현재값이 이전값이 되도록 이전값을 저장하는 변수에 현재값을 저장해야 할 것입니다.


ui.adjustment

바를 값을 조정하는 슬라이더로 만드려면 ui.adjustment 를 이용해야 합니다. ui.adjustment 는 bar문의 adjustment 속성에 적어야합니다.



ui.adjustment 를 쓰려면 range, value 외에 change라는 것도 필요합니다. change에는 값(value)이 바뀌었을 때 작동할 함수의 이름을 적어야합니다. 이 함수는 value에서 설정된 값을 인수로 받습니다.

예로, 매력이라는 능력치를 정하는 바를 만든다고 합시다. 그러면 바를 조정해서 어떤 값을 정해졌을 때, 그 값을 변수에 저장해서 두고두고 써먹을 수 있도록 해야 합니다. 이 때 "조정된 값을 변수에 저장하는 일"을 함수를 통해 해야 하는 것입니다.

아까 value를 인수로 받는다고 했으니 이 인수를 변수에 저장하도록 식을 세워주면 됩니다.


이렇게 만든 함수의 이름을 ui.adjustment 에 적어주면 됩니다.


그리고, 상호작용을 하는 UI니만큼 call screen 문으로 화면에 띄워서 확인해봅시다.



  1. 오른쪽 그림에 나온 바는 보통 슬라이더라고 부릅니다. 렌파이에서는 bar 명령문으로 만들 수 있어서 통칭하였습니다. [본문으로]
  2. 6.13.7에서는 bar_vertical 기능에 버그가 있는듯합니다. 수정될때까지 vbar, bar 명령문만 사용하시는 게 낫겠네요. [본문으로]