On this post I will show you what we can get with canvas and a little javascript code. I will try to implement game loop, game draw, simple 2D physic, and key input method with this little demo of bouncing ball. on this simple tutorial we using keymaster.js simple micro-library for defining and dispatching keyboard shortcuts in our little project.
Useful Link
Project Files >> Download Here
Game Demo >> See Here
#1 Build your HTML code with canvas tags in it.
First we must create our html file with canvas tags in it, here is our html file example.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>BASIC Canvas Game Part 1</title> //we need to load keymaster micro library here <script src="keymaster.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> //Javascript Code goes here </script> </head> <body> <canvas id="canvas" width="800" height="600" /> <p>Use Arrow Keys to add movement to the ball</p> </body> </html>
Last time I already create day night cycle with smooth light and fog transition. now I will perfected last day night cycle in this article by adding Skybox transition from day and night just like the demo bellow. For this functionality we need a custom skybox shader that contain 2 type of skybox and blend factor with range [0-1] type to get combination of 2 skybox texture.
This custom shader is created by Aras Pranckevicius from his article on Unify Community (Unity wiki). I use it and applying it with my DayNightController script in my previous article. Here is the demo scene for complete Day Night Cycle created by unity3D 4 Trial Pro edition.
First create new shader and name it SkyboxBlend, copy code bellow to our shader.
Do you curious about day night cycle in Skyrim, Oblivion and FallOut? here is a simple way to implement it in your Unity3D game. This tips will be divided into 2 section, first is to make rotating sun, transition in light intensity, transition in fogs and ambient light transition. the next tips will be how to create Skybox blending technique to smoothly transition from day skybox to night (stars & moon) skybox that can be read here. It’s a little modification from Day Night Controller on here
You can see the demo scene here
Here is the main algorithm for my Day night Cycle code :
- Check game time for every looping and applying time state to Day, Dusk, Night, Dawn according to game time
- Update sun (directional light) position according to simple rotation calculation based on world center point
- Update light intensity
- Update fog color according to our State
- Update ambient light color
- Update Skybox blend transition –> on next article here
here is our complete code, create a c# code and name it DayNightController, (more…)
Using unity3d is easy to create awesome terrain with first person camera. We can create an island scene with it’s sea, river, tree, and other objects. We could get a nice sun effect with built in directional light and flare assets, we could great sky with adding Skybox to our game, even we could get near-far ‘feel’ by enabled the fogs.
But there something missing, the camera render normally when we underwater, there is no different between underwater view and above water view. This feel is necessary when we create scene that have more water than land, or the player can go swimming or diving in our scene. so we need underwater effect script to complete our scene. for the demo you can see here
create new c-sharp script and name it Underwater, and copy code bellow. (more…)
