Nút Interactive

*Nội dung này được dịch bằng AI (Beta) và có thể có lỗi. Để xem trang này bằng tiếng Anh, hãy nhấp vào đây.

Hướng dẫn này cho bạn thấy cách làm các nút trên màn hình cho mục menu, hành động màn hình và nhiều hơn nữa.

Các loại nút

Có hai loại obby tùy chỉnh bạn có thể sử dụng trong thiết kế UI của bạn:

Nút văn bản

Nút hình ảnh

Một TextButton giống như một TextLabel ngoại trừ việc người chơi có thể kích hoạt nó bằng cách nhấp chuột/nhấp chuột. Nó cũng chia sẻ nhiều thuộc tính thị giác tương tự - font, màu nền, màu đoạn văn, v.v.

Một ImageButton là giống như một phiên bản tương tác của ImageLabel đối tượng. Nó cũng chia sẻ hầu hết các thuộc tính tương tự như phiên bản không có nút của nó.

Tạo một nút

Các bước sau đây cho bạn thấy cách thêm một ImageButton vào màn hình và lật nó giữa ba vị trí tùy thuộc vào sự tương tác của người chơi.

  1. Trong cửa sổ Explorer, hover over the StarterGui object, click the + button, and insert a ScreenGui .

  2. Chọn đối tượng mới ScreenGUI và, theo cách tương tự, thêm một ImageButton .

    Điều này sẽ thêm một nút hình ảnh trống vào góc của cảnh nhìn trò chơi.

  3. Làm tốt nhất, đổi tên nút mới theo mục đích của nó, ví dụ MapButton .

Kích thước

Đối với nút để thay đổi kích thước dinhám ở các thiết bị và màn hình khác nhau, tốt nhất là sử dụng Scale tính năng.

  1. Trong cửa sổ Tính chất , tìm kiếm Kích thước tính chất và nhấp vào mũi tên để mở rộng cây của nó.

  2. Cài đặt các thuộc tính kích thước sau:

  3. Giới hạn nút để một chiếc hộp giới hạn hình vuông bằng cách thiết lập SizeConstraint để RelativeYY .

Thước đo

Kích thước hiện tại nên làm việc tốt trên một chiếc điện thoại, nhưng X/Y skala của 0.15 (15%) có vẻ quá lớn trên màn hình máy tính. Để sửa điều này, bạn có thể thêm một UISizeConstraint .

  1. Chuột vào đối tượng MapButton và thêm một UISizeConstraint .

  2. Chọn đối tượng hạn chế kích thước mới và đặt đặt MaxSize tính năng của nó đến 90, 90 .

Vị trí

Nhưng các nút thường được di chuyển trong khoảng cách ngón tay của một người chơi trên các thiết bị di động, ví dụ như khu vực dưới cùng phải của màn hình.

  1. Đổi AnchorPoint tính chất của nút thành 0,5, 1 để có thể xếp hạng dựa trên vị trí của nó ở trung tâm dưới cùng.

  2. Mở rộng cây Vị trí của nút và đặt các giá trị thuộc tính sau đây. Điều này sẽ di chuyển nút gần với nút nhảy mặc định xuất hiện trên các thiết bị tế bào.

Hình ảnh

Nút này cần ba hình ảnh tùy chỉnh - nó hiển thị bình thường trên màn hình, một hình ngoại hìnhhover-over và một hình ảnh cuối cùng cho khi người chơi nhấn nó.

Bình thường

Hover.

Bị ép

Cài đặt những hình dạng này có thể được thực hiện thông qua các thuộc tính Hình ảnh , HoverImage và PressedImage .

  1. Tìm kiếm thuộc tính hình ảnh của nút và nhập vào rbxassetid://6025368017 hoặc rbxassetid://6025368017.

  2. Đối với thuộc tính HoverImage , hãy vẽ trong rbxassetid://6025452347 .

  3. Đối với PressedImage tính năng, hãy vẽ trong rbxassetid://6025454897 .

Định dạng

Để kết thúc vẻ ngoài của nút trên màn hình, hãy thực hiện các điều chỉnh sau:

  1. Đặt Hiển thị mảng sau nền lên giá trị 1 để làm cho mảng sau nền trong suốt.

  2. Xoay nút nhỏ bằng cách thiết lập Rotation để -5 .

Chức Năng Của nút

Nhiệm vụ cuối cùng là kết nối các chức năng cơ bản của nút.

  1. Trong cửa sổ Explorer, hover over the MapButton object and insert a LocalScript .

  2. Trong script, sao chép và dán vào những dòng mới này:

    local button = script.Parent

    

    local function onButtonActivated()

    	print("Button activated!")

    	-- Thực hiện các hành động người dùng mong đợi ở đây

    end

    

    button.Activated:Connect(onButtonActivated)

Script nút đơn giản này hoạt động như sau:

  • Dòng đầu tiên đặt một nút biến cho phép script biết mối quan hệ với một đối tượng cụ thể nào. Trong trường hợp này, nó liên quan đến ImageButton , cha của script.
  • Hành onButtonActivated tác nhân xử lý việc kích hoạt nút. Trong nó, bạn nên thực hiện hành động định nghĩa như mở màn hình chính của trò chơi.
  • Dòng cuối cùng kết nối nút với chức năng onButtonActivated với sự kiện Activated . Điều này sẽ làm cho chức năng chạy mỗi khi một người chơi kích hoạt nút trong trò chơi.

Đã xử lý

Nếu nút không hoạt động như nên, hãy kiểm tra những gì theo dõi:

  • Đảm bạo bạn đã sử dụng một bên LocalScript , không phải một bên Script .
  • Đảm bảo rằng LocalScript là con của button object (không phải là con của Class.ScreenGui) container.
  • Xác nhận rằng các thuộc tính Hình ảnh của nút của bạn , HoverImage và PressedImage đã được cài đặt cho các tài nguyên hình ảnh phù hợp.