Creating an online game with V0 – Grabby Aliens
Part 2 – Iterations 11-20
This post is a continuation of the development of an online game called Grabby Aliens. It is built with Vercel’s V0 tool for writing code with AI. Read iterations 1-10 here.
Iteration #11
It’s time to start fixing gameplay balance and UX issues.
Chat Input
Good work computer! Here are a few improvements:
Let's try a 20x20 grid. The current grid size feels a little large.
When a ship is selected, let's make it orange and blink. Currently, the highlighting animation is a little too subtle.
The movement hints shouldn't extend across warp zones. So if a ship is on the top/middle of the quadrant, there shouldn't be a full movement hint at the bottom of the quadrant. This makes it visually confusing where the selected ship is. Maybe instead of a full movement hint across warp zones, a single sector could be highlighted to let players know they can warp and where the ship will come out on the other side.
When a ship warps, the direction should remain the same. Currently, if you warp from the top of the quadrant to the bottom, the ship flips direction and faces down. It should remain facing up.
Ships that aren't selected should be black. Let's also put the number of the ship on the ship so users can anticipate which ship will be selected next.
V0 Output
Mixed results here. Missed part of the request for the move highlighting, and the visuals for active vs inactive ships could be better. The size of the grid feels better.
Iteration #12
Let’s add an intro screen and continue cleaning things up. I don’t expect the design to get to a good spot with AI alone. I’ll do a mini design sprint to clean things up once we get the functionality in place.
Chat Input
Improvements:
It's a little frustrating when the game toggles to a new ship and you inadvertently move in the wrong direction. We might need to change the way switching works. For now, could we introduce the ability to undo the last move?
The warp movement hint is confusing. Could we remove that and go with the regular movement hint? It's still important that movement hints don't extend beyond the edges of the map.
Let's create an intro screen. The player should be able to choose between easy and hard mode.
The easy mode should have starting energy plus energy boosts equal to 130% of the number of sectors. Hard mode should make the total available energy equal to 110% of the number of sectors.
Inactive ships should have 75% opacity and the active ship should have 100% opacity.
The numbers on ships should be pushed 2 pixels towards the bottom of the ship to be more visually centered.
V0 Output
Playable but the grid is still slightly large for a casual gamer.
Iteration #13
The annoying transition between ships where you accidentally move the newly selected ship has to be fixed.
Chat Input
Looking good. Improvements:
It would be nice to undo multiple moves. Can we save a history of 5 moves that can be undone if the player clicks undo multiple times?
The transition between ships is jarring. I think there should be a short "power up" sequence between switching ships. The newly activated ship should switch color, then every 50 milliseconds the movement hint should grow from 1 radius to the current radius.
While a ship is powering up, movement and actions should be disabled. Once a ship is fully powered up, the player regains access to all actions.
Let's remove the ability for players to combine ships. Instead, ships should be treated as obstacles. A player shouldn't be able to move into a sector containing a ship.
Resetting the game should take the player back to the intro screen.
Let's add a colonization streak. When a player wins by colonizing the quadrant, the streak should be incremented by 1. When they replay, the streak remains until they lose by failing to colonize the quadrant.
V0 Output
So much more usable and the animation for switching ships is pleasant! Also, somehow V0 reverted the logic where moving over a colonized sector causes war and reverts it to uncolonized. I actually think I like this better. Otherwise, the punishment for trying to convert an isolated sector in the middle of colonized sectors is too harsh. This way you waste energy moving over already colonized space, but it’s more reasonable.
I also introduced a colonization streak. It’s currently buggy. I’ll fix it next.
Iteration #14
The grid needs to start smaller for new players and grow as the player clears quadrants.
Chat Input
Improvements:
If a player fails to colonize a quadrant, the streak should get reset to 0.
Let's try making the grid size variable. When the streak is 0, the grid should start out 10x10. Every time the streak goes up, increase the dimensions by 1. (when the streak gets reset, go back to 10x10)
The warping interaction is a little confusing. Let's make it so you can warp in any direction. The D-pad could have a single chevron from a 1 energy, 1 sector movement. Clicking on a double chevron button could be a 2 energy, 4 sector warp in that direction. The hotkey for warping should be shift+arrow.
Now that we have a more obvious transition between ships, let's go back to every ship having a different color. Remove the numbers on the ships. The active ship should have 100% opacity, the next ship to be active should have 75% opacity, then 50% opacity, then 25% opacity.
Let's remove the energy power-ups.
The max energy each ship gets should be the size divided by 2, rounded down. So a 10x10 grid has a size of 10 and each ship get's 5 energy before switching ships.
V0 Output
This was a rough update. V0 made a mistake in a function and couldn’t figure out the victory or losing condition. I tried to clarify and add context 11 times before diving in and fixing the function manually. I’m fine with this. As the complexity of the code base increases, it’s expected that something goes off track.
Iteration #15
I find it annoying that ships automatically switch to a seemingly random other ship. This makes the player feel out of control and kind of ruins the satisfaction of filling the space. Let’s try a version where the player chooses which ship to select next.
Chat Input
Improvements:
Instead of automatically switching to the next ship in the sequence, let's try a manual process to select the next ship. When a ship runs out of energy, the player should be able to choose which ship power up next wither by pressing the number corresponding to the ship or clicking on a ship.
When it's time for a player to select a ship, show the corresponding number over each available ship.
The ship that just ran out of energy should not be selectable as the next ship to power up. It should be greyed out to indicate it isn't selectable.
Make all ships black instead of different colors.
Slightly reduce the size of each ship.
Make the "Reset Game", "Disable Sound", and "Undo" buttons have white text.
Instead of "Disable Sound", could we use a sound icon when sound is on and a sound icon with a line through it to indicate sound is off?
Instead of "Undo" text, can we use an undo icon to represent that action? Also, the delete key should work as the undo hotkey.
V0 Output
This is somewhat better than randomly selecting a new ship. I think I have a better idea…
Iteration #16
What would the game look like without energy management? Let’s explore that.
Chat Input
Improvements:
Remove the notion of energy from the game. A ship's movement should not be restricted by energy.
The movement hint should simply be a 2-sector radius around the active ship.
Change the number of ships to 3. Instead of each ship being black, make them red, green, and blue.
When a ship colonizes space, make the colonization color the same as the ship's color.
Introduce a ship selection power up. For each ship, there should be 2 powerups of the same color. They should visually be small circles of the same color in random sectors. If a ship runs into one of these power ups, the ship with the corresponding color should become active.
The new loss condition should be a ship running into an obstacle or a previously colonized sector. This is inspired by Star Trek's Prime Directive. Ships are restricted from entering a colonized sector.
Ships warping should no longer require energy. A ship can warp in any direction for free. This means a ship as the following movements available. up 1, up 4, right 1, right, 4, down 1, down 4, left 1, left 4.
V0 Output
Wow. This seems to solve a lot of issues and makes actions much more predictable.
Iteration #17
I’m going to reduce the grid size and clean a few things up.
Chat Input
Improvements:
The movement hint should be 2 sectors in a straight line and 1 sector in each diagonal direction.
Let's scrap the current D-pad and rebuild it. There should be 8 buttons. move up 1 sector, warp up 4 sectors, move right 1 sector, warp right 4 sectors, move down 1 sector, warp down 4 sectors, move left 1 sector, warp left 4 sectors.
The power ups should have a 4 pixel semi-transparent outline of the same color.
The movement hint should be black with a 15% opacity.
Make the grid size of the first level 8x8.
Replace "Grid Size: 8x8" with "Level 1 (8x8)".
Remove the "Active Ship: 3" label.
Remove the "Current Streak: 0" label.
V0 Output
Great iteration! Now, the game is challenging and requires some creative problem-solving. You can intentionally paint yourself into a corner, then warp out of it.
Iteration #18
I’ll introduce a medium difficulty level and change the grid size per level.
Chat Input
Good work robot! The next batch of improvements:
Introduce an easy, medium and difficult mode. Easy mode should be a 8x8 grid with red and blue ships. Medium should be 10x10 with red, blue, and green ships. Hard should be 12x12 with red, blue, green, and orange ships.
Instead of a victory screen when colonizing a quadrand, show an unobtrusive "Colonized Quadrant" message and increment a "Quadrants Colonized" score. Then immediately randomize and reset the quadrant. The game continues until the game over screen is triggered. Then reset the quadrands colonized score to 0 when the player restarts.
The power ups should have a 4 pixel border with the same color but 20% opacity.
The movement hints shouldn't wrap beyond the edges of the grid.
The size of each sector should be 50% bigger.
V0 Output
Other than the colors and layout, this is a solid foundation for a game.
Iteration #19
It’s time to start cleaning up a few of the design elements.
Chat Input
Improvements:
The large gaps between rows in the D-pad should be reduced so the vertical and horizontal gaps are the same. (roughly 8 pixels)
At the center of the D-pad, we should add an action inspired by the infinite improbability drive from Hitchhikers Guide to the Galaxy. It can use a question mark as an icon. If clicked, the ship teleports to a random sector. If that sector happens to be an obstacle or a colonized space, it triggers the lose condition. Otherwise, the player gets luck and can continue.
When a ship runs into a power up that triggers a ship switch, it should emit a sound effect like an elongated "whoooop".
For the red ship, use this color
#F7525C.For the blue ship, use this color
#5982ED.For the green ship, use this color
#16DB93.For the orange ship, use this color
#F29E4C.
V0 Output
I really need to figure out how to enable sound effects in my video capture. The movement and ship power-up sounds are solid.
Iteration #20
More design cleanup. Let’s see if we can create an animated end-game sequence.
Chat Input
Improvements:
The end game screen should be preceded by the dying ship doing a death spiral, rotating twice while shrinking to a scale of 0%. There should also be a "woo woo woo" sound effect starting at a medium pitch and lowering as the ship shrinks.
Instead of a question mark icon for the random warp, it would be better to use a more standard random icon. The text could also be red and pulse to indicate danger.
Rename "Quadrants Colonolized" to "Streak".
Move the "Colonized Sectors", "Streak", and "Mode" stats to the bottom of the screen. They could be displayed in the footer with small uppercased text with an 80% opacity.
The "Reset Game", "Undo", and Sound toggle should be in the top right corner of the screen.
The Grabby Alien's text should be in the top left corner.
V0 Output
Nice design iteration. The ship “death spiral” isn’t center mass which actually makes it look somewhat natural.
Conclusion
This game is playable after 20 iterations. Here is the V0 link if you want to give it a test run or fork it.
At this stage, I don’t anticipate fundamentally changing the game. The next 10 iterations will likely be focused on small improvements. Leave a comment if you have any ideas. Thanks for reading!