Create IK bone in Blender

If we have activated the IK or inverse kinematics in our bone structure then by moving a piece of bone will then move the other bones attach to it. In this simple example I will show you how to apply inverse kinematics on a group of bones. Before we start please take note that I do not change the name of any bone so for example, bone number one will remain as Bone and the second bone will be called Bone.001 and so on.

  1. First let start to create three pieces of bone as usual, SHIFT-A then select Armature->Single Bone.
  2. Next switch to edit mode and start to extrude that bone upward, select the tip of the bone and start to extrude it upward, press E for extrude and Z to move upward in the z direction. Extrude two times so now you have three bones.
  3. Still in edit mode select the top most bone and under the Bone tab under Relations->Parent delete Bone.001 to make that top bone not attach to any parent object.
  4. Next select Bone.001 which is the second bone from the top and switch to pose mode. Add an inverse kinematics constraint to the bone under the Bone Constraints tab.
  5. Next under the Target area select Armature and under the Bone area select Bone.002. Bone.001 should now turn yellow indicating that the IK settings have now been activated!
  6. That is it, now still in the pose mode select the top most bone and move it around in the x, y or z direction with the x, y, z arrow!

    bone
    bone IK
  7. You will see the bottom two bones will follow the top bone!

IK is very useful when it comes to creating a bending pipeline like below…

ik pipe
ik pipe

Robot Design with Blender

This few days I am busy creating assets for me next game which will operate on the Android phone as well as desktop. Below are a few types of robot I have created with Blender which I would like to share with you all. Blender is a great software which can help us to create cool graphic as well as making movie so if you are looking for such a software product then you might like it!

This is the first robot I have created a while ago and will not appear in my game but just to show you my very first robot!

This is the mech which will appear as the enemy in my new game.

The friendly robot will assist you to destroy your enemy.

The leader of the enemy mech which is still work under progress which means more works need to be done!

That is it! From the first robot to the latest, what do you think about it?

Strike Mech model for my next gaming project in Android

I have started to write the story line for my next gaming project in android while creating a few gaming characters at the same time. After a long rest it is time to start a new gaming project again and with the graphic software like Blender and the coding IDE such as eclipse I am ready to create my next game which will be for the android user this time.

The above character is the enemy in this new game and it is creates with Blender, more touch up will be needed for the above character include the installation of the laser guided weaponry system just below the body of this strike mech.

Why Android? 

A few reasons that make me choose android as my next gaming platform :-

  1. There are basically no distribution network available to distribute my game for the java desktop user.
  2. Although python is great but there is little market for python gaming.
  3. I am thinking about creating game in c# or c++ but it seems like the revenue (or profit) is not that high when it comes to distribute our game in windows store.
  4. I am thinking about creating more games with javascript but there are not many players that are really interested in the online html5 game. If we want to earn good money for our work then at least we must get 1000+ players visiting our gaming website everyday which is not going to happen without heavy advertisement that cost money! Here is one of the game which I have created in html5 🙂

Therefore with that in mind I have decided to go for the android platform and concentrate 90% of my future gaming projects in android. There are lots to learn when it comes to game programming in android but as a game developer who seeks profit we will have to overcome all the hurdles before we can win big in 110m!

Lets play BlackJack together!

Welcome to the homepage of Blackjack Memory, a card game which I have developed a few years ago and now it is offline for everyone to enjoy.

The game can be divided into two part, the first part will let you play as a dealer where you will play against four players in the game.

Dealer vs player
dealer vs player

Press the the first button from the left if you need more card. Press the second button from the left if yourself do not need any more card. Press the third button from the left when the player needs more card. Press the fourth button from the left to start a new game. Press the fifth button from the left to go to the solo game which we will talk about later on. (If you want to donate some money to me then press the six button from the left to visit my Patreon page).

The second part of the game will let you play one on one against another player,

player vs dealer
player vs dealer

Press the first button from the left if you need more card, otherwise press the second button from the left. Press the third button from the left to start a new game. The fourth button will show you how much money you had left. The fifth button will take you back to the multiple player game.

Enjoy!

Rock Sweeper

Welcome to the homepage of Rock Sweeper. The Game which I have developed a few years ago and put online for people to enjoy. If you want to play the game right now then just scroll to the bottom of the page, if this is your first time playing this game then you will need to wait for a moment for the graphic and audio asset to load. Leave your comment below the comment box on this page so we can make this game better together!

How to play the Game

The gaming concept is really simple, you need to move both the front and the back spaceships to the left and to the right with the left and the right arrow key on your keyboard to intercept the incoming rock and collect enough points to proceed to the next stage. You will need to intercept the incoming rock twice with both ships in order to win a point, also make sure you will only intercept the incoming rock with the second ship after that rock has been intercepted once by the first ship or else if the rock destroys the second ship it will be game over! During the game, you will notice that if you move the front ship to the left the back ship will move to the right automatically and thus will increase the difficulty of the entire game. Besides that, you will also need to collect a certain amount of rock to proceed to the next level before time up!

About Internet Connection

The gaming server is based on UK, if you are from other part of the world then you will need to wait for 1/2 minute before the game is fully load. When you see the ‘Loading’ text on the sidebar then just wait for a while, it won’t take long to load the game, once your browser has cached the game for the first time then the second time will be very fast already! I really wish I can earn some money through creating html5 game so I can look for a better and faster server to host my online game, as for now I hope you won’t feel the lag.

What is new

This game has now officially became an online game so if there is any changes to be made in the future then we can directly change them on the website! Make sure to leave any suggestion after you have played the game. Now you can start playing the game below…

Wait until you see the play button appears on the game page then click on the play button to play the game, if this is your first time playing the game then it will take a while to load all the gaming assets.

Leave your suggestion on the comment part of this page so we can improve this game in the future.

ECMAscript6 Array.from

In this article we will show you how to use the Array.from method in the ECMAscript 6 to create an array from an array-like or iterable object.

The first example will show you how to create an array from a Set which contains the hello world string and a window object and then use the alert method of the window object to show that string on the browser.

var s = new Set(["hello world", window]); 
var sayHi = Array.from(s);
sayHi[1].alert(sayHi[0]);

The second example will receive a string object and turns it into an array.

var s = "hello world"
var sayHi = Array.from(s);
alert(sayHi);

Array.from was added to the ECMA-262 standard in the 6th edition which you can now use in the major web browser such as Firefox, Chrome and Opera.

Create a spinning torusKnot with Babylon.js

I have written a simple program to demonstrate to you what we can do with Babylon.js framework and the code is as follow :

var engine;
var scene;
var canvas;
var ground;
var light1;
var light0;
var light3;
var torusKnot;
var camera;

window.addEventListener('DOMContentLoaded', function() {
	canvas = document.getElementById('renderCanvas');
	engine = new BABYLON.Engine(canvas, true);
	scene = createScene();
	
	engine.runRenderLoop(function() {
		
		//Rotate the torusKnot around the x, y, z axis
		torusKnot.rotation.x += Math.PI/180;
		torusKnot.rotation.y += Math.PI/180;
		torusKnot.rotation.z += Math.PI/180;
		
		scene.render();
	});
});

window.addEventListener('resize', function() {
	engine.resize();
});

var createScene = function() {
	
		// create a basic BJS Scene object
		var scene = new BABYLON.Scene(engine);

		// create a FreeCamera, and set its position to (x:0, y:5, z:-10)
		camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

		// target the camera to scene origin
		camera.setTarget(BABYLON.Vector3.Zero());

		// attach the camera to the canvas
		camera.attachControl(canvas, false);

		// create three lights to light up the screen
		
		light0 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(-5, -2, -3), scene);
		light0.diffuse = new BABYLON.Color3(1.0, 1.0, 1.0);
		light0.specular = new BABYLON.Color3(0.0, 1.0, 0.0);
		
		light1 = new BABYLON.SpotLight("Spot1", new BABYLON.Vector3(0, 10, -3), new BABYLON.Vector3(0, 10, -3), 0.8, 2, scene);
		light1.diffuse = new BABYLON.Color3(1.0, 0.5, 1.0);
		light1.specular = new BABYLON.Color3(1.0, 1.0, 1.0);
		
		var light3 = new BABYLON.DirectionalLight("Dir1", new BABYLON.Vector3(0, -5, 0), scene);
		light3.diffuse = new BABYLON.Color3(1.0, 0.7, 1.0);
		light3.specular = new BABYLON.Color3(0.0, 0.5, 0.5);

		// create a built-in "TorusKnot" shape; 
		torusKnot = BABYLON.Mesh.CreateTorusKnot("torusKnot", 0.3, 0.05, 128, 64, 3, 2, scene, false, BABYLON.Mesh.DOUBLESIDE);
		var materialKnot1 = new BABYLON.StandardMaterial("texture1", scene);
		materialKnot1.diffuseColor = new BABYLON.Color3(0.7, 0.5, 0.3);
		materialKnot1.alpha = 0.5;
		torusKnot.material = materialKnot1;
		torusKnot.position.y = 2;
		torusKnot.position.z = -3;

		// create a built-in "ground" shape; 
		ground =  BABYLON.Mesh.CreateGround('ground1', 6, 4, 2, scene);
		var materialGround1 = new BABYLON.StandardMaterial("texture2", scene);
		materialGround1.diffuseTexture = new BABYLON.Texture("sand.png", scene);
		ground.material = materialGround1;
		
		//set the ambient color for the scene
		scene.ambientColor = new BABYLON.Color3(0.3, 0.7, 0.3);

		// return the created scene
		return scene;
}

Visit the demo page through this link.

Create our first program with Babylon.js framework

Recently I have started to write javascript program for my new 3D game with the help of Babylon.js, which is a javascript game developer first choice gaming framework for the development of the 3D html5 game. Since I am working on the game now then it mights be great for me to share with you all the steps that I use to set up the Babylon.js framework in this article.

Before you start to write your program with the help of Babylon.js you will need to download the latest version of Babylon.js on Github. After you have downloaded the zip file you can then extract it into a folder on your computer. If you look into the Babylon.js-master folder (the name of the main folder might not be the same for the latest version) you will find there are lots of files as well as sub-folders inside it. Go into the dist folder and grab the babylon.2.5.max.js file to a new folder you have created for your first project and you are ready to rock!

Next create a index.html file for your project then enter the below code. Make sure to link all the files you require to run the program in the header part of the html5 file. We will create those files later on.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Lets Rock!</title>
    <!-- link to the last version of babylon -->
    <script src="babylon.2.5.max.js"></script>
    <!-- link to the js and css file -->
    <script src="main.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

The canvas tag is the most important piece of meal in the entire code above, make sure you have specified an id for that canvas element as well.

Next create a style sheet and named it style.css

html, body {
	overflow: hidden;
	width   : 100%;
	height  : 100%;
	margin  : 0;
	padding : 0;
}

#renderCanvas {
	width   : 100%;
	height  : 100%;
	touch-action: none;
}

At last create the last piece of javascript file and named it main.js.

var engine;
var scene;
var canvas;

window.addEventListener('DOMContentLoaded', function() {
	canvas = document.getElementById('renderCanvas');
	engine = new BABYLON.Engine(canvas, true);
	scene = createScene();
	engine.runRenderLoop(function() {
		scene.render();
	});
});

window.addEventListener('resize', function() {
	engine.resize();
});

var createScene = function() {
	
		// create a basic BJS Scene object
		var scene = new BABYLON.Scene(engine);

		// create a FreeCamera, and set its position to (x:0, y:5, z:-10)
		var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

		// target the camera to scene origin
		camera.setTarget(BABYLON.Vector3.Zero());

		// attach the camera to the canvas
		camera.attachControl(canvas, false);

		// create two lights to light up the screen
		
		var light0 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -2, 0), scene);
		light0.diffuse = new BABYLON.Color3(1.0, 1.0, 1.0);
		light0.specular = new BABYLON.Color3(1.0, 1.0, 1.0);
		
		var light1 = new BABYLON.SpotLight("Spot1", new BABYLON.Vector3(0, 10, -3), new BABYLON.Vector3(0, -3, 0), 0.8, 2, scene);
		light1.diffuse = new BABYLON.Color3(1, 1, 1);
		light1.specular = new BABYLON.Color3(1, 1, 1);

		// create a built-in "TorusKnot" shape; 
		var torusKnot = BABYLON.Mesh.CreateTorusKnot("torusKnot", 0.3, 0.05, 128, 64, 3, 2, scene, false, BABYLON.Mesh.DOUBLESIDE);
		var materialKnot1 = new BABYLON.StandardMaterial("texture1", scene);
		materialKnot1.diffuseColor = new BABYLON.Color3(0.5, 0.6, 0.4);
		materialKnot1.alpha = 0.5;
		torusKnot.material = materialKnot1;
		torusKnot.position.y = 2;
		torusKnot.position.z = -3;

		// create a built-in "ground" shape; 
		var ground = BABYLON.Mesh.CreateGround('ground1', 6, 4, 2, scene);
		var materialGround1 = new BABYLON.StandardMaterial("texture2", scene);
		materialGround1.diffuseColor = new BABYLON.Color3(0.3, 0.5, 0.3);
		ground.material = materialGround1;

		// return the created scene
		return scene;
}

Basically the javascript program above will create the babylon engine object and the screen object that we need to create and attached (our game objects into it)!

Now your project folder should look like this.

The files inside project folder
The files inside project folder

After all the hard work here is the object we have just created.

The render scene of Babylon.js framework
The render scene of Babylon.js framework