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

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

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

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

หากคุณติดขัดในกระบวนการใด ๆ คุณสามารถใช้ 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 the door to move downward
         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
   
   -- การกำหนดฟังก์ชันจัดการเหตุการณ์
   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
   
   -- การตั้งค่าฟังเหตุการณ์
   for _, gumdrop in gumdrops do
      gumdrop:SetAttribute("Active", true)
      gumdrop.Touched:Connect(function(otherPart)
      onGumdropTouched(otherPart, gumdrop)
      end)
   end

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

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

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

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

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

   • otherPart - ส่วนที่ชนกับกัมดรอป
   • gumdrop - ส่วนทรงกลมที่แทนกัมดรอป

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

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

   สุดท้าย สคริปต์จะตั้งค่าฟังเหตุการณ์เพื่อให้สำหรับกัมดรอปแต่ละลูก จะเชื่อมต่อฟังก์ชันกับเหตุการณ์ 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 และฟังเหตุการณ์ทำงานร่วมกันอย่างไรสำหรับการไหลของผู้ใช้ 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. ทดสอบเกมเพื่อฟังเสียงจิงเกิลทุกครั้งที่คุณกดปุ่มบนหน้าจอ