UI Shop 화면 구성

*상인의 shop 시스템을 UI로 구성. (화면 설계)

 1. 상점 

 

2. 상점 팝업 

 

  * Gride (정적 스크롤 뷰) 
  1. Canvas 생성
  2. -image (scrollview) 캔버스에 생성, 스크롤뷰 영역 잡기, scroll view 컴포넌트 부착(content 액세스), Mask 추가
  3. -contents  생성, 앵커 잡기, content size filter 컴포넌트 부착(horizontal / vertical 설정)
  4. -image(cell) 생성 , 앵커 잡기

 

 * UIShopDirector 구조 잡기

  #Canvas(UIShopDirector) -> GameObject(UIShop) -> frame -> GameObject(UIShopGrid) ->GameObject(content)

    ->Image(Cell 0,1,2,3 ...) 

* UIShopDirector  컴포넌트 셋팅

  *UIShopGrid 

   -Scroll Rect : Content에 content 엑세스 (스크롤 뷰로 쓰일 콘텐츠 엑세스), Vertical (세로 스크롤뷰만 사용할 것임으로        체크)

   -Mask 

 

*content

 - Content Size Fitter : 자체 레이아웃의 크기 조절(Vertical Fit ->Preferred Size로 변경)

 -Grid Layout Group : 셀 사이즈, 간격 조절

 *UIShopPopupDirector 구조 잡기

  *GameObject(UIPopup) ->img(frame)

 *UIShopPopupDirector 컴포넌트 셋팅

  *btnClose(팝업 창 닫기), btnSelect(구매 결정), btnCancle(취소 ==팝업 창 닫기) -> Button 컴포넌트 부착

 

 

*전체구조 (UIShopDirector -> UIShop -> UIShopPopupDirector)

*아직 구조를 만드는게 어색하다 ㅎㅎ UIShopPopupDirector 도 디렉터가 아닌 오브잭트로 수정이 필요하다

*전체 코드

 *UIShopDirector

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UIShopDirector : MonoBehaviour
{
    public UIShop uiShop;
    public Button btnShop;

    public Action uiShopAction;
    private void Awake()
    {
        //this.uiShop.gameObject.SetActive(false);
        this.btnShop.onClick.AddListener(() => { 
            this.uiShop.gameObject.SetActive(true);
        });
        this.uiShop.Init();

        this.uiShopAction = () =>
        {
            Debug.Log("UIShop Scene");
        };
    }
}

*UIShop

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UIShop : MonoBehaviour
{
    //dim
    public Button dim; //dim ->팝업 비활성

    //Page
    public Button btnNextPage; //이전 페이지
    public Button btnBeforePage; //다음 페이지
    
    //Tab
    public Button normalTab;
    public Button specialTab;
    public Button expendablesTab;

    //Grid
    public Button btnCell; //클릭하면 UIShopPopup 활성
    //private List<Button> cellList=new List<Button>();

    //Close
    public Button btnClose;

    //Goods
    public Text txtGold; //재화 (골드)
    public Text txtEther; //재화(에테르)

    //UIShopPopup
    public UIShopPopupDirector uiShopPopup;

    public void Init()
    {
        this.dim.onClick.AddListener(() => { 
            this.gameObject.SetActive(false);
        });
        this.btnClose.onClick.AddListener(() => { 
            this.gameObject.SetActive(false);
        });

        //UIShopPopup
        this.btnCell.onClick.AddListener(() => {
            this.uiShopPopup.gameObject.SetActive(true);            
        });
        this.uiShopPopup.Init();
    }
}

*UIShopPopupDirector

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UIShopPopupDirector : MonoBehaviour
{
    public Button dim; //dim
    public Button btnClose; //닫기(X) 버튼 -> 팝업 창 닫힘
    public Button btnSelect; //구매 버튼 ->구입한 장비아이템 이름 보여주기
    public Button btnCancel; //취소 -> 팝업 창 닫힘
    public Text txtNameDetail;
    public void Init() 
    {
        // 팝업 창 닫기, 구매("구매한 아이템 txt 보여주기"), 취소(팝업 창 닫기)
        this.dim.onClick.AddListener(() => { 
            this.gameObject.SetActive(false); 
        });
        this.btnClose.onClick.AddListener(() => {
            this.gameObject.SetActive(false);
        });
        this.btnSelect.onClick.AddListener(() => {
            Debug.LogFormat("{0}",this.txtNameDetail);
        });
        this.btnCancel.onClick.AddListener(() => {
            this.gameObject.SetActive(false);
        });
    }
}

 

*dim과 close버튼으로 UIShopDirector가 비활성화 되고 Shop버튼으로 다시 활성화된다. Cell을 누르면 UIShopPopup 이 활성화되게 만들어야하는데 어떤것을 잘못했는지 활성화는되지만 씬에서 보이지 않는다 내일 수정 예정 ...