Monday 21 May 2007

Computer Graphics Lab 1 : Morph

Ok, this is another assignment from my computer graphics module. The first one in fact. We were to put in the code which could morph pictures.



How does it work? Well, first you got to watch the video once. Then notice the red lines near the end of the video? Those are the guides to the morph. What the program tries to do is move each red line in the source picture (cat) closer towards the corresponding red line in the alternate picture (dog). As it is moving the lines, it calculates the pixels which need to be stretched or changed during that frame according to a mathematical formula. Well, actually its abit more complicated than that but that's the gist.

For the video above, I am actually trying to show you the different modes of the program. What I did not show was the long computation time it took to calculate 24 frames for that second. It took about 3 to 4 seconds to compute each frame. So nope, morphing using this algorithm is not real-time! As for the modes, I first showed the source and target blended morph, then the source-only morph (cat), then the target-only morph (dog), then blended with the guides. Blended meaning an interpolation of transparency. So the cat is 0% transparent and the dog 100% on the first frame. The cat 50% and the dog 50% on the middle frame. The cat 100% and the dog 0% on the last frame.

I did not really find the assignment hard since we were given an algorithm to follow but I did learn alot from this assignment and was really amazed at how maths could be used to manipulate so many things. It was also only in this module that I realised Adobe Photoshop was all about powerful maths. Yup all your strange effects and tools are all essentially some kind of formula. Some are really complicated and thus the slow computation times and some are really straightforward and fast. Oh and I would also like to state that I did not do all the programming. Most of the framework was provided by the lecturer and we only had to fill up the morphing algorithm.

well that's all for today! (lucky i found out how to do the video stuff yesterday so this post only took a short time) Oh but i did find out more about the flv player today. A surprising fact that it can actually have a different frame rate from the swf it is contained in so that videos of different frame rates will all be played at its correct frame rate. This is unlike the rule where a swf contained in another swf will follow the frame rate of the parent swf. Also, the flvplayer can resize itself to fit the video it is play. This is a really wonderful feature because that means I can use one player for all my flv videos of different sizes and frame rates. Awesome.

More computer graphics stuff for the rest of this week! I have decided to make this week Academic-related Posts week.

Sunday 20 May 2007

Computer Graphics Lab 2 : Fly text

This flying text animation was done in opengl. It was an assignment given to us during my computer graphics module and we had quite alot of fun with it. Our lecturer wanted to give us some freedom to express our creativity but was also surprised at what all the students came up with. For my assignment, I chose not to use any pictures and went for the ascii art theme, using only text in opengl. I think he was particularly pleased with the fireworks explosion of '@' symbols.

Everything you see in this video was programed by me. I used abit of procedural animation (the ball and the firework particles). If you're wondering what procedural animation is, it is animation which is done by program code or math unlike the normal animation where everything is placed manually via some editor and the positions are recorded and played back.

The scenes were done with a simple switch case statement with a timer clock to determine the start and end of each scene.

The colour changes were done by interpolating the color using the same clock by a mathematical formula.

here's the code snippet for drawing the ascii faces:


and here's the final product:



after-blog note: wow this post caused me more trouble than i expected. I found that the flvplayer component provided by flash could not load the skin for the buttons. ok let me explain. This blogger site does not allow me to host swf files so I am uploading my files to another server and linking to there. However, I found that the flv (flash video) could play but the skin could not load resulting in the entire playback button panel not showing up. So I added some code and found that the player for spitting out a skinError saying it is unable to load the file. After googling for some time, I finally found this (really hard to find) page from adobe.
But i did not like their solution because that brings me back to the problem of how to upload swfs to blogger. So what i did was instead use iframes. A quick guide by w3schools here.
And voila! it worked. Only bad thing about iframes is that if you size it exactly to the swf, the scrollbars may show up. So you may have to use trial and error to get the iframe size right. Here's and example of the iframe code I am using (i added back slashes to get the browsers to show the text instead on try to parse it as html code) :

\< src="http://yoursite.com/yourswf.html" align="middle" frameborder="0" height="270" width="420">

Wednesday 16 May 2007

Creating Games in C++

Yeah.... I just finished my first book in a way long long time. The last book i read was on flash stuff but that was maybe a year back. I decided to read up on C++ stuff because I heading in the direction of console games. So I picked up this book and starting reading. I have some background in C++ from my junior college days but the special thing about this book is that it tries to teach you C++ while you are trying to build a simple game. Its an awesome idea I must say and I do like it as it shows you what you can do while you're learning the programming language. Its not like the normal boring code silly things books.


Category Score
---------------------------
Content: 9/10
Readability: 7/10
Usefulness: 7/10
Code provided: 9/10
Game Engine: 3/10
---------------------------
Average 7/10


First, I want to address the biggest problem with this book. And that is the game engine provided with the CD that comes along with the book. It does not compile out of the CD! and its awful because even with the errata provided on the publishers' site, its not fixed. There's even a forum which is a talking about the problem and though it seems some of them solved it, I still cannot solve it. At least not within an hour. That means that all game code you get in the book won't be able to compile and you may not only get very frustrated but you may feel like giving up (but don't!). The game engine is called llamaworks2D and it is missing a few steps on how to link up with openAL opensource sound library. However, I assume some of the other code which does not make use of the game engine would compile. I must admit I did not try it out because I already have C++ background. These include the chapters on vectors, inheritance, arrays, pointers and file input or output.

The good thing about this book is its content. Not only does it teach you programming in C++, it also teaches you several tips on how to optimize your game code while you code it. For example, it teaches you when to use inline functions, inherited sprites versus contained sprites, when to use you the squared magnitude of a vector versus the actual magnitude of the vector and many more. Optimzation is always a good thing. That's how complex games work. They will never run properly if its not optimized. Furthermore, the book does teach you about game design which is very important in my opinion. Game design gives games life. If you have good graphics, great sound but bad game design, people will play your game but will give up and say it sucks. Although the design stuff in the book is quite brief, he does cover the more important aspects. Another good part of the book is that it gives you several options and references to good tools you can use in games.

When it comes to readability, I only have one test which is whether it makes me sleep. I sleep very easily when I read books and that hinders my progress a lot. For this book, it made me sleep a few times but otherwise its actually very readable. The chapters are well separated and most of it is concise and to the point. However, I notice that there are a few occasions where I am reading something which I know and can get past easily without explanation. I am not very sure whether those sections pose a problem to a reader who is new to programming.

As for usefulness, I find the book very useful even though i have background in C++. I'd recommend it to all new programmers who want to learn C++ as well as build games. I'd also recommend it to game designers. In the book there is a line saying, "it's something of a truism that the more game programmers know about game design, the better they can do their jobs". I feel that the opposite of this is also true. That is, the more game designers know about programming, the better they can do their jobs. It helps because you know what it takes to get the game running but please do not twist my words and say that you need to know programming if you are a designer. Well, I also think that game designers should not always be constrained by programming problems in some cases so that they can be more creative in their designs.

The code provided is good. As said above (under content), there are many tips on optimization and stuff. So that's a good thing but this is undermined by that fact that the game engine does not compile so some code will not be able to work though it is technically correct.

I do think this book is good and it is a real pity that its game engine doesn't run, if not it would have been a highly recommended book. But yes, I did learn alot from the good content provided. I must admit that its is easy to tell that the writer has alot of experience in game programming and he shows it well. Best of luck to all those out there who are going to try it.

Friday 11 May 2007

Security Exchange Flash Game

I made this game originally for another website but reused to code for this game and changed all the graphics. The graphics wasn't done by me but I was the integrater and programmer so I had to replace all the symbols and stuff like that. I got the job because the company in-charge of this posted a request for help on the IGDA Singapore forum and I replied.

I'd say I was quite satisfied to do this job because I had the code mostly there and the graphic artist was also producing nice stuff for the game as you can see so it was nice to work on it. My only qualm was that I realised I quoted a price abit too low compared to the normal market rate which I shan't forgive myself for. Bargh! Just a shoutout to all flash developers out there: I don't care who you are, what you do, but please don't undercut the market rate. Its bad bad bad.

About the game, its basically arkanoid or breakout whichever you're more familiar with. You control the paddle at the bottom with your keyboard by moving it left or right and trying to keep the ball in the play area and smash tiles to gain points. Occasionally, powerups or powerdowns may drop from tiles and the player can collect them the icon hits the paddle.

I can't really post the game here so here's the website it was hosted on but the game has been taken down after the event.

and here's some screenshots:




title

instructions page 2

first stage

eigth stage

stage complete

game over

Thursday 10 May 2007

Flashit Competition

I posted this because I wanted to post something quick to fill up my blog =P.

I took part in a flash competition in my University. oh nope, I didn't win anything. =P Kinda sucks. oh well.. I think the winner did some flash animation. How would a flash programmer compete with a flash animator? By making a game of course. But anyway apparently, the organisers delayed in giving out the prizes. I know because they sent out an announcement saying that. But I do wonder whether they gave out ANY prizes... hmm..

I did this game in 2-hours, the duration of the competition. I did everything you see. Graphics, code, etc.

so here's the poster of the competition in a freaking lousy quality but extremely bloated size (i had to re-export it to reduce the size but i assure you the quality was the same as before; it was like 2550x3300,300dpi and i changed it to 300x388,72dpi reducing the file size from 589kb to 35.2kb; if you still don't believe me see http://www.ieee.nus.edu.sg/index_files/Page1118.htm):




so here's my entry, i do admit its not really good but the topic was only given when the competition started and i only had two hours so there:



would love to hear your comments.

Jungoroll

My first attempt to write music for games was induced by the fact that I had some friends who wanted to do a game together and we were all mostly programmers except one who was a game designer. Since no one was knowledgeable in music (I wouldn't say I was too because my music theory isn't too good; i knew abit on chords and notes as i play the guitar), i decided to do the art (which i'll document another time) and music for the game.

The game was called Rollo and it is a flash game and it was mostly developed under 15hrs but is still currently in development and is about to be completed very soon. Its about an armadillo trying to find tasty but awfully cute bugs to eat while avoid obstacles. Here's a screenshot but no link yet because we have some agreements with our client to let them host it on their site exclusively for the first three months so we'll have to finish the game, put it up on their site and then i can link to there.
title
credits
in-game 1
rollo in walk mode can eat bugs

in-game 2
rollo in roll-mode can jump
but can't eat bugs

So anyway this post isn't meant to be completely on the game but its music. So here's the music i wrote. Give me comments if you like. I'm especially interested to hear what is the closest song it sounds like to you. i'm putting up the mp3 because it sounds a bit better than the midi i wrote.



As you are listening to it maybe I'd share about how I came about the piece. Well I first thought of the constraints for the music such as the feel of it (happy), the style (jungly) and so on.. I then picked up my guitar to try out some tunes. Somehow it occured to me (because of the happiness factor) that it would be nice to have a kinda of tune which uses most of the notes in a key (musical jargon i know but i won't explain it now). So i kinda played Do Re Mi Fa So La from the A note on the guitar (last string, 5th fret) and was playing around with it from there. Then it kinda evolved from there.

After writing the main tune, I worked on the chorus which was actually a sort of random rehash of the main tune. After that, I felt the song was too short because I needed it to loop infinitely and didn't want the tune to be irritating so I needed to write an additonaly section at which I kinda got abit stuck. So i kinda stalled on that for a few days before getting to come up with something.

Also to create the bass track you hear in the background, I was playing around with the notes on Anvil Studio. I would play the main tune and try to think of some kind of tune that would fit it as it was playing and quickly click the notes in the studio. As you can tell it was kinda a semi-random thing as well (semi because I doubt anyone's brain is random, its some patterm recognition neural stuff or something like that). I did that because I didn't quite want the bass tune to be repetitive so I decided to go for a tune as well.

Oh as for the percussions, it was kinda a random thing. I picked some percussion instruments (whichever i thought could be jungly) in Anvil Studio and started to lay them out like according to some pattern. However, the pattern for each instrument was different and did not have to follow the "beat" of the other instruments.i put "beat" because its like say the drum could go 3 times in a bar but the hat could go 4 times. After doing that, i just adjusted whatever i found was not nice by ear and changed some instruments to perhaps suit others if they were too constrasting. Therefore the outcome as you hear now..

after-blog note: As i was trying to upload the above player and the mp3, I happened to find out that flash media player (i.e. the component i used as you see above) actually doesn't support all types of mp3s! I originally used Audacity to produce my mp3 file in 48kbps bitrate but it ended up playing really fast (like 2x the original speed, some call it the chipmunk effect). So i had to play around and i found that the lowest i can go for the bit rate to play like normal is 64kbps. i'm not sure if Adobe fixed this is Flash CS3 because my current version of Flash is Flash 8 but i'm just complaining about it here haha.

So if you're wondering how to embed the above flash mp3 player into your blog or webpage, i'll share it with you in another post another day. its actually very easy because you can use a pre-built one that comes with flash as i have done but this post is really getting too long =P

after-blog note 2: I originally had a flash music player there to play the file but since I lost my hosting space, I decided to put the files on Youtube and that meant I could not have the flash player anymore.

Tuesday 8 May 2007

flash frame rate

I just made my first flash frame rate widget. I wanted to have a frame rate widget because I'll soon be experimenting some processor intensive stuff in flash. It took me about 10 mins to make because it's really simple.

here's how to make it:
1) create a new movieclip symbol and navigate to its timeline
2) create a dynamic text box for the number to update itself
3) add a new layer for actionscript and add the following:

var frameCounter:Number = 0;
var frameRate:Number = 0;
var currSecond:Number;
var prevSecond:Number = 0;

this.onEnterFrame = function()
{
frameCounter++;
currSecond = int(getTimer()/1000);
if(currSecond > prevSecond){
prevSecond = currSecond;
frameRate = frameCounter;
frameCounter=0;
}
}

4) add "frameRate" without quotes to the dynamic text box you created above under the "Var:" box in your properties window.
5) decorate as you please, by adding a background box and border and the word "fps" inside a static text box, etc

i guess the code is self explanatory if you're a programmer, but for the non-programmer who isn't interested to learn programming but is wondering how it works, basically what it does is count the number of frames that flash can update per second and update the number in the box every second. its that simple.

i also just realised that flash can go up to a maximum of 120 fps (upper limit set by macromedia). tt's pretty gd but not great like c++ graphic engines. so all you c++ fans out there don't come complaining to me that the frame rate sucks. It reasonably good and 60 fps already provides ultra smooth animation, though the more stuff you have on screen makes the frame rate dip quite abit. i've been using like 15-20 fps for a long long time so i think i should be trying to push the fps for future projects up.

one thing though is that i tried running the the flash swf on my computer in flash player and it runs at 120 fps-124fps.
but running it on my mozilla web browser runs the same swf at 60fps to 90 fps only. I suspect the dip in frame rate is due to the flash file being run from the browser so its slower. Its an operating system thing.

and finally here it is:

Sunday 6 May 2007

Genesis

well well, i once thought i'd never create a blog because i really love making html pages or flash sites on my own webserver alot more than posting silly rantings every day or week or month.

so here, i prove myself wrong~! (actually not really)

I made this blog to hold all my trash online.. stuff i make, experimenting with that i want the whole world to see.. so there you have it. yes, that does mean you're not about to see my silly rantings. =P

Enjoy~!

Get Adsense

Want to earn money like me? Get Google Adsense now by clicking this