Without writing a line of code, he used GPT-4, DALL·E 3, etc. to create "Angry Pumpkin"!

Jin Lei comes from Aofei Temple
Qubits | Public account QbitAI

Good guy, now you can develop a game like "Angry Birds" without touching a line of code or drawing a picture ?

It is no exaggeration, a young man from abroad really did it, please watch the VCR~

Although this game is called "Angry Pumpkin" , the picture quality and feel are nothing like the original version!

And as we just said, all of this was done by a guy named Javi Lopez without writing a single line of code.

However, everyone must be very familiar with the three "magic weapons" he relies on -

GPT-4 , DALL·E 3 , and Midjourney .

My brother is very clear about their division of labor:

GPT-4, you go figure out the code.

DALL·E 3 and Midjourney, you two are responsible for the pictures.

As for the little brother himself, his main job is to coordinate the overall situation and provide guidance (this is very bossy ) .

But let me tell you something, my original plan was to have some fun on Halloween, I just wanted to give it a try, but I didn’t expect it to work out in the end.

Once the video was released, it instantly attracted the attention of a large number of netizens.

What’s even more unexpected is that even the original product manager (PM) of “Angry Birds” came to watch and gave me great approval:

This demo is simply awesome! (We) used Box2D and LUA Scripting when we first made this game, and of course we had to create levels, enemies, etc.

Although no one expects you to make a blockbuster game, it is definitely a "game changer" when it comes to rapid ideation, prototyping, etc.

DALL·E 3. Midjourney serves as the artist

Next, let’s take a look at how I created “Angry Pumpkin”.

From the overall process, it can be roughly divided into two major steps : drawing graphics and generating code.

We first focus on the work of drawing graphics. After all, in the words of the little brother, this step is the "easiest part".

Because he had already had a year and a half of experience in using AI to generate images before this, this task for me was a "verbal output" - a natural language prompt .

For example, when making the main interface of the game , the prompt that I gave to DALL·E 3 was as follows:

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.

This is a landscape view of a video game called Angry Pumpkins. The design is inspired by the aesthetics of the Angry Birds games, but with a twist. Halloween elements like haunted houses, tombstones and bats dominate the background. The game's logo is prominently displayed at the center top, and the stylized pumpkin character looks angry and ready for action on either side. A "play" button is located at the bottom center, surrounded by an eerie mist.

When making the game background , I used Midjourney and subdivided it into two steps to generate two pictures.

The promt of the first picture is:

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.

Angry Birds skyline from iPhone screenshot, Halloween version, cemetery (light aquamarine and orange), neo-traditional style, kerem beyit, earthworks, wood, Xbox 360 image, light pink and navy - scale 8:5.

Another prompt is:

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.

2d platform, stone bricks, halloween, 2d video game terrain, 2d platform game, halloween scene, similar to Angry Birds, Metal Slug Halloween, screenshots, in-game assets - scale 8:5.

Then, the little brother "stitched" these two background images, and finally formed the background shown in the game now.

In terms of characters , he also uses Midjourney, and the main generated objects are "pumpkins" and "monsters".

The prompt for "pumpkin" is as follows:

Halloween pumpkin, in-game sprite but Halloween edition, simple sprite, 2d, white background.

Halloween pumpkin, game elf, halloween version, simple elf, 2d, white background.

The prompt for "monster" is:

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

Green Halloween monster, silly, funny, in-game elf, Halloween version, simple elf, 2d, white background.

In addition, I also created various "sprite stylesheets " and then used Photoshop and Photopea to crop and delete the background. For example:

• wooden box. Item Asset Wizard. White background. In-game sprites.

• Skull bones. Large skeleton bones. Item Asset Wizard. White background. In-game sprites.

• Rectangular stone. Item Asset Wizard. White background. In-game sprites.

• wooden box. Large skeleton bones. Item Asset Wizard. White background. In-game sprites.

• Item Asset Wizard. board. White background. In-game sprites. Similar to Angry Birds style.

For small details, he uses the Inpainting function in Midjourney.

GPT-4 generates 600 lines of code

The second step of the entire process, which is the crucial code generation , is described as "the most challenging part" in my brother's words.

The little brother said that the game code has a total of 600 lines, but in this process, GPT-4 did not generate all the code at once. The trick is to iteratively make requests to GPT-4 .

For example starting with the simplest function:

“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.

"Can we now make a simple game like Angry Birds with matter.js and p5.js?" Just use your mouse to launch a ball with angle and power and hit stacked boxes with 2D physics .

Then increase the difficulty and continue to make more demands on GPT-4.

My friendly reminder is that every time you ask a question, explain the error clearly and let it resolve itself.

The most important thing is: be patient !

The following is a fragment of the conversation between the brother and GPT-4:

Now, let me ask you: Do you know how the birds in Angry Birds launch? What are your fingers doing on the screen? Completely correct! Use your mouse to add this to the game.

I have this error, please fix it: Uncaught ReferenceError: Constraint is not defined.

I want to make a torch with particle effects. Can it be done with p5.js? Please make one.

The little brother also took out the most energy-consuming part and shared it, that is, writing the code for "objects hitting monsters":

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?

Something went wrong with the logic of calculating when to have a strong effect on a monster. If the effect is direct, the effect is good, but if the effect is indirect, the effect is not good. For example, if I place a rectangle over two monsters, and a box over the rectangle, even though the monsters should be affected, they won't notice. What can we do to ensure that when things fall on their bodies underneath, they are affected too?

All in all, I have repeatedly emphasized that when it comes to letting GPT-4 write code, the main thing is to be patient.

Finally, I have released the complete code, you can get it at the link at the end of the article~

Netizen: Unbelievable

After seeing this "prompt project" of my brother, some netizens thought it was unbelievable:

Only 600 lines of code? How is this possible? A simple iOS application has 1000 lines.

However, most netizens still expressed their affirmation and support for my work.

More importantly, this work allows many people to see a possibility for the future. As one netizen said:

Writing prompts may be more troublesome than writing code directly. But (and this is a big "but") ! The magic here is asking it to write code about something you don't know, so even though the process is laborious, the result is runnable!

All in all, this work does allow us to see the feasibility of "human-machine collaboration."

Online trial address:
https://t.co/tynYmxhLzM

600 lines of complete code:
https://bestaiprompts.art/angry-pumpkins/sketch.js

Reference links:
[1] https://twitter.com/javilopen/status/1719363262179938401
[2] https://news.ycombinator.com/item?id=38089247

Click here ???? Follow me and remember to star~