56. 위젯

http://hyrule.tistory.com/111 

*** 공부 방법 ***

 

---

class CWidgetWindow

- 위젯을 담고있을 큰 창

이런 구성으로 만들어질 것

 

- CScene 외에는 접근 불가(friend 처리)

 

{ class CScene m_Scene }

 

{ int ZOrder }

< Get / Set >

 

{ std::vector<CSharedPtr<class CWidget>> m_vecWidget }
< class CWidget* GetWidget(int Index) >

< int GetWidgetCount() > 

 

 

{ bool m_Visibility }

< Get / Set >

 

{ Vector2 m_Pos }

< Get / Set >

 

{ Vector2 m_Size }

< Get / Set >

 

< virtual bool Init() >

< virtual bool Update(float DeltaTime) >

< virtual void PostUpdate(float DeltaTime) >

< virtual void Render(HDC hDC, float DeltaTime) >

 

 

< T* CreateWidget(const std::string& Name)

- template 사용

- 필요한 위젯을 WidgetWindow에 추가하는 기능.

 

< T* FindWidget(const std::string& Name) >

- template 사용

- 만들어진 위젯을 찾는 기능

---

class CWidget

- Include/UI/ 아래에 저장한다.

- UI 필터에 모아놓는다.

- CRef를 상속받아 Reference Count를 사용해준다.

 

- 위젯: UI를 만들기 위한 기본 부품

{ class CScene m_Scene }

- 소속된 클래스를 저장

 

{ class CWidgetWindow* m_Owner }

- 소속된 위젯 창을 저장.

 

{ int ZOrder }

- 위젯의 그리기 순서. 누가 위에 보일 것인지

< 해당 변수의 Get, Set 메소드 >

 

{ bool m_Visibility }

- 위젯을 보여줄것인지 말것인지

< 해당 변수의 Get, Set 메소드 >

 

{ Vector2 m_Pos }

{ Vector2 m_Size }

< 해당 변수들의 Get, Set 메소드 >

 

{ bool m_MouseHovered }

 

< virtual void Init() >

< virtual void Update(float DeltaTime) >

< virtual void PostUpdate(float DeltaTime) >

< virtual void Render(HDC hDC, float DeltaTime) >

< virtual void Render(HDC hDC, const Vector2& Pos, float DeltatTime) >

 

< bool CollisionMouse(const Vector2& Pos, float DeltaTime) >

- 마우스와 사각형의 충돌 로직을 구현한다.

- 만약 충돌일 경우, 마우스가 처음으로 UI의 사각형 안으로 들어왔을 경우, CollisionMouseHoveredCallback() 메소드를 호출한다.

 

< virtual void CollisionMouseHoveredCallback(const Vector2& Pos) >

- m_MouseHovered 변수를 true로 변경해 준다.

 

< virtual void CollisionMouseReleaseCallback() >

- m_MouseHovered 변수를 false로 돌려놓는다.

---

class CButton: public CWidget

- 필요할 경우 virtual 메소드를 재정의해서 사용한다.

 

< virtual void CollisionMouseHoveredCallback(const Vector2& Pos) >

- 우선 부모 클래스의 동일 함수를 호출한다.

 

< virtual void CollisionMouseReleaseCallback() >

- 우선 부모 클래스의 동일 함수를 호출한다.

 

{ CSharecPtr<class CTexture> m_Texture }

- 사용할 텍스처

- 버튼은 상황에 따라서(ex, 마우스가 올라왔을때, 클릭했을때, 비활성화 되어있을때 등) 다른 모습을 출력하여 사용자가 알 수 있게 할 필요가 있다 -> 그러므로 sprite나 frame을 통해 여러 개의 버튼 이미지를 등록하여 사용해야 한다.

---

flag.h

{ enum class EButtonState }

- Normal, MouseHovered, Click, Disable, Max

 

{ enum class EButtonSoundState }

- MouseHovered, Click, Max

---

class CButton: public CWidget

{ AnimationFrameDate m_StateData[(int)EButtonState::Max] }

- 버튼이 어떤 상태인지에 따라 다른 이미지를 출력하기 위해 Sprite 타입의 버튼 표시 좌표를 저장하는 변수

애니메이션 재생처럼 이런 식으로 놓고 출력하기 위함

 

{ EButton_State m_ButtonState }

- 현재 버튼의 상태

 

{ std::function<void()> m_CilckCallback[(int)EButtonState::Max) }

 

{ CSharedPtr<class Sound> m_StateSound[(int)EButtonSoundState::Max] }

 

< 텍스처 생성 설정 관련 메소드들 >

public:
    void SetTexture(const std::string& Name, const TCHAR* FileName,
        const std::string& PathName = TEXTURE_PATH);
    void SetTextureFullPath(const std::string& Name, const TCHAR* FullPath);

#ifdef UNICODE

    void SetTexture(const std::string& Name, const std::vector<std::wstring>& vecFileName,
        const std::string& PathName = TEXTURE_PATH);
    void SetTextureFullPath(const std::string& Name, const std::vector<std::wstring>& vecFullPath);

#else

    void SetTexture(const std::string& Name, const std::vector<std::string>& vecFileName,
        const std::string& PathName = TEXTURE_PATH);
    void SetTextureFullPath(const std::string& Name, const std::vector<std::string>& vecFullPath);
#endif

 

< void SetButtonStateData(const Vector2& Start, const Vector2& End) >

< void EnableButton(bool Enable) >

 

< void SetSound(EButtonSoundState State, const std::string& Name) >

- Hovered, Click에 대한 사운드를 지정하는 메소드.

 

< void SetCallback(EButtonSoundState State, T* Obj, void(T::*Func)()) >

- template 사용.

- 버튼에 state에 따른 콜백함수를 등록해주는 함수.

 

< CButton() >

- m_ButtonState를 Normal로, m_StateData를 0으로 초기화해준다.

 

 

< virtual void Update() >

- 매 프레임마다 m_Size를 구한다 -> m_Size는

 

 

< virtual void Render(HDC hDC, float DelatTime) >

이런 구성으로 만들어질 것

- 이 그림을 보면, 모든 개별 위젯의 경우 WidgetWindow를 기준으로 그려져야 한다.

- 그러므로 Widget의 m_Pos는 WidgetWindow에서 있을 자리를 저장해 놓고, 

WidgetWindow의 m_Pos에서 더해서 최종 그려질 위치를 정해주어야 한다.

 

- 위젯이 실제 그려질 지점을 구해서, m_Texture가 있을때는 해당 m_Texture의 상태를 구해서 그리고,

m_Texture가 없을 때는 그냥 일반 사각형으로 그려준다.(CGameObject::Render() 메소드에서 긁어오면 된다)

 

 

---

class CScene;

{ std::vector<CSharedPtr<class CWidgetWindow>> m_vecWidgetWindow }

- CWidgetWindow는 CScene에서 관리된다.

 

< T* CreateWidgetWindow(const std::string& Name = "Window" >

- template 사용

- CreateObjet()와 똑같은 방식으로 만든다.

 

< Update, PostUpdate, Render >

- 모든 과정에서 CWidgetWindow 처리도 추가한다.

- UI는 게임화면 위에 항상 출력되어야 하므로 CGameObject의 출력 이후에 출력해주어야 한다.

- 출력 시 m_Visibility의 상태를 확인하고 true면 출력하지 않는다.

 

 

---

class CStartWindow: public CWidgetWindow;

- CWidgetWindow 클래스를 상속받아 실제로 생성될 윈도우 창.

- 여기서 버튼을 하나 생성한다. 

SetTexture를 통해 스프라이트 버튼 이미지를 등록해놓고,

SetButtonStateData를 통해 상황별로 어떤 이미지를 출력시킬 것인지를 설정해 준다.

Setsound를 통해서 마우스가 올라가면 사운드가 재생되도록 해본다.(물론 아직 충돌처리를 하지 않아 재생은 되지 않을것임)

 

---

class CStartScene: public CScene

- 이제 버튼을 통해 씬 전환이 되도록 만들어보자.

 

- MainScene과 동일하게 만들고, 초기화 과정에서 CStartWindow를 생성해서 버튼이 출력되는지 확인한다.

 

<텍스처를 로딩하지 않았을 때>

 

 

<텍스처를 로딩했을 떄>

 

 

GameFrameworkStepbyStep_56_UIStructure1.zip

3.39MB