Project ITV

Project ITV

Sunday, April 28, 2013

28Apr - 4May Game Trailer/ Settings/ Final ending added


Progress
Things are almost complete now. The game is nearing its final phase. All that is left is music, sounds as well as polishing the graphics and levels a bit more.

I incorporated a fourth unlock-able ending into the game, and added Cheats to the game which can be unlocked after completing the entire game. "Completing" here basically means having seen and been through every thing in the game + completed all achievements and not just by completing all levels.

I'm happy with how the game is right now, and I was told that I should be happy because the game is really almost complete now.

The game at the end of this week is currently at 64 levels, 1 main ending and 3 secret unlockable endings and one "Game Complete" ending, which isn't an ending, but something to let the player know that he/she has truly completed the game.

It is safe to say that I am finally seeing the light at the end of this long and arduous tunnel.

Game Trailer
I was very against the idea of making a game trailer as I felt that it was something unnecessary and time consuming. But now, there is a need for it, and since I have some spare time, I decided to make one. I have written a number of things and events that happen sequentially that I want to be seen in the trailer.

On 1 May, I completed the trailer! It took me one day to get all the necessary gameplay footage and complete the trailer. But it took me another 2 days (multitasking this and other stuff) to actually touch up on the final trailer. All that is left is music for the trailer.

Settings for Music and Sounds
Apparently, Flixel's mute does not separate music and sounds. I was going in circles thinking of an efficient way to separate them, but the game just keeps crashing no matter what I try.

In the end, the solution was rather simple, though it took me days to figure it out/do it. I just created a group to store all the sounds I use, and adjust the volumes of all sounds in the group.

Li Hao gave me more work too. He said that when a music is muted, it should not pause or stop, but continue playing, so that when the music is resumed, it doesn't start from the beginning and reset the mood. I felt that was a fantastic thought. I finally completed coding them today. This was tougher than I thought, and I spent too much time on this.

Recreating level 1?
Currently, the level 1 in my game (and some of the earlier levels) are pretty pointless.
I am thinking of redoing them. I have an idea, but it doesn't really flow well with the rest of the levels. It's pretty hard to improve current levels too.

Issue with Level Editor feature
Apparently, I was reading up on how the Local SharedObject works. It seems it cannot store complex data types, like my LevelData class. My level editor cannot save levels because I use the LevelData class to save custom levels created in the editor. This means I have to use arrays. I had nightmares coding arrays in the editor feature.

So to solve the issue, I have an array which represents my old LevelData, of arrays such as the player's positions, enemies' positions, one of which is an array of keys, of an array of blocks' coordinates.

So to speak, I now use an array, of arrays, of arrays, of arrays to store a coordinate, of a block, of a key, of a LevelData. Sweet array-ception!

It could go one more level deeper, by creating an Array of 5 LevelDataArrays, as there are 5 save slots given to the player to create their own custom levels. So instead of using 5 arrays, I use a single Array of 5 arrays. Buuuut, I don't want to fry my weak brain any more than I should.

Thankfully, this issue was extremely easy to fix.

New 'Cutscene' Graphics
I was getting a little bored, since I have to wait for the music. So I revisited two particular cutscenes which are simply not up to par with the other graphics I drew for the game. I drew these in Paint, a year ago, and reused them for this game.




Then, I redrew them in 1800 x 1800 px resolution, and scaled them down to fit the game window:

 

Even though the tree, city backdrop and the bench were reused assets, it still took me longer than I wanted, because it was fun doing it and I wanted to make the scenes look good. The day picture received a different colour scheme because the original picture makes the scene look too warm (though it was meant for a sunset originally). The night picture is my favourite no doubt.

They certainly look much better than I initially expected. I wanted them to be a small picture initially, but I saved it as 480 x 480 in the end since there was enough detail to call for a bigger picture size.

Though I have already designed a game logo, I considered using the day scenery for a game logo.


Minor changes
Level 54 has some interesting text
Added checkpoints to the Level Selection screen
Added a hidden 5th cheat.
Auto-pause re-enabled.



Sunday, April 21, 2013

21-27April Compressing / 64 levels completed / Grayscale / New Level Select


Progress
After implementing the endings and the final 10 levels of the game, I have finally come to an end of producing more content for the game. Although there is a lot of things I want to implement, time runs short and I have to get on with other issues.

The game at the start of this week is currently at 64 levels, 1 main ending and 2 secret unlockable endings.

Game size issue
The game .swf file was 43MB and my target is for it to reach less than 20MB. That's right, I have a lot of compressing to do. I am compressing as many images as possible and converting backgrounds to jpg, which I should have done so when I first created them. Also, I need to see if I can optimize the way I use my backgrounds in some places. Hopefully I can reach my target of below 20MB!

New Platform Tiles
I redrew the grass tiles of the countryside. It looks better. It went through a few more versions before the final one.

You can see above how the grass tiles have transformed to how it is now and how the rocks were eventually removed because it made the repetition of tiles way too obvious and make it look pattern-ish.
Autopause removed
Previously, the game auto pauses when your flash player loses focus. I disabled that since I don't think it's necessary. It also stops the music and I want to let the music run sometimes.

240p backgrounds @&!#
I forgot to take into account the 2x zoom of the game when I changed my backgrounds to JPEG. And when I mistakenly set flash to compress my JPEGS a second time, to an 80% quality of the already miserable 60% quality I first had, I played my game and...

Oh my god, my backgrounds looked like some 240p youtube video. I of course, reverted it to Lossless PNGs later on.

Higher Resolution Turtles
It took me two nights on a lagging Photoshop to finish drawing completely new frames for the new sprite turtles. Each sprite is 128 x 256 and is the LARGEST turtle sprite. Li Hao helped me with much of the coding aspect, though he didn't want to tell me exactly everything of how to do it because he wanted me to learn a bit as well. But he was nevertheless a great help.
Animating the turtle...


Planking turtle (playing with rotation)

Bug that caused the turtle to scale to an unimaginable size

Oh, and attaching a camera to my player produced this wonderful bug when I forgot to add a code to clear the camera screen every frame after drawing the player, so the player is drawn every frame. I thought this was cool...
I also got pretty amused by this bug... Whoever has sharp eyes should try to spot the real turtle above.

Grayscale!
As Li Hao compressed my game from a whopping 43MB to 26MB, he made this cool version of the game. Grayscale! We both realised how cool it was and thought it would be a great idea to make a grayscale version of the game for real! It might be a feature added to the game if time allows.






Using .swc files
Okay, this isn't anything to do with any progress on the game, but Li Hao taught me how to use .swc files to contain my images, rather than embedding my images everytime I want to compile my game.

I spent several hours last night and the entire of today (22 April) importing all my images into Flash CS6. This way, I don't re-embed my assets everytime the game is compiled.

It used to take about 15-20 seconds to compile my game. I have not even imported all my images yet, but I can notice a significant decrease in the time taken for the game to compile! I should have done this right from the start because FlashDevelop seems to have issues when the game got bigger.

Importing all my images is also supposed to reduce the size of my game. It was 43MB including music and sounds, but it gone down to 12MB! I was told that Flash's compression is really good and indeed, reducing 30MB like this is impressive. I'm still aiming for a lower file size though.

After compressing more of my images, it became 11MB and is now 10.8MB. Hopefully it can reach 8MB but I have a BIG BOSS to fight.

PlayState.as

It has over 100 embedded images, and is my largest bulk of my code. I'm going to have to fight this big boss soon and hopefully I can hit 8MB after defeating this big boss.


Lossy JPEG vs Lossless PNG
So one of the things I had to test was which compression method was better. The only way is to actually test out by putting two games side by side and compare. With the aid of Li Hao, I learned a couple of new things. Apparently JPEG is better for photos and PNG is better for vector art style. In the scenario below, the JPEG is 10KB smaller than PNG.
I ran the game twice. One version where Flash compresses the backgrounds as JPEG, and the other where Flash uses Lossless PNG.

In the above screenshot, the red gradient for the house looks fine on PNG version, but bad on JPEG, which matches up with what was said earlier since this particular background was drawn with vector style art.

The hills (bottom right) also have a noticeable green outline on the JPEG version, but not visible on the PNG. Since the size difference of 10KB is somewhat negligible, I think it's better for this background to be compressed as PNG.

The  forest though, is harder to tell the difference because the forest, of all backgrounds I drew, is the one that mostly resembles a photo. But I went to edit the screenshot and place the JPEG right over the PNG. The colour for PNG is more pleasing than on JPEG. So I ultimately decided on PNG for the forest. Same goes for the City background, which had unusual colors on edges of my buildings on JPEG.

I guess this concludes the test :) I was strongly supportive of JPEG because of its smaller file size, but since quality is compromised, I will have to use PNG. This led to an increase of 3MB of game size, sadly.

The backgrounds in the Gallery are only viewed at 1x zoom, so I suppose JPEG is still alright since the issues I found required me to zoom in to like 200% zoom to notice.

File sizes test:
80% JPEG quality = 8.47MB
100% JPEG quality = 11.3MB
Lossless PNG = 9.51MB

This is funny...to have PNGs take up lesser space than the JPEG. Higher quality + Lower Game Size = Best of both worlds in the end? Sweet!

Apparently a few more tests still show that PNG takes up more space when testing with my level decorations.

Game Published to FGL
On 22 April 2013, in the wee hours of the morning around 6am, I published the game to FGL. It was an exciting moment as it is the first time people other than my friends are going to play the game! It garnered some comments of what was good and bad and I am improving the game as the days go.

On 26 April at around 3am, I recieved a message from FGL, saying that the game needed music before it could be shown to sponsors. The sounds also needed improvement. The Level Selection lobby was too cluttered as well.

The game got a rating of 6/10 after it was assessed based on graphics, sounds, etc. It wasn't as high as I expected. It seems that this is how the industry is like, competing with flash games around the world, internationally. It seems that the standards and requirements of a flash game are pretty high for it to get a sponsor. Should I be glad that I actually got better than a pass?

Within the next few days, the level selection will be revamped. It took me a long time to refine the AI for that, but I guess this revamp is necessary. I'm saddened, but I hope this will turn out good.

I've emailed David my game, and I hope all goes well!

Ending picture
Instead of just having text, I also drew a picture for thee "The End" screen. I think it looks pretty good! About half of the picture was reused from assets I already had, such as the moon, the tree and the turtle. I won't include the picture here as it may contain spoilers.

Level Selection Rearranged
After the above comments from FGL, I rearranged everything in the level select.




You can see the level select take shape in the above screenshots. The following screenshot is the entire levels selection state viewed in a single screen.
One of the level select designs I considered is a 'World map', which is getting trendy with games now. Unfortunately, while it solves some of the problems of the current level selection screen, doing that renders the current level selection extremely worthless.

Anyway, here are some sketches I did of what I imagined to be Introvert's world map:


Oh, the original level select was meant to be of a stair-case like structure, which slowly leads you to the top, and reach the rooftop. But elevators as well as the lack of space in the levelselection and long walking times turned this into several floors of staircases, which Li Hao said ruined it compared to the impact of having a single staircase.
 Another probable level selection screen was to categorize levels into zones. But I was told that this way, I was making it tough for players to enter a level since they have to navigate TWO maps instead of one, and I agree.

Minor Happenings
I sent my game, with the new levels to my friend, Han. He tested the game for me. As I watched him play, I could not stop laughing when he kept dying at Level 60. Level 60 is the toughest level in the game, reason being it is the last level before the ending is revealed. It requires strategy. But a walkthrough easily spoils that strategy and removes the difficulty sadly. My friend had no trouble with the level after seeing how it was supposed to be done.

The puzzles in level 51, 62, 63 and 64 seem to prove VERY difficult for an average player to solve on his own. I also laughed because I put things to distract the player from figuring out the puzzles, and my friend actually fell for those distractions. It made me feel that I was doing a good job at making players NOT complete the level.

If only I could somehow just watch people play this game, and see their reactions. I think that is sort of every developer's dream: to see how people react to their game, and whether players manage to see and find out the secrets hidden in the game, which I happened to put a lot of effort into, spamming secrets into the game.

This marks the end of another fast week.

Saturday, April 13, 2013

13-20April UI Changes / New BG / New Levels possibility

13 April to 20 April

From now on, I'm going to consolidate my progress on the game from a week to a single weekly/fortnightly posts that I will edit and add on, rather than creating a new post daily as I don't want to flood the place.

The game is currently at 50 levels, with one ending.

UI Changes

- Tried wooden buttons
- Added ability to change difficulty from a level
TOKEN FEATURE COMPLETED
- Tokens now show on the UI
- Tokens can be clicked on and used in a level and can skip an entire level

Here is a screenshot of what happens when you click the respective buttons. UI consists of placeholders.

As an update though, I'm going to change the UI. I guess there's just too much clutter as seen below.
The only consolation I have to a whole day of wasted work is that I had used placeholder graphics.

NEW Game Backgrounds
With my newly acquired skills with Photoshop, I went back to one of the less prominent backgrounds, the Reminiscence, and redid the hills. The new background is much sharper and looks better.

I completely overhauled the dark forest background. The new background was did in higher res, so it looks much more clearer and detailed. It also looks pretty good and much better than the old one.

All in all the backgrounds are better looking. I'm proud of the forest one.

Door Graphics REVAMPED
I received plenty of critique about my graphics not fitting very well with the theme of the game, such as doors, keys and blocks being too "futuristic" for what is the theme of the game. I went to revamp my door graphics as I sourced for inspiration. One inspiration was Braid, an amazing Platformer game with fantastic art. It's not a flash game though, but it's positive motivation for me to better my art.
I put the old and new door graphics together in the above screenshot so you can see the difference.

Levels 51 ~ 60 ?
A late night discussion with Li Hao has given me the greenlight to work on the next and final ten levels of the game. A rework of the ending has also given me a clearer path of what direction the game will take from here.

Testing of new feature + Double platforming
Here, I test the implementation of two types of platforms and it seems to work smoothly. This is for an upcoming new feature I am adding to the game, the ability to destroy tiles! Seen here are two types of tiles: Indestructible (blue) and Destroyable (grass). The blue tiles were placeholders for ...

New Platforms!
I tested my new tiles with an existing level. It looks awesome!
The tiles have undergone several changes before its final form. Those are previous versions. The final version will look better (hopefully).

The new background has also been drawn, consisting of a few buildings. As with all my new backgrounds, it has 4 layers of pictures for parallax scrolling.

Easy Mode implementation!
The game now has several levels being manually easy-fied, for the EASY mode. This is to allow weaker players to advance through the game. There is no easy workaround this, so it is an extremely painful process of going through the tougher levels and see what tough elements can be reduced or removed completely.

Levels 51, 52, 54, 55, 56 Created
I created new levels and many of them have special effects that are unique to that level only.

Rain particle effects
I originally drew and animated rain, but I'm trying to use particles to do that now. The animated rain looks nicer, but the animation is fake. The particles seem to be more realistic, but it just looks weird.

It looks like snow...

Decorations
Finally spent awhile decorating levels 40 to 50! Level 50 has an additional feature where I played with the layers of decorations. I also decided to make decorations a little interesting for level 49. One side of the map is decorated with red/brighter coloured flowers, whereas the other side of the map is coloured with blue/darker coloured flowers. I was thinking of making the right side be "darker" to reflect the guy turtle's personality whereas the girl, being more cheerful and bright, will have lighter coloured decorations...

On a side note, Flash Develop failed to compile my game as it hit the memory limit. Again.

It was increased from 312 to 512MB just two weeks ago. But the addition of these new decorations as well as my new backgrounds, the memory limit has been quickly reached again. This is worrying. The art assets are getting kind of heavy...
Currently, there are about 600 pictures in my image resources folder, and probably 100 more in 'decorations'.

I tried PNGGauntlet to compress one of my backgrounds. Its size decreased by 34%.
I then tried TinyPNG to compress the same background. Its size decreased by 68%, but a degrade in quality is noticeable on 400% zoom, which the game allows. It's a tough decision to make of quality vs file size.


Level Editor Improvements
Now, there are 5 save game slots for the Level Editor.
The levels can now be accessed and loaded from the level selection screen. If there is no level in the save file, the player is brought to the level editor to create a new level.

Minor Improvements & Changes
Enemies' speech bubbles slightly translucent now so it does not obstruct view
Level 9 has a secret conversation that exchanges between two 'intelligent' enemies
Achievements room has a secret wall
Level 50 has a secret area
Spikes graphics no longer have a black outline
Level selection state tiles greatly improved!

Notice also the Easy Normal and Hard button graphics were later changed as well, as well as the popup graphics, to match with the new look of the buttons.

20 April Results
62 Completed levels + 2 Additional special levels
2 Working endings

Thursday, April 11, 2013

Making a button more button-ish

11 April

Stars in Level Select

Added Stars. The save file now checks on what mode you completed the level on.
Grey star = Easy mode
Yellow star = Normal or higher.
It used to be a square, but now it's a star.
Subject to changes as the stars don't look like buttons. Added the mouse icon though...

Enemies can speak (soon)...


I also went to test the colours of the speech bubble. I think the orange one looks better, so I went with the orange one. I also had some issues with the speech bubble.

And here's a screenshot of where it went wrong. Haha. It's basically a camera issue.


Wednesday, April 10, 2013

UI improvements and design considerations

10 April

Today, Li Hao told me several issues with the game's UI and the way I try to tell players things. The UI isn't that fantastic. And the box which indicates which player is currently being controlled was at the upper right corner, and was never noticed. The restart button was also big and consumed space. The buttons were dull and it didn't really look good.

He also did not know that he could click on the portals in the Level Selection Menu to go there automatically. I tried to do button-like icons above the portals but it did not look clickable still. This problem plagued me.

How to make a button look like a button? And look good at the same time?
This doesn't look good enough by his standards and I think I have to try something else =(.

Monday, April 8, 2013

Checkpoint!

8 April

The following week will be an even busier week. Even though the story of the game is going to wrap up soon, revisiting previous levels, there are lots of improvements I could make to the game.

I sent my game to two of my close friends to play through the game, and it was a busy night taking note of their comments and experiences. My death statistics graph which I made a few days ago wasn't fully utilized, but it will be a vital part of the testing phase.

My friend died the most in levels 13 and 14. Following this is a design improvement, not to the levels, but as a  feature that will be added to the game.

To combat the "RAGE QUIT" scenario, 4 suggestions were made. The first two are from Li Hao.

1. Game Difficulty Change - Prompts the player if he or she wants to play on a very easy mode
2. Skip Tokens - Awards the player with the ability to skip a level every few levels played.
3. Walkthrough - Some players might look for walkthroughs
4. Checkpoints - Not having to restart if you almost reached the end

Checkpoint
represented by a flower that can blossom and glow

I drew a checkpoint. It's a flower that will open up on contact. I think the animation for that was pretty cool. The flower is dark because it's used for the forest levels.

Other improvements
Over the past days, I have added speech bubbles so that the turtle characters talk more. This makes the game much more lively. It was an unexpected addition, just like many other unexpected changes that serve to ultimately improve the game. With more speech bubbles in the game, I created 3 colour variations of the speech bubble that will be set depending on who spoke.

Level selection screen looks a bit better now.