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!

You Draw, We Draw, Lets draw on BearDraws!

BearDraws is a simple and fun drawing extension for everyone, when you have time you can always draw with BearDraws. Now BearDraws has gone offline so you do not need to stay online in order to use this extension. I do hope you enjoy using BearDraws and if you do have any question regarding BearDraws please let me know!

Just play around and have fun!
Just play around and have fun!

Donation

As a developer I need money to continue develop more extensions for you to enjoy, if you want to support me with a few dollars each month then please visit my Patreon page and help me out.

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.

I hope you do enjoy this game, if you want to post any suggestion or question regarding this game then please kindly register yourself at the game forum first because only the user of the forum can post a reply.

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 are the old user of this game then you can just skip the following introduction and go directly to the what is new part.

How to play the Game

The game 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 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 one 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 bookmark this page so you can visit from time to time to view whether is there any new changes or not!

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

Create browser game without knowing any programming languages

If you want to create a browser game and put it on your own website for others to enjoy but you do not know any web programming languages such as javascript, php or html5 then you will really love GDevelop which is a game development software that will help yourself to create game without even requires you to write a single line of code.

Game development with GDevelop is very fast
Game development with GDevelop is very fast

I have downloaded GDevelop which itself is an open source software and then create my first game with it, all I have to say is that I really like it!

Normally a game developer needs to write code to detect whether a character has landed on a platform or not, but with GDevelop he does not need to do this anymore because he can simply create that detection logic in just a few steps!

Has the players landed on a platform?
Has a player already landed on a platform?

A game developer also does not need to write his own animation loop for a group of game images any more because with just a few simple settings that take only 1 minute or less the animation loop will be fully ready! I still remember it took me around an hour to write the first animation loop for my first game a few years ago.

This is how to set up the animation loop in GDevelop
This is how you set up the animation loop in GDevelop

You can add as many platforms as you need and as many game characters as you wish and as many character-platform relationships that you wish to have using GDevelop’s set up portal.

Character-Platform relationship
Character-Platform relationship

Once you have created your browser game, pack it up and you are ready to put it on your own website for people to enjoy.

Overall speaking GDevelop is a great piece of browser game development software which will help you to create game without needs you to write a single line of game code. If you have not yet downloaded this IDE then go ahead and download it, you will really love this game creation software once you have installed it on your pc 🙂

That is all, if there is time for more stories then I will write an article about creating a full browser game with GDevelop so don’t miss it if you would!

Concatenation of two arrays with javascript

If you want to concatenate two arrays with javascript then you can use the concat method of an array to do so. Below script will join up the two arrays and returns a new array consists of the combination elements from the two.

var apple = ["apple", "pie"];
var pen = ["pen", "pencil!"];
var applepen = apple.concat(pen);

alert(applepen);

If you put the above code in any html5 web page and load that page then you will see the below alert box pops up.

Applepen
Applepen