XNA - CAD2D Framework

Last month I've started to write my own simple game framework for XNA but recently the progress has been stopped for awhile. Hope I have time to finish it.

Well anyway, just to update my current progress, I've finished a simple 2D image/sprite libraries, which support texture atlas and animation.

In addition, I've done a simple GUI library too, currently there is only 1 available which is Button.

More GUI features coming later.

Below picture just to illustrate what are available classes/features in the framework now:

As you can see, it's a very simple framework which I only spent 1 week to finish it. Hopefully in future I can continue to add more features on it :)

If you are interested you can download and have a look at it, for GUI event handler I uses delegate pattern to design it.

Download CAD Framework for XNA

A simple test program is available here and more information about this test program can be found here.

Cocos2D + Box2D Tech Demo

Finally get to open my Mac after using Windows for awhile :P

Anyway, just to update my latest progression about some simple tech demo that I've done using Cocos2D and Box2D physics engine.

The control is simple, basically I just swipe up to fire the ball. The direction of where the ball move will be based on the direction that you swipe. While the speed of the ball depending on swiping speed too.

If the ball touches the boundary, it will bounce back and if the ball collided with other balls then both of them will be disappeared.

Below is the video of this tech demo:

XNA - Sprite Viewer

It's been a while I didn't update my blog. Recently I've done a simple sprite viewer in XNA.

Basically it be used to view a texture atlas by providing correct texture data file.

In short, you will need to use Texture Packer to pack all your textures and generate the texture data file by selecting LibGDX format.

Just to promote a little bit about Texture Packer in case anyone of you who do not know what is that. The main role of Texture Packer is to combine different texture into one big texture which we call it as Texture Atlas. The purpose of doing is to optimize the in game performance so that it does not need so many draw calls to render sprites/animations.

This is even more important when u are developing games for mobile because it has limited memory so you must save as much as u can while maintaining the performance and quality of your game!

In addition, the main lesson I learned from this simple application is the input system that I designed based on delegation concept. Well there are other different ways of pattern you can use to implement your input system but most likely they'll be using delegation pattern too.


Sample screenshots:

Screenshot 1

Screenshot 1

Download link:

Sprite Viewer

iPhone App - Come Dig Me! (Ver 1.1)

New feature in Ver 1.1

----------------------------------

Now you can send any location to your friends. Just tap the MAP button, tap and hold your finger on the location you would like to send, you will see a RED PIN drop down, then tap SEND!

--------- Cadrick Development ------------

Let me introduce you the second app which I developed for iPhone users, call Come Dig Me!

The name is abit funny but actually it is a navigation app. So you might be curious what is it for?

Let me give you an example, let say one day you need your friend to pick you up at some places and you don't know where is the place call, so how would you tell your friend?

With Come Dig Me! in your iPhone, problem solved!

All you have to do is, send a message to your friend (iPhone user) and he will know exactly where you are! Cool, isn't it?

Don't forget, both of you must have this app installed in your iPhone :)

Here are some screenshots teaching you on how to use this app:

1 - Main menu, if you want to send your location to your friend, tap the MAP button.

2 - A map will come out showing your current location, tap the SEND button and key in your friend's phone number. Remember, don't modify anything in the message body. That message is auto-generated by the system.

3 - Now, your friend has received your message, he just need to open your message and COPY the whole message, after that, come back to this app and tap FIND button, a message box will come out and ask your friend just paste the COPIED MESSAGE into the box. DONE!

4 - Another map view will come out again showing your location. Your friend can tap the ROUTE button then it will generate the path from your friend location to your location.

Watch the video tutorial here:

If you are interested, you can get it here.

Please rate it once you have tested it :)

Shader - Post Processing

What we are discussing earlier is a type of forward rendering. Now let's us look at Post Processing.

In general, the steps to perform post processing are render the scene into buffer or graphics card first, then apply post processing filter, lastly display it to the screen. Post processing will be changing or manipulating the scene.

Some of the cool effects which considered as post processing are HDR, Bloom, Blur, Screen Space Ambient Occlusion (SSAO) and so on...

I've implemented some post processing effects and here are the result:

*Original scene (without applying any filter)

*Black and White effect

*Sepia tone effect

*Negative effect

*Negative offset effect

*Halftone effect

*Sketching + black and white effect

*Tiling effect

*Old scratched film + sepia tone effect

Video demo:

If you are interested to view it in real time, you can get it by clicking the download link:

Download Post Processing Demo

Key control

1 - Black and White effect

2 - Sepia tone effect

3 - Negative effect

4 - Negative offset effect

5 - Halftone effect

6 - Sketching effect

7 - Tiling effect

8 - Old scratched film effect

0 - Reset

Note: Remember, whenever you want to apply other filter, press 0 to reset first. You don't need to reset if you want to combine few filters together.

Shader - Color Shading

This time I will talk about color shading in shader.

Before I start to talk more about it, let me illustrate what it is used for.

I believe most of you did play racing game before. Now I will take Need For Speed as an example. Do you remember that you can change the color of the car to whatever color you want in Need For Speed? You can even add some graffiti on the car skin too. Question is, how can all these effects be done?

The answer is very simple, you need SHADER!

All you have to do is creating masking for each model.

*Sample masking map for Lamborghini model.

As you can see, there is only black and white color in the map (you can do grayscale level if you want to)

So what is this map used for? Basically your shader program will use this map as a reference, white color part will be affected (means it will change color) and black color part will not be affected (it won't change color).

The formula to change the car skin color is:

CurrentColor = CurrentColor * Masking.a

You will notice that Masking.a, how about r,g and b?

The answer is, you can actually put 4 maps on 1 complete texture, which means you can do 4 different pattern of masking on a 3D model. Cool isn' it?

Example:

Car skin masking will be stored in R channel.

Car rim masking will be stored in G channel.

Car window masking will be stored in B channel.

Car bumper masking will be stored in A channel.

All you need to do is creating masking map to whatever pattern you want :)

Sample screenshots:

*Default Lambo with white color

*Lambo in red color

*Lambo in green color

*Lambo in blue color

Notice that all the color changes only applied on the car skin but not the whole car. This is the power of using masking :)

Video demo:

Here's the download link:

Download color shading demo

Key control:

1 - Default model

2 - Model with diffuse map only

3 - Complete model

Once you are in complete model, you can press the following keys to change color.

R - Red color

G - Green color

B - Blue color

Y - Yellow color

P - Pink color

CREDIT: Thanks to Mr.Hiew Sau Fung sponsored me all these 3D models.

Shader - Toon Shading 2

Last time I've done Toon Shading implementation. This time, I just want to enhance abit so that it will have specular effect.

Actually you just need to add specular value into the lighting calculation.

Final result will be look like this:

Video demo:

You can download the demo here:

Click here to download Toon Shading demo