Revamped Portals!

1 October 2012 – Revamped Portals!

New Background!
I feel a bit crazy for posting just a few hours after the previous post. It’s now 6am so I better type quickly. I just finished another background for the game. This one is for the Level Select State. I really love it!


I initially wanted a full moon, but I had incidentally created another circle to use as a glow around the moon and before I shifted this circle behind the moon, it blocked it and formed a half moon. Then I got inspired to create the crescent moon as in the background above! The stars in the picture are rather few because I might be animating the stars in this screen, but I decided not to code that today. It is already VERY LATE now.

I went to replace the old background. The old one was just a flat dark blue colour like the one above, but without the gradient. I had some problems because

1) My portals are not transparent – before I got photoshop, I used Paint to do all my assets and Paint does not support transparency. I cheated by painting any parts that required transparency the same colour as the background.

2) The portals are actually “buttons” because you can click on them to activate the AI that walks your player to the portal you clicked. Those buttons had graphics that annoyed me because I couldn’t find out what the graphic was initially, until I realised they belonged to the buttons.

Unfortunately, much of the background is covered. I made the mistake of drawing most of my buildings at the bottom. This was very unfortunate because I had simply forgotten (I realised halfway, but it was quite late to change) that the level select stage has a HUGE block of staircase at the bottom right. About half of my buildings end up getting blocked.
I was REALLY REALLY happy at what I just accomplished a few minutes ago. I was told that the portals in the game looked really weird. And now I truly agree. I went on to create a new portal animation even though I did not have a real intention of revamping the old graphics. I initially did three frames of animations that ran at 6FPS. But I was not very happy with the jittery animation. I knew it needed to be smoother, so I went to create 9 frames.
And it was hell a lot of work just to get this one portal working!

The above picture looks like some glass panels where your are looking out at a snowing scenery. But no, it’s not the case. The red and black lines are actually my frame borders to ensure I position the frames with pixel perfect accuracy (important in small animations). I put in the regular tiles to ensure the portal’s heights in accordance to the ground is appropriate. The white dots are actually “stars” that float upward by 2 px every frame and get smaller on the way up. It’s clearer to see with one star:

I took quite some time to create the frames for this animation and even after completion, I had to adjust the heights of the stars and the fix some of the issues with the stars not moving in straight lines. But I managed to fix all the issues in the end. At the end however, I realized I was not very efficient. This animation is something that I was told to do in Flash. I should try it sometime in the future, to make my own life easier.

Thank you!
I seriously have to thank my mother for buying Photoshop for me. Without it I really would not be able to accomplish all the backgrounds I have done and much of the newer graphics which could never be accomplished in Paint.

I also have a very good friend, Li Hao, who will constructively criticize my art (the portals, the tiles) and help inspire me to what I should be aiming for. It was him who actually made me get Photoshop in the first place since I was pretty adamant to sticking to Paint. So, I am really grateful for how everything is like now and definitely happy with the progress of the game regardless 🙂 Without him, much of the graphics in the game would have stuck with what it used to be.

Alright, it’s already super super late by the time I typed all that. It is time for me to sleep. Cyas~


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s