마법사 게임
이 강의에서는 VFX 엔진을 활용하여 배운 여러 가지 요소들을 결합하여 간단한 3D 게임을 만들어 보겠습니다: 주문과 마법으로 사악한 오크와 싸우는 마법사. 🧙♂️
웹 게임 개발 프로젝트에 대한 견고한 기초!
시작 프로젝트
시작 프로젝트에는 다음이 포함됩니다:
- Google Poly의 Poly Pizza에서 찾은 모델 Archway로 준비한 플레이그라운드 씬 CC-BY
- Quaternius에서 제공하는 마법사와 오크 모델. 두 모델 모두 리깅 및 애니메이션이 되어 있음.
- 마우스 커서를 따라가는 애니메이션된 원
- 그림자가 있는 기본 조명 설정
- Tailwind CSS로 만들어진 거의 비어 있는
<UI />컴포넌트 - SoundEffectLab에서 찾아낸 주문 소리 효과
시작 프로젝트의 모습입니다.
준비 되셨나요? 🪄
호그와트에 오신 것을 환영합니다 🏰
게임 로직을 구현하기 전에, 전용 강의에서 제작한 VFX 엔진을 이용하여 호그와트에서 마법 실력을 연습해 봅시다.
불꽃놀이 강의에서 했던 것처럼, VFX 엔진의 게시된 버전을 사용할 수 있습니다. 프로젝트에 추가해 봅시다:
yarn add wawa-vfx@^1.0.0
@^1.0.0을 사용함으로써, 패키지의 주요 버전 1을 항상 사용하되 최신의 소수 및 패치 버전을 포함하도록 합니다. 이를 통해 최신 기능과 버그 수정을 쉽게 이용할 수 있으며, 변경 사항으로 인한 문제를 방지할 수 있습니다.
이제 Magic.jsx 파일에서 프로젝트의 모든 <VFXParticles /> 컴포넌트를 담을 <VFXS /> 컴포넌트를 생성해 봅시다.
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 Spell
Void라는 컴포넌트를 생성하여 Spells 컴포넌트 내에서 렌더링하도록 합시다.
// ... import { VFXEmitter } from "wawa-vfx"; // ... const Spells = () => { return ( <> <Void /> </> ); }; const Void = ({ ...props }) => { return ( <group {...props}> <VFXEmitter debug emitter="sparks" /> </group> ); };
VFXEmitter 컴포넌트는 우리가 VFXS 컴포넌트에서 생성한 sparks 발신기로부터 입자를 방출합니다.
debug를 true로 설정하면 우리가 달성하고자 하는 효과를 시각적으로 조절할 수 있습니다.
오크들이 벌벌 떨게 할 주문을 만들어 봅시다!
좋은 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], }} /> </> ); }; // ...
입자가 이제 삼각형처럼 보입니다.
이제 커지는 구체를 추가해 봅시다. 이를 위해 VFXParticles 컴포넌트를 VFXS 컴포넌트에 추가해야 합니다:
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]로 설정하여 구체가 서서히 커지다가 생명시간의 마지막 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.
