scaleform.minarto.com

애드온 ui 에 대한 고찰 - 4 본문

Scaleform Etc

애드온 ui 에 대한 고찰 - 4

미나토 2013. 1. 16. 18:57


2013/01/02 - [Scaleform Etc] - 스케일폼을 위한 작은 변명


2013/01/14 - [Scaleform Etc] - 애드온 ui 에 대한 고찰 - 0


2013/01/14 - [Scaleform Etc] - 애드온 ui 에 대한 고찰 - 1


2013/01/15 - [Scaleform Etc] - 애드온 ui 에 대한 고찰 - 2


2013/01/15 - [Scaleform Etc] - 애드온 ui 에 대한 고찰 - 3





1. 클라이언트로의 이벤트 발생



리스트 아이템 사용의 이벤트 발생에 대해서는 바로 앞선 3번 글에서 다뤘습니다.



하지만 게임 UI를 만들 때, 꼭 아이템 사용에 관한 이벤트만 있는 것이 아닙니다.



예를 들어 무기 강화를 한다고 쳐보죠...


UI 에서 무기 강화 버튼 같은 것을 만들어 클릭해야 할 것입니다.



하지만 이것도 같은 Binding 클래스에서 해결가능 합니다...





2. 나는 한놈만 패!!






전 한놈(Binding)만 팹니다...



클라이언트로 이벤트를 전달하기 위해 Binding 클래스를 변경하였습니다.

혹시 전에 다운 받으셨다면 다시 한번 다운받으시기 바랍니다


as2 : http://code.google.com/p/minarto-scaleform4/source/browse/trunk/as2/src/com/minarto/data/Binding.as

as3 : http://code.google.com/p/minarto-scaleform4/source/browse/trunk/as3/src/com/minarto/data/Binding.as



이번에도 클라이언트에게 키값을 이용하여 통신합니다


as2 용의 코드는 다음과 같습니다.


Binding.action({type:"upgrade", data:강화할 아이템 데이터});

as3 용의 코드는 다음과 같습니다

Binding.action(new CustomEvent("upgrade", 강화할 아이템 데이터));


as3 용 CustomEvent 클래스는 여기 있습니다


http://code.google.com/p/minarto-scaleform4/source/browse/trunk/as3/src/com/minarto/events/CustomEvent.as



양쪽 버전 다 사용법은 비슷합니다


다만 as2용 CLIK 에서 그냥 해시맵 객체를 dispatchEvent 하였던 것과 달리 as3용은 Event 클래스를 사용하여 dispatchEvent 를 날리기 때문에 CustomEvent 를 사용하도록 변경하였습니다



type 에는 특정 이벤트의 키값을 클라이언트와 협의하여 자유롭게 적으면 되고요


파라미터는 자유롭게 설정해서 날려주면 됩니다.

(as3용 CustomEvent 는 두번째 파라미터가 해시맵 객체이므로, 예에서처럼 두번째 파라미터에 바로 원하는 데이터를 설정하시거나 {data:강화할 아이템 데이터} 와 같이 해시맵을 두번째 파라미터로 넣어주시면 됩니다


(물론 키값 이외에 인자가 필요 없다면 그냥 보통의 이벤트를 사용하셔도 됩니다.)




클라이언트는 이미 Binding.init 함수를 통해 Binding 객체를 알고 있기 때문에 해당 객체에서 발생하는 이벤트를 감시하면 됩니다.




3. Binding, ListBinding 단 두가지 만으로 UI와 통신한다는 의미는...



이렇듯 모든 통신은 Binding 객체와 ListBinding 객체하고만 통신을 할 수 있습니다.


ListBinding 클래스를 공개하지 않는 이유는 이미 설명했듯이, 회사마다 너무나 사용법이 다르기 때문입니다...


해당 구글 코드를 찾아들어가 보면 클래스가 있긴 있습니다... 리스트 데이터의 각 아이템도 바인딩 되고, 각 아이템마다의 속성까지 바인딩 가능하도록 코드가 이루어져 있습니다.

클라이언트가 포인터를 이용할 수도 있고, 포스팅과 같이 키값을 통해서도 가능합니다


그러니 현재로서는 참조만 하시기 바랍니다



ListBinding 객체는 클라이언트가 별도의 작업을 해야할 수도 있습니다. 예를 들어 클릭 오토를 막기 위해, ListBinding 객체로부터의 연속된 이벤트 발생은 막는다던가 말이죠... 




그리고 Binding 클래스와 ListBinding 을 굳이 나눈 이유도 위와 같습니다.


Binding 클래스는 범용적이라고 생각했고, ListBinding 클래스는 잘 생각해보시고 쓰기 바랍니다.




"이 블로그 코드를 베끼자" 가 아니고 개념을 이해해 주시면 어렵지 않다고 생각합니다.






자, 이렇게 두가지만을 사용하면 웬만한 개발은 무리없이 진행이 될겁니다...(안될라나요? ^^;)



두가지 클래스만 알면 개발이 가능하니( 유저가 아예 스크립트를 모르고, CLIK 컴포넌트 사용을 못하는 건 제 소관이 아닙니다 ㅡㅡa ) 


UI 개발자에게 "공부" 라는 엄청난 비용을 제로에 가깝게 만든다는 것은 굉장히 큰 의미가 있습니다.



일단 문서를 안만들어도 된다는 아주 단순한 장점이 있고, 이것은 곧 쉬운 개발과 생산성으로 이어지게 됩니다.

자연스레 애드온 ui 도 활성화가 되겠지요...(다시 한번 말하지만 개발자가 아예 다 모르는건 어쩔 수가...)



그리고 반복해서 설명했지만 두가지만으로 통신하니 편해지는 것은 클라이언트도 마찬가지입니다...






4. 마치며...




이로서 애드온 ui  개발에 있어서 기본적인 양방향 통신방법과(말은 기본적이지만 전부입니다), 애드온 UI 설정 저장 등에 대해서 설명을 마치게 되었습니다.



여기까지는 정말 기본이지만....



개발자라면 아실거라 생각합니다.... 기본만 있으면 이제 응용하시는건 여러분의 몫입니다.

제가 대신 개발해줄 순 없잖아요 ㅎㅎㅎ


그래도 어렵다... 싶으면... 음... 글쎄요...



그래도 안되면 블로그 메뉴 하단에 있는 페이스북을 통해 연락주시면... 시간이 허락하고 법적인 문제가 없는한(?) 도와드리도록 하겠습니다.

(제 블로그가 한달에 보통 2,000 명 정도 방문하고, 많으면 14,000 명 정도 방문해주시는데... 질문은 커녕 댓글도 가뭄에 콩나듯 하기 때문에 딱히 질문하실 분은 별로 없을 것 같습니다만...ㅎㅎㅎ)








이로서 "애드온 ui 개발 - 기본편" 포스팅을 마칩니다 (기본편이라는 소제목은 지금 막 지었습니다)



이번 포스팅은 마무리 글이라 좀 짧게 끝났네요...





p.s.


구글 코드에 있는 코드들은 제가 회사에서 쓰고 있는 코드와 다릅니다...


일단 공개용으로 구글코드에 올린 녀석들은 따로 테스트를 안합니다... 빌더나 디벨롭 상에서 문법 오류만 없으면 올리는 겁니다 :^)



그러니 혹시 사용하시는 분들은 버그리포팅을 해주시면 감사하겠습니다.