develop SelectionUI

목차

• 변경 전
• 변경 이후

Before

준비

• 유혁진-develop MainCollection의 Collection 참고 바람
• 씬 로드 연결
• 주의!: 버튼 안에 캐릭터&스테이지 이미지 설정이 따로 있다.

CharacterSelectionUI

세팅

• MainCollection을 복사 붙여 놓기 하여 CharacterSelectionUI에 필요한 부분 빼고 삭제하고(Content내부) 알맞게 조정한다.

Content 내부

1. Character라는 버튼을 생성
2. 이미지 적용

• 
  • Target Graphic: 바꿀 이미지
  • Highlighted Sprite: 마우스 위에 올 경우 하이라이트 될 스프라이트
  • Pressed Sprite: 눌렀을 때 바뀔 스프라이트
  • Selected Sprite: 선택되었을 때의 스프라이트
  • Disabled Sprite: 다른 것을 선택을 하여 선택이 풀리거나 위 상황 외의 모든 상황

3. 스크립트 적용 후 변수와 매칭

• 
  • M Character는 캐릭터 번호
  • M Info Image는 정보창의 뜰 이미지 뛰우기
  • M Button Image는 버튼의 이미지 가져오기
  • M Character Name는 정보창의 뜰 이름
  • M Character Explain는 정보창의 뜰 설명
  • 그 외 모든 것은 계층창의 CharacterInfo와 매칭

4. Contents에 적용된 Grid Layout Group 아래와 같이 변경

• 
  • Cell Size: 한 칸 당 크기
  • Spacing: 칸과 칸 사이의 간격
  • Start Corner: 시작 지점
  • Start Axis: x축으로 시작할 지 y축으로 시작할 지 결정
  • child Alignment: 사용 가능한 공간을 전부 사용하지 않는 경우, 사용할 방법 선택
  • Constraint: 행렬 수 제한
  • Constraint Count: 최대 몇 개까지 한 줄에 넣을 지

5. character 복사 후 이미지 알맞게 배정

Character Info

• 

스크립트

using UnityEngine.UI;
using UnityEngine.EventSystems;
using TMPro;

public class CharacterInfo : MonoBehaviour, IPointerEnterHandler
{
    [SerializeField] int mCharacter;
    [SerializeField] Image mInfoImage;
    [SerializeField] Image mButtonIamge;
    [SerializeField] TMP_Text mCharacterName;
    [SerializeField] TMP_Text mCharacterName1;
    [SerializeField] TMP_Text mCharacterExplain;
    [SerializeField] TMP_Text mCharacterMaxStamina;
    [SerializeField] TMP_Text mCharacterRecovery;
    [SerializeField] TMP_Text mCharacterDefense;
    [SerializeField] TMP_Text mCharacterSpeed;
    [SerializeField] TMP_Text mCharacterDamage;
    [SerializeField] TMP_Text mCharacterProjectileSpeed;
    [SerializeField] TMP_Text mCharacterDuration;
    [SerializeField] TMP_Text mCharacterAttackRange;
    [SerializeField] TMP_Text mCharacterCooldown;
    [SerializeField] TMP_Text mCharacterNumberOfProjectiles;
    [SerializeField] TMP_Text mCharacterMagnet;
    [SerializeField] TMP_Text mCharacterLuck;
    [SerializeField] TMP_Text mCharacterGrowth;

    string mName;
    string mExplain;
    float mMaxStamina;
    float mRecovery;
    float mDefense;
    float mSpeed;
    float mDamage;
    float mProjectileSpeed;
    float mDuration;
    float mAttackRange;
    float mCooldown;
    int mNumberOfProjectiles;
    float mMagnet;
    float mLuck;
    float mGrowth;

    void Start()
    {
        switch (mCharacter)
        {
            case 1:
                this.mName = "캐릭터 이름1";
                this.mExplain = "캐릭터 설명1";
                this.mMaxStamina = 101;
                this.mRecovery = (float)0.1;
                this.mDefense = 1;
                this.mSpeed = 11;
                this.mDamage = 11;
                this.mProjectileSpeed = 11;
                this.mDuration = 11;
                this.mAttackRange = 11;
                this.mCooldown = -1;
                this.mNumberOfProjectiles = 1;
                this.mMagnet = 1;
                this.mLuck = 11;
                this.mGrowth = 11;
                break;
...
        }
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
        //지정한 텍스트 대입
        mCharacterName.text = this.mName;
        mCharacterName1.text = this.mName;
        mCharacterExplain.text = this.mExplain;
        mCharacterMaxStamina.text = "Max stamina" + this.mMaxStamina.ToString();
        mCharacterRecovery.text = "Recovery" + this.mRecovery.ToString();
        mCharacterDefense.text = "Defense" + this.mDefense.ToString();
        mCharacterSpeed.text = "Speed" + this.mSpeed.ToString() + "%";
        mCharacterDamage.text = "Damage" + this.mDamage.ToString() + "%";
        mCharacterProjectileSpeed.text = "Projectile Speed" + this.mProjectileSpeed.ToString() + "%";
        mCharacterDuration.text = "Duration" + this.mDuration.ToString() + "%";
        mCharacterAttackRange.text = "AttackRange" + this.mAttackRange.ToString() + "%";
        mCharacterCooldown.text = "Cooldown" + this.mCooldown.ToString() + "%";
        mCharacterNumberOfProjectiles.text = "Number of projectiles" + this.mNumberOfProjectiles.ToString();
        mCharacterMagnet.text = "Magnet" + this.mMagnet.ToString() + "%";
        mCharacterLuck.text = "Luck" + this.mLuck.ToString() + "%";
        mCharacterGrowth.text = "Growth" + this.mGrowth.ToString() + "%";
        mInfoImage.GetComponent().sprite = mButtonIamge.GetComponent().sprite;  //이미지 대입
    }
}

StageSelectionUI

세팅

• CharacterSelectionUI을 복사 붙여 놓기 하여 StageSelectionUI에 필요한 부분 빼고 삭제하고(Content내부와 Explain) 알맞게 조정한다.

Content 내부

1. Stage라는 버튼을 생성
2. 이미지 적용
3. 스크립트 적용 후 변수와 매칭

• * M Character는 캐릭터 번호
  • M Stage는 스테이지 번호
  • M Stage Name은 스테이지 이름
  • M Stage Explain은 스테이지 설명
  • 그 외 모든 것은 계층창의 StageInfo와 매칭

4. Contents에 적용된 Grid Layout Group 아래와 같이 변경

• 

5. Stage 복사 후 이미지 알맞게 배정

Stage Info

• 

스크립트

using UnityEngine.UI;
using UnityEngine.EventSystems;
using TMPro;

public class StageInfo : MonoBehaviour, IPointerEnterHandler
{
    [SerializeField] int mStage;
    [SerializeField] TMP_Text mStageName;
    [SerializeField] TMP_Text mStageName1;
    [SerializeField] TMP_Text mStageExplain;
    [SerializeField] TMP_Text mStagePlayTime;
    [SerializeField] TMP_Text mStageDoubleSpeed;
    [SerializeField] TMP_Text mStageGoldCoinBonus;
    [SerializeField] TMP_Text mStageLuckBonus;
    [SerializeField] TMP_Text mStageExperienceBonus;

    string mSName;
    string mExplain;
    string mPlayTime;
    float mDoubleSpeed;
    float mGoldCoinBonus;
    float mLuckBonus;
    float mExperienceBonus;

    void Start()
    {
        switch (mStage)
        {
            case 1:
                this.mSName = "스테이지 1";
                this.mExplain = "스테이지 설명 1";
                this.mPlayTime = "30:01";
                this.mDoubleSpeed = 1;
                this.mGoldCoinBonus = 1;
                this.mLuckBonus = 1;
                this.mExperienceBonus = 1;
                break;
...
        }
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
        mStageName.text = this.mSName;
        mStageName1.text = this.mSName;
        mStageExplain.text = this.mExplain;
        mStagePlayTime.text = "Play Time " + this.mPlayTime;
        mStageDoubleSpeed.text = "Double Speed " + this.mDoubleSpeed.ToString() + "%";
        mStageGoldCoinBonus.text = "Gold Coin Bonus " + this.mGoldCoinBonus.ToString() + "%";
        mStageLuckBonus.text = "Luck Bonus " + this.mLuckBonus.ToString() + "%";
        mStageExperienceBonus.text = "Experience Bonus " + this.mExperienceBonus.ToString() + "%";
    }
}

참고자료

• 유니티 유용한 함수
• SerializeField에 대하여

After