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.