Home > HTML5 > สร้างเกมส์ด้วย HTML5 ง่ายๆ (part3-3)

สร้างเกมส์ด้วย HTML5 ง่ายๆ (part3-3)

สร้าง Sound Effect

ห่างหายไปกว่า 2 อาทิตย์ได้มั้ง ไปนั่งถ่างตาเคลียร์งานที่ประสานงาชนกันโครมคราม ตอนนี้เริ่มผ่อนคลายได้บ้าง เลยมาเขียน Blog อัพเดทการใส่ Sound Effect ให้กับตัวเกมส์กันนะครับ พูดถึง Sound หากใครไม่มี ก็คงต้องหาโหลดกันแหละ อ้าว! จะรู้ได้ไงหาดาวน์โหลดที่ไหน เสียตังหรือเปล่า? ใจเย็นครับ เรามีวิธีมาแนะนำ

บางคนอาจจะคิดไกลไปถึงโปรแกรมสร้างเสียงต่างๆ ไม่ผิดหรอกครับ คุณจะทำเองก็ได้ ดีซะอีกไม่มีใครมาสอยลิขสิทธิ์กับคุณ แต่ช้าก่อน เราต้องพุ่งสมาธิมาที่วิธีการใส่ Sound ให้เกมส์ด้วย Construct2 อย่าพึ่งเดินไปทางอื่น เดี๋ยวจะกลับลำบากครับ ^^ ดังนั้นเราต้องโหลด Sound ที่เขาทำเสร็จแล้ว มาใช้ประกอบการฝึก แล้วค่อยไปเสียเวลาประดิษฐ์ ประดอย Sound ที่คุณอยากจะทำเองทีหลัง…

เอาหละก่อนอื่นมาแนะนำก่อนว่าจะหา Sound Effect มาใส่เกมส์ได้ยังไง ปกติผมดูแถวๆนี้ครับ

1. http://Youtube.com (ใช้ Firefox ที่ติดตั้ง Plugin ที่ใช้ช่วยดาวน์โหลด VDO จาก Youtube ผมใช้โปรแกรมที่ชื่อ Easy Youtube Video Downloader 6.4)

2. http://Flashkit.com/soundfx/ ของดีฟรีใช้มานานนมสมัยทำ Flash ใหม่ๆ ก็ลองไปหาดู

ผมยกตัวอย่างที่ใช้บ่อยแค่ 2 เว็บละกัน คุณสามารถ Search ถามอากู๋ Google ได้ หรือลองเข้าลิ้งค์นี้ http://www.hongkiat.com/blog/55-great-websites-to-download-free-sound-effects/ ก็น่าจะช่วยย่นเวลาการหาไปได้เยอะครับ

แล้วผมจะใช้ Sound อะไร? ตอบได้ง่ายๆว่า ผม Search ใน Youtube นี่แหละ ง่ายดี ผมเจอลิ้งค์นี้เข้า เป็นเสียงเกมส์ในตำนานที่ชอบมาก 5555 คุ้นๆมะเสียงของเกมส์อะไร มาริโอ้ นั่นเอง เราจะเอามาใช้ศึกษาก่อนได้ครับ ไม่ได้เอาไปทำเชิงพาณิชย์ เขาคงไม่คิดหาเรื่องเราเนอะ อิอิ เอามาฝึกนี่นา… ขอยืมหน่อยนะ นะ นะ ขอบคุณค้าาบบ ^.^

อ้ะ ลองมาฟัง Sound กันก่อนนะ

Step1 : Download file (MP3 type)

1. ใครใช้ Firefox แบบผมก็โหลดโลดเลย เข้าหน้าส่วนเสริม (Ctrl+Shift+A)

2. เข้าหน้านี้แล้วโหลด โลด

3. ของผมใช้ตัวนี้ครับ โอเคนะมีให้เลือกชนิดไฟล์ดาวน์โหลดด้วย แล้วแต่ชอบครับ

4. ผมโหลดไฟล์เล็กๆพอ เป็น Mp3 (64k) — (เดี๋ยวถ้าตัดแล้ว Save ไฟล์ เป็น .Wav นะจ๊ะ)

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

ทีนี้เรามาดูเกมส์นิดนึง น่าจะมีเสียงไรมั่ง

Play Game Demo

สรุปจุดที่น่าจะต้องใส่เสียงก็มีดังต่อไปนี้

1. Jumping (กระโดด)
2.Collision enemy(ชนศัตรู)
3. Get item (รับของรางวัล)
4. Jump kill (โดดตื้บศัตรู)
5.Monster die (ศัตรูตาย)
6. Player die (ผู้เล่นตาย)

เอาละ ทีนี้ เราเอา Sound เหล่านี้ไปใส่เกมส์กันดีกว่า ง่ายมั่กๆๆๆๆๆๆๆ เลย

Step2 : Insert Sound

เปิดโปรแกรม Construct2 > Projects Dialogue(ขวามือจ้ะ) > Right clicked > Import sounds

เสร็จแล้วโกย Sound เข้า Folder เลยจ้า

มาถึงประเด็นเรื่องของ Bit dept บางคนถ้า Export file .Wav ออกมาเป็น 32 bit มันจะขึ้นเตือนแบบนี้

ดังนั้น ถอยหลังไป Export ใหม่เป็น 16 bit จ้า มันต้องขึ้นเครื่องหมายถูกสีเขียวแบบนี้เลย

เสร็จแล้ว Construct2 จะแปลงไฟล์นี้เป็น .Ogg (Ogg Vorbis) และ .m4a (MPEG-4 AAC) ใครไม่รู้ว่า 2 นามสกุลนี้คืออะไร อ่านได้ที่ http://www.w3schools.com/html5/html5_audio.asp

Step3 : Insert Audio Object

เปิดหน้า Layout tab ครับ แล้วคลิกพื้นที่สีฟ้า เสร็จแล้วเลือก Audio Object เข้าสู่ Project

คลิกที่ Event tab ครับ แล้วก็ดูตามเงื่อนไขที่เราจะใส่เสียง เช่นการกระโดด (Keyboard : Arrow Up)

เมื่อคลิก Add action จะมี Dialogue ให้เราใส่ค่า Parameters

Audio file : เลือกชื่อไฟล์
Loop : เลือกเอาครับ ถ้าเป็นการกระโดด ก็กำหนดว่า not looping เพราะให้มีเสียงเฉพาะตอนกด Arrow Up เท่านั้น
Tag(optional) : “ใส่คำอธิบาย Sound ลงไป ใส่ไม่ใส่ก็ได้ครับ”

พอใส่แล้วก็จะเป็นแบบนี้อ่ะ

จุดอื่นๆไปใส่กันเองนะครับ ^.^ จบละจร้าาาาา

Related Articles


About the author

นาย ณัฐพงศ์ พันธุศิลป์ (กอล์ฟ) Website Manager Unicorn Max Co.,Ltd.

Website : http://www.unicornmax.com

Facebook : http://www.facebook.com/unicornmax

Twiter :


  1. March 20th, 2013 at 16:57 | #1

    เยี่ยมครับ ทำเกมส์แนว shooting ได้หรือป่าวครับ

  1. No trackbacks yet.