This video tutorial will give you a quick breakdown of how I create Animated Story Cutscenes for my Unity Videogame Projects using my iPad and the Procreate app so please Like, Subscribe To My Channel, and Stay Tuned for much more upcoming content!
Visit our Cre8tive Media Vault Design Tutorials page to find in-depth guides and videos on how to get started creating your own media content.
2D Game Level Design Using iPad and Procreate (Overview)
These cutscenes were created completely on an iPad 6th Generation. The artwork was done using Procreate and Apple Pencil while the video editing and (temporary) music/sound effects were done in Kinemaster.
This process is very cheap, efficient, and easy to use, so anyone can make animated cutscenes using this method without the need for purchasing a lot of expensive PC hardware and software.
It`s also very convenient since it allows you to make cutscenes anywhere and any time using your available mobile devices!
How Does It Work?
The main thing that you`ll need to do is grab a pen, a notebook, or your tablet PC and head out to any random destination where you can concentrate, preferably a place where you can find yourself surrounded by colors that might actually contribute to the overall theme, look and environment of your game.
For example, if I`m making a game with characters that are based on sweets, I might want to hang out near a coffee shop, candy store, Baskin Robbins or a shopping mall because I can get a lot of ideas and inspiration from there.
Likewise, if my game has a forest theme or environments, I may want to hang out by a place with a wooded or river nearby so that I can get some inspiration.
The Tools Of The Trade.
The tools that I`m using in the above video are:
* iPad 6th Generation (2018 model – compatible with Apple Pencil) – I bought this 2nd hand from a reseller. The iPad that I`m running is currently updated to iOS 13.7.
* Apple Pencil 1st Generation (I bought this 2nd hand as well) (but any stylus will work. My backup stylus is a Wacom Bamboo Fineline Stylus Pen )
Apps such as Sketchbook Pro App , Paper by 53, and Adobe Photoshop Sketch also work just as well.
The Objective.
#0 – WRITE YOUR GAME LEVEL OVERVIEW!!! – By now, if you`ve been following along with my game design course, you should know that before you start trying to sketch, design, or layout a cutscene, it is always a good idea to draft a written overview of what you want to include in the scene beforehand, including the character dialogue if possible.
Just write a quick summary like this one:
Cutscene 5b (type: side scroll platformer) Haunted Forest
BOSS (Boss name: Elder Tree),
Main enemies:Giselle, Fuu-wah
Main events : Giselle meets up with Fuu-wah in the haunted forest after falling out of the factory. They hear the Elder Tree looking for souls, Giselle battles and defeats the Elder Tree.
========= Dialogue =======
Cutscene 5.5 (Elder Tree Pre battle)
Giselle – Wow this forest is endless… we’ve been walking for hours and I still don’t see any clearings. This river smell is so bad, even the trees seem to groaning.
??? – (Groan)
Fuu-Wah – ?!
Giselle – Yeah, I heard it too. Looks like it came from the direction of that tree.
Tree starts to move *
Elder Tree – Hungry… Must… Eat … Souls…
Giselle – Hmmm… No coffee, bad hair day, monsters, and a talking tree? Yep, it’s gotta be a Monday… Alright, “grumpy sap” let’s get this over with.
================
You can always change this summary and add to it/subtract from it later!
Writing this beforehand will definitely save you a LOT of time when you are laying out your levels on iPad or in Unity because you`ll already have an idea of the basic elements that should be in the cutscene and you will not have to waste unnecessary time thinking about it. This technique will help your basic level design go much smoother. The additional elements will just be “fluff” and used to increase the overall experience for the player.
After that, you just need to follow the basic steps in the video.
1) Create a new Procreate Canvas.
2) Layout/draw the Characters that you want in the scene at the location where you want them (in a position where they will be somewhat out of the way of the dialogue box and the background).
3) Start Sketching the cutscene background using very simple lines and basic shapes. This is just to give you a feel of where everything should be placed in the cutscene to make it look nice with the characters.
4) Once you`ve finished the basic layout sketching, do another round of Detail Sketching, where you will actually start adding more detailed elements, such as rocks, trees, castles, mountains, and rivers to the scene.
5) Once you have finished sketching the detailed elements into the scene, you can now being the simple Inking Process, where you will select a Procreate Pen Tool and go over the lines in a market, more defined color.
6) After that, we can move on to the Base Coloring Phase of creating the background. For this step, it is recommended that you first create a color palette from a photo reference or previous artwork so that you can match the colors within each cutscene. Once you have your color palette, fill in the base colors of your cutscene by coloring the trees, rivers, rocks, and plants, etc. Don`t worry about adding highlights, shading, or effects at this point. You will do that in the next step.
7) Add your Highlights and Shading to the cutscene by using the Procreate Paintbrush or Airbrush. What you`ll be doing with these is trying to “blend” in the shadows and highlight colors on your scene elements in order to give them more of a textured look and feel. This technique also allows you to easily add a “color balance” to your Base Layer scene while freely playing with lighting and shading for each of the elements.
8) Once you`re satisfied with the highlights, shading, and texture of your cutscene, then you can start Adding Special Effects using some of Procreates more “robust” brush options such as the Light Pen, Cloud Brush, Water Brush, etc… These brushes are excellent for adding effects to your staff cutscene and will really make the animations “pop” once the artwork is exported into Kinemaster (or your other preferred video editing software).
9) Once you are satisfied with the overall cutscene look and effects, be sure to check the layout and placement of your dialogue box and character placement in the cutscene before exporting the background in .PNG (for images with transparency, like a see-through transparent sky), or .JPEG format for backgrounds with no transparency).
10) Import your new artwork into Kinemaster and get ready to start video editing!
This is the basic format that we`re going to use. However, it may still be difficult to know where to start doing all of this, so watch my video for more detailed steps!
So I really hope that this helps you out with creating cool cutscenes for your Unity games! It can be a pretty fun & creative process! In the meantime, don`t forget to check out the rest of my tutorials on this site while also taking a look at our links below!
Play our “Quest Of The Gummy Witch” Web Game – https://cre8tivemediavault.itch.io/quest-of-the-gummy-witch
Links:
* Subscribe – https://www.youtube.com/channel/UCWcAuoZm2TpufFq5bOVm9jQ?sub_confirmation=1
* Join Our Discord Server – https://discord.gg/RYZbqm7
* NerdyUrges Online Store – https://nerdyurges-com.myshopify.com/
* Twitch Stream – https://www.twitch.tv/wyldeblade
