विज़ार्ड गेम
इस पाठ में हम अपने VFX इंजन को कई चीजों के साथ मिलाएंगे जो हमने इस कोर्स के दौरान सीखा है ताकि एक सरल 3D गेम बनाया जा सके: एक जादूगर जो मंत्र और जादू का उपयोग करके क्रूर ऑर्क्स से लड़ता है। 🧙♂️
अपने वेब गेम विकास परियोजनाओं के लिए एक ठोस नींव!
स्टार्टर प्रोजेक्ट
स्टार्टर प्रोजेक्ट में शामिल हैं:
- एक प्लेग्राउंड दृश्य जिसे मैंने Archway model found on Poly Pizza का उपयोग करते हुए तैयार किया है Poly by Google CC-BY.
- Wizard और Orc मॉडल Quaternius से। दोनों रीग्ड और एनिमेटेड हैं।
- एक एनिमेटेड सर्कल जो माउस कर्सर का अनुसरण करता है
- एक बुनियादी लाइटिंग सेटअप जिसमें छायाएं शामिल हैं
- एक लगभग खाली
<UI />component जो Tailwind CSS से बनाया गया है - स्पेल के साउंड इफेक्ट SoundEffectLab पर पाए जाते हैं
यहां स्टार्टर प्रोजेक्ट कैसा दिखता है।
शुरू करने के लिए तैयार हैं? 🪄
Hogwarts में आपका स्वागत है 🏰
कोई भी खेल तर्क लागू करने से पहले, आइए हॉगवर्ट्स में अपनी जादू कौशल का अभ्यास करके उन जादूओं का निर्माण करें जो हमने समर्पित पाठ में बनाए थे।
जैसा कि हमने आतिशबाज़ी पाठ में किया था, हम VFX इंजन के प्रकाशित संस्करण का उपयोग कर सकते हैं। आइए इसे अपनी परियोजना में जोड़ें:
yarn add wawa-vfx@^1.0.0
@^1.0.0का उपयोग करके, हम सुनिश्चित करते हैं कि हम पैकेज के संस्करण 1 का हमेशा उपयोग करें लेकिन नवीनतम न्यूनतम और पैच संस्करणों को शामिल करें। इस तरह, हम नवीनतम सुविधाओं और बग फिक्सेज़ का लाभ बिना किसी टूटफूट के उठा सकते हैं।
अब Magic.jsx फ़ाइल में, आइए एक <VFXS /> घटक बनाएं जो हमारे प्रोजेक्ट के सभी <VFXParticles /> घटकों को संदर्भित करेगा।
import { VFXParticles } from "wawa-vfx"; export const Magic = ({ ...props }) => { // ... return ( <group {...props}> <VFXS /> {/* ... */} </group> ); }; const VFXS = () => { return ( <> <VFXParticles name="sparks" settings={{ nbParticles: 100000, renderMode: "billboard", intensity: 3, fadeSize: [0.1, 0.1], }} /> ); };
और उसके बगल में Spells घटक जो हमारे जादूओं के रेंडरिंग भाग को संदर्भित करेगा।
// ... export const Magic = ({ ...props }) => { // ... return ( <group {...props}> <VFXS /> <Spells /> {/* ... */} </group> ); }; const Spells = () => { return <></>; };
जब घटक आपस में करीबी होते हैं, तो मुझे एक ही फ़ाइल में कई घटक मिलाना पसंद है। यह फ़ाइल की तर्क को समझना आसान बना देता है। यदि आप चाहें, तो उन्हें अलग फ़ोल्डर/फ़ाइलों में विभाजित करें।
आइए हमारा पहला जादू तैयार करें, Void जादू।
शून्य मंत्र
आइए Void नामक एक घटक बनाएं जो Spells घटक में प्रस्तुत किया जाएगा।
// ... import { VFXEmitter } from "wawa-vfx"; // ... const Spells = () => { return ( <> <Void /> </> ); }; const Void = ({ ...props }) => { return ( <group {...props}> <VFXEmitter debug emitter="sparks" /> </group> ); };
VFXEmitter घटक sparks emitter से कण उत्सर्जित करेगा जिसे हमने VFXS घटक में बनाया था।
debug को true पर सेट करके, हमें वह प्रभाव प्राप्त करने के लिए दृश्य नियंत्रण मिलेंगे, जिसकी हम तलाश कर रहे हैं।
ठीक है, चलो एक मंत्र बनाते हैं जो orcs को कांपाने पर मजबूर कर देगा!
एक अच्छा VFX प्रभाव सही सेटिंग्स और सही समय का संयोजन है।
आइए Void मंत्र के साथ हम जो प्राप्त करना चाहते हैं उसे विघटित करें।
पहला, हम एक निर्माण चरण चाहते हैं। यह तब होता है जब ऊर्जा मंत्र डालने से पहले इकट्ठी की जाती है। इसे जितना बेहतर तरीके से किया जाता है, खिलाड़ी उसे के प्रति उतना अधिक प्रत्याशित महसूस करता है, और मंत्र उतना अधिक शक्तिशाली लगता है।
हमारा बिल्डअप का निर्माण इस प्रकार होगा:
- कण धीरे-धीरे ऊपर की ओर उत्सर्जित होंगे
- एक बढ़ता हुआ गोला
- फर्श पर घूमती हुई लिखी रूनें जैसे कि मंत्र फेंका जा रहा हो
फिर, हम विस्फोट चरण चाहते हैं। यह तब होता है जब मंत्र फेंका जाता है और ऊर्जा छोड़ी जाती है। इसे जितना बेहतर तरीके से किया जाता है, खिलाड़ी उतना ही अधिक संतुष्ट महसूस करता है।
हमारा विस्फोट का निर्माण इस प्रकार होगा:
- गोला विस्फोट (उसे गायब बना देते हैं)
- कण हर दिशा में जाते हैं
और प्रत्येक दृश्य प्रभाव के लिए, हम इसे और अधिक इमर्सिव बनाने के लिए एक ध्वनि प्रभाव जोड़ेंगे।
आइए बिल्डअप कणों के लिए वांछित प्रभाव प्राप्त करने के लिए VFXEmitter घटक की सेटिंग्स के साथ खेलें।
यहाँ मैंने क्या किया है:
<VFXEmitter emitter="sparks" settings={{ duration: 0.5, delay: 0, nbParticles: 20, spawnMode: "time", loop: false, startPositionMin: [-0.5, 0, -0.5], startPositionMax: [0.5, 1, 0.5], startRotationMin: [0, 0, 0], startRotationMax: [0, 0, 0], particlesLifetime: [0.5, 1], speed: [0, 1], directionMin: [0, 0, 0], directionMax: [0, 0.1, 0], rotationSpeedMin: [0, 0, 0], rotationSpeedMax: [0, 0, 0], colorStart: ["#4902ff"], colorEnd: ["#ffffff"], size: [0.1, 0.4], }} />
हम देख सकते हैं कि कण धीरे-धीरे ऊपर की ओर जा रहे हैं।
वर्गाकार कणों के बजाय, चलो त्रिकोणों का उपयोग करते हैं। ऐसा करने के लिए हम उचित सेटिंग्स के साथ cone geometry का उपयोग कर सकते हैं।
// ... const VFXS = () => { return ( <> <VFXParticles name="sparks" geometry={<coneGeometry args={[0.5, 1, 8, 1]} />} settings={{ nbParticles: 100000, renderMode: "billboard", intensity: 3, fadeSize: [0.1, 0.1], }} /> </> ); }; // ...
कण अब त्रिकोणों की तरह दिखाई देते हैं।
अब चलो बढ़ती हुई गोला जोड़ें। ऐसा करने के लिए हमें VFXS घटक में एक नया VFXParticles घटक जोड़ने की आवश्यकता है:
const VFXS = () => { return ( <> {/* ... */} <VFXParticles name="spheres" geometry={<sphereGeometry args={[1, 32, 32]} />} settings={{ nbParticles: 1000, renderMode: "mesh", intensity: 5, fadeSize: [0.7, 0.9], fadeAlpha: [0, 1], }} /> </> ); };
fadeSize को [0.7, 0.9] पर सेट करके, हम गोले को उसके जीवनकाल के 70% तक धीरे-धीरे बढ़ा देते हैं और फिर अंतिम 10% के दौरान इसे तेजी से गायब कर देते हैं।
React Three Fiber: The Ultimate Guide to 3D Web Development
✨ You have reached the end of the preview ✨
Go to the next level with Three.js and React Three Fiber!
Get full access to this lesson and the complete course when you enroll:
- 🔓 Full lesson videos with no limits
- 💻 Access to the final source code
- 🎓 Course progress tracking & completion
- 💬 Invite to our private Discord community
One-time payment. Lifetime updates included.
