Moo-Niverse Entertainment Presents:
You are two aliens vacationing Earth together and have discovered the cutest creature you’ve ever laid eyes on: COWS! Sit in and operate our command chair controllers to collect as many cows as you can to maintain your happiness meter, but don’t fall for the decoys! FBI agents, suspicious of extraterrestrial activity, are disguised as cows and out to get you AND your new beloveds!
Play our game here!
Individual Contributions: Christine Chen
2D Game Artist, UI Artist and Designer, Animator
Concept Phase
References and Ideation
Emily (co-artist) and I created an Art Style Manual that documented our inspirations and moodboards. From there, we created some concept art on what our characters and environments would look like, as well as how our UI would be structured. From there, many changes would then occur......
Deliverable One
Character Art
Deliverable One focuses on getting most of the main art assets in to set the atmosphere and tone of the game through visual means. The art should visually communicate to the player what the characters are: the player is the alien UFO, the cows are bright and collectable, and the FBI are consistently dark blue with red to highlight that they are dangerous. I worked on the character sprites, creating different cow animations and FBI poses to add variety and interest to them. The UFO is much larger and has thicker outlines to show its importance, as it is what the player is controlling and thus needs to stand out more. Additionally, the UFO has two beams (white for activation and green for collection), and a shadow to show the player where their hovering area is. When the player is hovering over the cows, the white/green outline appears to show the players that they are in range of collection.
I also began to create some of the UI art and font selection to best match the cute, pixel art style of our game. The happiness meter and icon are pink and heart themed with a cow in the heart to symbolize the happiness our aliens get when collecting cows; while the same dark blue and red color scheme of the FBI is reflected in the conspiracy meter to increase the visual connection between the dark blue FBI sprites in game. The button is also pink to differentiate it from the blues and greens of our backgrounds, and has a white outline to increase the contrast. Additionally, there is a button “topper” with our main theme of cows and aliens, which only appears when the player hovers over the button to more clearly indicate that the button is selected.
Screen Sketches and Mock-Up
On to screen designs, the first sketches were done to map out general locations and composition of texts and assets. After revision, the main change was to the tutorial screen design, as there was too much text, which should be replaced with images or animations to maximize efficiency as players will likely be more excited to just start playing rather than read the rules. After revisions, the assets were created then mocked up in Clip Studio Paint, then imported and added into the corresponding unity scenes. Later, adjustments to button locations, sizing, and text size and fonts were made to be consistent across screens.
Layout/Block Designs
Now that a large portion of the character art was finished, and our first few environments were also completed, we wanted to add intentional game design elements so that our endless runner was not completely randomized. The benefits of having pre-made “blocks” is that it adds both narrative and difficulty components that a randomized layout would not be able to achieve as well. By designing block layouts, we could have areas like “FBI hideouts” that add to the story of our aliens being spied on, as well as create blocks that challenge our players in their maneuvering and cooperation abilities by adding purposeful obstacle layouts they must avoid.
Deliverable Two
Intro Cutscene Storyboard and Animation
For Deliverable Two, our goals were to focus on animations and finishing all the screens, as well as fix any assets. The intro cutscene storyboard was sketched out, to give more background on our players’, or the aliens’, motivation to why they wanted cows. It was then made into an animatic, or still image animation, that focused on getting the timing for each storyboard image. From feedback, it was said that we could speed up our animation from 40 seconds to 20 seconds, as we do not want to drag out our cutscene when it can be understood more efficiently. After speeding up the animation by 1.5x, it still portrayed the same information and could be viewed faster. The final animation was drawn in TVPaint, and we ended up going for a slightly different, kind of pencil-textured style just to give more visual variety to the game's different animtions and art.
Screens Completed
Screen Screenshots
Tutorial Page movement and collection animations done in Clip Studio Paint
Next, I also worked on screen animations, which would add more visual dynamics and interest to an otherwise static screen. For the title, there was the title glow, UFO abducting cow, and FBI seeking loop to introduce the main emphasis of our game: the title, aliens wanting cows, and the FBI being suspicious of extraterrestrial behavior. Then, for the tutorial screen, the movement and collection instructions became animations as mentioned from feedback to visually portray information. Then, for the leaderboard, there is a blue, glowing effect to make it seem as if within a technologically advanced UFO. All the simple animations, such as asset movement (like the UFO flying and FBI hiding in the bush) and glowing effects were created within Unity using the animation window and activated with the animator component.
As seen in the last two images in the Screen Screenshots section, both of them are the gameplay screen, with the green background one being the most recent and the turqoise background one being the previous design. We got rid of any text and only left the most important aspect, the cow count, and made the font size extra large so that it was the most noticeable as the whole point of our game is to collect as many cows as possible. In order to create visual balance, we then moved the meters down to the bottom as to not clutter the top of the screen.
Fonts were the last section of UI editing, where we needed more consistent fonts for text hierarchy (title, headings, normal text, etc.). I chose texts under creative commons to use that fit our pixel art style, and created a consistent hierarchy for font, sizing, and colors. Important titles and score were all of the 04b_30 font, while Headings were m04_Fatal Fury, with regular text being Digital Disco. All the buttons were then made to be the same size, font (Pixelated Pusab), and colors to connect all the screens together. Lastly, the 04b_21 font is used as the naming font as it has interesting characters that look like alien symbols. These can be seen in the "Last Art Assets" section of the Final Stretch phase.
Particle Effects
For our particle effects, I created these to give more visual feedback to the player based on whether they collected a cow (hearts), collected an FBI (anger and cursing), or if they collided into an obstacle (debris fly out).
Final Stretch
Last Art Assets
For the final stretch, a few more character assets were created based on environment asset additions. There was an FBI base, so perhaps an FBI with more advanced technology like a telescope would appear in those kinds of environments, whereas the FBI diver could appear in bodies of water such as pond and river assets. It adds to the kind of comical feeling of FBI hiding everywhere to try and sabatoge the aliens' efforts to collect cows. To match the outlines that cows get when hovered over, the red outlines for FBI assets were also added to show danger when hovered over in order to communicate to the player to avoid them.
On the bottom left, some button inputs were designed with the 04b_21 font for use in the Leaderboard. This font had interesting characters in it, which would be fitting for an alien language, which we were planning to use for leaderboard name inputs. While we did not get to custom name input, we were able to use these fonts for randomized names so that players can locate themselves if they appear on the top 10 leaderboard.
Here is an example of an asset being revised based on feedback that they were a bit hard to see when located in our game. The silhouette or shape of this FBI was not very noticeable, so I made them stand up for more vertical height, while making them look up by changing the binocular's perspective so that it is not straight on. The red targets were also added as red in our game symbolizes FBI and danger, further communicating that the player should avoid these.
UI Animation Polish
For more UI animations, the first one shows an explosion animation. After implementing our particle effects, the debris particles would not play properly, so instead, we switched to a more noticeable explosion animation that would pop up in the center of the UFO when colliding with obstacles.
For the meters, there are now animations created to indicate when the bars are increasing. Previously, the meters had a transparent background, so I added a white one behind the bars so the bar colors would stand out from the scrolling gameplay. From feedback we got, it was suggested that there be some kind of animation for the meters increasing so that it would be more significant and visually informative to players. This was also reflected in playtesting when some players were so caught up in the gameplay that they didn't really pay attention to the meters.
For the happiness meter, two rows of hearts and sparkles flow from left to right, as that is the direction for increasing increments. For the conspiracy meter, the bar glows red to further use the motif of red as a sign of danger.
As not all animations were done outside of unity, there are some that were created within unity itself using the animation and animator component. That includes the red border alert animation, and the cow falling out animation.
The border alert glows red using opacity animation and activates when the players' happiness is lower than 30% or their conspiracy is higher than 70%, notifying the player that it might be close to a game over.
The cow falling out uses anchor, rotation, scale, and opacity animations to make it more obvious to the player when they've done something to trigger losing a cow as it also falls out from the cow count located at the top of the screen. The players lose a cow when crashing into an obstacle or picking up an FBI agent.
Animation Pixelation and Implementation
Final intro cutscene iteration with audio design from Em
Lastly, we made adjustments to the intro animation and implemented all animations into Unity. From feedback, I gave the intro animation a pixelization look using the mosaic effect in TVPaint. This would make the cutscene more cohesive in style with our in-game pixel art style while still remaining distinct in that it is not the same texture. Then, to make sure that the animation videos would play properly in our build export, I used this tutorial to teach me how to make sure the video could play for WebGL. Then, from a previous interactive animation project I worked on, I borrowed a few lines of code that would detect when a video ended so it would then automatically switch scenes to go to the next section after the intro finished playing. As the intro cutscene is about 22 seconds long, I also added a button that would appear 5 seconds in so the player could skip for a faster replay option. For the two end cutscenes (made by Emily), they used a similar script, except without the CheckOver function as those two videos were only 10 seconds long so I let them play out fully before a game over button appears at the 9 second mark.
Comments