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.
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.
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.
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.
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:
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 :)
Finally I've finished my Final Year Project and it's time for me to update what I've done recently :)
I would like to talk about normal mapping again. Basically normal mapping is adding details to the object without adding extra polygons. It is a very useful technique in game industry because it can improve the graphics without having penalty on performance.
Previously I've talk about normal mapping, you can click here to read about it.
This time I would like to add some extra information about normal mapping which is Specular Map.
Basically specular map is a texture map to control the object's specularity, the shininess of the object. Specular map mostly is a grayscale image.
* Specular map for human head
With specular map, you can control the specularity of the object without changing any code. All you need to do is just to replace the specular map with a new one and the result will be changed too :)
This is the third app I've developed for iPhone. This time, I bring you an augmented reality treasure hunting game!
It sounds cool isn' it? In a general idea for this app is, there are Hider and Seekers, Hider is the one who decide where to hide those treasures while Seekers are the people to dig out all the treasures been hidden.
Although there is a big drawback of this app which is it is strongly depending on your GPS signal. If your signal is good then you can get the treasure information accurately, but if it's in a bad signal then I'm so sorry :(
Here are some screenshots teaching you on how to use it:
1 - This is the Main Menu. You can choose which player you are (Hider or Seeker)
2 - After you have selected Hider, you can hide the treasures on the provided map view. (The red pin indicating treasure)
3 - After that, the seeker can use CAM view to locate where are the treasures and find it out!
NOTE: You can set the effective radius (in meters) in the Main Menu screen.
4 - Is this app only for 1 player? The answer is --- NO!
Once the Hider finished hiding all the treasures, he can send his treasure data to all other iPhone users who have this app installed. The sending method is through Bluetooth.
If you are still confusing about how to use this app, look at this video tutorial:
Interested to try it?
Hope you enjoy using it :)
NOTE: If you saw a message saying that "Memory Low", please turn off all your background running apps (double tap HOME button)
Finally I've decided to put my first iPhone app on App Store for FREE. Actually this has been done about half year ago but I didn't feel like putting it on App Store because I don't think my app is good enough to compete with others :(
Anyway, since my app now is on App Store, it is better for me to show other people by just giving them the download link and let them try out themselves. It is easier for my portfolio too :)
Simple iNotes is an iPhone note which allows you to manage your note in 1 place.
Key Features:
- Create different folders to categorize your notes.
- Photo notes allow you to import photo from your photo library and add your own captions/notes on it.
- Protect your notes by enabling the password protected.
*Screenshot from App Store
Here is a video tutorial teaching you on how to use Simple iNotes:
Recently I've been searching around about Unity and found out that it is really a great game development tool because it provides a lot of features which can simplified your works as you developing games.
I would say it is almost like a game engine because it handles collision, physics, audio, and rendering. Besides that, it does provide scripting ability (C# and Javascript) which allows you to code your own behaviors and apply it on your games. Cool, isn't it?
In terms of publication, it supports almost all platforms like Windows, Macintosh, iPhone, Android, Wii, PS3, and Xbox 360. The only thing which doesn't support is Open-Source OS like Linux. There are 2 versions of Unity which is Unity Standard and Unity Pro. For the product features comparison you can visit the following link:
It is not a tool just to develop some normal casual games but it can be developed for AAA games. Although it may not be as powerful as Unreal Engine but I believe Unity might be catching up in future!
Finally, I have finished developed another game by using XNA!
Basically it is a 2D real-time strategy game. All you need to do is conquer/eliminate your enemy bases.
This is my first time to develop a game with AI. The AI that's I've included is Decision Making + Finite State Machines. Although the AI is still not smart enough but hope that in future if I have free time I will try to improve it :)
Again, since I'm not an artist, so what I did was using google to find images and edit in Adobe Photoshop. Hope that you won't mind about it.
Normal mapping. I guess this is one of the important technique in game development. It can gives u a high details of an model without the need of high poly model. Sounds cool isn't it? Anyway, Computer graphics always cool!
Before you can do a good normal mapping, you need to have a good normal map. Question.... how do I create normal map? Easy! Model a really high poly and detailed model, and generate normal map from it first (I believe most 3D software did provide the function of generating normal map) After you have generated the normal map, reduce your poly count until it fits your game :)
The concept behind normal mapping is, do the lighting calculation at Tangent Space aka Texture Coordinate Space. I don't think my explanation will be good. If you wish to know more about this, try to look at this page or this page.
In short, you need to find out TBN matrix and convert your lighting direction to the tangent space by multiplying with the TBN matrix.
Well, basically toon shading is another simple technique which you can be easily done in shader. (I mean a basic toon shading. If you want to do advanced toon shading, of cause it is difficult)
Since mostly toon shading gives you an unrealistic lighting. Basically it just has about 3 or 4 bands of lighting. So what you need to do is clamping the lighting value based on the look-up table.
What is the look-up table? Well, it just store the pre-defined value which you are going to use for the lighting clamping. Which mean, if your look-up table has only 3 values. You final result of the whole model (lighting) will only have 3 values as well.
For example:
The lighting value for that particular pixel is 0.4f, by using look-up table:
if (light > 0.8f)
light = 1.3f;
else if (light > 0.5)
light = 0.9f;
else
light = 0.5f;
From the pseudocode above, you can see that, no matter what value you get from the calculation, it will convert to either one of the 3 pre-defined values.
Here are some screenshots:
*Original model
*After applying toon shading (You can see that there are only 3 intensity level of light on the model)
*Toon shading with outline
If you wish to know more about toon shading, you can wiki it.
Actually I just started to learn shader about 1 month. Finally I have something to show :)
First I would like to show is per-pixel lighting which I've done by myself after reading The Cg Tutorial. It is an awesome book and recommended to all beginners in shader programming.
Per-pixel lighting is simple, basically it is like per-vertex lighting but instead of putting all the codes in vertex shader, u put it in pixel shader. Well, in order to optimize the code, remember do all the position calculation in vertex shader first and only pass them to the pixel shader so that pixel shader don't need to do so many works.
Simple ey?
The only thing you need to know is, the theory of lighting in computer graphics!
(Actually the emissive term doesn't seems like really important)
The formula above is the most basic lighting formula. Of cause there are more like adding attenuation. I haven't try that personally so I'm not going to talk more about that yet.
Enough of talking, here are some screenshots:
*Ambient light only
*Diffuse light only
*Specular light only
*Ambient + Diffuse + Specular (Facing the light)
*Ambient + Diffuse + Specular (Doesn't facing the light)
