상호 작용 버튼

이 튜토리얼에서는 메뉴, 인터페이스 작업 및 기타를 위한 온-스크린 버튼을 만드는 방법을 보여줍니다.

버튼 종류

UI 디자인에서 사용할 수 있는 두 가지 버튼 개체가 있습니다.

텍스트 버튼	이미지 버튼
Class.TextButton 는 플레이어가 클릭/탭으로 활성화할 수 있는 TextLabel 와 유사하지만, 클릭/탭으로 활성화할 수 있는 것은 Class.TextButton 입니다. 이 모든 시각적 속성은 서로 공유됩니다. - 글꼴, 배경 색, 윤곽 색, 등.	Class.ImageButton 는 인터랙티브 버전의 ImageLabel 개체와 같습니다. 또한 버튼이 아닌 대체 개체의 대부분의 속성을 공유합니다.

버튼 생성

다음 단계에서는 플레이어의 상호 작용에 따라 화면에 ImageButton 를 추가하는 방법을 보여 줍니다.

1. 탐색기 창에서 StarterGui 개체 위로 마우스를 이동하고 + 버튼을 클릭하고 ScreenGui를 삽입합니다.

   

2. 새로운 ScreenGui 개체를 선택하고 비슷한 방식으로 ImageButton 를 삽입합니다.

   

   이렇게 하면 게임 뷰의 모서리에 빈 이미지 버튼이 추가됩니다.

3. 모범 사례를 위해 목적에 따라 새 버튼의 이름을 변경하십시오, 예를 들어 MapButton .

   

크기

다양한 디바이스와 화면에서 버튼을 동적으로 크기 조정하려면 크기 조정 속성을 사용하는 것이 좋습니다.

1. 속성 창에서 크기 속성을 찾아 화살표를 클릭하여 트리를 확장합니다.

   

2. 다음 크기 속성을 설정합니다.

   

3. 크기 제한을 상대 YY 로 설정하여 버튼을 정사각형 바인딩 상자에 제한합니다.

   

크기 조정

현재 크기는 전화에서 잘 작동하지만, X/Y 크기의 0.15(15%) 확장은 컴퓨터 화면에서 너무 큽니다. 이를 수정하려면 Class.UISizeConstraint를 추가할 수 있습니다.

1. MapButton 개체 위로 마우스를 이동하고 UISizeConstraint 를 삽입합니다.

   

2. 새로운 크기 제한 개체를 선택하고 그의 최대 크기 속성을 90, 90 로 설정합니다.

   

위치

버튼은 일반적으로 모바일 장치의 플레이어 싫어 구역 내에서 이동해야 합니다, 예를 들어 화면 오른쪽 하단 구역입니다.

1. 버튼의 앵커포인트 속성을 0.5, 1 로 변경하여 위치를 중앙 하단 점 주위에 기반하도록 합니다.

   

2. 버튼의 위치 트리를 확장하고 다음 속성 값을 설정합니다. 이렇게 하면 버튼이 전화기/태블릿에 나타나는 기본 점프 버튼 근처에 이동합니다.

   

이미지

이 버튼에는 세 개의 사용자 이미지가 필요합니다. 화면에 표시되는 것, 마우스로 이동하는 모습및 플레이어가 버튼을 누르면 마지막 이미지가 됩니다.

일반적인 것은 일반적인 것입니다.

호버링

누르기

이러한 모양을 설정하려면 이미지 , 호버 이미지 및 누르기 이미지 속성을 통해 수행할 수 있습니다.

1. 버튼의 이미지 속성을 찾아 rbxassetid://6025368017 또는 자산을 사용하십시오.

   

2. For the 호버 이미지 속성, rbxassetid://6025452347 에 붙여넣습니다.

   

3. PressedImage 속성에 대해 rbxassetid://6025454897 를 붙여넣습니다.

   

스타일

버튼의 화면 표시를 완성하려면 다음 조정을 수행하십시오.

1. 배경 투명도 1 로 설정하여 배경을 투명하게 합니다.

   

2. 회전을 부드럽게 설정하여 버튼을 약간 회전합니다.

   

버튼 기능

마지막 작업은 기본 버튼 기능을 연결하는 것입니다.

1. 탐색기 창에서 지도 버튼 개체 위로 마우스를 이동하고 로컬 스크립트를 삽입합니다.

   

2. 스크립트에서 이 새로운 줄을 복사하고 붙여 넣습니다.

   local button = script.Parent
   
   local function onButtonActivated()
   	print("Button activated!")
   	-- 여기서 예상되는 버튼 액션동작(들)을 수행하십시오
   end
   
   button.Activated:Connect(onButtonActivated)

이 간단한 버튼 스크립트는 다음과 같이 작동합니다:

• 첫 번째 줄에서 스크립트에 특정 개체를 연결할 하나의 변수 버튼을 설정합니다. 이 경우 ImageButton , 스크립트의 부모입니다.
• 버튼 활성화 함수는 버튼의 활성화를 처리합니다. 안에서 게임 메뉴를 엽니 다와 같은 의도한 작업을 수행해야 합니다.
• 마지막 줄 연결 버튼을 onButtonActivated 함수에 버튼을 연결하는 함수로 실행합니다. 이렇게 하면 함수가 게임에서 플레이어가 버튼을 활성화할 때마다 실행됩니다.

문제 해결

버튼이 제대로 작동하지 않으면 팔로잉확인하십시오.

• 클라이언트 사이드 LocalScript 를 사용했는지 확인하십시오, 서버 사이드 Script 를 사용하지 마십시오.
• 버튼 개체의 직접 자식인지 확인하십시오(LocalScript 컨테이너의 자식이 아님).
• 버튼의 이미지 , 호버 이미지 및 압축 이미지 속성이 적절한 이미지 자산으로 설정되었는지 확인하십시오.