[Beyond the Dish]: Landing Scene

Scene

Hi there! I’m Susy, one of the artists at Raccoopack. I’m also known as the Super Stylistic Support Snail. I help with game assets, mockups, and flashy designs.

Landing Scene for Cook to the Beat mobile game on Android and iOS

Since there aren’t many tutorials available for designing intro scenes and animating them in full detail, this was a huge experimental process. My process comes from a beginner’s perspective with Premiere Pro but with advanced Photoshop techniques. I have summarized the constraints and what my approach was. This is a breakdown of how I made Cook to the Beat’s landing scene. Enjoy!

Tools Used:
Surface Pro 4 for drawing
Photoshop CC 2017
Premiere Pro 2019

Constraints:

  • Match intro song but keep under 12 seconds for landing scene
  • Sizable resolution for androids and iphones
  • Dishes are top down perspective
  • Animation from trailer was done in Premiere Pro so editing platform is set to save time when passing files for collaboration
  • File size must be under 30MB, UI interface cannot be on top of a video (mp4) must be a gif or unity animation

Approach:

  • Plan with animatic to match song length
  • Illustrated the composition in photoshop
  • Keep animated loops simple and repeatable
  • Learned Premiere Pro import/keyframe settings
  • Created a fast and efficient process of changing dish perspectives without having to redraw it
  • Exported video at 720p and shorter animation time
  • Created looping background for start buttons exported as a gif and low 480p/720p for testing

The storyboard was an animatic because it needed to match the rhythm of the music to keep to the spirit of the game. The idea at first was animation of veggies flying from the chopping board to the dish as a transition scene. Later on it was simplified it to make the scene shorter.

Setting up the illustration, reusing all available assets.

The first thing after the sketch was to save time by importing existing available assets.

Creating the composition was done as an illustration. The background was extended using Photoshop’s copy and stamp tools. Then I imported the dishes and Simon. The perspectives of these were changed using the transformation tool and distort/skew settings.

Changing the perspective of the existing dish assets.

Layout perspective of landing scene.

Best thing I learned was in Photoshop CC, it can autosave layers as images for you and simultaneously updates the files just by naming your layer with a file format with .png at the end.
 
File > Generate > Image Assets (.format auto generation)
 
Another way I saved time was by only drawing parts needed and not getting caught up in details until after the animation part was done and I knew which parts were revealed and would need to be finished.

Final Illustration before exporting layers.

Segmenting the layers for camera parallax movement. Blue border for checking mobile phone ratios.

Keyframing in Premiere Pro.

For the start of the animating part, I had the awesome privilege to use Kyoko and Pinia’s animations. The logo animation and wall of veggies with ladle splash was done by Kyoko and steam animation was done by Pinia. Lots of issues with the dish perspectives came up and had to be changed a few times. Luckily replacing assets is just one click and it updates immediately.
 
I exported the video at 720p for the intro scene and a looping gif at low 480p/720p for testing with the UI buttons in the game.

The hardest hurdles for this project was ill-planned perspectives of the dishes and keyframes for a seamless looping animation. Next time I would set up the keyframes differently rather than animating each one separately and account for overlapping parts. The distance between the dishes needed to be set much earlier since time was used in correcting the sizes and parts of the dishes continuously.

Overall this project took about 18 hours to finish but most of the time was for correcting issues that could have been prevented! I hope this information can be helpful to fellow developers and artists.

Cheers!

Article by Susy Hsi

Check out Susy’s portfolio!

Leave a comment

Your email address will not be published. Required fields are marked *

Recent Posts
Archives

© RaccooPack Studios 2018