Thread by @javilopen

Midjourney, DALL•E 3 and GPT-4 have opened a world of endless possibilities.

I just coded "Angry Pumpkins 🎃" (any resemblance is purely coincidental 😂) using GPT-4 for all the coding and Midjourney / DALLE for the graphics.

Here are the prompts and the process I followed:

First of all, would you like to play the game?

Here's a link! (Currently, it doesn't work on mobile):

If you read the text below the game screen, which provides explanations, you'll see how you can create your own levels and play them! :) bestaiprompts.art/angry-pumpkins…

💡 Introduction

I have to admit, I'm genuinely blown away. Honestly, I never thought this would be possible. I truly believe we're living in a historic moment that we've only seen in sci-fi movies up until now.

These new work processes, where we can create anything using just natural language, are going to change the world as we know it.

It's such a massive tidal wave that those who don't see it coming will be hit hard.

So... let's start riding the wave!

🎨 Graphics

This was the easiest part, after all, I've been generating images with AI for over a year and a half :) Here are all the prompts for your enjoyment!

👉 Title Screen (DALL·E 3 from GPT-4)

- "Photo of a horizontal vibrant home screen for a video game titled 'Angry Pumpkins'. The design is inspired by the 'Angry Birds' game aesthetic but different. Halloween elements like haunted houses, gravestones, and bats dominate the background. The game logo is prominently displayed at the center-top, with stylized pumpkin characters looking angry and ready for action on either side. A 'Play' button is located at the bottom center, surrounded by eerie mist."

👉 Backgrounds (Midjourney)

I used one image for the background (with several inpaintings):

- "Angry birds skyline in iPhone screenshot, Halloween Edition, graveyard, in the style of light aquamarine and orange, neo-traditionalist, kerem beyit, earthworks, wood, Xbox 360 graphics, light pink and navy --ar 8:5"

And another, cropped, for the ground:

- "2d platform, stone bricks, Halloween, 2d video game terrain, 2d platformer, Halloween scenario, similar to angry birds, metal slug Halloween, screenshot, in-game asset --ar 8:5"

👉 Characters (Midjourney)

- "Halloween pumpkin, in-game sprite but Halloween edition, simple sprite, 2d, white background"
- "Green Halloween monster, silly, amusing, in-game sprite but Halloween edition, simple sprite, 2d, white background"

👉 Objects (Midjourney)

I created various "sprite stylesheets" and then cropped and removed the background using Photoshop/Photopea. For small details, I used the inpainting of Midjourney.

- "Wooden box. Item assets sprites. White background. In-game sprites"
- "Skeleton bone. Large skeleton bone. Item assets sprites. White background. In-game sprites"
- "Rectangular stone. Item assets sprites. White background. In-game sprites"
- "Wooden box. Large skeleton bone. Item assets sprites. White background. In-game sprites"
- "Item assets sprites. Wooden planks. White background. In-game sprites. Similar to Angry Birds style"

🤖 Programming (GPT-4)

🔗 Full source code here:

Although the game is just 600 lines of which I haven't written ANY, this was the most challenging part. As you can see, I got into adding many details like different particle effects, different types of objects, etc. And to this day, we're still not at a point where GPT-4 can generate an entire game with just a prompt. But I have no doubt that in the future we'll be able to create triple AAA video games just by asking for it.

Anyway, back to the present, the TRICK is to request things from GPT-4 iteratively. Actually, very similar to how a person would program it: Starting with a simple functional base and iterate, expand, and improve the code from there.

Let's see some tricks and prompts I used:

👉 Start with something simple

- "Can we now create a simple game using matter.js and p5.js in the style of "Angry Birds"? Just launch a ball with angle and force using the mouse and hit some stacked boxes with 2D physics.

👉 And from there, keep asking for more and more things. And every time something goes wrong, clearly explain the mistake and let it fix it. Patience! Examples:

- "Now, I ask you: do you know how the birds are launched in Angry Birds? What the finger does on the screen? Exactly. Add this to the game, using the mouse."
- "I have this error, please, fix it: Uncaught ReferenceError: Constraint is not defined"
- "I would like to make a torch with particle effects. Can it be done with p5.js? Make one, please."
- "Now, make the monsters circular, and be very careful: apply the same technique that already exists for the rectangular ones regarding scaling and collision area, and don't mess it up like before. 😂"

👉 This part took us (GTP-4 and me) many iterations and patience.

- "There's something off with the logic that calculates when there's a strong impact on a bug. If the impact is direct, it works well, but not if it's indirect. For example, if I place a rectangle over two bugs and drop a box on the rectangle, even though the bugs should be affected by the impact, they don't notice it. What can we do to ensure they also get affected when things fall on top of a body they are under?"bestaiprompts.art/angry-pumpkins…

And that's it. Happy Halloween! 🎃👻

Follow me at @javilopen for more posts like this. If you enjoyed this tutorial, a repost would be greatly appreciated and would encourage me to share more tutorials. Thanks! 👇

ASK ME ANYTHING!

@jfdelnero Fixed now! :) If you find any other thing, let me know, please!

@fdousek By the way, I see you love maths. So you really can enjoy ChatGPT + javascript for creating visualizations like this one. Happy to help! :)

@0xSpiridono @EdgehogsNFT Hey, love the idea of putting the torches in pumpkins eyes!

@0xSpiridono @EdgehogsNFT Show me please scroll+exploding guy. I was planning to add also explosions, funnier thigs haha.