테이블 탑 시뮬레이터 스크립트 초심자 가이드 5 - 버튼 함수 활용과 문자열

1. 소개

---

이번 시간에는 스크립트 버튼의 고급 활용을 해보도록 합시다. 오브젝트에 생성된 버튼은 클릭했을 때, 여러가지 정보를 함수에 전달해주는 것이 가능합니다. 이를 활용하여 하나의 버튼이 다르게 작동하도록 할 수 있습니다. 제가 업로드한 Psylent Phantom (사일런트 팬텀 한글)에는 라이프를 표시하는 카운터가 있습니다. 이 카운터는 마우스 왼쪽 클릭을 하면 숫자가 증가하고, 오른쪽 클릭을 하면 감소합니다. 이처럼 버튼을 어떻게 클릭했느냐, 또는 누가 클릭했느냐에 따라 다르게 작동하는 버튼을 만들어보도록 하겠습니다.

2. 준비

2-1. 구상

---

생명력 표시 토큰을 생각해봅시다. 오른쪽 클릭하면 감소하고, 왼쪽 클릭하면 증가합니다. 단, 0과 12 사이에서만 작동해야 합니다. 또한 자신 외에 다른 플레이어가 클릭할 수 없도록 하는 기능도 추가해보도록 합시다.

2-2. 테이블 준비

---

이번 스크립트에는 버튼을 생성할 Red Checker 하나만 있으면 충분합니다.

3. 스크립트 작성

3-1. 초기 변수 설정

---

버튼을 마우스 오른쪽 클릭하면 감소하고, 버튼을 왼쪽 클릭하면 증가해야 합니다. 또한 흰색 플레이어가 버튼을 누를 때에만 작동해야 하므로 각 수치들을 변수로 설정할 필요가 있습니다. 표기되는 수치의 초기값은 12, 최대값도 12, 최솟값은 0, 버튼을 누를 수 있는 플레이어 색상은 White 입니다. 스크립트 가장 위쪽에 아래와 같이 작성해줍니다. 색상은 문자열임에 주의합시다.

currentVal = 12
maxVal = 12
minVal = 0
targetColor = 'White'

3-2. 버튼 생성

---

이후 버튼의 Parameter를 작성하고 onload()함수에서 버튼을 생성합니다. 아래와 같이 작성합니다.

button_Parm = {
    click_function = 'buttonClick',
    function_owner = self,
    label = '[b]'..currentVal..'[/b]',
    width = 500,
    height = 500,
    position = {0, 0.5, 0},
    font_size = 300,
    tooltip = '우클릭: 감소 / 좌클릭: 증가'
}

function onload()
    self.createButton(button_Parm)
end

label = '[b]'..currentVal..'[/b]' 에 대하여
이 부분을 설명하기 위해서는 두 가지 요소를 설명해야 합니다. 하나는 [b]가 의미하는 BBCode이고, 둘째는 ..이 의미하는 문자열 연결 연산자입니다.

BBCode
테이블 탑 시뮬레이터에서는 게임 내에 표시되는 문자를 작성할 때, BBCode를 지원합니다. BBCode란, Html과 비슷하게 문자열을 굵게, 기울임, 취소선, 밑줄, 색상 등등의 다양한 효과를 부여하는 기능힙니다. Html코드가 < >로 감싸서 사용한다면, BBCode은 [ ]로 감싸서 사용합니다. 테이블 탑 시뮬레이터에서 사용 가능한 BBCode 목록은 위키를 참고하세요. 위에 사용된 [b] [/b]는 사이에 있는 문자열을 굵은 글씨로 만들어줍니다.

문자열 연결 연산자
문자열 연결 연산자인 ..은 루아에서 사용되는 연산자 중 하나입니다. 간단히 설명하자면 두 문자열을 하나의 문자열로 합쳐주는 기능을 합니다. 위 예시를 다시 보자면,

'[b]'..currentVal..'[/b]'

은 다음과 같이 작동합니다: currentVal 변수에는 현재 12라는 값이 들어있습니다. 그러므로 이는 아래와 같이 바뀌여서 인식됩니다.

'[b]'..12..'[/b]'

그리고 이제 ..연산자가 세 문자열을 하나로 합쳐줍니다. 최종적으로,

'[b]12[/b]'

라는 하나의 문자열로 만들어지는 것입니다. 테이블 탑 스크립트를 사용하다 보면 문자열 연결 연산자가 빛을 발할때가 많습니다. 알아두시면 편리합니다.

3-3. 버튼 함수 작성

---

테이블 탑 시뮬레이터 .createButton() 함수 api를 읽어보면 아래쪽에 click_function에 대한 설명이 나와 있습니다. click_function 함수는 순서대로 3가지 변수를 전달받는 것이 가능합니다.
click_function(obj, player_clicker_color, alt_click)

• [object] obj : 버튼이 있는 오브젝트를 반환합니다.
• [string] player_clicker_color : 클릭한 플레이어의 색상을 반환합니다.
• [boolean] alt_click : 마우스 왼쪽 클릭이 아니라면 True를 반환합니다.

이를 활용해 buttonClick()함수를 작성하도록 합니다. 아래와 같이 작성합니다.

function buttonClick(obj, playerColor, alt)

end

buttonClick에 인자로 작성된 obj, playerColor, alt 변수는 버튼을 클릭할 때마다 전달되며, 모두 지역변수로 작용합니다. 이 세 가지 인자를 함수 내 스크립트 작성에 활용해보도록 합시다. 우선, playerColor를 확인하여 흰색이 아니라면 함수가 작동하지 않도록 하는 스크립트를 추가해봅시다. 전달받은 playerColor 인자가 targetColor에 설정했던 'White'가 아니라면 return을 통해 함수의 실행을 종료하도록 합니다. 아래와 같이 작성하여 buttonClick함수에 넣습니다.

if playerColor ~= targetColor then
    return
end

둘째로, alt인자를 확인하여 true라면 currentVal을 1 감소하고, 아니라면 currentVal을 1 증가하도록 하는 스크립트를 작성하여 추가합니다.

if alt == true then
    currentVal = currentVal - 1
else
    currentVal = currentVal + 1
end

여기까지 작성했다면 buttonClick 함수는 아래와 같이 작성됩니다.

function buttonClick(obj, playerColor, alt)
    if playerColor ~= targetColor then
        return
    end

    if alt == true then
        currentVal = currentVal - 1
    else
        currentVal = currentVal + 1
    end
end

위 함수는 다음과 같이 작동할 것입니다: 버튼을 클릭하면, 클릭한 플레이어의 색상이 targetColor와 다르다면 함수 실행이 종료됩니다. 이어서 마우스 오른쪽 클릭했다면 currentVal이 1 감소하고, 왼쪽 클릭했다면 currentVal이 1 증가합니다. 여기까지만 작성하면 한 가지 문제가 생깁니다. 우리는 0과 12 사이에서만 이 함수가 작동하도록 해야합니다. 예를들어 currentVal이 0일때 마우스 오른쪽 클릭을 한다면 더이상 감소되지 않아야 합니다. 이 때, 필요한 것이 논리 연산자 입니다.

논리 연산자
논리 연산자는 값에 대응하여 true와 false를 판단할 때 사용하는 연산자입니다. 논리 연산자에는 and, or, not 세 가지가 있습니다.

• A and B : A와 B 둘 다 true 일 때, true를 반환합니다.
• A or B : A와 B 둘중에 하나라도 true라면, true를 반환합니다.
• not A : A가 true이면 false, false이면 true를 반환합니다.

이를 이용해 currentVal을 조정하는 if문을 조금 수정해봅시다. currentVal을 1 감소하는 경우는, alt == true; 마우스 오른쪽 클릭을 했으면서, currentVal > minVal; currentVal이 minVal보다 커야 합니다. 두 가지를 모두 만족해야만 하므로 and 연산자를 사용하여 두가지를 결합합니다. 또한 currentVal을 1 증가하는 경우에도 elseif문으로 바꿔서, alt == false이면서 currentVal < maxVal 인 경우에만 작동하도록 합니다. 아래와 같이 수정합니다.

if alt == true and currentVal > minVal then
    currentVal = currentVal - 1
elseif alt == false and currentVal < maxVal then
    currentVal = currentVal + 1
end

마지막으로, editButton()을 활용해 버튼의 label을 currentVal의 값으로 수정합니다. editButton()에 대한 자세한 활용법은 지난 강의를 참고하시기 바랍니다. 아래와 같이 작성하여 추가합니다.

editButtonParm = {
    index = 0,
    label = '[b]'..currentVal..'[/b]'
}
self.editButton(editButtonParm)

여기까지 하셨다면 완성입니다.

4. 스크립트 전문

---

currentVal = 12
maxVal = 12
minVal = 0
targetColor = 'White'

button_Parm = {
    click_function = 'buttonClick',
    function_owner = self,
    label = '[b]'..currentVal..'[/b]',
    width = 500,
    height = 500,
    position = {0, 0.5, 0},
    font_size = 300,
    tooltip = '우클릭: 감소 / 좌클릭: 증가'
}

function onload()
    self.createButton(button_Parm)
end

function buttonClick(obj, playerColor, alt)
    if playerColor ~= targetColor then
        return
    end

    if alt == true and currentVal > minVal then
        currentVal = currentVal - 1
    elseif alt == false and currentVal < maxVal then
        currentVal = currentVal + 1
    end

    editButtonParm = {
        index = 0,
        label = '[b]'..currentVal..'[/b]'
    }
    self.editButton(editButtonParm)
end

5. 마무리

---

이번 강의까지 도달하신 여러분은 이제 createButton()함수를 사용해 버튼을 생성하고, editButton()함수로 버튼을 수정하며, 버튼에 달린 함수까지 자유자재로 조작하실 수 있게 되었습니다. 대부분의 스크립트가 버튼을 통해 작동하는 점을 생각하면 이는 테이블 탑 시뮬레이터 스크립트에서 큰 부분을 차지한다고 할 수 있겠습니다. 궁금하신 점 댓글로 달아주시면 아는 범위에서 최대한 답변드리도록 하겠습니다. 읽어주셔서 감사합니다.