Basic JS Canvas 2D Game Programming : Game Loop, Draw, Physic and Key Input

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">
<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
<canvas id="canvas" width="800" height="600" />
<p>Use Arrow Keys to add movement to the ball</p>


read more

Unity3D : Advance Skybox Blending for Day Night Cycle

Day Night Skybox Blending

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.


read more

Unity3D : Day Night Cycle and Transition

Day Night Cycle

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 :

  1. Check game time for every looping and applying time state to Day, Dusk, Night, Dawn according to game time
  2. Update sun (directional light) position according to simple rotation calculation based on world center point
  3. Update light intensity
  4. Update fog color according to our State
  5. Update ambient light color
  6. Update Skybox blend transition –> on next article here

here is our complete code, create a c# code and name it DayNightController, (more…)

read more

Unity3D : Underwater Effect

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…)

read more