Jack Rooney's profile

CT4011 - 2D Animated Prototype - Jack Rooney

CT4011 - 2D Animated Prototype - Jack Rooney
- Concept for a game involving lasers
- Visually pleasing art style with lots of bright, saturated colours
- Mechanic based around mirrors and reflection of light
- Mobile game targeted at a casual game audience
- Similar game exists but the market is niche and the style is very different to what I want
- Realistic textures wont be a thing and will mostly consist of bold, bright effects
- Gameplay will be about rotating mirrors to guide a laser to fit a path
- Will also add more features than this minimalist offline app as it doesn't fit the modern game market
- Storyboarded my ideas (left to right) to have a plan on what to animate
- Starts with a laser pointer firing a laser into a mirror, establishing the two core mechanics instantly
- The games title will be revealed by the laser, effectively introducing the brand
- A mobile phone will be carved by a laser to signify the platform the game is on, providing more information to the viewer of the game
- More information provided through text popping up to add selling points to the game
- Introduce some gameplay; simple, informational but fun elements to appeal to a casual viewer
- Show the mirror rotation mechanic as well as the element of different skins being possible, showing off a more personal gameplay experience
- Show off the menu UI and other features such as level creation and online sharing
- Final splash screen showing off the App Icon, title and platform that its on
- This plan effectively maps out the concept in a cohesive flow which allows me to inform the viewer of the game while also not being like a slideshow of different ideas; the animation should seamlessly flow between ideas and be a dynamic viewing experience

- After deciding on a red and black colour scheme (two contrasting colours that allow light to be portrayed very easily), I started by adding a laser pointer using the shape tool and using the position transform to move it into frame from the left; also using the align tool to make it centre of the vertical axis of the image
- I added a red lens flare to the animation as this would imply turning on the laser
- Using the opacity transformation, I had the lens flare appear gradually rather than instantly which created a simple switch on effect that was pleasant to look at
- Next I need to show the journey of the laser and to where it is going
- Here, we saw the introduction of the laser which consisted of two colours, red and white, implying that the centre was bright with a surrounding glow
- I had the laser move across screen by transforming both the position and scale, following a track trough the middle in which the lens flare also followed
- This created a smooth 'firing up' animation as it effectively demonstrated the movement of the laser
- Its left to right flow is aesthetically pleasing to the viewer as its forward movement into an unknown destination is exciting and leaves the viewer wondering what they are about to see
- From here, I need to display the mirror mechanic as well as the effects that the mirror has on the game
- Adding a mirror layer (a thin rectangle which entered the screen from an angle), the viewer is exposed to the second main mechanic of the game
- When the laser connects, I increase the white inner glow and red outer glow (from the layer styles element of the shape) to demonstrate the capture and reflection of light (at the same time, I return to the laser pointer and add a bevel and inner glow layer effect to make it seem like a more realistic object rather than a lifeless polygon)
- This accompanied with the laser stopping inside the mirror (by downsizing the x-axis to zero as it connects) presents the end of the laser journey before I add the transition into it reflecting out the text
- The mirror wasn't in an optimal position therefore I had to use rotational and positional transformations to place it in a nicer position while also not ruining the seamless flow of the animation
- From here, I add the  L a s e r l i g h t  text, with the 'L' projecting from the mirror before making it move towards the centre of the screen and fading to black
- The text appearing instantly was not satisfactory however, so I used the text's opacity animator to make it appear letter by letter, as if being projected in by the light
- Next, to give the layer more life, I add in an outer glow with a size and scale that increases before returning to normal size; achieved by opening the graph viewer of the element and dragging the line to where it goes beyond 100% before returning to normal
- With the first part of the animation done and it fading to black, I need to start working on the second part, the informative stage, showing the fact its a mobile game and some key selling points
- Introducing the phone now, I wanted to have it so the imprint of a phone would be 'laser cut' the design into the animation
- To achieve this, I have a new laser come down from the top of the frame and follow a straight path before increasing the opacity of a rounded rectangle shape, implying the laser is creating the shape
- To solidify the effect, I reintroduce the lens flare to follow the tip of the laser and around the path of the phone with it having many position adjustments on corners to naturally flow along the curved path as apposed to cutting the corners of the phone
- The shot is completed by the phone increasing in size and rotating to landscape which neatly serves as a vessel to present the rest of the animation as if it were on the screen of a phone
- With the platform of the game introduced, I now need to add the text with bold selling points to the animation
- Rather simply here, I reintroduce the opacity animator effect, increasing the start opacity from 0 to 100 to reveal text left to right, to inform about some key features as well as using an outer glow layer style
- I choose to advertise level quantity (to imply replayability and longevity of a game), skin selection (to add a personalised feel to the game to make it a little more unique to the player) and a level creator combined with an online library (making the game seem limitless as you theoretically can make infinite of your own levels as well as playing limitless fan made levels, implying a community aspect to the game)
- This information effectively catches the viewer's attention as the game is now of a much larger scale than a simple offline game which you put down after one gameplay session
- I am really fond of how this information is conveyed in style to the game without being a big wall of text that breaks all flow of the animation
- With the second part completed and another fade to black added, I need to now introduce gameplay and features
- As opposed to the storyboard, I introduce the main menu at this stage, a decision made as I wanted to implement gameplay without having it appear with no context
- I have the main logo title appear with the opacity animator as well as the rest of the other text, also implementing a white outer glow manipulated with the graph style editing of the transition, and behind the text I add some buttons made with a rounded rectangle, outer glow and inner red bevel
- To show gameplay beginning, I add a red overlay to the start button to imply that it has been selected
- The information shown on this segment is very effective at displaying the main menu, allowing little to no error of misinterpretation of what's been animated
- Stylistically, the game looks clean with the viewer knowing what themes they will see expressed in the gameplay
- From here, I'll display gameplay and other included features
- Gameplay wise, I demonstrate a tutorial level; simple in concept and easy to observe as a first time viewer
- Text is atop the frame informing the viewer the fact it is the first level as well as some instructions which are revealed, demonstrating how the game is played
- I add two laser layers, a mirror and a destination for the laser to reach; all key layers needed to demonstrate gameplay
- I change one of the lasers central points to the end attached to the mirror and proceed to rotate it to meet the destination, also changing the length of the laser to reach the end of the screen until it meets the destination point
- I have the mirror match the rotation angle to make it seem like the source of the reflection
- Next I add some flair such as a circle with a thick outline and no fill to imply a fingerprint is being placed on screen as well as a lens flare which tracks the end of the laser on top of it being a trigger of when the level is complete (indicated by an inner glow at the destination)
- With the fingerprint, I first add some noise to the layer to give it a distinctive appearance from the rest of the layers on screen before making it slide across screen in sync with the rotation as if its being dragged by a person's fingertip
- This scene is visually great and represents genuine gameplay effectively, retaining the existing dynamic flow of the animation up to this point
- I will next introduce the level creation as we are already familiar with how levels look so it will be a good next step
- Here I made the level creator animation which was done by using the finger print popping in and out of frame and having elements appearing beneath them
- I also added a swipe animation to bring up the object placement menu which was done by having many buttons appear after a rectangle filled the area at the base of the image
- This feature, while briefly displayed, effectively shows off the function of the level maker without wasting time or overcomplicating it
- Next I'll add the final splash screen after adding a skin selector animation and that should wrap up the animation
- Finally, I added a skin selector, a screen with three circles with a gradient fill, and used the thumbprint animation to change the colour to lime green which changes the laser colour while also changing the phone colour to make the animation look more appealing to view (while obviously not being an actual feature)
- Next, I added a final screen where text uses the opacity animator to reveal the logo, app icon and various text to inform the viewers one last time about the product
- After completing the Adobe After Effects animation, I looked to adding sound to the animation, mainly being sound effects complimenting the animation
- I needed a good amount of base sounds to edit in Adobe Audition so I found a site where you could use uncopyrighted royalty-free sounds to have samples to edit and apply to my own work
- Here, I have sourced the sounds used in my edits:

https://docs.google.com/document/d/1HxIERFHy9eUdoNATElm0HIC-vZaU78NW4pOPOmcG3r0/edit?usp=sharing
- Firstly I experimented with cropping, fading and amplifying sounds
- I cropped this sound to fit the required length of the animation segment by deleting excess audio
- I increased the volume of some parts to add some variety within the effect
- I added some fade in and fade out by dragging the curves across the wave to gradually decrease and increase the volume, preventing sounds abruptly playing and shocking viewers
- Here, I experimented working with reverb
- I did this using the Convolution Reverb effect and did this to add more bass to sounds making them pack more of a punch when being played in a scene
- Using the DeNoise effect allowed me to make sounds clearer and remove excessive reverb and background elements from the audio making it clearer and more fitting in some cases to the desired audio needed for the animation
- In this screenshot, I experimented with generating Brown Noise and Pitch Shifting
- Generating the audio into brown noise created a harsh noise which was useful for creating an impactful sound effect however I found it too high pitched and scratchy so I pitched down the audio to make deeper and fitting to what I needed
- To create the laser cutting sound effect, I used the distortion effect to drastically change the original sound
- This allowed me to create harsh, scratchy sounds like that of cutting metal which immerses the viewer into this detailed scene
- Finally, I placed the animation into Adobe Premier Pro and assembled the sounds to their respective positions, going back and adjusting volume where necessary, before finalising this piece

- To Conclude:

- This animation excels in keeping consistent themes, dynamic flow and retains style while incorporating information
- The added audio compliments the segments nicely while not being too sparingly spread out
- The game mechanics are clear and what you can do in the game is also extremely well put together

- Some of the early animated frames could've been better done as I learned more about animating as the project went on
- The sounds, while well made, can be repetitive to hear
- The animation sometimes moves too fast and the target demographic isn't always cleat

- Overall, I am extremely happy with how this turned out and I am most pleased with the theming being carried throughout the animation
- The game looks extremely fun and high potential while not taking creative cuts in its concept
- Where things could've been done better, I am still not unhappy with the final piece
- I am glad it turned out like this and hope the viewers will see it as a great concept!
CT4011 - 2D Animated Prototype - Jack Rooney
Published:

CT4011 - 2D Animated Prototype - Jack Rooney

Published: