Day 2 of vibe coding Elden Ring with AI!

Today, I’m going to:

• import arena 3d model

• import boss 3d model

• implement basic boss controls and animations

• implement basic boss behavior tree

Here’s my vibe coding session:

Tools Used

I’m using Windsurf AI with Claude 3.7 Sonnet.

I like the UI/UX of Windsurf slightly better than Cursor, but find the code results similar.

And I’m using react-three-fiber which is a React renderer for three.js

Day 1

Yesterday, I created the scene, imported some environment models and textures, imported my 3D character model, and implemented character controls and animations (move, strafe, sword).

Yes, she has no pants 👖 it was the only free high-quality 3D model I could find on Mixamo with a sword…

Import 3D Arena

First, let’s import a 3d model.

Go to Sketchfab.com and search “arena”, filtering by assets that are downloadable and free. The “hell arena” looks cool, so download that (GLB extension).

Then, I created a new directory env in my project under models and dropped the hell_arena.glb file into the new directory. I renamed the file to arena.glb.

When using AI coding tools like Windsurf or Cursor, you can refer to specific files in their AI chat by typing @, followed by the file or directory name.

So, I tagged @arena.glb and instructed Windsurf to import the model into my scene, load my character in the center of the arena, and to increase the scale of the arena to make it much larger.

Now, our character loads in the middle of the arena:

Import 3D Boss and Animations

Next, let’s import a 3d boss. Go to Mixamo.com and search “mutant”.

Download the base 3d mutant model and some animations for movement and attack. Here are the instructions for each file to download, along with helpful screenshots:

1. Click "Character" > Search "mutant" > T Pose > Download

2. Click "Animations" > Search "mutant"

3. "Mutant run" > In Place > Download

4. Search "Strafe" > select "Left Strafe" > In Place > Download

5. Same but "Mirrored" > Download

6. Search "Walk backward" > 3rd one > In Place > Download

7. Search "Mutant" > "Mutant swiping" > Download (this is basic attack animation)

After downloading the files, create a new directory boss under models and drop your files in there.

Tag the directory in your Windsurf AI chat, @boss, and tell Windsurf to import the boss model and animations into the game, following the same pattern as the working code for the character model and animations. Since there’s already a working example of the same thing, Windsurf should nail this on the first try.

@public/models/boss similar to the Character model and animations, import the Boss model and animations. Scale up the boss so it's huge and scary, relative to the Character's size.

Implement Basic Boss Behavior

Let’s implement basic functions to control the boss - move, strafe, and swipe (attack).

Windsurf AI should follow the example working code for the character, which can also move, strafe, roll, and swing her sword (attack).

Scale down the Boss so it's only 2x the size of the character. Implement basic functions to control the boss - moving, strafing, swiping.

I also scaled up the boss to be 2x the size of the character, so the mutant looks scary, which also ended up implementing a vertical camera tilt. I dropped in a screenshot to my Windsurf AI chat and prompted:

Analyze the screenshot of the game. Since the boss is tall, I want to be able to look up with my camera at the boss.

But it took another try…

No, that didn't work. The camera is still 1st person POV and I cannot see my camera. I want it the way it was before where I could fully see my character, and I want to be able to tilt the 3rd person camera.

Last, I implemented a basic mini behavior tree for controlling the boss:

Implement a mini behavior tree for the boss:

- boss rotates towards the character
- boss moves towards the character
- when the boss is near the character, boss swipes at the character in an attack motion

Success! 🍾 

Now the boss runs towards my character and swings at it! Windsurf AI went a step beyond, implementing some keyboard testing shortcuts, allowing me to reset the boss’ position and toggle between modes (idle vs pursuit).

Closing Thoughts

Next on my list - hitbox, collision system, and HUD!

Need More Help? 👋 

1/ If you want to grow on social media and build a business in coaching, consulting, speaking, selling apps, or digital products… check out Blotato

2/ Free AI courses & playbooks here