Project ITV

Project ITV

Saturday, September 27, 2014

September Progress

27 Sept 2014 - September Progress


The month of September has been even more productive!


Level select difficulty sprites

Now, these sprites appear when you move the mouse over a star in the level selection screen to tell you what the star means (which difficulty you  completed a level on), the three difficulties being "Peaceful", "Puzzle" and "Perilous" (previously known as "Panic Mode").

Finale Cliff Edge
I am not going to reveal too much about this level, but this is basically a very special level that leads up to a cutscene that plays as you reach the end.

Above is a draft using template platforms to form the level. It seems to look pretty decent and I actually considered using those black tiles since they actually reveal more of the background which achieves the effect I want, but I wonder if custom platforms would be able to achieve it too.

I drew the custom platforms for the level and this is what I have:
Notice that the platforms aren't very grid-like as compared to my normal levels. I used a class I coded months ago called Slope.as. It creates slopes for the game in a rather hack-ish way in that the game engine doesn't support sloped tilemaps, so I had to devise my own way to implement slopes in the game. By creating platforms that act as a ground for the player, following the formula y = mx + c, I was able to create various types of slopes (steep slopes, smooth slopes) by inputting the start and end coordinates of the slope, and let the Slope class do the rest of the calculations.

As you can also see, this map is really, really huge and it has to be quite wide because of the player's increased size in this map to give sufficient walking distance.

House


For the first time, I drew the exterior of the player's house. It looks better than the girl's house in my opinion.

The beam of light in the screenshot appears only after a certain condition is met and when you stand in the light, it takes you to a comic.






4Items


The 4 items is a comic revolving around... yes you guessed it - four items. This took pretty long to finish, to plant the 4 secret items into the game and all, Each of the items has a comic associated to it by the way, and finally after all that hassle, it's finally done.

Milestones Screen
A new room I created which stands next to the achievement room. Here, you can track your major milestones achieved in the game.

Flash back Scenes
I remember playing a game called L.I.F.E a long time ago and what struck me was that at the end of the game, when you die, the game plays these little pictures of you, dating from when you were first "born", until you became the character you are today. I felt that was really magnificent.


(Spoiler alert: Some of the scenes below may give a hint of what to expect in the game. 
View at own discretion)
THIS_IS_A_SPOILER.jpg

Months after that and fast forwarding to now, I was inspired to do some of these flash back scenes which I have already thought of the perfect place to put them in.


However, I want to add my own flair into things. I happened to watch a few movies that have a similar feel to Introvert and they inspire me a lot, giving me a fresh perspective of things. I watched Eternal Sunshine of the Spotless Mind and it gave me this idea about the players' memories fading away as he chooses to forget them, and I am going to give that feel for the special Long Corridor level. That level has been a somewhat abandoned area in the game which I hadn't updated for a long... long time... It is the first(!) level in the game I made which ignores the normal level boundaries and I remember it was one of the most challenging and special levels back then.

I feel I am quite ambitious with the effects I want to achieve with the Long Corridor, haha. It took me hours to revamp the Long Corridor level even with my increased skills compared to when I last programmed this level.

First time Deaths
I was told upon death, the resetting of the level is too robotic. There were thoughts of a fantasy theme reset and I did spend quite some time thinking about it. I didn't come up with a very solid idea in the end but I did what I could.

Earlier, Li Hao did tell me he wanted to see some sort of cutscene or something that makes the level reset less robotic. I thought a cutscene would be good, but anything longer than 1 second would potentially be more of annoyance to the player if you find yourself repeatedly dying.


A fancy way of saying "I died".
There are four ways to die and on the first time you die from each of those methods, it brings you to a simple scene... just some words, no pictures. Thereafter, there is a pictorial "cutscene" that appears for about 0.5 seconds, and I made it so that it doesn't restrict movement. This means the reset is essentially instantaneous. I really loved the idea of an instant reset and I'm glad I was able to preserve it. I remember looking at some other games which did some transition animations when you died and some of those games which didn't do it well ended up annoying the player, which is bad.

Screenshot taken just a split second upon touching the spikes

I set in place a story and also added special effects when you die for the first time. Now, the level would gray out and some clocks would appear to signify your travel back in time. Second time onward though, the grayscale doesn't occur, but the clocks still appear.


Hidden Memory

Hidden Memory is a batch of special levels that I once called "Deleted Levels". Throughout the development of this game, I scrapped many level designs. I kept them in the game but made them inaccessible. I thought of hiding them away in a really secret and deeply buried area where only hackers or cheaters can find. But today I finally got the time to actually look at how to do them better.
Hidden Memory 7

I recently compiled a list of those deleted levels and added them in a secret compartment of the Level Selection screen, allowing players to access them as "Deleted levels", but I think calling them "Deleted levels" now is underwhelming, so I revisited some of them and actually gave them a whole new look, and even coded added functionality to two of those levels to make them even more interesting than some of the normal levels.
Hidden Memory 9

They are now revamped into Hidden Memories which actually link slightly to the main story and are a lot more meaningful now. I also gave them a theme to achieve this feel that these levels are really messed up badly because your character doesn't have a good memory of what happened in those levels. Some of the tiles don't match their backgrounds and even the environment props are meshed from another memory.
 In case you were wondering what I meant by "messed up badly".

Just kidding of course, This background is utterly hideous. I would never add something so hideous to the game.

Epic Door Level
The new door level I added is extremely challenging. I had to actually tone it down a lot after I myself took several attempts to get the timing to jump correctly, and I'm a veteran player who's been playing my own game for months that I can play some of my levels with my eyes closed.

You probably can't even spot the player

The screenshot above doesn't show the full level. See if you can spot the similarities between the sketch and the actual level.


New Achievement Logos




With the addition of new achievements in the game, I had to draw new logos. It was really fun to do these new logos. They sure are better than some of my older ones in terms of visuals. If I have time, I should consider redrawing all my old logos since those were drawn 1 year ago. I really enjoyed drawing these logos, but they took me way longer than I expected.

Storyboard

I have drawn many comics for this game. Although the animations and effects outdo my normal comics, I feel like I took a step back in terms of story. My comics in-game don't display many frames on the screen either, partially due to the small screen size which restricts me from truly drawing proper comics.

I have not been drawing new comics for the game, but I had to do something about the story. The story isn't as impactful as I want it to be, and just as my ideas got stale, I took a look at a game called "To The Moon", a very emotional game.

It didn't give me much inspiration, but soon after, I drew a storyboard. David, my music guy, had this idea of Story Levels. He didn't go into detail, but I wondered if I could make some scenes and levels where it ultra zooms in on the character and their expressions. These levels (or scenes) would have no puzzle or danger elements and would focus on the characters and their development.

I also have a problem where the game has so many levels, the story begins to be clouded. It was no longer the 5 or 10-minute game I originally wanted it to be, and the game's story becomes a blur when the game length is extended, a problem I had not foreseen when I introduced more levels.

The idea of introducing these "story levels" as a benchmark every 10~15 levels then hit me. But I have not come to accept it as an official game design element I want to see in the game yet. I have more planning to do.

I think I need to open the game to more testers to gather some feedback before I make any more drastic changes and decisions.

New Water
Water samples

So I was working on water sprites and I remember seeing platforms with Water before, but when I went to google for them, I suddenly could not find any screenshots of a side-scrolling platformer with water...

Anyhow, I managed to draw a few water samples and I think I drew one that looks rather decent and not looking too cartoony or fake. But when I went to make it flow in the game, it gave me lots of glitches and multiple water sprites with a fixed velocity doesn't seem to work well - they tend to overlap somehow (due to floating points?). In the end I had to animate the water movement manually.

Water Physics(?) / Environment!

Now I am really excited about this one, but the best part is that... I CODED THIS IN ONE NIGHT! Given that I'm kinda weak at programming, this is a personal achievement for me! I was really discouraged by how I couldn't handle water movement earlier, but what I have just achieved really brings this game up a notch! Although... I did stay up to 2.30am just to finish it on a Monday morning. Darn it.

I can't reveal much, but I drew drowning animations for the turtles (20px boy, 48px boy and 20px girl)  and let me say... this animation is just one of the most terrific animations I have thought of. I can't put it in a way without spoiling it, but I can't wait for people to play the game to see it!

Lamp post level revamp
Another WIP is a new rework of a unique level in the game. It doesn't have a proper name but I often refer to it as the "lamppost" level.





<To be editted>


New Intro Scene

One thing the game lacked from the start was a proper intro scene. Pressing "Play" from the Main Menu immediately throws you into a level. I added a few text to reveal part of the story before the level begins, but it wasn't very well presented.

So I made a special cutscene along with the text I wrote in the past, combining them to make the Intro scene for Introvert. I also used a new type of ColorMatrix to achieve a kind of color effect for this cutscene that sets it apart from other cutscenes.


Lots and lots of polishing, refining, touch ups
Re-visiting my old levels has given me some ideas of how to make them better, in almost any possible way. Text changes, addition and removal of text, decoration sprites especially for older graphics, etc...

Also, I'm beginning to slow down the production of new content since I now want to focus on wrapping up and completing the major features in the game.

As September draws to a close, I am one month closer to my deadline. Let's hope for the best!


A Playtester!
Over the weekend of the last week of September, I got a new playtester! I was really excited!!
Mr. Playtester

I'm grateful to one of my army friends, Ming Sheng, who was willing to playtest my game! On the first night, he played through about 1/3 of the story levels and he had given me lots of insight into the way a new player reacts to some of the elements and levels in the game.

I don't think you'll understand my notes, but some of the things I noted were:
- Ok button at Main Menu isnt intuitive enough
- make it not need to restart if u missed the fren at corner of lvl 5
- Player can stuck at btm left of lvl 6
- Friend not playing walk animation
- Add to isntructions: H to change Hat, 

- Once u die in bonusstate, no clocks appear

There were issues which I could fix on the spot, so I got to work immediately. I realize I need lots of playtesters before I can even call this game "playable".

I reworked some of the difficult levels to make them slightly easier.

As someone who has played this game lots of times before, I cannot sense the difficulty or have another fresh perspective on how to play a level, so Ming Sheng really gave me lots of insight today... and I'm really curious to how he will go through the remaining levels, especially the more exciting levels toward the end.

There's a lot of work to be done every time someone tries my game, but this means the game is getting a whole lot better every time that happens!

Thursday, August 28, 2014

New Stuff 2

28 August 2014

This post will cover all the progress I have made on ITV for the month of August.

On 17 August, me and my friend went through the last 10 bonus story levels, and I was very happy that my friend found the last 10 story levels good. They were great that it actually kept him playing till late at night, which really made me  happy that they did not have many design issues. In fact, most of the issues that he faced were bugs in the code, which could be easily resolved, unlike some of the design issues in older levels.

So I actually went to touch up and make the final levels even more polished, one of which was introducing checkpoints at annoying levels.

Checkpoint!


The month of August was very productive. Some of the things I worked on are:


Memory Lane Cutscene Improved

BG_MemoryLane

Here you can see one of the pictures I took and how it inspired me to actually draw a cutscene for the game. The one on the top right was drawn 1 year ago! And with my new tools and skills I acquired drawing over the past year, I made a new cutscene (bottom left), while at the same time expanding the cutscene horizontally for increased parallax scrolling distance.

A lot of work went into this cutscene. It started out as a job to make a direct scene. But real life scenes aren't always very inspirational, even though I had something else visualized in my mind, I couldn't quite get it out so I had to keep testing afterward.

Also, I think I discovered a new cloud rendering technique that I am quite comfortable with, which are the more realistic kind. I think this will be useful for future backgrounds.

New Spikes for Countryside levels
I previously used metal spikes, which didn't fit very well with the theme of the levels and the environment so I attempted to draw some cactus. They will still be undergoing changes before final implementation. The cactus don't look spike enough and they don't stand out enough from nearby vegetation and bushes.

Level editor spikes have also been updated to reflect these changes.


Old metal spikes

New cactus spike test
Comic unlocking
I have implemented comic unlocking. Now a popup appears when you unlock a comic in the game, and all comics can only be unlocked after meeting a certain criteria which is tracked as you play.

There are also 'secret' comics that are unlocked through special criteria instead of the normal "reach this level to unlock X comic".

Difficulty Selection Redone
Old Popup

The old difficulty Popup was pretty decent and satisfactory. However, there was no warning that indicated that playing the game on Peaceful would lock certain levels out, so I added a hint of that to the screen where you select difficulty for the first time.


On the left, I made a sketch of what I envisioned to be the new Difficulty Selection popup, along with lots of extra stuff, such as displaying above each level on what difficulty you completed the level on.

In addition, selecting Peaceful would actually bring you to TWO "cutscene/animations" where you actually see the consequences if you were to actually continue on with Peaceful. I think the animations are pretty cool and hopefully some players pick Peaceful and actually take a look at the animations haha.


New Popup

New Forest Portal
Another highlight was the design of a new forest portal. I currently use it for the  Cutscene selection state, replacing the old portals. I did sketch a few other unique portal designs and as you can see, there is one sketch for each of the main areas. However, I don't intend to change anything for now.


Old and new portals (top vs bottom):

The only thing I did was for the cutscene selection state. The new forest portals definitely fit more with the environment.

New Forest Decorations + Unique Cave level


I created a new cave level, which is my first "unique" level, as it is a very special level that ignores all restrictions of normal levels, such as the rigid 20 x 15 tile map and has its own custom background, and effects. The decorations are also drawn from scratch (v3 decorations as opposed to v2 ).

This cave level is one of my more outstanding levels.


Attic Level
I went to create an attic level which will sorta expand more on the last bits of the story.

Level furniture design

I also made the cutscene a little more fitting with the level and to inject the feelings I want the cutscene to give. On the left is the old one I drew many months ago, and on the right is the new one.


Level Editor UI Revamp + Lots of Editor changes
Some math thingy for UI flipping. Not as complicated as some of the stuff I did last time, but having a drawing tablet actually makes me visualize stuff better without the need to ransack my house for a paper and pencil.

Lots of editor changes were made and it is drastically improved. Too lazy to write the improvements but it is definitely looking more complete now and with a few more touch ups, the editor will be finalized.

Old Editor
New Editor

It looks as if the only change was the updated UI graphics at the bottom of the screen, but I added a lot of options and settings to make the editor more versatile, some of which include:
- Ability to select custom backgrounds
- You can now place tiles at the bottom row (previously the UI blocked it) by pressing the red arrow to move the UI away
- More tile types included in the editor (increased tile variety)
- Settings now allows you to set the level's zoom amount, making levels more interesting to play
- You can now preview your levels before loading or overwriting an editted level's slot


Still working on:
- Feature to export and share your level with friends and other players


New Spikes Level
This new level I drew and designed actually impressed my friend, Li Hao, which makes it one of the more outstanding levels I have created. Ever since I created a new Cave level, it has opened possibilities for more "level revamps", and special story levels where I can ignore the boundaries of the map and even introduce custom tiles, backgrounds and decoration objects. However, the limitations and restrictions of the current Introvert means there are still limitations to level design (character size too small, map limited to 20 x 15 tiles).

I want to finish Introvert asap as these are problems that I cannot fix in Introvert 1.

Also, new platform tiles!


Larger girl sprites


Also working on larger sprites for the female turtle. For the most part, this will be utilized in the special story levels. I also want to animate the hair as she walks. Previously, my attempts at animating hair was extremely weird and I omitted it as I had too little pixels to work with. I had lots of discarded girl sprites due to animation failure and awkward hair frames.

With larger sprite sizes and also being slightly more skillful over time, I began my attempt at making the girl's hair more realistic for the "walking" frames and to inject more life into the character.

In the end, I think the hair turned out pretty well (as she walks, her hair wavers as though running in the wind). I guess this is sort of a breakthrough for me in animation?

More Unique level designs

Possible unique level for a cinematic.

Achievements Revamp

Also, there was one week which I couldn't go home, and knowing I wouldn't have access to my computer for an entire week, I brought with me a pencil, and lots and LOTS of paper, just to make sure that on the week which I couldn't go back home, at least I would be making heavy progress.                                                                                                       One of the things I wanted to work on in my to-do list was an achievements revamp. The current achievement system in the game is growing more and more outdated as I add new features, levels, special cutscenes and other mechanics to the game
Another sketch I made was of "Major Milestones", which I may be using to unlock the final, final ending. I don't know if it's a good idea to make the final final ending require so many pre-requisites as it may actually bore the player out should there be a lack of replayability in older levels, which seems to be the case, and that worries me.

In the current system, you need to collect all achievements and complete a special task in one of the levels to unlock the final ending. It is quite challenging to figure out how to unlock it since I hid it really deep. While I like the current system, I feel like the final final ending should have some new pre-requisites, and at the same time I will also do a revamp on the final final ending to make it worth the extra work.

One final rough digital sketch before I officially begin work on it

I try to make the new system as easy as possible, since although I added more requirements to unlock the final ending, I will make a new room showing all the "Major Milestones" the player has accomplished to show his progress toward unlocking the final final ending.


New widescreen backgrounds
Incomplete BG_Skies

This is the start of a new background using the new cloud rendering technique I learned, which I utilize to draw clouds extremely quickly since I tend to draw clouds VERY often. It's needed in almost every scenery and comic I draw.
After a couple of hours though, this was what I achieved. Not sure if I should continue because it doesn't seem to match very well with what I wanted.

Special Meadow levels

While away, I worked on another things on my to-do list. I printed my to-do list to give me something to do while I was out of home by the way, and it was 14 pages long! I made at least another 10 pages of sketches of what I would do when I return home.
Special meadow level revamp sketches

The idea is to actually transform the meadow levels into something more cinematic and special, to bring out the level's meaning and showcase the expression of the tiny turtle sprites (which ugh... makes me really wish I drew larger sprites from the first day).

New Meadow Environment Sprites
I also drew the new environment sprites. My standard environment sprites cannot make it for the new levels as the new levels are really huge and my standard environment props and trees are way too small, and I think redrawing them really make the level look much better.

Some screenshots of the new props:


Creating special levels takes a HUGE amount of time. And honestly speaking, it took me way longer than I expected. I have taken almost two entire days to create 3 new special levels - which includes all the environment design, coding aspect and such. It can take me hours to create one special level, and is a long time compared to creating a normal average level, but the advantages is that special levels look very unique and should look nicer than average levels.

Below are some screenshots of how I transformed some of the old levels into special levels.

Old levels on the left, new revamped levels on the right

There are some contrast issues with the new middle level shown above, so these graphics are still not finalized. I especially LOVE the level with the purple sky. I think it looks so gorgeous especially when the moon overlaps with the platforms as shown above.

This however, introduces a problem... the art style becomes inconsistent.

Miscellaneous Graphical Improvements
Because this game was developed over a long period of time, some graphics are more newer than others, and I have to occasionally update my old graphics. I guess this is another problem with making a long game is that as your skill level continues to increase, you  generate better artwork and it makes some of your older graphics lose out to the ones you just created, causing a disparity in the quality of the art assets in the game.

Even my coding style has changed over the year. I look back at some of my older classes and code and I realize how inefficient I coded them in my early months of programming with FlashDevelop.

??? level

Massive door level ?

Also in the works, I may be possibly creating a new "epic" puzzle level. As I was drawing this sketch the other day, I showed it to my friend beside me who actually studied game design. He actually went to "play" the level which I drew on paper, imagining the character on the paper itself. He's so cool.


Kite level

Kite animation for a new kite level in the works. I also extended the level boundaries for that level to be almost TWO maps tall!

 Kite level sketch and design draft

So I began work on expanding on the level which would contain the kites...
And in the process of doing so, messed up the level real bad



setCameraBounds function now automatically flexible with different map sizes and across multiple zoom levels

The most important piece of code

After a few days, I finally figured out how to make this happen. When I started creating levels with various map sizes (no longer constrained by 20 x 15 tiles), one of the problems I immediately had was to make sure that the camera was "smart" enough to detect the level boundaries and not exceed those boundaries. The camera has to adjust accordingly not just on 1x zoom, but on 2x zoom or any other zoom levels in between as well (1.5x, 1.2x, 1.4x) etc.

Today, I finally fixed the code to be flexible that it actually takes into account and calculates the boundaries. For some of the special levels, I had to set them manually in the past, but now, this function works across ALL my levels, which is just fantastic.

An exaggerated screenshot of what happened when the calculations are done wrongly

With my old formula on certain expanded, larger levels, I could only see a few pixels of extra boundary, or a few pixels short, but it was bugged nevertheless. Now I play through my large levels and their boundaries work perfectly.

Game Map
I created a map of the game a long time ago to give an idea of how the game states are structured. I think I will have to make a new map soon since the game has expanded to house several more places and levels, such as the Hidden Memories.

GameMap.png

The last 10 levels in the game are hidden away from the rest of the levels as they are secret levels.


Jump formula for new special levels
Warning: This part is all words and pretty boring to read - precisely the reason why I put it at the bottom of this post.

The introduction of these new "special" levels gave me lots of problems.
I created special levels to try and overcome the limitations of Introvert's normal story levels, to make levels cooler. I wanted special levels to have the following properties:
- Ignore the world boundaries of 20 x 15 tiles
- Have larger character sprites
- Play the level on 1x zoom, yet have large graphics equivalent to a 2x zoom level (preserve quality of backgrounds and increase detail of character sprites)
- More detail and visible expressions on character sprites due to more pixels (to bring out the life of the characters)

However, in doing so, I encountered problems:
- Except for the player, I have to make EVERYTHING at double size. This means platforms, keys, blocks, objects, decoration objects, doors, must all be scaled by 2 manually for certain graphics and through code for things I can scale.
- The jump formula is screwed, and this involves lots of Math... I wrecked my brain for several hours before thinking of some formulas to rectify the problem.

The solution was so elegant, I wondered how I couldn't think of it earlier. Gravity in the game is set at 400. But as the character size increases, he should be heavier, but simply setting his gravity in accordance to his height wasn't smooth enough. When he gets really big, the physics make him very "floaty" and light. He still needed to fall faster as he grows heavier.

acceleration.y = 400;

In the game, the character's gravity is called "acceleration.y" which is a default of 400. I wanted acceleration.y to be affected by how big the character is. So I tried to make it depend on maxVelocity.y.

acceleration.y = maxVelocity.y;

While maxVelocity.y is a value that increases with his height, it is not at a rate that is fast enough to catch up with his size increment.

So, after changing numbers and toying around with the physics for hours, I did:
acceleration.y = (maxVelocity.y / 20)*(maxVelocity.y / 20);

It was a simple exponential formula that meant that when he doubles in size, his acceleration (gravity) quadruples! It was perfect. It was a puzzle piece of what I needed to make the physics work!

The other major problem I had was the character's jump power. It makes sense that a bigger character would jump higher. Indeed, my character does jump higher when he is larger, but when his size gets big, he seems too "floaty" once again, where he actually stays in the air for a long period of time during his ascent to his maximum height, because it takes too long for him to reach his maximum height.

Earlier, I fixed gravity, so he falls to the ground without taking too much time at larger sizes. But now, his ascend rate was too slow. Not only that, he was jumping too high, which is another major factor because he can jump to platforms not originally intended in my level design!

My formula for jump power in normal levels actually relies on the character's maxVelocity.y. And how fast he can fall is affected by how tall he is, based on the following formula:

maxVelocity.y = 400 + (height - 20) * 8;

and then we have,

var jumpPower: int = maxVelocity.y / 1.7;

When he jumps, the character's vertical speed upward is dependent on jumpPower. "1.7" is just the golden number I used previously to create the perfect jump physics in my 20 x 15 tilemap world. But it was no longer a golden number in my new special levels, which are larger, and start off with bigger default character sprite sizes..

So, I added a new variable, jumpPowerMultiplier and my new formula was adjusted to:

var jumpPower: int = maxVelocity.y / jumpPowerMultiplier;

And now I change jumpPowerMultiplier based on the character's scale, which is usually larger on special levels, causing him not to jump too high, and also reduce his "floatiness", which was good too. I was actually sick of waiting for the character to fall to the ground while in midair during the special levels because the characters were really just too "floaty".

And then finally, I was reaching a decent level of physics that could almost replicate my normal levels. There are other changes I may have to make and formulas to tweak to actually replicate with precision the actual physics, but I guess for now I am satisfied.

And happy too.