Storyboard ใน Osu! คืออะไร ?

- Storyboard หรือ เรียกสั้นๆว่า SB คือส่วนตกแต่งภายในของ Beatmap ซึ่งจะใช้รูปภาพต่างๆมาสร้างสรรค์ Beatmap ให้ดูน่าสนใจมากขึ้น

จะเริ่มต้นอย่างไรดี ?

๑) ลองคิดดูก่อนว่าเราอยากทำโปรเจคแบบไหน
๒) มี Beatmap ของตัวเองที่ดูสมบูรณ์แล้ว
๓) หาวัตถุดิบให้กับ Beatmap (พวกไฟล์รูปภาพ,เนื้อเพลง ฯลฯ)
๔) คุณต้องมีความอดทนสูงครับ เพราะการทำ SB ไม่ได้ใช้เวลาแค่ 1-2 นาที -w- (ผมทำสูงสุดเกือบ 3 เดือนน่ะ)
๕) คุณต้องมีความคิดสร้างสรรค์ใหม่ๆตลอดเวลา เพราะนี่คือการใช้แบบ "เบื้องต้น" เท่านั้น

ข้อควรรู้ก่อนใช้ Storyboard

๑) ไฟล์ที่จะนำมาทำ SB นั้นควรมีความยาวและกว้างสูงสุดคือ 640*480 pixel (ถ้าทำภาพนิ่ง)
๒) ขนาดไฟล์ SB ทั้งหมดไม่จำกัดความจุ (ถ้าคุณไม่สามารถทำให้ไฟล์เล็กลงได้) อ้างอิงจาก Beuchi-chan ด้านล่าง

There's no problem with having a BIG storyboard if there's no way you can make it smaller. If all the images you're using have the correct resolution and not a unnecessarily big one it will problably be OK.

I can give you a clear example of this showing you this map: http://osu.ppy.sh/s/24960
The filesize is almost 22MB and the storyboard uses almost 60 different images, but they're all 640x480/800x600 big so there's no way I could make it smaller. In this case, the filesize is ok.

๓) ขนาดไฟล์ Maximum จริงๆ อยู่ที่ 24 MB ต่อ Beatmap (หากเกินจะ upload ไม่ได้)
๔) แนะนำพยายามทำให้ไฟล์มีขนาด < 15 MB
๕) ถ้าทำภาพเคลื่อนไหวพวกท้องฟ้า ความกว้างสูงสุดแนะนำ 480 pixel ครับ ยาวเท่าไหร่ก็ได้

Now let's start :3

๑) เข้าที่ Edit
๒) เลือกเพลงที่ต้องการทำ (สมมติผมเลือกเพลงนี้)
๓) จะเข้าสู่หน้าจอหลักของการทำให้คลิกแถบ Design (ใกล้ๆ Compose)
๔) จะถึงหน้าจอหลักของ Design คราวนี้มาทำความรู้จักกับเครื่องมือต่างๆกัน [เน้นบริเวณ Keyframe control (ด้านบนกลาง) และ Transformation (ซ้ายมือ)]


Keyframe

ส่วนใหญ่ใช้เครื่องมือ [+] และ [-] (เดียวอธิบายอีกทีใช้ยังไง)

Transformation
เมื่อกำหนดให้สี่ต่างๆแทนค่าดังนี้
Move = ใช้ในการเคลื่อนรูปภาพไปมา
Scale = ใช้ในการซูมเข้า-ออก ของรูปภาพ
Fade = ใช้เพื่อแสดงรูปภาพแบบค่อยๆจนชัด (จากไม่มีรูป>มีรูปแสดงออกมา)
Rotate = ใช้ในการหมุนรูปภาพ

๕) เลือกเวลาที่จะวาง SB ให้ดีๆก่อนจากรูปด้านบนผมเลือกช่วง 00:30:237 กดเลือก Transformations อะไรก็ได้ที่อยากทำ (ผมเลือก Move) จากนั้นกดปุ่มเขียวๆขวามือ Sprite Library
๖) จะพบหน้าต่างนี้ ซึ่งจะแสดงรูปภาพที่มีในโฟลเดอร์ สมมติผมเลือก SB-BG.jpg ก็คลิกเข้าไปที่รูปเลย (กรณีที่ไม่มีรูปก็คลิก Browse)
๗)จะปรากฎรูปภาพ SB บนหน้าจอดังนี้ (รูปด้านล่าง) สังเกตว่าเมื่อเลื่อนเวลาไปข้างหน้านิดนึงภาพ SB จะหายไปและบนช่วงแถบเส้นเวลาด้านบนจะมีเส้นเล็กๆอยู่ (ดังรูปถัดไป)
- เส้นเล็กๆคืออะไร ? คำตอบคือเส้นเริ่มต้นการ Move ของรูปภาพนี้ (จะได้ใช้ Keyframe ละ)
- แล้วถ้าใช้อย่างอื่นล่ะพวก Scale, Fade ฯลฯ ? คำตอบคือเหมือนกันแต่เส้นเล็กๆจะอยู่ต่างช่องกัน (ดูแถบเวลาด้านบนจะมีเส้น 3 เส้นแบ่งเป็น บน = move, รองบน = scale, รองล่าง = fade, ล่าง = rotate)

===========================================================================================================

How to use move, scale, fade and rotate transformation function ?

:: Move ::

จากวิธีที่ ๗ เห็นเส้นเริ่มต้น move แล้วใช่มั้ย ? คราวนี้เรามาใช้ keyframe กัน

จาก 00:30:237 เป็นจุดเริ่มต้น สมมติว่าผมเลื่อนเวลาไปที่ 00:32:903 (ตรวจสอบให้ดีว่าคุณคลิกชื่อรูปภาพรึยังทางด้านขวามือบริเวณ Foreground) หลังจากนั้นลองคลิกที่ปุ่ม [+] ตรง keyframe จะพบว่าภาพแสดงผล ถึงเวลา 00:32:903 และมีเส้นเขียวยาวๆจากจุดเริ่มถึง ณ บริเวณที่พึ่งกด [+]
ลองกลับมาที่จุดเริ่มต้นของรูปภาพนี้แล้วลองเลื่อนรูปภาพดู สมมติผมเลื่อนอย่างนี้
การแสดงผลในตัวอย่าง
พอเวลาเล่นเพลงในช่วงที่ทำ SB มันก็จะแสดงรูปแบบผ่าครึ่ง ค่อยๆเลื่อนไปทางซ้ายจนกลับไปเป็นรูปบน (รูปภาพกลับมาเต็มจอเหมือนเดิม)

ปล1. คุณสามารถทำ multi-move โดยการกด [+] ได้ทุกบริเวณเส้นเขียว แล้วลองลากรูปดูจะพบว่ารูปจะเลื่อนไปยังตำแหน่งที่คุณกด [+] ในแต่ละจุดจนไปถึงเส้นสุดท้าย
ปล2. หากคุณลากเส้น storyboard ในช่วงเวลาเท่าไหร่ภาพนั้นจะแสดงจนจบเสันที่ทำเท่านั้น

:: Scale ::

วิธีทำจะคล้ายกับการทำ move ครับแต่จะมีการเปลี่ยนแปลงวิธีใช้ดังนี้

เลือก Transformations เป็น scale

ทำตามขั้นตอนด้านบนคือเลือกรูปจากกด Sprite Library > เลือกรูปที่ต้องการ (สมมติผมใช้รูปเดิมครับ) > ลากช่วงเวลาที่ต้องการ (ผมใช้เวลาเดิมครับ)

ลองใช้เมาส์กดค้างบริเวณรูปภาพลากขึ้นไปทางด้านบนภาพจะเป็นอย่างนี้

ในทางกลับกันหากเรากดค้างเลื่อนเมาส์ลงมาด้านล่างจะได้ภาพประมาณนี้

* ขนาดของการซูมเข้าหรือซูมออก จะขึ้นอยู่กับการขยับเมาส์ของคุณครับ

การแสดงผลจากวิธีทำตัวอย่าง
- ซูมเข้า
ภาพ SB-BG.jpg จากขนาดปกติจะเริ่มขยายไปเรื่อยๆ จนสุดเส้นของ scale ดังภาพด้านบน
- ซูมออก
ภาพ SB-BG.jpg จากขนาดปกติจะมีขนาดเล็กลงเรื่อยๆ และเห็นภาพ BG ปกติ จนสุดเส้นของ scale ดังภาพข้างบน


ปล1. คุณสามารถทำ multi-scale โดยการกด [+] ได้ทุกบริเวณเส้นแดง แล้วลองขยาย หรือ หด รูปดูจะพบว่ารูปขยาย หรือ หดตามตำแหน่งที่คุณกด [+] ในแต่ละจุดจนไปถึงเส้นสุดท้าย
ปล2. ในการทำ Storybord ในช่อง Design นั้นจะมีกรอบรูปสี่เหลี่ยมผืนผ้าอยู่ 2 กรอบ (กรอบนอก และกรอบในที่มีตารางเยอะๆ) พยายามทำให้รูป SB ของคุณอย่าเล็กกว่ากรอบรูปสี่เหลี่ยมด้านนอกเป็นอันขาดครับ

:: Fade ::

วิธีทำจะคล้ายกับการทำ move และ scale ครับแต่จะมีการเปลี่ยนแปลงวิธีใช้ดังนี้

เลือก Transformations เป็น Fade

ทำตามขั้นตอนด้านบนคือเลือกรูปจากกด Sprite Library > เลือกรูปที่ต้องการ (สมมติผมใช้รูปเดิมครับ) > ลากช่วงเวลาที่ต้องการ (ผมใช้เวลาเดิมครับ)

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

การแสดงผลจากวิธีทำตัวอย่าง
ในช่วงเวลาที่กำหนดจากภาพ BG ปกติจะเริ่มเปลี่ยนสีไปเรื่อยๆจนได้ภาพ SB-BG.jpg เต็มหน้าต่าง

ปล. การ Fade นั้นการเลื่อนเมาส์ขึ้นจะเป็นการทำให้รูปภาพแสดงผลออกมาในทางกลับกันถ้าลากเมาส์ลงภาพก็หายไปดังตัวอย่าง

:: Rotate ::

วิธีทำจะคล้ายกับการทำ 3 ตัวบนครับ (ไม่ใช่หวยนะ ) แต่จะมีการเปลี่ยนแปลงวิธีใช้ดังนี้

เลือก Transformations เป็น Rotate

ทำตามขั้นตอนด้านบนคือเลือกรูปจากกด Sprite Library > เลือกรูปที่ต้องการ (สมมติผมใช้รูปเดิมครับ) > ลากช่วงเวลาที่ต้องการ (ผมใช้เวลาเดิมครับ)

ลองกลับมาที่จุด start ของเส้น rotate แล้วลองกดเมาส์ค้างแล้วลากขึ้นดูจะได้ตัวอย่างดังภาพ
ภาพจะหมุนตามแรงเมาส์ที่เราลากครับ

การแสดงผลของตัวอย่าง
จากจุดเริ่มต้นของเส้น rotate ภาพจะเริ่มหมุนทวนเข็มนาฬิกาจนกลับมาเป็นรูปเดิม ณ จุดสุดท้ายของเส้น rotate

ปล.การลากเมาส์ขึ้นจะทำให้ภาพหมุนตามเข็มนาฬิกา ในทางกลับกันถ้าลากเมาส์ลงภาพจะหมุนทวนเข็มนาฬิกา

===========================================================================================================

ข้อควรระวัง !

๑) ถ้าคุณมีหลายรูปภาพที่จะทำ SB ดังตัวอย่าง ให้คุณระวังเป็นพิเศษเพราะคุณสามารถพลาด เผลอไปกดรูปภาพอื่นแล้วทำการ move ฯลฯ โดยไม่ได้ตั้งใจ
คำแนะนำ
- ถ้าคุณใส่รูปภาพแล้วกดลากเส้นฟังก์ชั่นต่างๆ แล้วไม่ปรากฏภาพ แนะนำออกจากแม็พก่อนครับโดยที่ไม่ต้องเซฟ (ถ้าแก้โน้ตก็เซฟครับ)
- ถ้าคุณกะจะแก้รูปภาพในเส้นฟังก์ชั่นแล้วมันไม่ยอมแสดงผลตามที่เราต้องการ delete รูป SB นั้นแล้วนั่งทำใหม่ครับ
- ถ้าคุณทำ SB ไปได้หลายรูปภาพแล้ว (มี scroll bar ให้เลื่อนดังตัวอย่าง) ก่อนทำการแก้ฟังก์ชั่นให้เปลี่ยนแถบเป็น compose ก่อนแล้วค่อยกลับมาแถบ Design ทำการเลื่อนเมาส์ลงมาล่างสุดของ scroll bar จะพบรูปภาพ SB ล่าสุดของคุณ (ลดโอกาสการไปจิ้มรูปภาพอื่นแบบไม่ได้ตั้งใจ) ทำแบบนี้ทุกรูป

๒) ถ้าคุณกะจะสร้าง SB คุณต้องแน่ใจว่าเพลงนั้นไม่มีการเปลี่ยน offset แล้ว ทำไมน่ะหรอ ?
- ถ้าทำ SB เสร็จแต่ offset เปลี่ยนเวลาแก้ SB จะลำบากมากขึ้นเพราะเวลาที่ใช้ไม่ตรงกัน
คำแนะนำ
- ไปแก้ในไฟล์ .osb เลยครับ (ถ้าไม่รู้ ก็ถามผู้รู้ได้ครับว่าแก้อย่างไร)

๓) SB load สำคัญมาก !!
- ในการสร้าง SB ในเกมจะกำหนดค่า SB load ครับ จะแสดงอยู่ทางด้านล่างของแถบเวลาด้านบน หน่วยเป็น ms ซึ่งทางเกมได้กำหนดไว้ว่า SB load ควรมีไม่เกิน x5.00 ครับ (หากเกินผู้เล่นอาจเกิดอาการกระตุกได้) และไม่ได้ถูกนำไป Rank อีกด้วย

ข้อควรรู้เกี่ยวกับ SB load
- SB load ปกติถ้าไม่ได้สร้าง SB จะอยู่ที่ x1.00 ครับ (เพราะ BG หลักของเรานั่นเอง)
- เพิ่ม SB 1 รูปภาพจะเท่ากับเพิ่ม SB load +1.00 (ภาพต้องนิ่งเท่านั้น)
- ในการเพิ่มรูปภาพซ้อนกันในช่วงเวลาเดียวกัน จะเป็นการเพิ่ม SB load ครับ โดยที่ 1 รูปภาพจะเพิ่ม SB load +1.00, 2 รูป ก็ +2.00
- การใช้ Move จะเป็นการเพิ่ม SB load ขึ้นอยู่กับว่าใช้เลื่อนมากน้อยเพียงใดแต่ที่แน่ๆเพิ่ม 1.00+ ครับแต่ไม่เกิน 2.00
- การใช้ Scale จะเป็นการเพิ่ม SB load ขึ้นอยู่กับว่าขยายมากน้อยเพียงใด ยิ่งมีการซูมเข้าเรื่อยๆจะยิ่งทวีคูณ SB load
- การใช้ Fade จะเป็นตัวช่วยในการลด SB load ของรูปภาพนั้นครับโดยที่หาก Fade in จนภาพชัดเต็มๆ SB load จะ +1.00 แต่ถ้า Fade out SB load ของภาพนั้น = 0.00
- การใช้ Rotate จะเป็นการเพิ่ม SB load ขึ้นอยู่กับว่าภาพหมุนเร็วมากน้อยเพียงใดแต่ส่วนใหญ่แล้วจะอยู่ที่ +1.00 ถึง 2.00

เคล็ดลับการทำให้ SB load ของคุณ -1.00 โดยไม่มีเงื่อนไข (เครดิต by Gonzvlo)
- มันก็คือการ remove BG หลักของเรานั่นเองครับโดยคุณสามารถแก้โค้ตใน .osb file ดังนี้ (สำหรับผู้ที่ไม่ต้องการใช้ BG หลัก)

[Events]
//Background and Video events
//Storyboard Layer 0 (Background)
Sprite,Background,Centre,"ชื่อไฟล์รูปภาพ BG ของคุณ",800,600
//Storyboard Layer 1 (Fail)
//Storyboard Layer 2 (Pass)
//Storyboard Layer 3 (Foreground)

๔) เกี่ยวกับกรอบในการวางรูปภาพ
- จาก ปล2. ของ scale หากคุณทำแล้วเกิดอาการภาพไม่เต็มขอบ แม็ปคุณเตรียมตัวลาที่จะต้องนั่งแก้ ได้เลยครับ
===========================================================================================================

Advance

- เป็นการเพิ่มเสียงที่ต้องการใช้ช่วงเวลาต่างๆ, การ Loop รูปภาพ ฯลฯ

ศึกษาเพิ่มเติมได้ที่ [Storyboard Official Specifications] (ภาษาอังกฤษล้วน)

===========================================================================================================

คุณควรลองจิ้มๆ ลองดูไปก่อนครับแล้วคุณจะสามารถต่อยอดทำ SB ได้ตามความคิดของคุณ ขอให้สนุกกับการทำนะครับ >w<//

ไม่สอน tweening easing in out หรอ

regenz wrote:

ไม่สอน tweening easing in out หรอ

เฮียต่อยอดสิครับ เพราะมอสก็ไม่รู้มันคืออะไร ? = =