Creating a video game using ChatGPT4 & Midjourney technology #videogamedevelopment

I tried to create my own version of the classic Pang videogame.
The twist? I didn’t code.

The experience wasn’t only about building a game, but understanding how accessible could it be for those with minimal coding skills and the potential for those who codes everyday.

All we need is a code editor , Midjourney, and of course ChatGPT 4.

Let’s go creating our own Pang videogame!
Check the final result here if you can’t wait.

For our code editor we’re gonna use Glitch.
Glitch is a collaborative platform that allows users to build and share apps/website and it gives us an instant setup for our development.

Use this starter project and duplicate it by using the Remix button.

Once in the project, we’ll find our working files on the left and the preview pane on the right, showing how the end product will look like.
I suggest closing the preview pane and always testing your code in a new window as shown in the image below.

Chrome is recommended as we are gonna use features not entirely supported by other browsers.

Ok we are ready to begin!

Start by having ChatGPT writing the basics of the Pang game with the following prompt:

You’re a Front end developer using HTML5 and a canvas for rendering, crafting a videogame based on the 90s Pang arcade. Start with the core mechanics, using coloured squares for balls and characters.

The output will provide a solid foundation to start from.
Every generated code has a flag in the top left corner indicating the output format, this will help you understand where to paste the code.

Let’s paste the code into our files making sure to paste the html into the index.html , javascript into game.js and css into style.css.

Embracing an iterative development process is crucial as we need some back and forth with features that breaks the game when applying certain complexities.
Working by iteration should reduce the likelihood of errors and help us address problems effectively and easily:

1. Write the prompt to ChatGPT
2. Copy the result to your file and run a preview to test it.
3. Add and tweak the new feature to fit your game.

After the basics are set, we can gradually introduce features such as:

• Multiple balls with varying speeds and sizes.
• Player shooting mechanism to hit the balls.
• Balls splitting into smaller ones upon being hit.
• Implementing a scoring system and lives.
• Sound effects and background music.
• Creating start and game over screens.

Approach these features one at a time with Add [feature] prompt :

Add balls splitting into smaller ones upon being hit.

Take your time to implement all the features necessary to cover the main dynamics of Pang.

Visuals are crucial in game design, luckily Pang is a simple game on this side, we only need a background, bubbles/balls, main character and projectiles to make the game work.
We want each element to harmoniously complement each other, so make sure to specify [style-type] style on every prompt.

I’ve used Midjourney v 5.2 (finding it better for pixel art) to generate the assets, with the following prompts:

Background

Background for a 2D videogame set in a fantasy ancient japan, skyline, mountains, houses, Pixel style — v 5.2

Bubble/Balls

Blue bubble for a 2D videogame, Pixel style , Pang style — v 5.2
Red bubble for a 2D videogame, Pixel style, Pang style — v 5.2

Main character & Projectiles
The main character has been the one i had to tailor slightly more as Pang have a specific position for characters on their back and shoot aiming top. Also i wanted the assets to be ready for future animations. Feel free to go for a single image character at your first try.

Create a pixel style sprite sheet about a man with a japanese military green cloak with shuriken in his hand, facing upwards and showing his back. Size 64×64 pixels per sprite each with 5 frames.

Although the sprites are not perfect, they are good enough to work with, and if you think how you can achieve a result with such a generic prompt, it’s simply amazing!

By now we should have a canvas –background– where you can move a coloured square –character-, be able to shoot –projectile– and have some generated squares –bubbles/balls– coming from the top.

You’ll need to apply basic editing to the generated assets like removing background and exporting as PNG for transparency (character, bubbles, projectiles) and JPG when it’s not needed (background).

Make sure to upload all the images into your assets folder.

You now want to ask ChatGPT to apply the images into code:

The character should be an image.

Replace the ‘path/to/your/player-sprites.png’ with your uploaded character asset URL.

Take time to set all the assets correctly, making all proportionate and functional to your game canvas. You can be as technical as you wish by specifying the exact size or position. Try to experiment; ChatGPT excels at suggesting, pinpointing errors, and explaining solutions.

You should have successfully created your Pang game!

Now, you have a solid base to enhance the game further, adding animations, characters, difficulty, sound effects, levels and more, iteration by iteration.

If you haven’t before
Check my Pang game

Overall there are many games that have already been generated thanks to AI but I was curious to witness the process myself. I’m astonished of how AI can provide a solid base to work with extreme ease, making time for creatives to focus on the idea without sacrificing execution and delivery.

Hope you’ve been able to create your own version, with your generated twists and assets or been inspired to go for a different game.
A fully functional game is challenging and time consuming, don’t give up if it takes more time than expected.

—
I’m curious to know your thoughts!
Please feel free to reach out to me on LinkedIn and leave a clap if you enjoyed the guide.