For this assignment, we were tasked with making an original project in After Effects lasting at least 2 minutes in length. It had to be original, so I brainstormed some potential ideas down, though one idea kind of stuck with me that could work. I wanted to go with some sort of main menu animation for a fictional game that utilizes some of the effects that I haven’t touched upon yet. I wanted to figure out how to go about starting this animation all the way through to the end, all the while ensuring it is at least 2 minutes or around that length.
The Video
Storyboard
To understand how the animation is going to be planned out, I drew up a rough storyboard for which scene is going to be where in the context of the composition. Here it is.
How it was made
I opened up After Effects and got started by creating a new text layer for the start of the project. What I’ve gone for in relation to this method is the Start Screen most commonly used within arcades to get that retro game look. I downloaded this type of font from dafont (n.d.) including the other fonts that came with the package, one of which I will use later in the project. The main inspiration from this is derived from the beginning of the end credits scene from Wreck-it Ralph (2012) as this screen would show before showing the film credits alongside the animation to accompany it. I also keyframed the opacity frame by frame so that the text would disappear and then reappear after a second to further give the start sequence some character. I also made sure to drag this sequence out to at least 10 seconds or around that time.
Having the text flicker all on its own wouldn’t quite sell out, so I had to think of another method on how to make this more appealing to look at. I settled on creating a new shape layer and disabling the fill option to leave a stroke. I selected the stroke’s colour to be white before adding a Trim Path effect around the text, making sure to keyframe the start and ends of the path to create a line that would surround the text.
I wanted to cap off the sequence with something nice and would signify that the start button has been pressed. I searched for the effects I would be using for this to work, and I came across CC Pixel Poly that would break the text into smaller pieces, kind of like how it has been blown up. This would be nice to break away from the start sequence and transition into the main menu perfect, so I applied the effect onto the text and made sure to tweak the force to something that would make the smaller pieces scatter and animate the keyframes for where I want the effect to take place, like what you see in the image below.
After the start sequence, I created a new solid and applied an effect I had no experience of yet and that was the Radio Waves effect to generate an animated circular radio wave on the solid.
I then created another solid to act as the menu background, having the colour be a darker grey and adjusting the brightness to be a bit lighter with another layer. Here is the effect in action as I start to animate the opacity of the effect to show where it’s going to be placed.
My next step after moving the radio waves to the side of the screen is to create some kind of menu box where the options would appear in. I created another layer and drew a rounded rectangle on the left side of the screen, making sure to only select the stroke and make it white like last time. Here is what you see when the menu box is applied.
Now it’s time to add the Game Title text that would be shown at the top of the menu box. I thought about what I was going to name this game, and I wanted to keep it the title kind of basic to capture the platformer spirit and to aim at a specific demographic of kids. I selected the arcade font again and the image below should make it appear like so.
After tweaking with the title, I changed the font to more of a rounded arcade feel so that it distinguishes from the jagged polygons of the traditional font. I ensured myself to position it below the upper portions of the box border so it will fit and be realistic when it came to keyframing it. I set the opacity’s stopwatch on and moved to about where the main menu screen would fade in and the box to be drawn to let the text fade in.
I wanted the box to look nicer in appearance and make it stand out, so I included three break lines, each in its own separate layer and positioned them below the game title. I made sure to keyframe them in the same way as the text above.
Next up, I included the menu contents, like the story mode, options and more. First, I created a new text layer and started with the Story Mode, making sure to add a cream colour to it as that would be the first option selected. Next was the Vs Mode option, in which I separated in its individual text layer so that the composition is kept clean. The layer needed to be greyed out unlike with the first option, like so.
I hid the Vs Mode text briefly to work on adding more things in relation to how the selected item will be highlighted on screen. I created four new layers for the cursor lines that would be situated next to the text when highlighted, with two lines on each side. What I am going to do with the cursor lines is by animating them frame by frame along with the colour of the text, I can manipulate them in a way so that when a different option is selected, the text would be greyed out, and the same would be said for when the text is highlighted, the colour would revert to a cream colour with the lines on either side.
I filled out the rest of the menu box with the remaining contents, such as the options, game info and the ability to exit back to the desktop, which implies that this game is being played in full screen mode.
Now it’s time to animate the menu’s contents, starting with the lines on either side of the text. I selected the layers and clicked on the stopwatch to initiate the position of the lines before carefully moving them down to align with the ‘Vs Mode’ text, ensuring I double check to see if it’s right in the middle like it should. I also set the lines opacity to appear when the text would appear, but more focused was shifted on the positioning. I animated the breaker lines and the color to be one frame apart from each other so that the lines will be moved together rather than a split second apart from each other. Here, you can see where the keyframes are and how it essentially works.
The result should be something like this, with the colour of the text also changing from grey to cream and vice versa.
After repeating the same process with the other text items from the menu, I backtracked to the options, which is essentially the settings and optimization of the game and wanted to explore that first. I wanted to enhance the moment the option is selected, so I applied a nice little Light Sweep effect to the text to indicate it being highlighted. You can tell because there would be a sweeping effect running across the options layer. This was possible by going into the effects panel and tweaking a few things in relation to the effect to make it nice and noticeable for the viewers to spot. I then animated the effect to where I felt was a good place to initiate the effect taking place.
Once the Light Sweep effect had passed through the highlighted text, I wanted the menu to fade to black to start the next screen that was going to be made. I achieved this by selecting each individual layer and keyframing the opacity and decreasing it all the way to 0%. I started this method with the game title, and worked my way down until I ended the process with the radio waves in the background and the screen so that everything fades to black. I also made sure that each layer disappears at different times, usually right after the layer above in relation to the text, which is what you see in the image below.
Once everything was faded to black, I went ahead and got started on the next phase of the animation. This is something that I have never tried before, so it was going to take a while for me to make it perfect, but it wasn’t that much of a hassle anyway. My idea was that I was going to apply a light speed effect into the transitions between the main menu screens so that they have time to load properly. The inspirations stemming from using the light speed effect are from the background of the audio drama Star Trek: Lost Enterprise, which was uploaded by Scyther Inc (2014) and the space backdrop of the HyperBlast map from Unreal Tournament (2000), the latter of which arvutihull (2014) plays through the level. I got started by creating a new solid layer and applied a effect called CC Star Burst to the solid to make something like this.
After changing the settings on the effect to make it look nice and visible without sacrificing the purpose of the effect, I applied another effect on top of the layer called CC Light Burst 2.5 to create the line streaks, ensuring that I let them move in the right direction by changing the ray length to a negative number as it should be able to work that way.
I’ve added in one more effect called Matte Choker to thicken the lines and make them more visible as they look kind of hard to see with just the two effects. I tweaked the choke to -125% for this to happen, and softened the surrounding lines closest to the edges of the screen by setting it to 10%. I also scaled the layer upwards so that the lines don’t abruptly stop at the edge of the screen and keep going to simulate a real space transition.
With this effect, I wanted to replicate the keyframes in the context of the opacity in that the transition will drag on for a few seconds before fading to black again. I also made sure to do this for when the transition fades out from the main menu.
After the transition, I wanted to show a different effect to act as the background for the Options menu. I had the idea in my head to initiate a 3D Repeater grid of sphere with the grid rotating throughout the time spent on the menu. I created a new shape layer and drew a circle using the Ellipse Tool. I then added a repeater to the shape and made at least 11 copies horizontally, with 5 copies vertically, ensuring I position the offset within the center of the grid to achieve the best result.
This is what the grid would look like once I rotated it vertically to give it a 3D look.
By changing the grid’s opacity to somewhere about 50%, I was able to focus the attention more on the options’ contents, which I started by re-using the menu box and breaker lines, adding keyframes and increasing the opacity to make it appear.
From there, I made a few more layers for the sliders that would be present within the options menu, such as volume sliders and controller sensitivity for the movement of the character in game. I achieved this by positioning the layers in a way that would make the slider’s bar and stroke below the marker layer to make them appear at the same time. I also highlighted each slider with the text above it to know exactly which is which, with the controller sensitivity occupying the bottom slider.
I’ve added in another text layer and re-purposed it to the controller vibration. The player would have the option to either turn it on or off depending on their preference.
By applying the same process I did with animating the main menu with the cursor lines and the colour change, I was able to make the options menu stand out on its own merit, and that was about to happen because I was going to animate the slider’s position horizontally to determine the audio levels and the controller sensitivity of the gameplay. I keyframed the marker’s position and moved along the timeline to where I would want the marker to be at that point so it automatically moves. I ensured myself to keyframe the marker back to where it was at the start to revert the levels back to normal.
The image below is a perfect example of how this will be achieved, as I had set the keyframes accordingly and easy eased them to make a smoother animation. I also made sure to repeat the process with the sensitivity slider as well to maintain consistency.
In the context of the controller vibration, I made another layer and typed the word ‘On’ before hiding that to replace the ‘Off’ function when it is highlighted and has it’s keyframes set on the timeline.
I’ve also added in an option to return to the main menu from the options and the Game Info segment that we will get to later.
I have also keyframed the opacity as with the other text to determine it’s appearance. This is the option that will be pressed in order to return to the main menu.
As a consequence of pressing the button to go back, I needed to apply the light sweep effect onto the text and keyframe its position. I opted to use the same direction as to maintain some form of consistency.
After the button was highlighted and pressed, I would go and repeat the same process I did with the main menu and start to keyframe the opacity on the text, starting from top to bottom while also keyframing the trim path of the menu box to disappear starting from the breaker lines. This was a bit of a struggle since I had to apply the same method to the sliders, which I figured out in the end by multi-selecting each slider and keyframing its opacity. Finally, the background and the screen would fade to black once the text and the menu box were hidden.
I applied the same light speed transition for a few seconds and making sure to slide the opacity of the effect to 100% for a few seconds before hiding it to revert back to the main menu, as I reapply the same method I did when I first started to construct the menu at around 15 seconds into the animation. Here, you can see the opacity’s keyframes being set up to show the menu’s contents again.
The next plan was to have the cursor move to the ‘About the Game’ section of the menu and be highlighted to bring you to the info screen. I plan not to have the light speed transition applied between the two menu’s as it would sound quite unnecessary to have a transition to the synopsis of what this game is about, so I wanted to go straight to the screen after the main menu fades out. I directed the cursor and breaker lines to the option and applied the same light sweep effect to indicate that it has been pressed. This was achieved by the keyframing and positioning of the breaker lines to be aligned with the highlighted text and keying and filling the text to a cream colour as indication. With the same amount of settings for the light sweep, I applied it onto the text and checked to make sure it was working. Again, keying the contents frame by frame was vital to keep the animation consistent and nicer. The image below shows the position keyframes are almost exclusively frame-by-frame in the context of the breaker lines and the text colour.
For the game’s info background, I had another idea that I haven’t experimented with yet and that is the ability to create some psychedelic patterns within the software. My inspirations for this psychedelic background comes from the end credits scene from Recess: School’s Out (2001), the psychedelic day dreaming scene from Madagascar (2005) and the battle screen background from Earthbound (1995). I achieved this by creating a new layer and adding a radio waves effect to it and changing the shape for the waves to have nine edges, like so.
I then added another effect called CC Kaleida which allowed the shape to be duplicated all across the screen that would commonly resemble the appearance of a psychedelic background.
I have also pre-composed the layer and tweaked some more things inside of the layer, like changing the shape from a circle to a square that would complement the trance-like appearance better from my perspective.
Here’s a better look at how I changed some of the settings inside of the layer. I slightly increased the expansion rate and experimented with the orientation, direction, velocity and spin arrays to get the best feel that I wanted. I changed the colour from white to blue so that it could be seen better rather than it being boring, and I increased the size of the Kaleida effect to get a satisfactory result that could best translate well into the piece.
Now it’s time to add in the information about the game that this menu is attached to. I wanted the scope of the narrative to be light as to not overload players with information. I have decided to go with the classic story structure of ‘male saves damsel in distress’ type of storyline made popular with games like Super Mario Bros (1985) and Sonic CD (1993).
I plan to keyframe the newly-created menu box and the text in relation to their opacity to make them appear once the background fades in from the main menu. Here is a better image of the now completed synopsis of the game’s story.
I have also included some copyright information in the form of the publisher and the game’s release year. I have gone with the fictional company I reused to give context of the resume of the publisher, and I have gone with the current year as this was would maintain some consistency regarding the game’s background. I have keyed the opacity of the text so that it appears alongside the game information.
What is a menu screen without the ability go return back to the main menu whenever possible, so I included it and shown how I keyed the text to show a light sweep when pressed, indicating the screen to fade in.
Once the button was pressed and everything had been faded to black courtesy of keying their opacity, I reverted back to the main menu and their layers to start animating the opacity on them for them to fade into the composition. The background colour and the radio waves would be the first to be faded out from black, like so.
Next was bringing the menu box and breaker lines into view before the text would be faded out. The same method applies here of keying the opacity of all of the layers was needed for this to work.
Now it was time to get into the story mode of the game. I had positioned the breaker lines accordingly and keyed the text colour on the ‘Story Mode’ option to be cream as a light sweeps through the text, prompting the menu box to be changed. I keyed the text’s opacity along with the others to replace them with the difficulty modes of the game and began to keyframe the text with the same method applied with all of the other options within the composition.
Along with the other menu screens, I ensured myself to position and keyframe the breaker lines to be aligned with the highlighted text and applied the same fill colour technique with what the highlighted text shows.
From here, it was just a matter of highlighting the appropriate text and applying the light sweep effect onto it before it all fades to black courtesy of keying the opacity of the layers visible so that a transition could occur between the menu and the opening cutscene.
With all of that out of the way and a comfortable 30 second opening cutscene that could fill up the remaining portion of the animation, I got started by making some opening text that indicates that the player character is waking up. I also applied a typewriter effect onto the text to make it look a little nicer instead of just increasing the opacity every time. I wanted it to show the letters individually appearing on screen as the effect allows it to be shown from left to right.
The way I did this was adding a character offset to the layer and within the animator option, I clicked on the Add icon and selected Property > Opacity to allow the text to be displayed in a typewriter format. I would do this method for the cutscene dialogue too
Now it was time to construct the opening cutscene for the game. I plan to make it simple and take inspiration from Vib Ribbon (2000) and Thomas Was Alone (2012) in the context of the art-style I am going for. The player character would also be inspired by the blocky characters of Super Meat Boy (2010). I would begin to design the character using these inspirations and create several new layers for the body, limbs and facial features, with the mouth and eyes being created using the Pen Tool and Ellipse Tool respectively to make something like this.
I applied some basic arms using the Pen Tool and attached them to the character. Taking into consideration the direction the character is facing, I wanted the arm behind the body to be shorter for the proportions to be realistic, like so.
By applying the same basic method using the Pen Tool, I was able to craft some legs for the player character for him to walk.
This character is going to be walking into the scene, so it is wise for me to at least include a walking animation that would introduce the player into the cutscene and eventually the whole game. I animated the character’s position as it entered the scene by rotating the legs to make it look like they are walking. I duplicated the best possible result from each limb behind the other so that the walk cycle remains consistent. throughout. Here is the timeline for the limbs’ animation.
Now that the scene is all set up, I can apply some additional features like giving the player character an idle animation to indicate that he has some form of movement while still. All I had to do was animate the position of each layer to achieve the best result from this idle animation. I started with the body and keyframed it before slightly lowering the layer down to make another keyframe. With these two keyframes, I ensured myself to carefully duplicate each one and drag them on the remaining portion of the timeline and double checking to see the working result.
I have also shortened the composition length slightly so that it still fits into the required 2 minute length. The way about doing is that I modified this by going into the Composition Settings and decreasing the end length to 2 minutes 2 seconds.
It was time to add in the cutscene dialogue including what the character says and do. I have created a new text layer and helped to drive the story forward by the character checking his phone for a message notifying him of her girlfriend’s kidnapping. I have also applied the same typewriter effect for this text forward.
I have also made sure that each text layer that is visible in the opening cutscene has appropriate text placements within the timeline, as I wanted to check to make sure it would be in sync for when I add the audio tracks into the composition. Finally, I rounded off the animation with a quick text layer indicating to the player that the first chapter has been initiated and that the gameplay is imminent.
The Audio
I double checked the see if the animation was truly done and out of the way, and it looked like it has. It’s now time to add in the audio tracks that would fit into the different menu screens along with some sound effects. The first track I had in mind was a calm guitar track that would accompany the main menu screen and I wanted to incorporate it in the best way I could. I positioned the beginning of the track to where the main menu would first appear and keyframe the audio levels for the track to be slowly fading in, the audio levels increasing to a comfortable level, and would only fade out when the screen fades out as well to achieve the best result. The screen would be appearing at three different points within the animation, which would allow me to repeat this process for the remaining two points that this main menu screen would appear in.
Here is a closer look at the track’s waveform, as I wanted the audio levels to fade in and out consistently to avoid the track starting abruptly or being way too delayed in regards to the keyframes shown in the image.
I also added in an audio spectrum for the guitar track to make the composition look nice and professional. I scanned the spectrum’s effects and tweaked the frequency bands, height and thickness to something that suited both the animation and myself. I lowered the layer’s opacity to 50% when done so that it doesn’t stick out compared to the rest of the menu and positioned it towards the bottom of the composition, below the ‘Exit to Desktop’ text so that everything could be seen in clear view.
This track, I had a little trouble with finding a suitable area in the composition for it be played. I originally wanted the track the be played on the main menu, since this was the first track I had downloaded, but having the synths be in the main menu would probably agitate the people viewing the animation as they can get a little bit sharp in places, and reverting back to the main menu with this in mind could drive people away from the game. I relocated the audio track to the Options menu so that it could heard once instead of multiple times and allows you to turn down the track by decreasing the volume slider.
Speaking of syncing the audio track to the volume slider, I focused primarily on that feature first as that was the more complicated part of the process. I lowered and keyframed the audio track down in correspondent to the slider’s position as it was animated, and found a suitable volume level. You can see where I had put the keyframes in the image below.
I also wanted to spruce up the options menu by adding in the audio spectrum for the track. I applied the effect onto the track and I changed some settings in the effect controls to suit my liking. This is what was set to default when I first applied the effect onto the track.
By tweaking the controls a little, I was able to change some aspects of the spectrum without the effect being out of sync with the audio track. Here is what the spectrum looks like now after having its opacity set to 50%.
The next audio track I downloaded was going to be accompanying the game info screen further into the composition. I positioned the track where the screen starts to fade in and created the keyframes for the audio levels for when they start to increase in time with the composition. I plan to not include a spectrum for the drum track, as having one within the psychedelic background would look ugly, disorganized and hard to see where the spectrum would be, so I left it out of this screen only. Upon hearing the drum beat back-to-back, I realized that the tempo and the drum type sounds like the backing track from the song ‘Africa’ by Toto (1982). Nevertheless, I kept it in knowing it was going to be excellent when rendered.
Now that the general music was out of the way, it was time to add in a few sound effects to make the composition more appealing. I downloaded a ping sound effect for when an option is pressed so that the players would know if they had selected it. I placed the audio track carefully just before the light sweep effect would be visible on the highlighted text and checked it numerous times to see if it was in sync with the sweep’s entrance. It should look something like this.
I have also done the same method for all of the other times the highlighted text shows a light sweep to maintain the level of consistency. This is what the timeline should show.
Obviously, the text needed some audio for them to appear, so I placed a text-scrolling sound effect in as well and aligned it up with where the text was appearing to make it seem retro and cool to look at.
To make sure it was looped over every piece of text that appears in the opening cutscene, I duplicated the track in its own separate layer and made sure to align the track with the frame that the typewriter effect starts to instantiate the text to achieve a good result.
Looking back at the composition, every audio track I incorporated into the composition was organized appropriately and everything seemed to be working in sync with what was happening on screen. Looking back at the first 15 seconds, I realized that I needed to include one more audio track for when the ‘Press Start’ text is exploding upon being pressed by the player. I downloaded an Atari Boom audio track that will go nicely with the Pixel Poly effect. I ensured myself to align the track with the frame that the effect will be initiated, as the letters start to separate from each other to make the composition more appealing and realistic.
Evaluation
Looking back at the composition after rendering it in both MOV and MP4 formats, I wished I kind of added more to add to it, like increase the psychedelic effect to have more features or duplicating it to make it feel more trance-like. I also feel like I’ve could’ve done more with the background of some of the menus, particularly the main menu and the options menu to make it more interesting, and the opening cutscene, while sticking true to the inspirations felt lacking with just a black background and a straight line. However, the effects I have seemed to have implemented are fine and working in the appropriate areas that they should be initiated in. The breaker lines and how they are animated in the menus make them realistic and look like the player is hovering over text options. Everything else I am glad that they were included in the composition.
Leave a Reply