Tab 컨트롤 예제

GameOVEN 2009.11.08 18:45


Button 과 StaticImage 를 이용해서 Tab Control 을 구현한 예제입니다.

TabCtrl:SetHandler() 함수를 이용하면 CharInfo 클래스처럼

상속을 이용하지 않아도, 이벤트로 호출되는 함수를 바꿀 수 있습니다.

저작자 표시
신고


튜토리얼 2-7A

기본 튜토리얼 2-7 예제는 네트워크 채팅을 설명하고 있습니다.

그런데 일반적인 채팅창을 구현할 때, 공통적인 인터페이스 요구사항이 있습니다.

게임을 하다가, 바로 ENTER 키를 입력하면 채팅창에서 입력할 수 있도록 하는 것입니다.

게임오븐에서도 이와 유사한 기능을 다음과 같이 구현할 수 있습니다.

function tutorial2_7ClientApp:OnUIMsg(main, msg)
 -- 키보드 엔터 누르면 이벤트로 알리기
 if msg.id == Evt_KeyboardDown.id then
  local v = msg:GetValue(Evt_KeyboardDown.key.Value)
  if v == UIConst.KeyEnter then
   local msg = Message(Evt_InputEnter)
   self:SendToScene(msg)
  end
 end
 ClientApp.OnUIMsg(self, main, msg)
end

OnUIMsg() 함수는 UI 메시지를 받았을 때 호출되는 함수로, 몇가지의 경우를 제외하고 대부분의 경우 호출됩니다.

특히 다른 Edit 에 활성화 되어 있는 경우에는 모든 키 입력을 그 Edit 에서 받아서 처리하기 때문에, OnUIMsg() 함수가 호출되지 않습니다.

그래도 대부분의 경우에는 위와 같은 구현으로, 원하는 기능이 충분히 구현될 것이라고 믿습니다.

이상입니다.


다른곳: http://cms.hangame.com/post2/812/2611858


저작자 표시
신고



NPC 말풍선, 툴팁 이미지 박스의 경우에는 가변적으로 크기가 변합니다.

이 예제는 이미지 3조각 또는 이미지 9조각을 짜맞춰서 크기가 변하면서도,

테두리를 꾸며주는 이미지 박스를 보여주는 예제입니다.

이미지 3조각과 9조각은 정해진 형틀에 따라서 제작되어야 합니다.


3조각

{left} {center} {right}


9조각

{1-left-top}    {2-center-top}    {3-right-top}

{4-left-middle} {5-center-middle} {6-right-middle}

{7-left-bottom} {8-center-bottom} {9-right-bottom}


9조각의 경우에는

1, 7 조각과 3, 9 조각은 가로크기를 동일하게 해야 합니다.

4, 5, 6의 경우에는 세로크기를 동일하게 해야 합니다.


실행한 뒤에 기본적으로 3조각 이미지 박스가 마우스의 현재 위치에 따라 이동합니다.

SPACE 키를 누르면 9조각 이미지 박스로 바뀝니다.

숫자패드의 +, - 키를 눌러서 이미지 크기를 조절할 수 있습니다.

저작자 표시
신고


Graphic:SetClipRect(), Graphic:EnableClip() 함수를 이용한 HP Bar 예제입니다.

전체 HP 퍼센티지에 따라서 Clipping 픽셀 크기를 조절하여 남은 HP를 표현합니다.

HP가 깍이는 경우에는 반투명 효과를 이용해서 HP 변화량을 처리할 수도 있습니다.

저작자 표시
신고

티스토리 툴바