top of page
KRAMER DESIGN
Die Up
Die up is a mobile beer die video game. It is a cartoon styled game that uses a swipe bar for power, timing sliders for accuracy, and approach circles for defense.
Mobile Game
Objective
The objective of this project was to create a video game of any kind, working with Claude Code. This is my first time working with claude, and it was a good learning experience in how to use it correctly, but also ethically.
Comparison
In my research, I could not find any other beer-throwing video games. Since I did not have this reference, I looked at other games with throwing and catching animations and buttons. Some games I found were Madden Mobile, NBA 2K, Wii Golf, and another mobile golf game. These all gave me references of swiping and timing actions that I could implement into my game.
Swipe Animation
The swipe animation is for the power of the toss of the die. I looked at Madden Mobile's field goal bar, Wii Golf's power meter, and another mobile golf game's power meter. These all gave me an idea of how I could create a power meter for a throwing motion that made sense with my game
Accuracy Animation
The accuracy animation is for how accurate a throw the user times. I also looked at Madden Mobile for this, as well as NBA 2K. They both had a bar with a line going back and forth, making the user time their tap when the line is in the center.
Catch Animation
The catch animation appears when the user is playing defense and they have to time the catch. Based on their timing, they will get a better or worse chance of making the catch and preventing the defense from scoring. I referenced Madden Mobile for this, looking at the approaching ring button.
Prompts
Creating this game gave me a lot better understanding of Claude. It taught me about prompting, sending handmade assets, and the line between what Claude can do for you and what designers should do themselves.
1st Prompts
My first couple of prompts were about two pages long with lots of detail. I sent these prompts with little to no design, just to give Claude the rules of the game and see what it could do. I found that this was good to give Claude a vision of what the game could be, but it did not look good. The characters were awful, the animations did not do what I wanted, and the whole game just looked unfinished and sloppy.
2nd Prompts
My second round of prompts was an improvement, but they were still not great. I started doing smaller prompts focusing on individual pieces of the game. This helped a little bit with the overall layout and journey of the game. At this point, I also provided references with images from other games I wanted the style to look like, such as Clash Royale, Subway Surfers, Brawl Stars, and a few more. I realized after another few failed attempts that I wanted to design all the game pieces myself.
3rd Prompts
After these failed attempts to let Claude make something, I switched to designing each part of the game myself. I chose to do a cartoon style for the game and designed each character, game piece, and button in Figma. For these prompts, I did once piece of the game at a time, starting with the background and table. The strategy that worked the best for me was to design it first in Figma, then send Claude a screenshot of where I wanted it on the screen as a reference. I would tell Claude to not change anything yet, and that it was just so it could see where the asset would be placed. After Claude had this information, I would then copy the asset as a link to selection and it could then implement it into the game. This process was tedious at times, but was the best way to design the game exactly how I wanted.
Interactive Prompts
For any assets with movement or an action, I made reference pages that I would submit to Claude before it changed anything. This page would have different stages of the asset, as well as a long prompt of how the piece would work within the game. This way, Claude could see how I want it to look and also understand how I want it to work.
Animation Prompts
For animations in the game, I either made reference pages with frames or created animations in Figma to use as a reference for Claude. For the reference pages, I would create frames of how I wanted the animation to change, and it was pretty successful for showing Claude what I wanted without having to build a time-consuming animation. The videos were mostly small animations that were easy to make in Figma.
Brand Kit
I chose to go in a 2D cartoon direction for my style because it was a good way to use Figma and Claude together so that I could design every aspect of the game. It allowed me to create every visual aspect, while still getting help from Claude to put it all together with the actual coding of the game.
Start Screens
The start screen has three options: play, tutorial, and choose a player. The tutorial teaches the user how to play the game with step by step instructions and animations. The user can also choose between 8 characters that I designed to change their "skin."
Play Screens
The play screens have big text instructing the user on what to do next. It is implemented with buttons that assure the user is ready for their turn, in case they get distracted or have to put the phone down for a second. They also provide feedback with how the user's last shot or defense was.
Physical Object
We were also challenged with creating a physical object to promote our game, so I chose to make packaging for dice so that people can play the game in real life. The idea would be that the first 100 people to download the game would receive this as an incentive.
bottom of page