เพิ่มเสียง 2D

เสียง 2D คือเสียงที่ไม่มีทิศทางซึ่งไม่ส่งออกจากตำแหน่งใดตำแหน่งหนึ่ง โดยยังคงเหมือนเดิมไม่ว่าสถานะหรือทิศทางของผู้ฟังในพื้นที่ 3D จะเป็นเช่นไร นั่นหมายความว่าเมื่อผู้เล่นเคลื่อนย้ายสถานที่ของผู้ฟังรอบ ๆ สภาพแวดล้อม พวกเขาสามารถได้ยินเสียง 2D ได้อย่างชัดเจนจากทุกทิศทางที่พวกเขาหันไป

โดยใช้ไฟล์ Gingerbread House - Start .rbxl เป็นจุดเริ่มต้นและ Gingerbread House - Complete Audio เป็นเอกสารอ้างอิง บทเรียนนี้จะแสดงวิธีเพิ่มเสียง 2D ทั้งแบบวนซ้ำและแบบครั้งเดียวในประสบการณ์ของคุณ รวมถึงแนวทางในการ:

• เพลงพื้นหลังที่วนซ้ำซึ่งเล่นเมื่อผู้เล่นเชื่อมต่อกับเซิร์ฟเวอร์
• เรียกเสียงเพื่อให้ผู้เล่นได้รับฟีดแบ็คทันทีตามเป้าหมายของการเล่นเกมของพวกเขา
• เปิดเสียงต่าง ๆ เพื่อระบุการมีปฏิสัมพันธ์กับส่วนติดต่อผู้ใช้ (UI) ที่แตกต่างกัน

หากคุณติดขัดในระหว่างกระบวนการ คุณสามารถใช้ Gingerbread House - Complete Audio เป็นเอกสารอ้างอิงเพื่อเปรียบเทียบความก้าวหน้าของคุณ

วัตถุเสียง 2D

ในการสร้างเสียงที่ไม่มีทิศทาง สิ่งสำคัญคือการเข้าใจเกี่ยวกับวัตถุเสียงที่คุณจะทำงานด้วยตลอดบทเรียนนี้ โดยมีสามประเภทหลักของวัตถุเสียงสำหรับเสียง 2D:

• วัตถุ AudioPlayer โหลดและเล่น ไฟล์เสียง
• วัตถุ AudioDeviceOutput คือ อุปกรณ์ฮาร์ดแวร์ทางกายภาพ ในโลกจริง เช่น ลำโพงหรือหูฟัง
• Wires ส่งสัญญาณเสียงจากวัตถุหนึ่งไปอีกวัตถุหนึ่ง

วัตถุเสียงทั้งหมดนี้ทำงานร่วมกันเพื่อถ่ายโอนเสียงจากการเล่นไฟล์ไปยังฮาร์ดแวร์ของผู้เล่น มาดูวิธีการทำงานนี้ในทางปฏิบัติ ด้วยตัวอย่างของผู้เล่นที่สวมใส่หูฟังขณะเล่นประสบการณ์ด้วยแล็ปท็อปของพวกเขา:

• วัตถุ AudioPlayer โหลด ID ของแอสเซทเสียง 127645268874265 ในประสบการณ์สำหรับเสียงเมื่อซื้อสินค้า
• Wire ส่งสัญญาณจาก AudioPlayer ไปยัง AudioDeviceOutput เพื่อให้สัญญาณดังออกมาจากหูฟังของผู้เล่น
• วัตถุ AudioDeviceOutput ส่งเสียงไปยังลำโพงทางกายภาพของผู้เล่น หรือในกรณีนี้คือหูฟังของพวกเขา

ส่วนต่าง ๆ ต่อไปนี้จะเจาะลึกยิ่งขึ้นและอ้างอิงถึงวัตถุเหล่านี้ขณะที่คุณเรียนรู้วิธีการเล่นเสียง 2D ทั้งแบบวนซ้ำและแบบครั้งเดียว ขณะที่คุณตรวจสอบวัตถุเหล่านี้ด้วยเทคนิคที่กำลังมา คุณจะสามารถคาดการณ์ได้อย่างแม่นยำว่าจะแคปเจอร์และส่งเสียงจากประสบการณ์ไปยังผู้เล่นได้อย่างไร

เสียงวนซ้ำ

เสียง 2D แบบวนซ้ำ หรือเสียงที่ไม่มีทิศทางซึ่งเล่นซ้ำเมื่อผู้เล่นเชื่อมต่อกับเซิร์ฟเวอร์ เป็นเทคนิคการออกแบบเสียงที่พบบ่อยเพื่อให้มีพื้นหลังเสียงที่เป็นเอกภาพไม่ว่าผู้เล่นจะทำอะไรหรืออยู่ที่ไหนภายในพื้นที่ 3D นอกจากนี้ เสียงวนซ้ำ 2D ยังช่วยให้ประสบการณ์ของคุณไม่เงียบสนิท ซึ่งอาจทำให้ผู้เล่นรู้สึกสับสนและถูกรบกวนจากวัตถุประสงค์ของพวกเขา

เพื่อแสดงแนวคิดนี้ ให้ตรวจสอบว่าเสียง 2D ต่อไปนี้ช่วยยกระดับคุณภาพของตัวอย่าง Hazardous Space Station อย่างไร หากไม่มีเพลงพื้นหลัง สถานีอวกาศจะรู้สึกว่างเปล่าและไร้ชีวิต อย่างไรก็ตาม เมื่อสถานีอวกาศมีเพลงพื้นหลัง สถานีอวกาศจะรู้สึกทั้งน่าหวาดกลัวและอันตราย เพิ่มบรรยากาศที่น่าขนลุกโดยรวม

เสียงวนซ้ำมีประโยชน์โดยเฉพาะในการกำหนดว่า คุณต้องการให้ผู้เล่นรู้สึกอย่างไรเมื่อพวกเขาเข้าร่วมประสบการณ์ของคุณเป็นครั้งแรก ตัวอย่างเช่น ตัวอย่างนี้ตั้งเป้าที่จะมอบการผจญภัยที่มีความสุขในดินแดนมหัศจรรย์ฤดูหนาว จึงใช้แทร็กเสียงที่มีจังหวะสนุกสนานเพื่อมีอิทธิพลในทางบวกต่ออารมณ์ของพวกเขาตั้งแต่พวกเขาเข้าไปในสภาพแวดล้อม เมื่อพิจารณาว่าทักษะนี้มีอิทธิพลมากเพียงใด ให้คิดว่า ประสบการณ์ของผู้เล่นจะเปลี่ยนไปอย่างไรหากคุณเปลี่ยนเสียงวนซ้ำออกไปเป็นแทร็กเพลงโลหะ

ในการสร้างเสียง 2D แบบวนซ้ำในตัวอย่างไฟล์ Gingerbread House - Complete Audio:

1. เปิดใช้งานตัวฟังเริ่มต้นที่เชื่อมต่อกับตัวละครของคุณ

   1. ในหน้าต่าง Explorer ให้เลือกที่ SoundService
   2. ในหน้าต่าง Properties ตั้งค่า DefaultListenerLocation เป็น Character เมื่อคุณรันประสบการณ์ เอ็นจิ้นจะสร้าง AudioDeviceOutput โดยอัตโนมัติภายใต้ SoundService

2. ในหน้าต่าง Explorer ให้ไปที่ SoundService จากนั้น:

   1. แทรกวัตถุ AudioPlayer เพื่อสร้างแหล่งเสียง
   2. แทรกวัตถุ AudioDeviceOutput เพื่อสร้างลำโพงที่เล่นไปทั่วประสบการณ์
   3. แทรกวัตถุ Wire เพื่อส่งสัญญาณจากผู้เล่นเสียงไปยังลำโพง

   

3. เลือก AudioPlayer จากนั้นในหน้าต่าง Properties,

   1. ตั้งค่า AssetID เป็น rbxassetid://1841461968 เพื่อเล่นแทร็กเสียงที่มีจังหวะสนุกสนาน
   2. เปิดใช้งาน Looping เพื่อให้เสียงเล่นซ้ำอย่างราบรื่น
   3. ตั้งค่า Volume เป็น 0.2 เพื่อให้เสียงดังในระดับต่ำ ในขณะที่คุณยังได้ยินแหล่งเสียงอื่นในประสบการณ์

4. เลือก Wire จากนั้นในหน้าต่าง Properties,

   1. ตั้งค่า SourceInstance เป็น AudioPlayer ใหม่ของคุณ เพื่อระบุว่าคุณต้องการให้สายนี้ส่งสัญญาณเสียงจากผู้เล่นเสียงเฉพาะนี้
   2. ตั้งค่า TargetInstance เป็น AudioDeviceOutput ใหม่ของคุณ เพื่อระบุว่าคุณต้องการให้สายนี้ส่งสัญญาณเสียงไปยังลำโพงเฉพาะนี้

5. กลับไปที่หน้าต่าง Explorer แทรก Script ลงใน AudioPlayer เปลี่ยนชื่อเป็น LoopBackgroundMusic ตั้งค่า RunContext ของมันเป็น Client จากนั้นวางโค้ดต่อไปนี้ลงในสคริปต์:

   local audioPlayer = script.Parent
   audioPlayer:Play()

   คำอธิบายโค้ด

   สคริปต์เริ่มต้นด้วยการประกาศตัวแปรเพื่อแทนที่ผู้ปกครองของสคริปต์ AudioPlayer จากนั้นสคริปต์จึงตั้งค่าแหล่งเสียงให้เล่นตั้งแต่เมื่อผู้เล่นเข้ามาในประสบการณ์จนถึงช่วงเวลาที่พวกเขาออกจากประสบการณ์

6. ทดสอบการเล่นประสบการณ์เพื่อฟังเพลงพื้นหลังวนซ้ำ

เสียงแบบครั้งเดียว

เสียง 2D แบบครั้งเดียว หรือเสียงที่ไม่มีทิศทางซึ่งเล่นเพียงครั้งเดียวในเวลาที่กำหนดและตำแหน่งเว้นแต่ผู้เล่นจะเรียกมันอีกครั้ง เป็นฟีดแบ็คที่สำคัญเกี่ยวกับสิ่งที่คุณไม่ต้องการให้พวกเขาพลาด การใช้ฟีดแบ็คการได้ยินประเภทนี้ในประสบการณ์ของคุณนั้นมีความสำคัญเพราะให้การตอบสนองที่ชัดเจนและทันท่วงทีต่อฟังก์ชันการเล่นเกมที่สำคัญและการกระทำของผู้เล่น เช่น การเริ่มต้นต่อสู้กับบอสหรือการสูญเสียสุขภาพในระดับที่สำคัญ

ส่วนต่อไปนี้ให้รายละเอียดการใช้งานสำหรับสถานการณ์การเล่นเกมทั่วไปที่ผู้เล่นต้องการฟีดแบ็คไม่เป็นทิศทางที่มีเวลาทันที รวมถึงฟีดแบ็คการเล่นเกม การโต้ตอบกับองค์ประกอบ UI และการบรรยายเสียงสำหรับบทเรียน

ฟีดแบ็คการเล่นเกม

เมื่อผู้เล่นพัฒนาผ่านประสบการณ์ของคุณ สิ่งสำคัญคือพวกเขาจะต้องได้รับฟีดแบ็คการได้ยินทันทีเกี่ยวกับสถานะของสิ่งใด ๆ ที่ส่งผลกระทบต่อการเล่นเกมของพวกเขา เช่น คะแนน สุขภาพ หรือความก้าวหน้าในระดับ ในฐานะที่เสียงประเภทนี้เชื่อมต่อโดยตรงกับวัตถุประสงค์ของผู้เล่น สิ่งสำคัญคือต้องให้เสียงเหล่านี้ชัดเจน ได้ยิน และสามารถถ่ายทอดข้อมูลที่มีประโยชน์และแม่นยำ

เพื่อแสดงแนวคิดนี้ ให้เราตรวจสอบเสียง 2D แบบครั้งเดียวจากเทมเพลต Platformer ที่เล่นเมื่อผู้เล่นกระโดดและเก็บเหรียญ:

• เสียงหวีดที่เบา ๆ จะดังขึ้นเมื่อผู้เล่นกดปุ่มกระโดดบนอุปกรณ์ของพวกเขา
• เสียงดิ่งสูงและเสียงเหรียญกระทบกันจะดังขึ้นเมื่อตัวละครของผู้เล่นสัมผัสเหรียญ

เสียงทั้งสองนี้สามารถจดจำได้ง่ายในบริบทของพื้นที่ 3D และช่วยให้ผู้เล่นเข้าใจความสำเร็จของการกระทำของพวกเขาโดยไม่ต้องพึ่งพาเฉพาะการบ่งชี้ทางสายตามากนัก

เมื่อคุณเล่นเสียงหลายเสียงพร้อมกัน เสียงบางเสียงอาจมีความสำคัญมากกว่าให้ผู้เล่นได้ยินมากกว่าเสียงอื่น ในกรณีนี้ เสียงการรวบรวมเหรียญมีการส่งมูลค่าที่มีค่าต่อการเล่นเกมมากกว่าเสียงกระโดด ดังนั้นประสบการณ์จึงเล่นมันด้วยระดับเสียงที่สูงขึ้นเล็กน้อย อย่างไรก็ตาม ไม่มีมาตรฐานหรือกฎในการทำให้มิกซ์เสียงยอดเยี่ยม ดังนั้นปรับแต่งเสียงในประสบการณ์เพื่อสะท้อนว่าสิ่งใดที่คุณรู้สึกว่าสำคัญที่สุด

ยกตัวอย่างว่าตัวอย่างรวมฟีดแบ็คเสียงต่าง ๆ ตลอดความประสบการณ์ แต่ไม่ได้ทั้งหมดอยู่ในระดับสำคัญเดียวกันในการทำความเข้าใจเกี่ยวกับวัตถุประสงค์หลักของประสบการณ์: รวบรวมหมากฝรั่งเพื่อเปิดบ้านขนมขิง เพื่อให้แน่ใจว่าผู้เล่นรับรู้ว่าพวกเขาต้องทำอะไร ตัวอย่างนี้จะเพิ่มเสียงฟีดแบ็คทางการได้ยินสามเท่าเมื่อผู้เล่นเก็บหมากฝรั่ง

ในการสร้างเสียงฟีดแบ็คสถานะแบบครั้งเดียวในไฟล์ตัวอย่าง Gingerbread House - Complete Audio:

1. ในหน้าต่าง Explorer ให้ไปที่ Workspace ⟩ Gumdrops ⟩ Gumdrop จากนั้น:

   1. แทรกวัตถุ AudioPlayer เพื่อสร้างแหล่งเสียง
   2. แทรกวัตถุ AudioDeviceOutput เพื่อสร้างลำโพงที่เล่นไปทั่วประสบการณ์
   3. แทรกวัตถุ Wire เพื่อส่งสัญญาณจากผู้เล่นเสียงไปยังลำโพง

   

2. เลือก AudioPlayer จากนั้นในหน้าต่าง Properties,

   1. ตั้งค่า AssetID เป็น rbxassetid://9113723699 เพื่อเล่นแทร็กเสียงการเคี้ยวเบา ๆ
   2. ตั้งค่า TimePosition เป็น 0.15 เพื่อเริ่มแทร็กเสียงใกล้กับเสียงการเคี้ยวที่แท้จริง
   3. ตั้งค่า Volume เป็น 3 เพื่อให้เสียงดังที่ระดับเสียงสูงเพื่อให้คุณได้ยินเสียงหมากฝรั่งเหนือแหล่งเสียงอื่นภายในประสบการณ์

3. เลือก Wire จากนั้นในหน้าต่าง Properties,

   1. ตั้งค่า SourceInstance เป็น AudioPlayer ใหม่ของคุณ เพื่อระบุว่าคุณต้องการให้สายนี้ส่งสัญญาณเสียงจากผู้เล่นเสียงเฉพาะนี้
   2. ตั้งค่า TargetInstance เป็น AudioDeviceOutput ใหม่ของคุณ เพื่อระบุว่าคุณต้องการให้สายนี้ส่งสัญญาณเสียงไปยังลำโพงเฉพาะนี้

4. ทำซ้ำ Gumdrop จนกว่าคุณจะมีหมากฝรั่งสามชิ้น จากนั้นกระจายพวกมันในสภาพแวดล้อม

5. กลับไปที่หน้าต่าง Explorer ให้ไปที่ ServerScriptService จากนั้นแทรก Script เปลี่ยนชื่อเป็น GumdropService ตั้งค่า RunContext ของมันเป็น Server จากนั้นวางโค้ดต่อไปนี้ลงในสคริปต์:

   -- การตั้งค่าเซอร์วิส
   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local ServerStorage = game:GetService("ServerStorage")
   local TweenService = game:GetService("TweenService")
   
   -- โมดูล
   local Leaderboard = require(ServerStorage.Leaderboard)
   local PlayerData = require(ServerStorage.PlayerData)
   
   -- ตัวแปร
   local gumdropsFolder = Workspace.Gumdrops
   local gumdrops = gumdropsFolder:GetChildren()
   
   local GUMDROP_KEY_NAME = PlayerData.GUMDROP_KEY_NAME
   local GUMDROP_AMOUNT_TO_ADD = 1
   
   local function updatePlayerGumdrops(player, updateFunction)
      -- อัปเดตตารางหมากฝรั่ง
      local newGumdropAmount = PlayerData.updateValue(player, GUMDROP_KEY_NAME, updateFunction)
   
      -- อัปเดตลีดเดอร์บอร์ดหมากฝรั่ง
      Leaderboard.setStat(player, GUMDROP_KEY_NAME, newGumdropAmount)
    
      -- ตรวจสอบว่าผู้เล่นได้เก็บหมากฝรั่งสามชิ้นหรือไม่
      if newGumdropAmount >= 3 then
         -- เล่นเสียงเหตุการณ์ประตูเมื่อผู้เล่นเก็บหมากฝรั่งสามชิ้น
         local audioPlayer = Workspace.Door.AudioPlayer
         audioPlayer:Play()
    	
         -- animate ประตูให้เคลื่อนที่ลง
         local doorPart = Workspace.Door
         local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Linear)
         local tween = TweenService:Create(doorPart, tweenInfo, {Position = doorPart.Position + Vector3.new(0, -15, 0)})
         tween:Play()
      end
   end
   
   -- กำหนด event handler
   local function onGumdropTouched(otherPart, gumdrop)
      if gumdrop:GetAttribute("Active") then
         local character = otherPart.Parent
         local player = Players:GetPlayerFromCharacter(character)
         if player then
            -- ผู้เล่นสัมผัสหมากฝรั่ง
            local audioPlayer = gumdrop.AudioPlayer
            audioPlayer:Play()
    		
            gumdrop.Transparency = 1
            gumdrop:SetAttribute("Active", false)
            updatePlayerGumdrops(player, function(oldGumdropAmount)
            oldGumdropAmount = oldGumdropAmount or 0
            return oldGumdropAmount + GUMDROP_AMOUNT_TO_ADD
            end)
         end
      end
   end
   
   -- ตั้งค่า event listeners
   for _, gumdrop in gumdrops do
      gumdrop:SetAttribute("Active", true)
      gumdrop.Touched:Connect(function(otherPart)
      onGumdropTouched(otherPart, gumdrop)
      end)
   end

   คำอธิบายโค้ด

   สคริปต์นี้จัดการการทำงานเพิ่มเติมนอกเหนือจากการเรียกเสียงที่ไม่มีทิศทาง เช่น การอัปเดตลีดเดอร์บอร์ดทุกครั้งที่ผู้เล่นเก็บหมากฝรั่งและเรียกเสียงและการทำอนิเมชั่นที่เป็นตำแหน่งสำหรับประตูบ้านขนมขิงเมื่อผู้เล่นเก็บหมากฝรั่งทั้งสามชิ้น สิ่งนี้มีความสำคัญต่อการเล่นเกมของตัวอย่าง แต่ไม่ได้สำคัญต่อการทำความเข้าใจวิธีการใช้งานเสียง 2D ดังนั้นคำอธิบายนี้จะยังคงให้ข้อมูลส่วนนี้ในระดับสูง

   สคริปต์นี้เริ่มต้นด้วยการตั้งค่าบริการ Workspace, Players, ServerStorage, และ TweenService เพื่อที่มันจะสามารถเข้าถึงเด็กและฟังก์ชันality ของพวกมันได้ จากนั้น มันจะใช้โมดูล Leaderboard และ PlayerData ใน ServerStorage โมดูลเหล่านี้รับผิดชอบในการสร้างและอัปเดตลีดเดอร์บอร์ดที่มุมขวาบนของหน้าจอซึ่งติดตามจำนวนหมากฝรั่งที่ผู้เล่นเก็บในสภาพแวดล้อม

   ฟังก์ชัน updatePlayerGumdrops ของสคริปต์ส่วนใหญ่รับผิดชอบในการอัปเดตลีดเดอร์บอร์ดในแต่ละครั้งที่ผู้เล่นเก็บหมากฝรั่ง และรอคอยช่วงเวลาที่ผู้เล่นเก็บหมากฝรั่งทั้งสามชิ้นเพื่อเรียกเสียงและการทำอนิเมชั่นสำหรับประตูบ้านขนมขิง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับส่วนนี้ของสคริปต์ โปรดดูที่ Add 3D audio - Event feedback.

   ฟังก์ชัน onGumdropTouched ของสคริปต์คือที่ซึ่งงานส่วนใหญ่เกิดขึ้นในการเรียกเสียง 2D เพื่อฟีดแบ็คการเล่นเกม และมันรับสองอาร์กิวเมนต์:

   • otherPart - ส่วนที่ชนกับหมากฝรั่ง
   • gumdrop - ส่วนกลมที่แทนหมากฝรั่ง

   เมื่อตัวใดตัวหนึ่งชนกับส่วนหมากฝรั่ง สคริปต์จะตรวจสอบก่อนว่า หมากฝรั่งนั้นใช้งานอยู่หรือไม่ หากใช่ ก็จะตรวจสอบเพื่อยืนยันว่าวัตถุที่ชนกันนั้นเป็นผู้เล่นหรือไม่ หากใช่ สคริปต์จะ:

   • เล่นแทร็กเสียง 2D จากผู้เล่นเสียง
   • ทำให้หมากฝรั่งมองไม่เห็น
   • ปิดการใช้งานหมากฝรั่งเพื่อที่ผู้เล่นจะไม่สามารถโต้ตอบกับหมากฝรั่งที่มองไม่เห็นได้
   • อัปเดตลีดเดอร์บอร์ดสำหรับผู้เล่นที่สัมผัสหมากฝรั่ง

   สุดท้าย สคริปต์จะตั้งค่า event listeners เพื่อว่าทุก ๆ หมายเลขหมากฝรั่ง จะเชื่อมต่อฟังก์ชันของวัตถุ Touched ซึ่งจะเรียกฟังก์ชัน onGumdropTouched เมื่อผู้เล่นสัมผัสหมากฝรั่ง

6. ทดสอบการเล่นประสบการณ์เพื่อฟังเสียงการเคี้ยวหลังจากที่คุณเก็บหมากฝรั่ง

การโต้ตอบ UI

เมื่อผู้เล่นมีปฏิสัมพันธ์กับองค์ประกอบ UI ของคุณ เช่น การวางเมาส์เหนือช่องทำเครื่องหมายหรือการเลือกปุ่มซื้อ ฟีดแบ็คทันทีจะมีความสำคัญเพื่อให้พวกเขาเข้าใจได้อย่างชัดเจนว่า พวกเขากำลังโต้ตอบกับ UI ของคุณอย่างไร ตัวอย่างเช่น ดีไซน์เนอร์หลายคนจะเปลี่ยนลักษณะทางสายตาของ UI เมื่อผู้เล่นเปิดหรือปิดการตั้งค่าเพื่อสื่อสารสถานะของการตั้งค่า

อย่างไรก็ตาม สำหรับผู้เล่นที่มีปัญหาด้านสายตาซึ่งการเปลี่ยนแปลงสีหรืออนิเมชั่นทำให้ยากในการแยกแยะ เมื่อพิจารณาถึงหลายวิธีในการให้ฟีดแบ็คทางประสาทสัมผัสสำหรับการโต้ตอบ UI ของคุณจึงมีความเป็นประโยชน์เพื่อให้ทุกคนยังคงเข้าถึงได้และเข้าใจได้ง่ายสำหรับผู้เล่นให้มากที่สุด นอกจากนี้เรายังสามารถพิจารณาสถานะ UI ต่อไปนี้ซึ่งมีความสำคัญสำหรับปุ่มซื้อของเทมเพลต UGC Homestore:

• อยู่ในโฟกัส - แสดงว่าผู้เล่นกำลังไฮไลต์องค์ประกอบ UI เพื่อเตรียมเลือก
• เมื่อชี้ - แสดงว่าผู้เล่นกำลังชี้ไปที่องค์ประกอบ UI ด้วยเคอร์เซอร์
• ถูกเลือก - แสดงว่าผู้เล่นได้เลือกองค์ประกอบ UI ผ่านการป้อนข้อมูลของพวกเขา

การโต้ตอบสามแบบนี้เป็นสิ่งที่จำเป็นสำหรับกระบวนการหลักของผู้ใช้ในเทมเพลต ซึ่งผู้เล่นเรียกดู เลือก และซื้อชุดเสื้อผ้าและอุปกรณ์เสริมของอะวาตาร์ ดังนั้นจึงเป็นเรื่องสำคัญอย่างยิ่งที่ไม่มีใครจะสับสนเกี่ยวกับการโต้ตอบกับ UI เพื่อให้เตรียมความพร้อมสำหรับผู้เล่น เทมเพลตนี้ให้ฟีดแบ็คทั้งทางสายตาและเสียงสำหรับการโต้ตอบกับ UI แต่ละประเภท

เพื่อเป็นตัวอย่างของวิธีการที่คุณสามารถกำหนดค่าให้มีฟีดแบ็คหลากหลายรูปแบบ เทมเพลตนี้ให้ฟีดแบ็คทั้งทางสายตาและทางเสียงทุกครั้งที่ผู้เล่นกดปุ่มเปปเปอร์มินท์บนหน้าจอ เมื่อผู้เล่นไม่ได้โต้ตอบกับปุ่ม มันจะปรากฏเป็นลูกอมเปปเปอร์มินท์ทั่วไป แต่เมื่อพวกเขากดปุ่ม ตัวอย่างจะทำตามนี้:

• เล่นแทร็กเสียงจิงเกิ้ลที่น่ารื่นรมย์
• เปลี่ยนสีของปุ่มให้เป็นสีฟ้า
• ขยับปุ่มไปทางด้านล่างของหน้าจอเล็กน้อย

จากจุดนี้ คุณสามารถเชื่อมโยงการโต้ตอบนี้กับการกระทำที่มีประโยชน์ในเกม เช่น การเปิดเมนูหรือการซื้อไอเทม

ในการสร้างเสียงการโต้ตอบ UI แบบครั้งเดียวในไฟล์ตัวอย่าง Gingerbread House - Complete Audio:

1. ในหน้าต่าง Explorer ให้ไปที่ StarterGui ⟩ 2DAudioButton จากนั้น:

   1. แทรกวัตถุ AudioPlayer เพื่อสร้างแหล่งเสียง
   2. แทรกวัตถุ AudioDeviceOutput เพื่อสร้างลำโพงที่เล่นไปทั่วประสบการณ์
   3. แทรกวัตถุ Wire เพื่อส่งสัญญาณจากผู้เล่นเสียงไปยังลำโพง

   

2. เลือก AudioPlayer จากนั้นในหน้าต่าง Properties ตั้งค่า AssetID เป็น rbxassetid://3422389728 เพื่อเล่นแทร็กเสียงจิงเกิ้ลแบบเรโทร

3. เลือก Wire จากนั้นในหน้าต่าง Properties,

   1. ตั้งค่า SourceInstance เป็น AudioPlayer ใหม่ของคุณ เพื่อระบุว่าคุณต้องการให้สายนี้ส่งสัญญาณเสียงจากผู้เล่นเสียงเฉพาะนี้
   2. ตั้งค่า TargetInstance เป็น AudioDeviceOutput ใหม่ของคุณ เพื่อระบุว่าคุณต้องการให้สายนี้ส่งสัญญาณเสียงไปยังลำโพงเฉพาะนี้

4. กลับไปที่หน้าต่าง Explorer แทรก LocalScript ลงใน 2DAudioButton เปลี่ยนชื่อเป็น PlayAudioWhenPressed จากนั้นวางโค้ดต่อไปนี้ลงในสคริปต์:

   local TweenService = game:GetService("TweenService")
   
   local buttonGui = script.Parent
   local buttonImageButton = buttonGui.ButtonFrame.ButtonImageButton
   local buttonAudioPlayer = buttonGui.AudioPlayer
   
   local tweenInfo = TweenInfo.new(.2, Enum.EasingStyle.Exponential)
   
   local buttonTweenByIsPressed = {
      -- ถูกกด
      [true] = TweenService:Create(buttonImageButton, tweenInfo, {
         Position = buttonImageButton.Position + UDim2.fromScale(0, .1),
         ImageColor3 = Color3.fromRGB(117, 255, 255),
      }),
   
      -- เริ่มต้น
      [false] = TweenService:Create(buttonImageButton, tweenInfo, {
         Position = buttonImageButton.Position,
         ImageColor3 = Color3.fromRGB(255, 255, 255),
      }),
   }
   
   local function onIsPlayingChanged()
      local isPlaying = buttonAudioPlayer.IsPlaying
      local tween = buttonTweenByIsPressed[isPlaying]
      tween:Play()
   end
      
   onIsPlayingChanged()
   buttonAudioPlayer:GetPropertyChangedSignal("IsPlaying"):Connect(onIsPlayingChanged)
   buttonAudioPlayer.Ended:Connect(onIsPlayingChanged)
   
   buttonImageButton.Activated:Connect(function(_hit)
      buttonAudioPlayer:Play()
   end)

   คำอธิบายโค้ด

   สคริปต์นี้จัดการฟังก์ชันเพิ่มเติมนอกเหนือจากการเล่นเสียง 2D สำหรับการโต้ตอบ UI เช่น การเคลื่อนที่และการเปลี่ยนสีของปุ่ม ฟังก์ชันนี้มีความสำคัญต่อการให้ฟีดแบ็คทางประสาทสัมผัสหลากหลายรูปแบบ แต่ข้อกำหนดในการออกแบบสำหรับกรณีการใช้งานของคุณอาจต้องการเพียงการฟีดแบ็คทางเสียง หากคุณต้องการเพียงเล่นเสียงเมื่อผู้เล่นสัมผัสองค์ประกอบ UI คุณสามารถลบฟังก์ชันการเคลื่อนที่ได้

   สคริปต์นี้เริ่มต้นด้วยการรับ:

   • TweenService เพื่อให้มันสามารถทำอนิเมชั่น UI
   • วัตถุ 2DAudioButton ScreenGui
   • ปุ่มลูกอมเปปเปอร์มินท์ ImageButton
   • ผู้เล่นเสียงที่เกี่ยวข้องกับแทร็กเสียงจิงเกิ้ลของคุณ

   จากนั้นสคริปต์กำหนด:

   • วัตถุ TweenInfo ที่ระบุว่าอนิเมชั่นของปุ่มจะเล่นด้วยสไตล์อนิเมชั่นสไตล์รวม
   • สองรูปแบบการเคลื่อนไหวที่แสดงถึงสถานะที่ถูกกดหรือไม่ถูกกดของปุ่ม

     • สถานะที่ถูกกด true จะทำให้ปุ่มเคลื่อนที่ลงไปเล็กน้อยบนหน้าจอและเปลี่ยนสีเป็นสีฟ้า
     • สถานะที่ไม่ถูกกด false จะทำให้ปุ่มกลับไปยังตำแหน่งเดิมบนหน้าจอและลบสีที่ก่อนหน้าออกไป

   ที่เหลือของสคริปต์คือจุดที่เกิดงานส่วนใหญ่ในการเรียกฟีดแบ็คการโต้ตอบ UI 2D ดังนั้นให้ตรวจสอบว่า onIsPlayingChanged ฟังก์ชันและ event listeners ทำงานร่วมกันอย่างไรสำหรับการไหลของผู้ใช้ UI:

   1. buttonImageButton.Activated ฟังการคลิกจากผู้เล่นที่ปุ่มแล้วเรียกฟังก์ชัน Play() เพื่อเริ่มเล่นเสียงที่เกี่ยวข้องจากผู้เล่นเสียง ขั้นตอนนี้ทำให้คุณสมบัติ AudioPlayer.IsPlaying เปลี่ยนจาก false เป็น true
   2. buttonAudioPlayer:GetPropertyChangedSignal("IsPlaying") ฟังให้คุณสมบัติ IsPlaying ของผู้เล่นเสียงเปลี่ยนไป แล้วเรียกฟังก์ชัน onIsPlayingChanged
   3. ฟังก์ชัน onIsPlayingChanged ใช้ข้อมูลนี้เพื่อเรียกการเคลื่อนที่ที่เปลี่ยนลักษณะทางสายตาของมันบนหน้าจอ
   4. เพื่อป้องกันไม่ให้ผู้เล่นทำการคลิกเพื่อเล่นเสียงซ้ำซากอย่างรวดเร็วเมื่อพวกเขาคลิกที่ปุ่ม ฟังก์ชัน buttonAudioPlayer.Ended ฟังเมื่อผู้เล่นเสียงเสร็จสิ้นการเล่นก่อนที่จะเรียกฟังก์ชัน onIsPlayingChanged อีกครั้ง

   สิ่งสำคัญคือฟังก์ชัน onIsPlayingChanged จะมีการเรียกไฟเมื่อมันเปลี่ยนจาก false เป็น true เท่านั้น หมายความว่ามันจะไม่เรียกเมื่อมันเปลี่ยนจาก true เป็น false นี่เป็นพฤติกรรมที่ตั้งใจเนื่องจากปัญหาของการจำลองคุณสมบัติจากเซิร์ฟเวอร์ไปยังลูกค้า ในสีนี้ เมธอด Ended จะมีให้ในตัวอย่างนี้เพื่อรวมกรณีทั้งสอง

5. ทดสอบการเล่นประสบการณ์เพื่อฟังเสียงจิงเกิ้ลทุกครั้งที่คุณกดปุ่มบนหน้าจอ