.webp)
AI Video- Fighting Game
As little kids, my older brother and I used to play fighting games with each other for hours, shaping our childhood and providing us with countless quality time together.
So today, I wanted to combine my skills as a UX/UI designer and AI expert to create a video that fulfills a childhood dream for both of us.
So today, I wanted to combine my skills as a UX/UI designer and AI expert to create a video that fulfills a childhood dream for both of us.
How did it all begin?
It all began with me wanting to finally try my hand at creating animation using AI. I've been specializing in tools like Midjourney and Chat GPT for a while now, but I hadn't created a single frame using AI until now.
My older brother is a professional martial arts instructor, and he's always sending me instructional videos he makes. So I wanted to surprise my older brother with a short, cool video, while also trying out the Gen-1 app I had just downloaded to my phone.
I uploaded the latest instructional video my brother had sent me, and saw what the Gen-1 app allowed me to create. I was amazed to discover there were tons of really interesting filter options the app could apply to my video, completely transforming it into a brand new video with barely any effort.
I chose a futuristic style that appealed to me, and created a short 3 second video.
I sent the video to my brother and he loved it! To be honest, I was just as excited - and that's when I got the idea. To take this ten steps further, and create a full video that takes advantage of my skills and this amazing platform to its fullest potential.
So I started working - I came up with a very general concept for a fight between me and him, paying homage to the fighting games we grew up playing.
After that, the first thing I did was create a storyboard for the video. This helped me break down the overall picture I had in my head into clear frames that mapped out all the scenes in the video. It took me twenty minutes to create the storyboard, and the moment I finished, I basically got a sneak peek of what the final video would look like.
Once the storyboard was ready, we went to film the video on the boardwalk in Netanya, where we found a quiet corner where we could film without being disturbed by passersby and random people wanting to do yoga on the grass.
We set up the shot, and tried to film the video in one take to avoid unnecessary cuts. Did we manage to film the entire video in one take? Not at all. We wanted everything to come out perfect, so we filmed the video several times, chose the best clips, and spliced them together.
After we finished filming, I combined all the clips that made up the video into one base video, showing the video from start to finish.
Once I finished creating the base video, I added special effects to some of the scenes so that when the time came to run the video through AI animation, the animation would include the effects and apply its style to them as well.
After completing the base video, the really fun part of the project began. And that was the part where I used "Gen-1".
I signed up for their pro subscription for a one time fee, so there wouldn't be a watermark with their logo, and so I could create 15 second videos instead of just 3 seconds with the free subscription.
Before getting to this stage, I split the full video into 15 second segments for each clip, knowing that if I wasn't organized at this stage of the project, it would detract from the quality of the project and waste valuable rendering time in the app.
So I started by uploading the first clip of the project into their system, and then I had a few options:
I could convert the video to animation by uploading a reference image, writing a prompt, or using one of their ready made presets.
I preferred to use the presets Gen-1 offered because even before starting the project, I really loved the futuristic preset I had first experimented with in the short video I made for my brother.
One of the big advantages Gen-1 has over other AI tools is that you have the option to get a preview before generating the video. This is a very important, even critical function in a system like this, rendering time in this system is relatively expensive, and every second counts.
So in my case, I chose the style I wanted and asked to see a preview, and I actually got 4 different options for styles based on one of the frames from my video clip. Each of the four options I got essentially showed me a slightly different interpretation of how to apply the style to my video.
I chose the option I preferred and sent the video to generate.
After creating the first video, the creation process for the remaining videos became much easier.
Since in the following videos I created, I used the same seed number I had used when creating the first video. And this helped me create the same style across all the videos.
So I converted all the live action clips from my base video into AI animated clips with the futuristic style I wanted.
I combined all the segments in Adobe Premiere and integrated the AI clips with the base video I had filmed.
Basically at this point I could have finished the video, but before specializing in AI, I'm a designer, so I wanted to take the video further and design the game interface shown in the video.
After all, what guided me in creating this video was the goal of creating the illusion that this was a real game. So I set out to design the GUI for the interface.
First I did a little reference research, I wanted to examine what the interface looked like in the fighting games I was basing this on. I checked out the interfaces from some Tekken games and Street Fighter too, since they were the main references for me in creating this video.
And after gathering some references, I tried to identify the prominent elements that recurred in each of the interfaces.
There are elements that any typical gamer will recognize, like a health bar, usually a picture of the fighter and their name.
In the reference research I did, I was more interested in the graphical elements that make up the interface. I saw that in many of the fighter pictures there was dynamism that helped create interest in the image. Additionally, in many interfaces (Tekken among them) there are graphical elements like lightning and other abstract elements that help the graphical language of the interface align with the style of the game itself.
So I started designing an interface based on what I had learned from the reference research I conducted. I started by designing a very simple health bar, and then I did a quick layout of the positioning of the other elements in the composition, even before designing them.
After seeing that everything was coming together nicely, I went about handling each and every one of the elements.
First I went into Photoshop and worked on the fighter pictures of me and my brother, using frames from the video, and in Photoshop I cropped out the backgrounds and created a fade effect on part of the image.
I didn't want the image to look realistic, so I added some filters and styles from Photoshop's filter library to make it look a bit more illustrated.
Than, in order to perfect the GUI design- I downloaded a lightning asset, loaded it into Illustrator, and modified it according to the needs of the video.
After completing the health bar, I went about choosing the font that would accompany the game's narration.
I wanted a font that would align with the graphical language we're used to seeing in the classic fighting games we all know, to help the viewer identify with the content they're seeing and feel like they're watching something familiar.
And so I chose the "Fight This" font which was exactly what I was looking for.
After choosing the font, I designed and styled all the text elements I would need for the video, and then inserted them and the game interface into the video.
At this point I was starting to get excited, I really loved what I was seeing on screen and couldn't believe what I was seeing.
But to completely finish the video and give the feel of a real game, the sound effects were still missing.
I mapped out all the moments that needed sound effects, and went out for a late night recording session.I recorded every little sound in the video, from the punch sound effect, to the groan of pain, to the charging of the gun. I wanted to create everything so there wouldn't be a situation where I imported an external sound effect that would feel out of place compared to the other sound effects in the video.
And after I fed the sounds I created into the video, the video was finally complete.
