(WIP) A Typical Day - iOS/Android

[mamoniem]

Hello Community,

Long time to write a post on the forums, and the first time to write a post in that (WIP) section. I used to drop my blog posts in my website, but as it is related to UE I’ll try to post here too.
Long time ago when Epic released the UE4.0 I looked inside and found some experimental stuff, but the one that caught my interest was the Paper2D, so I made the first tutorials for it, a whole series using it. And that helped me to dig more inside the engine to fix/add some stuff to the experimental tools.
After that I got the chance to contribute in several projects planned to be released in XBox1 & PS4 using Unreal Engine’s Paper2D power and I hope I can talk about them some day soon.

Anyway, when I got a chance to enjoy my free time again I found that I’ve been using the engine for quite a while and it is the time to get out of the expermental&tests phase and decided to make my own real game for iOS/Android to add a new title to my dear games list ( There are video/text tutorials on the way for you guys as well) as it is the major thing companies used to hire me to do as I’m close enough to iOS/Android SDK.

Game name : A Typical Day
Platforms : iOS/Android
Price : Free/ads
Release date : by the end of August (I hope before)
IAP : NO
Leaderboard : Yes
Genre : a one touch game/Casual

As the game is very simple, I’m almost close enough to finish it since I started making it. It is just a matter of assets/Animation creation. All the code/blueprints have been made using mocups assets. As the majority of you know that I’m one person team(trying to learn new things in each game I made) But I’m a programmer at the end and making art assets is not my profession. In that game making it in 2d came from my seeking to draw good stuff & my seeking to keep using Paper2D

m-

[mamoniem]

Here are a quick post showing the other character (the game was planned to have so many animals, but for a game design/time wise; I shrieked all of that ).
Meet the Crow,

m-

[Ivey]

Love the art style, mamoniem Can’t wait to see more on the game. Thanks for contributing tutorials, too!

[mamoniem]

Good morning internet, It’s me again.
With the currently busy schedule, I was trying to find a free time to work in animations(the ones I made before was temp), and guess what ?!.. I found some time
As it is my first time to make a 2d assets from scratch, and also it have been long time ago since I done animations in general, I decided to plan for this animations and tried to make it a lot different than all the animations I used to get from the artists in the 2d projects I’ve worked in.
I found that the best way to achieve the result I’m seeking VS the gameplay logic, was splitting the player character into small pieces. Normally in a 2d game you have 2 choices at the majorty of the time :
1- Sprite animations
2- Skeletal animations.
But in my case I found none of those can fit my animation/game needs, I need to use the power of sprites with the ability of controlling pieces, and such a result can be achieved in a pure 2d animation software, but what about a game engine during the game loop? So I decided to make what I would like to call “Sprite Skeletal Pieces”. In that method all the animations enters the engine as sprites, but they are splitted into small pieces and chunks which give me the ability to control each of them as an independent transform during the run time (like the skeletal pieces while being in a 2d application). And I ended up using something new, I’ve never used before in 2d games productions with professional artists !
Keep in mind that, each piece is a sprite animation sequence, and at the same time it is a transform node that get’s it’s overall movement via game logic. So in my case I’ve now 5 animation tracks/piece; which means for an Idle animation, there is idleEyeAnimation, idleBodyAnimation, idlePeakAnimation,…etc. It is too much resources, but it is worth to use.

The Second interesting part I would like to talk about is the random/procedural animations. I used to use the procedural methods normally with the game logic AI or level generation. But while working today I found that it will be silly to make the eye blink in a loop cycle that the player can distinguish and get bored of it, as the Toucan will be the player’s focus the majority of the time. Back in the day while working in animation companies, they used to tell us to “Kill the patterns” that what makes an audience not get pored, and “Pattern in small things is more important than patterns in large scale/obvious things because the human eye ability to feel is more than it’s ability to see”!
Remembering those notes, was a huge factor to drive me to the splitting into pieces method. what if the bird is flying with a fly animation and I want it to blink with a none expected behavior ?
I guess the first answer was, split the eye in a different layer !
Then, how to make it random ?!

In fact, it was a very nice old trick, it is all about making an int or float that gets a random value over time. Then check in the game update loop whenever this random value hits a specific number, then do the blink animation, otherwise keep it in the idle position. In my case I asked to get the random between 1 & 40 and apply the animation whenever it hits 20 !

m-

[Jacky]

This looks so good! And nice solution for the eye.

[mamoniem]

Hello, I know it have been a bit long time (4 days) but in that 4 days I was working in another game along side with my dear game. The other game is a iOS/Android game for a friend, he is a designer and artist and I always hoped to contribute with the programming side with him…Anyway more details about it in the next week.

Back to the original topic of that post, as you know I’m not an artist, but for some reason I was always been able to draw characters only, never been able to colorize them until the moment I started making this game. Anyway, for some reason I never been able to draw nice environments, and as this game will have only one background (thanks god to have only one ), I decided to make it as best as it could be.
So, I downloaded several games based on vector art (into my iPad), played them and tried to capture the background soul from those games. So, it was a bit hard to get a tree from a game and sky from another game, but at the end I was able to draw this final image. It wasn’t that cool until I added the same effect from the Toucan images.
I also Start making the gameplay logic, prepared the project settings, fixed som issues related to the sprite material as it was not showing the colors as I imagined it.

m-

[mamoniem]

@Chance Ivey , Thanks and there will be more soon
@Jacky , Thanks, I’ll try to share as much as possible gameplay solutions could be, as it is my main area of interest

[mamoniem]

Good morning, or Good night…It depends !
Any game depends on scoring by collecting items, must have an attractive item to collect, as it will be catching the player’s eye/interest the majority of the gameplay time. Most of the casual games (~80%) of it depends on collecting “Coins”. but my Toucan will be collecting something that is more tasty delicious & worthy Its “Mango”…

I spent all the night trying to take some decision of how to make that fruits looks nice. I was hesitating to make it 3d or 2d. I started with the 3d solution as it is the quick way for me, and the easiest for me as well. When I was thinking about the spinning coins in the other casual games, I was thinking to make my mango spinning or at least floating in the air. But with my thoughts about spinning it, it gave me only choice, to make it 3d.

I know, it looks a lot like Crash Bandicoot’s Apple…It is one of my favorite games and I must get inspired by it. But let’s face it, When I entered the*. fbx file into the Editor, I realized the forgotten truth, that I’ve to insert a light in my scene to let the Spinning Mangos appears ! otherwise they will remain back…and it does make sense. It might be normal thing, but for me, as long as the main character, environment DOESN"T need any light (as it is 2d assets), so I have to find another way to avoid using lights ( not a big fan of it in 2d games, unless it is essential for the game play, let’s say a dark 2d cave with some flames!).

So I decided to go with the hard way… ;( make it in 2d. I kept making several versions of this damned mango, and it never looks as good as it should be. Until I realized one thing, thought I never read about it, but I figured it out with trial and error with several drawings and renderings. 2d also have surfacing techniques!

With a small, mini, tiny, little trick; which called radial (none liner) gradient, I was able to give the mango the feeling of a rounded surface. I found that the issue I had it was not in the Mango shape itself. neither in the mango colors too. But it is in how I spread that colors to fill the 2d shape. Glad that I was able to learn something new that night, and that new thing, made me start to re thinking about what I’ve already done from 2d art, and thinking about going around it and try to sue that solution with some background elements.

m-

[Jacky]

You could actually use an emissive material for the mango, that way you wouldnt need light in the scene. Or you can capture a flipbook texture of the mango rotating and then use it as 2D. Whichever way you choose i like the 2d’s look better though.

[Michael_Noland]

As Jacky said, you can create a material and set it to Unlit for the mangos if you want to keep them 3D, which will work without any lights in the scene. You can still fake a light in the scene if desired by setting the light direction as a material parameter and doing fake lighting in the material itself on the materials you use for 3D objects.

I like the watercolor aesthetic you’ve got going; looking forward to seeing your progress

Cheers,
Michael Noland