버튼이 통째로 줄어드는 것이 아니고 정말 딱 버튼 뒷 배경 네모 모양만 줄어든 것을 볼 수 있는데,
이것은 Sliced가 크기 조절 시 외부 경계선의 크기만 조절되고 내부는 동일하게 채우는 효과를 가지고 있어서 그렇습니다.
흰색 네모에 stroke 검은색인 이미지인데, 외부 겉 선만 크기의 영향을 받고 내부는 그냥 흰색으로 동일하게 채운 것입니다
Fill center를 체크 해제해보시면
구멍이 뚫리는데 남아있는 겉 부분만 겉 선이라고 유니티가 인식하고 있고 내부는 크기를 어떻게 조절하든 동일하게 채워지는 것입니다
그래서 Sliced는 UI에서 팝업창을 만들거나, 자유자재 크기로 이미지를 구현할 때 이용합니다
이제 버튼의 컴포넌트를 살펴봅시다
Button component
Interactable : 버튼이 활성화되어있는가(체크)? 아니면 비활성화 버튼인가(체크 해제)?
Transition : 어떻게 반응할 것인가? - Color Tint (Normal) 가만히 있을 때 / (Hightlighted) 마우스가 올라가 있을 때 / (Pressed) 버튼이 클릭되었을 때 / (Disabled) 버튼이 비활성화되었을 때
Navigation : 웹에서 보시면 로그인할 때, Tab을 누르면 아이 디치는 곳-> 비밀번호 치는 곳으로 자동으로 넘어가는 것을 볼 수 있는데, 그거랑 유사한 기능입니다. Tab을 누르면 다음 버튼으로 넘어가는? 기능
Onclick() 함수 : 버튼 클릭 시 호출되는 이벤트 함수 (밑에서 설명하도록 한다)
Onclick() 함수! 가장 핵심!
버튼을 클릭했을 때 어떠한 기능(함수/코드)이 실행되나
처음에는 Empty인데,
+를 이용해서 스크립트를 추가할 수 있습니다
전 강의? 에서 사용했던 MyBall스크립트를 드래그해서 넣어주었습니다
스크립트 안에 새로운 함수를 꼭 public으로 설정하여 어떤 액션을 취할지 코딩해주고
이제 No function부분을 자기가 만든 함수로 바꾸면 해당 기능이 수행되는데... 저는 안되더라고요
동기에게 질문해서 해결해봤는데
Button UI는 엥..? 그래서 저 함수 누가 하는 거..?? 누구한테 적용하면 되는 건데 라는 상태라고 합니다
그래서 Onclick함수에 MyBall스크립트가 아닌 MainBall오브젝트 자체를 드래그해주었습니다 그랬더니 되더라고요
저는 MyBall스크립트에서 Jump함수를 버튼에 적용시켰습니다
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class MyBall : MonoBehaviour
{
Rigidbody rigid;
// Start is called before the first frame update
void Start()
{
rigid = GetComponent<Rigidbody>(); //초기화
}
// Update is called once per frame
void FixedUpdate()
{
//2. 힘을 가하기 적용해서 물체 게임모드
float horizon = Input.GetAxisRaw("Horizontal")*0.5f;
float vertic = Input.GetAxisRaw("Vertical")*0.5f;
if(Input.GetButtonDown("Jump")){
rigid.AddForce(Vector3.up*5, ForceMode.Impulse);
}
Vector3 vec = new Vector3(horizon,0,vertic);
rigid.AddForce(vec, ForceMode.Impulse);
}
private void OnTriggerStay(Collider other) {
if(other.name == "Cube"){
rigid.AddForce(Vector3.up*2,ForceMode.Impulse);
}
}
public void Jump(){
rigid.AddForce(Vector3.up*20,ForceMode.Impulse);
}
}
마지막 줄에 퍼블릭으로 점프 함수를 추가해서 버튼을 누르면 점프 함수가 실행되는 모습을 볼 수 있습니다.
앵커 (Anchor)
매우 중요한 친구입니다 오늘 중에 가장 중요
UI화면에 제가 배치한 UI들이 정확한 자리에서 이동하지 않고 항상 어떤 기기로 접근해도
그 자리에 존재해야 하는데 그것을 담당하는 부분입니다
아 뭐야진짜 더럽네요 제가 디자인 감각이 없어서
여태까지 모든 오브젝트들은 Transform을 가지고 있었는데
UI 들은 특이하게도 Rect Transform이라는 것을 가집니다
UI트랜스폼이라고 생각하시면 됩니다
다른 오브젝트들은 그냥 world내에서 움직이지만
UI는 유저에게 보이는 것이기 때문에 무엇으로 접근하느냐에 따라 전부 다르게 보일 수 있어 그것을 방지하고자
기준을 Anchor라고 하는 친구로 잡고, 그것을 기준으로 배치합니다
마치 원주 좌표계가 뭐 원의 반지름 어쩌고 벌써 까먹었네 이런 친구 들을 기준으로 배치되는 것처럼 말이죠
저기 네모난 박스를 누르게 되면 Anchor Preset이라는 게 나오는데
Anchor를 어디에 배치할지를 결정하는 것입니다.
Anchor이 뭐냐면, 저는 지금 텍스트 유아이를 선택했는데
텍스트 유아이에게는 중심이 이것입니다
저기 충전하기 버튼 위에 있는 이상한 모양의 저것이 바로 텍스트 유아이의 중심입니다
중심으로부터 X축은 PosX, Y축은 PosY만큼 텍스트 UI가 떨어져 있다는 의미입니다.
이제 저 텍스트를 왼쪽 상단에 고정시켜봅시다
Anchor Preset을 지금 top/left로 했더니 Anchor가 저쪽으로 이동했습니다
이상태에서 shift를 누르면 파란 점이 나오는데
파란 점은 : 컴포넌트에서의 기준점
이 중앙에 있는 파란 링 말하는 것 같습니다
이 파란 링도 left/top에 맞춰준 후
Pos X Pos Y를 0,0으로 바꿔줍시다 ( 단축키 ALT를 누르면 여백 없이 자동으로 맞춰줍니다 )
이렇게 되면 딱 맞게 되는데 여백을 조금 주고 싶으면 0,0이 아닌 5, -5 정도로 주시면 됩니다
