안녕하세요. 애드온 개발 공부하면서 어려움을 많이 겪었던터라,
혹시나 저 같은 분들을 위해서 글을 작성해봅니다.
프로그래밍 지식이 있다는 전제하에 작성되었지만, 최대한 간단한 코드들을 사용하였습니다.


1. 애드온 개요

- 애드온 이름 : Hello_Button
- 화면 상의 버튼을 누르면, 일반 채팅창에 "안녕" 이라는 메세지를 출력하는 애드온 입니다.




2. 애드온 개발 순서

0) Hello_Button.toc 파일 작성
1) Hello_Button.lua 작성 - 버튼 생성
2) Hello_Button.lua 작성 - 채팅창에 메세지 출력하는 함수 생성
3) Hello_Button.lua 작성 - 버튼을 클릭 했을때, 2번에서 만든 메세지를 출력 함수가 실행되도록 버튼과 함수 연결


3. 구현

 Hello_Button 폴더


- Hello_Button.toc 파일
- Hello_Button.lua 파일

 

와우의 Addon 폴더아래,

 - Hello_Button 폴더를 생성하고 그 아래,

 - Hello_Button.toc,  Hello_Button.lua 파일 생성합니다.


 

0) Hello_Button.toc 파일 작성
- toc 파일은 애드온의 기본 정보를 명시하는 파일입니다.
   toc 파일에 아래 코드를 넣어줍시다.

## Interface: 60100
## Title: Hello_Button
## Author: 개구리
## Notes: 안녕 출력하는 버튼 애드온
## Version: 1.0

Hello_Button.lua


Interface : 와우의 버전  (예를들면, 6.1 = 60100 이며, 6.2 =60200 이 됩니다)

               와우가 패치되면서 구버전 애드온 경고가 뜨게 되는데, 이 부분을 기준으로 체크하게 됩니다.

Title : 말 그대로 애드온의 이름

Author :  애드온 개발자의 이름

Notes : 애드온 설명

Version : 애드온의 버전 (위의 Interface 와는 무관하므로 개발자가 마음대로 지정하면 됩니다)


Hello_Button.lua : 애드온에 포함되는 코드 파일들을 명시해주면 됩니다.
                              본 애드온에서는 Hello_Button.lua 라는 애드온의 코드 파일을 추가하였습니다.

 

와우를 켠 상태로 TOC 파일을 다 작성했다면, 반드시 와우를 재시작하고

켜지 않았다면, 와우를 실행한 상태로,


Lua 파일 작성을 진행합시다!


특별히 중요한 것은 아니지만, 코드 한줄 한줄 작성하고 진행 상황을 확인하기 위함입니다.



1) Hello_Button.lua - 버튼 생성
- 버튼 UI 를 만들어봅시다. 아래 코드는 와우의 기본 빨간색 버튼을 생성하는 코드입니다.
  Hello_Button.lua 파일에 아래 코드를 작성해줍시다.

local MyButton = CreateFrame("Button", "MyButton", UIParent, "OptionsButtonTemplate")

MyButton:SetPoint("CENTER", 0, 0)

MyButton:SetText("안녕 버튼") 


※ 코드 설명

 - 버튼 생성하는 코드

local MyButton = CreateFrame("Button", "MyButton", UIParent, "OptionsButtonTemplate")

 

local : lua 에서 지역 변수를 만들때 사용하는 키워드 입니다. (C 언어로 따지면, private 이 되겠습니다)

MyButton :  임의적으로 지정한 버튼 변수 입니다.

CreateFrame() : Frame 이라는 UI 요소를 생성하는 함수 입니다.


※ Frame ?

- 와우의 모든 UI 는 Frame 으로 이뤄져 있습니다.

- Frame 의 종류로는 버튼, 텍스트박스, 드롭박스, 체크박스 등 사용자의 입력을 주고 받는 다양한 것들이 있습니다.

  (텍스트, 이미지도 Frame 에 속한다고 할 수 있습니다)


※ CreateFrame() ?

 - Frame 을 생성하는 블리자드 애드온 API 함수합니다.

 - CreateFrame 함수의 원형은 아래와 같습니다.

frame = CreateFrame( frame_type, name, parent, template )


frame_type : 생성할 프레임의 종류를 지정합니다.

                     우리는 Button 을 만들것이기에 "Button" 이라고 지정해 주었습니다.

name : 프레임의 이름을 지정합니다 (생략 가능합니다)

parent : 프레임의 부모를 지정합니다.

             프레임을 그룹으로 관리할 수 있도록 부모를 지정할 수 있습니다.

             우리는 별도의 부모가 없기 때문에 와우의 모든 UI 의 시초격인 "UIParent" 를 지정해줍니다.

template : 미리 만들어둔 프레임 설정을 불러오는 부분입니다. (생략 가능합니다)

                 프레임을 생성하는데 설정해야되는 것들이 많은데, 이러한 설정들을 Template 이라는 걸로 만들어서

                 저장해 놓고 필요할 때 마다 불러올 수 있습니다.

                 우리는 "OptionsButtonTemplate" 이라는 템플릿을 사용할 것인데,

                 이는 와우의 기본 버튼(빨간색 버튼)의 설정을 모아둔 템플릿입니다.

 

결론적으로 위 코드를 통해 빨간색 버튼을 생성하게 되었지만,

아직 게임내에서 버튼이 보이진 않을 겁니다. 그 이유는 위치를 지정하지 않았기 때문입니다.

위치를 지정하는 코드는 아래와 같습니다.


- 버튼의 위치를 지정하는 코드

MyButton:SetPoint("CENTER", 0, 0)

 

SetPoint() 함수는 버튼의 위치를 지정하는 함수로, 화면 한가운데 (0 , 0)  좌표에 위치하겠다는 의미입니다.

 

 - 버튼의 텍스트를 지정하는 코드

MyButton:SetText("안녕 버튼") 



 위 코드 3줄을 입력하고 와우의 UI 를 재시작하는 

 

/reload

 

명령어를 입력해봅시다.

그럼 화면 한가운데 아래와 같은 버튼이 생성되어 있는 것을 볼 수 있습니다.




이제 채팅창에 메시지를 출력하는 함수를 만들어 봅시다.


2) Hello_Button.lua - 채팅창 출력 함수

- Hello_Button.lua 에 아래 코드르 추가해 줍시다.

function OnClick_MyButton()

     SendChatMessage("안녕","SAY")

end

 

※ 코드 설명

- lua 에서의 함수 생성

function OnClick_MyButton() 

     SendChatMessage("안녕","SAY")

end


버튼이 클릭 되었을때, 실행될 함수로 OnClick_MyButton 사용자 정의 함수를 만들었습니다.


※ C 언어는 "{}"(중괄호)  키워드를 사용하여 구문의 시작과 끝을 표현하는데 반해,

lua 는 시작 키워드는 없고 end 키워드를 통해서 구문의 시작과 끝을 표현 합니다.

함수를 만드 키워드는 function 이고 함수의 끝은 end 를 사용 합니다.

 


 - 메세지를 출력하는 API 함수 SendChatMessage

function OnClick_MyButton() 

     SendChatMessage("안녕","SAY")

end

 

OnClick_MyButton 함수 안에는 SendChatMessage() 가 실행되는데,

SendChatMessage() 는 블리자드에서 제공하는 채팅창 메세지 출력 함수 입니다.


 ※ SendChatMessage 함수의 원형

SendChatMessage(msg, type)


  msg : 채팅창에 출력할 메시지를 지정합니다.

  type : 어떤 채팅창에 출력할 것인지 지정합니다.

           우리는 일반채팅창에 출력할 것이므로 "SAY" 를 지정합니다.

           (만약 파티창에 출력하고자 한다면 "PARTY" 를, 레이드창엔 "RAID" 를, 외침은 "YELL" 를 입력합니다)


SendChatMessage() 함수를 테스트 해보고 싶다면,

채팅창에,


/script SendChatMessage("안녕", "SAY")

 

입력해봅시다. 메세지가 출력되는걸 보실수 있습니다. "SAY" 부분을 "YELL" 으로 바꿔서 출력해보세요.

 

자, 이제

버튼도 만들었고

채팅창에 출력하는 함수도 만들어 두었습니다.

마지막 할일은 버튼과 출력 함수를 연결하는 일 입니다.


3) Hello_Button.lua - 버튼과 채팅창 출력 함수 연결

- 아래 코드를 Hello_Button 파일에 추가해줍시다.

MyButton:SetScript("OnClick", OnClick_MyButton)

 

 ※ 코드 설명

- SetScript() 함수?

SetScript 함수의 원형 입니다.

frame:SetScript(event_type, function)


 frame 에서 발생하는 각종 동작을 사용자 함수와 연결하는 함수 입니다.


- 여기서 말하는 동작란?

  frame을 클릭했다, frame 위에 마우스를 올렸다, frame 위에서 마우스를 내렸다,

  frame 에서 키보드를 입력했다 등.. 입니다.


event_type : 동작의 종류를 등록합니다.

                     우리는 마우스를 "클릭" 했다는 동작을 사용할 것이므로, "OnClick" 을 지정해 줍시다.

function : 동작이 발생했을때 실행할 함수를 지정합니다.

                우리는 미리 만들어둔 OnClick_MyButton 함수를 지정해 줍시다.


 

이제, 모든 소스코드의 작성과 설명이 끝났습니다.

마지막 할 일은 애드온의 동작을 게임 내에서 확인하는 일입니다.



4. 마무리 


1) Hello_Button.lua 전체 코드

- 3 에서 작성한 전체 코드 입니다.

local MyButton = CreateFrame("Button", "MyButton", UIParent, "OptionsButtonTemplate")

MyButton:SetPoint("CENTER", 0, 0)

MyButton:SetText("안녕 버튼") 


function OnClick_MyButton()
     SendChatMessage("안녕","SAY")
end


MyButton:SetScript("OnClick", OnClick_MyButton)

 

2) 실행

코드 작성이 끝났으면,

/reload

 

명령어를 입력하여, UI 를 재시작하고, 버튼을 클릭해봅시다.






끝으로..

최대한 쉽게 작성하려고 했으나.. 부족한 필력으로 인해서...
이게 쓰기위한 글인지, 보기위한 글인지 모르게 되어 버렸네요~_~;
그래도 인내심을 가지고 읽어보셨고 궁금한 것이 생기셨다면,

리플을 남겨주세요. 최대한 아는 한도 내에서 답변드리도록 하겠습니다.


추가적인 애드온 개발에 대한 정보를 확인해보고 싶으시다면, 

http://blog.naver.com/manhdh 를 참고 하시길 바랍니다.