Project ITV

Project ITV

Sunday, January 26, 2014

Comic Scenes Part 3 + Cliff Scenes

26 January 2014

I created several new scenes over the past week and halfway through discovered something that potentially makes the scenes look much better - remove the black outlines.

I should be happy, but when I realise that I've already drawn several scenes out, I don't feel like returning to the old scenes to correct them.

Above is the first scene I drew without black outlines. It looks very good when I compare it to my other forest scenes.

 Above was a comparison I did halfway through while producing the scene.

This is my forest template. I put all my forest-related assets here, so anytime I create a new forest scene, I just have to drag in and re-position my assets. It saves a lot of my time! The character templates are also commonly used, so I just put them here as well.

I have currently 21+ completed scenes, and barely halfway done. I can see this taking up a lot of my time. But I have completed about 90% of the Forest scenes, and I have started moving on to the Countryside scenes. I've already drawn out a few frames of how the comic looks like on paper and now I have to digitalize them.

While not in the comic, I also found this particular picture having great potential so I decided to take a break and work on this. I relate to it a lot.
I really like this scene, and the above is a screenshot taken one day ago.

This is a very familiar scene, and I had created several such scenes over the years. I looked through my ancient "My Pictures" folder and was struck with nostalgia as I recall pictures that date back to 2010 (4 years ago). I did a compilation of all the "Cliffs" for fun and here's what it looks like:

All of them are to scale (in terms of size comparison with each other) except CliffEdge, which I had to scale down to squeeze in here. I just noticed a trend as well, and it's that the pictures got slightly bigger over time. I think it shows the transition of me using MS Paint to Photoshop very perfectly. In my latest picture, I completely removed the use of outlines. All this while, I had been using outlines - something which was a necessity for me while using Paint. And now that I've moved to Photoshop, I think outlines may be gone from my pictures over time since the scenes tend to look better without them.

There's one more TC that doesn't particular look like one of the above since it was drawn for a different purpose, but it does resemble a cliff edge shot.
This is TC34.4, also drawn in MSPaint years ago. I really like the part at the bottom right. It still makes me feel something till today. I remember how tedious it was to manually create gradients in Paint pixels by pixels - but it was what made the moon at the center look one of the nicest among the TC I had drawn back then.

Here's today's progress on Countryside comic scenes:
It's looking satisfactory so far! I can't wait to finish up the first of the Countryside scenes!!!

At least one person will be looking at how shiny that apple is.

Sunday, January 19, 2014

Comic Scenes Part 2

18 January 2014

I like to take a break from all the coding/drawing and come here to write on the stuff I have done so far. I've drawn a ton of stuff, though not as much as I wanted to since I had to code a couple of stuff to integrate the different comic scenes. I slept and woke up really early today.

I'm also beginning to "explore" other art styles that I stumbled upon while drawing my stuff. One of the scenes I was really looking forward to draw was a scene of the Countryside comic.

One of the styles I felt like going with was a very simple style where the picture is mostly just either black, or white. No Grey or any shades of colour. It looked really nice when I was just started, as seen from the picture above.
It looks similar to "Take A Walk", a game which had really good and detailed graphics even with the absence of colour.

Below, I tried a couple of blending modes. It did not quite achieve the effect or beauty of anything better than the original so I just used the original. There was one effect (I didn't put here) that was pretty good, so I made an animation for this scene. I added a setting sun and as the sun sets, the lighting of the scene changes. I did that with Flash's blend mode. The following are not done in Flash, but I thought it would be cool to try other effects like morning, night, rainy, super bright lighting, etc... The images below shows some of the simple effects I tried applying:




I was also drawing another scene. It's a very dense forest scene and I suddenly came to realise that the trees looked quite good even without strokes. I previously drew them with strokes because they lacked the detail and shading to make them look good on their own. But as I draw, the outlines do become a nuisance at times, taking up unnecessary space at where I need them most, especially with small objects in the distance.

With strokes

Without Strokes

It's been a fun week. I was doing programming for the Comic mostly as well as implementing the Hats for the turtle properly. I drew new hats too! I did more programming than drawing, but I did take short breaks to draw stuff whenever I get inspired.

Each scene in the comic is classified under one of 3 types:
- Normal: The scene appears normally. No special effects other than animations.
- Scrolling: The scene can scroll left to right or right to left. I draw my scene wider when I intend to do scrolling. It apparently looks better when I exaggerate the effect of parallax scrolling.
- Zoom: One of the hardest effects to create when combined with the above scenes. The scene requires its own camera and multiple layers of depth in the picture. I then manipulate the scaling of each "layer" individually, to give the impression that the player is moving toward or away from the scene. I imagined it to look really cool, but each scene in the comic is about a quarter the size of the entire game screen, so the effect didn't turn out as awesome as I expected. It still has the effect I intended though.
Lastly, I am going to animate some objects or people in the comic to make stuff more exciting. This comic is looking good so far. The enemy frames above were made like this to create a special "revealing" effect which I don't want to say too much about haha. The animation will do the talking.

Above is a parody of Limbo I drew. It isn't very high quality because it was drawn in a very short amount of time before I wanted to sleep (took me like 30mins to speed-draw this), thus the "blobby" outlines and simple shapes. Limbo is another game with really good art direction.

TreeMoon.jpg
And here is a scene which will be used in the comic. I drew this because I saw two of my images - a tree and a moon - overlapping each other. And coincidentally, their positions actually looked really good together. I got a good feeling out of it and I drew something more complex. I wanted it to be simple, so there wasn't much detail in this as the other comic scenes. That might change though, since it looks like an idea for a frame in a comic scene. The text in TreeMoon.jpg will be changed in the final version.
Above is the inspiration for TreeMoon.jpg. I somehow feel I could have done a better job for the TreeMoon though.

Also, I found a quick and easy way to automatically convert all pictures to have pure black outlines and white for everything else. Here is a forest scene that I just completed:


Unfortunately, it doesn't automatically draw outlines for shapes that aren't black, so there are a lot of missing details in the furthest layer of the background. Notice that the numerous silhouettes of those trees just disappeared in the black and white version? Still, it was a quick way to see how my pictures look like without colour and just the outlines themselves!

After playing with the setting subsequently, I was able to find another easy way to get the same effect above. But it isn't as clean since there are patches of grey in the picture. However this method is more flexible in that I am able to control how much detail I want in the picture. I can set it to hold more detail, and thus more patches of grey, or have lesser patches of grey at the cost of detail. It's quite cool to play around with the settings and experimenting with the results haha!


And alas, this weekend is already coming to an end. As usual, weekends are being themselves - short and ephemeral.



Sunday, January 12, 2014

New Tiles, New Achievement UI, Hats/Shell accessories, Ability Effects, Comic Selection UI

12 January2014

I honestly feel that this game is really starting to take shape in terms of graphics! (Then again, I am always constantly improving the graphics despite thinking it would be final.)

I've added a ton of stuff lately and I'll go through each briefly in detail one by one!

New Tiles
I had a couple of tiles drawn and put into the game to test which were better. I also did color variation of the tiles to see which color scheme would fit the level the most. I did this after sending my game to Li Hao, who said that some tiles looked great because of the colour, but they lacked the detail and stuff that the other tiles did. So I later went to modify the detailed tiles' colour in hope of achieving the same matching colour scheme that the old tiles did.

It is sort of funny because I seem to have gone one big round, and suddenly after drawing so many new tiles, the old tile ends up being the one with the most matching colours! But I think if I can get my new tiles to match the colour scheme, it would look greater ultimately.

Anyway, these were the tiles that were made before reaching the final result. A lot of these were drawn a long time ago and looked really bad and were crap, so they were discarded.

 Currently in use for Countryside:
 Used to be the tile for Countryside:









 Currently in use for Hills:

 Might implement for Hills:
 Might implement for Hills:




New Achievements Popup
The problem with the old achievements popup was that it took up a lot of space. Even though I added the option to close it, it doesn't solve the original problem of it being big. It also looked far too futuristic and the style was quite off. So I went to look up how acheivement popups look like in other games, and decided to scrap my old popup and make one based on the references I found.

I did a new popup, and well, I think it still looks a bit too futuristic. I think I tend to like to draw futuristic stuff and hence it kind of affected the way I draw popups, but at least it looks much nicer. It is sleek and smaller! I like the close button at the top right. It turned out better than expected.

Old Popup:

New Popup:
I'm still testing how it works so the popup might not be finalized. In fact, nothing here may be finalized, including the tiles. The good thing about the new popup on the programming side is that I now use this template:

And then I just code which "icon" and what the achievement "name" is. I don't have to make a new picture to add a new achievement. I just use the template, change the icon and name and tada!

It makes me want to add more achievements because it's so easy to add achievements now. The Achievement class settles everything. I just need to add two lines of code!

memoriesAchievement = new Achievement("Digging through Memories");     //Create the achievement
memoriesAchievement.earn();     //Reward the achievement to player

Hats and Shell Accessories
My favourite new feature.
I added Hats in the game! The player can now wear hats. There are currently 4 different types of hats, 2 of which are actually sunglasses that cover the eyes instead of the head.

I also added the ability to change shell colour. There are currently 9 shell colours to choose from. There are more variations, but I took a few screenshots just for show:



Currently, these features are more for fun. You can change your hat by tapping "H" on the keyboard, and change your turtle's shell colour by tapping "J". Your preferences are saved, so every time you load the game, you don't have to re-switch to your preferred hat/shell colour.

I have not added a user interface for this yet since this feature is pretty new and honestly, very pointless. It's not even something I intended the game to have, but it was quite fun to do it. It's my game afterall, I have the power and can do anything! HEHE. Just kidding of course.

Oh, did I mention that certain hats actually "float" down when you fall from a high height? I wanted the hat to really show as a separated object instead of just something that is "fixed" onto the turtle's head so I gave it a bit of physics. This was actually more complex than I thought since it didn't look real at first, but I managed to figure out how to make it look more realistic in the end. I think this effect is pretty cool.

I also made the Hat scale accordingly with the player's height and width when he collects friends. The scale works awkwardly with animations though. There are also some bugs with the hat and the girl gains some magical properties when she jumps on top of the guy when he wears a hat (Magic hat much?), so I'm not done with this feature yet. Might not even implement it in my final game since it is just not a meaningful addition to the game.

Abilities / Effects
The ability to be invulnerable to spikes and enemies were implemented long time ago. But I never made any effects on the character to show that they were in effect, but now they do:

This being a new feature, I might change it over time as the top shield doesn't look as nice as the bottom one. You can stack both the top shield and bottom shield.

Unimportant: Trivia:
I got the ring shield as an idea when I had a bug and created a ring around my character. The ring was supposed to expand outward and fade out, but it remained stuck to the character and followed him. That was when I had this idea! It's bugs like these that inspire me.

Comic Selection UI

I added the new Comic button to the Main Menu. I also reduced the gap between each button so I don't have to stretch them out so much and clutter the Menu.

When you click on "Comic", it directs you to this screen:
 I intended the book to look like the screenshot below at first, with every picture having "Chapter X: yyy" on it. But guess what I did in the end?

This:
By default, the button looks dark when you do not roll over it. (Top picture)
When you roll over it, the background appears. (Middle picture)
When you click it, it is selected and brightens up. (Bottom picture)
Also, when you select the picture, the words "Chapter 2: xxx" appears with a trailing animation behind it. I think it looks rather neat rather than have all the pictures display the words like above.

But if it's locked, a new button is used. Rolling over will tell you so.
Attempting to click the button even though it's locked, will cause the "LOCKED" to glow.

I like Chapter 4's button. I think it looks the most fabulous:
I made this comic selection screen because I previously put an ugly button at the menu for me to temporarily access and test the comics, and the ugly white button really irritated me to the core, so I decided to actually attempt this and see how it went.

With that, I conclude this post of one of the most productive weekends I ever had, after sleeping at 7am yesterday.

EDIT:
Updated 'My thoughts so far' on 13 Jan. The following has nothing to do with the game itself, so uninterested readers need not continue.

My thoughts so far
Well, this is the first time in a long time that I did such a dedicated post. I put up so many pictures, took so many screenshots...it's just wonderful. Just reading the posts before this one was quite disappointing. I felt a bit bored reading my own posts since I had begun to lose interest in the game while away from it. But this post actually felt different. I hardly had this level of motivation working on Introvert ever since I was enlisted into National Service. I hope this motivation will continue on for as long as possible!

Since I kept this game quite low-profile, only four people have actually played my game before, in order:
- Myself
- Li Hao
- Han
- David

Soon, I will have a fifth person try my game, and I can't wait to recieve feedback, because for once I'm actually letting somebody who has NEVER seen my game before, play my game. I realised one thing about myself is that I have the tendency to prefer new stuff. When I see the game and test it every day, I get accustomed of it to the point that whenever I draw new tiles or new backgrounds, or create new level layouts, I instantly feel the new one works & looks better. That is until I realise that sometimes, it is because from my perception, this 'new' thing looks better because it replaces something old which I keep seeing for a long time.

In a way, the longer I test the game, the greater the inaccuracy of my judgement. When there is something ugly in the game, and I see it for 100 times, suddenly I get used to it and so comfortable about it that I forget that it is something I need to change. Take the achievements popup above for example. I actually forgot about it, until somehow I remembered it yesterday through a conversation with Li Hao.

Since this game has been with me for a long time, I'm frankly quite excited to have a new person testing the game and hopefully, since I get a fresh opinion on things and hopefully I will get constructive feedback. Haha!