ผลอุโมงค์ cocos2d

ฉันต้องการสร้างเอฟเฟกต์อุโมงค์ที่คล้ายกันใน COCOS2D (iOS) ใครช่วยแนะนำพอยน์เตอร์ได้บ้าง?

วิดีโออ้างอิง 1

วิดีโออ้างอิง 2

จนถึงตอนนี้ฉันได้ลองด้วยสไปรต์รูปทรงแหวนหลายอันที่มีสเกลลดลงและศูนย์กลางอยู่ในตำแหน่งเดียวกันและทำให้ Z ลดลงเช่นกันสำหรับสไปรต์ขนาดเล็กแต่ละอัน

ด้วยสิ่งนั้นเคลื่อนไหวด้วย CCScaleTo และเปลี่ยนขนาดเป็น 2.0 ด้วยระยะเวลาของภาพเคลื่อนไหว แต่ไม่ได้มาใกล้กับเอฟเฟกต์อุโมงค์ที่แสดงในข้อมูลอ้างอิง

ขอบคุณแซม

ฉันพบคำอธิบายการใช้งานจากผู้เขียนเอฟเฟกต์นี้:

มันเป็นงานที่ต้องทำมากมายเพื่อสร้างภาพลวงตาเชิงลึกในระนาบ 2D

หลักการง่ายมากแม้ว่า: วงกลมเริ่มตรงกลางหน้าจอด้วยสเกล 0 จากนั้นวงกลมแรกของอุโมงค์เริ่มปรับสัดส่วนตามเวลาที่ผ่านไป (การปรับสเกลเชิงเส้นไม่ทำงาน) และหลังจากเวลาที่วงกลมที่สองเริ่มปรับสเกล จากนั้นเป็นวันที่ 3 และ 4 และต่อไป

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

เมื่อวงกลมออกจากหน้าจอพวกเขาจะจางหายไปอย่างรวดเร็วและกลับสู่ตำแหน่งเริ่มต้น (เพื่อประหยัดหน่วยความจำดังนั้นฉันไม่จำเป็นต้องสร้างแวดวงใหม่

ขออภัยเกี่ยวกับภาษาอังกฤษของฉัน แต่ฉันหวังว่าจะอธิบายความคิดทั่วไป :)

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

คุณต้องติดตามจุดที่คุณต้องการให้อุโมงค์ชนขอบฟ้าเหตุการณ์ไกลออกไป คุณสามารถย้ายจุดนั้นเมื่อเวลาผ่านไปตามที่คุณต้องการ

จากนั้นเมื่อคุณวางสไปรต์ใหม่ให้วางไว้ที่จุดนั้นขยายขนาดเล็กตั้งค่าความทึบตามที่คุณต้องการจากนั้นเริ่มต้นCCSpawnด้วยCCScaleToและCCFadeToเช่น:

sprite->runAction(CCSpawn::create(
    CCScaleTo::create(2.0f, 1.5f),
    CCFadeTo::create(5.0f, 255),
    nullptr));

สร้างสไปรต์ทั้งหมดก่อนแล้วหมุนอันที่อยู่ด้านหลังเพื่อให้มีประสิทธิภาพ

ฉันอาจลองเรียงมันด้วยเลเยอร์พื้นหลังและอนุภาคเล็ก คุณสามารถทดสอบเอฟเฟกต์ในตัวออกแบบอนุภาคและเล่นพวกมันในเลเยอร์พื้นหลังหลังจากนั้น

พูดตามตรงฉันไม่คิดว่าภาพจะถูกแสดงด้วยกล้อง 2D ดูเหมือนว่าเกมจะแสดงผลโดยใช้ระบบการแสดงผล 3 มิติ แต่เนื่องจากคุณต้องการใช้ cocos2d คุณจะต้องจำลองเมทริกซ์การแปลง 3D นั้นด้วยตัวเอง นี่คือแนวคิดที่จะเริ่มต้นด้วย: คุณรู้ในฉาก 3 มิติวัตถุทุกชิ้นจะถูกกำหนดด้วยค่าสเกลาร์ 3 ค่าคือ x, y และ z วิธีที่ง่ายที่สุดที่คุณสามารถใช้ได้คือการปรับขนาดตามที่คุณแนะนำ แต่ไม่ใช่วิธีที่คุณใช้! ccScaleToจะส่งผลให้มีการขยายขนาดเชิงเส้นเมื่อเวลาผ่านไปซึ่งจะไม่ให้ความรู้สึกแบบ 3 มิติ 1/zคุณสามารถเริ่มต้นด้วยการปรับขนาดวัตถุด้วยค่าของ นี่ก็เหมือนกับเมทริกซ์การฉายภาพที่ง่ายที่สุดที่คุณนึกออก! ถ้าคุณรู้สึกว่าแม้ที่ไม่ตอบสนองคุณให้ดูที่ทันสมัยมากขึ้นและซับซ้อนมากขึ้นการฝึกอบรมการฉาย

หมายเหตุด้าน: การใช้เมทริกซ์การฉายแบบกำหนดเองใน cocos2D จะสกปรกเล็กน้อย หากคุณไม่ชอบเอฟเฟกต์จริง ๆ ฉันขอแนะนำให้คุณเปลี่ยนเอนจินเป็นหนึ่งด้วยการรองรับ 3D

นี่คือวิธีที่ฉันทำในรหัสหลอก

เปิดใช้งาน Tunnel-effect:

1. สร้าง CCRepeatForever (CCFunc (createCircle))
2. เพิ่มโหนดเข้ากับฉากของคุณชื่อ "ViewNode"

createCircle ()

1. สร้างเลเยอร์ตำแหน่งที่อยู่ตรงกลางของฉาก เพิ่มเป็นรายการย่อยใน "ViewNode"
2. เรียกใช้การดำเนินการ: CCSequence (CCEaseExponentialIn (CCScaleTo), CCRemoveSelf)
3. ใส่สิ่งของในเลเยอร์ของคุณเช่นเชิร์ลเลอร์ศัตรูยานอวกาศอะไรก็ตาม

ควบคุม (พร้อมพารัลแลกซ์)

1. สำหรับเลเยอร์ทั้งหมดที่มีเอฟเฟกต์อุโมงค์ (เช่นลูก ๆ ของ ViewNode)
2. อัปเดตตำแหน่งสมอยึดตามตำแหน่งสัมผัส

ตำแหน่งคือจุดสิ้นสุดดังนั้นคุณจะไม่สามารถย้ายเลเยอร์โดยไม่ย้ายจุดที่หายไป อย่างไรก็ตามถ้าคุณย้ายจุดยึดชั้นจะปรากฏขึ้นเพื่อเคลื่อนย้าย แต่ Vanishing Point ยังคงเดิม - สิ่งนี้จะสร้างเอฟเฟกต์พารัลแลกซ์เนื่องจากการย้าย ccp (0.2,0.2) ในเลเยอร์ใกล้ (สเกลใหญ่) มีผลมากกว่า เคลื่อนที่แบบเดียวกันบนเลเยอร์ที่อยู่ไกล

คุณห่อทุกอย่างในเลเยอร์ที่มีขนาดเดียวกันเพื่อให้แน่ใจว่าการวางตำแหน่งสมอสร้างการเคลื่อนไหวที่เหมือนกันในทุกเลเยอร์