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!

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

Make Human alternative –>Manuel Bastioni

Today I am going to introduce to you another blender tool which you can use to create human character within minutes. In my previous post I am talking about using Make Human to create human character for online game and in this article we are going to look at another cool tool which we can use to make humanoid –> Manuel Bastioni. Manuel Bastioni has almost all the features offered by Make Human accept one –> It does not have GUI of it’s own and thus we will need to import this plugin to Blender before we can use it.

If you are using Blender to create your gaming character then I will suggest you to directly using Manuel Bastioni instead of Make Human so you can save all the time you need to import your gaming character into Blender for editing. Since Manuel Bastioni is a plugin for Blender then we can create humanoid directly in Blender after we have installed this plugin.

manuel
Manuel Bastioni

Manuel Bastioni is a great plugin for Blender which I highly recommend to you after myself have used it to create the below feature.

If you want to create cloth for the character you might not be able to use it’s feature to do so at the moment but you can easily create the cloth in Blender because once the character has been created it will become just like a normal mesh object which you can then edit it as you wish!

Sound cool? Then go ahead and download the product from this link!

The cloud object has been introduced into Rock Sweeper

There is a new update coming soon with the introduction of the cloud object into the game, what this object does is to continuously moving downward and if it gets passed the screen boundary then it will reappear again from the other end.

from game_sprite import GameSprite
from pygame.locals import *
from vector2d import Vector2D

class CloudSprite(GameSprite):
    
    # Constructor. Pass in the image file
    # and it's width and height and it's position on the spritesheet
    def __init__(self, image, width, height, pos):
        
        # Call the parent class __init__ method
        GameSprite.__init__(self, image, width, height, pos)
        
        self.pos = Vector2D(0,0) #initialize the original position of the sprite on the screen
        
    def updatePosition(self): 
        self.pos += Vector2D(0.0, 0.1) #the new vector position of the cloud object on the screen
        #if the cloud gets passed the boundary then reset it to old position
        if(self.pos.y > (560+self.height/2)):
            self.pos.y = -300
        else:
            #else create the new rectangle object of the cloud
            self.rect = Rect(self.pos.x - self.width/2, self.pos.y - self.height/2, self.width, self.height) #self.rect will be called by the rock group

The new installer will also be used in this game for better user experience.

How to distribute the pygame program for windows os

If you have read my previous post regarding the PyInstaller then this one will further shows you how to create a installer for your pygame program for windows os so the windows users can download and install your program on their windows os’s pc.

Before we go further lets us revisit the part on how to create a distribution folder which includes a clickable application file that our application user can click on it to start the pygame application on windows os. In our previous tutorial regarding the PyInstaller we have only created a distribution folder for one file but in this one we will create the distribution folder for many files include the image files.

Make sure you have copied the freesansbold.ttf file to the main file folder if you are using it in your game before you create the spec file because PyInstaller is unable to locate it in the pygame package. We do not need to specify the pygame’s library because PyInstaller is smart enough to import all the pygame modules that the game requires for us.

As usual in the windows command prompt we will browse to the directory which contains all the files that we wish to turn into a single pygame application.

Create distribution folder :

1) Type in below command in the windows command prompt then press enter.

pyinstaller --noconsole main.py 

where main.py is the main file of the pygame application (the one which starts the application) and the ‘—noconsole’ option is used to hide the console window which will open in the background of python application program.

You will see errors such as the PyInstaller is unable to find the api-ms-win-crt-runtime-l1-1-0.dll file during the compilation stage but that is not a big issue as these files are in the windows os itself so we do not need to include it in our game package anymore. Also for the users to play the game they must have Python installed in their machine.

2) After PyInstaller has generated a spec file for your application open it up with any code editor which you prefer. Below is the spec file for my python game.

pyinstaller spec
pyinstaller spec

Besides the spec file you will also find a dist folder which contains of your application file in it but at the moment you cannot start the application because the application’s helper files are not there yet. There are also two other folders the pyinstaller has created for you : build and __pycache__ folder but we do not need to worry about those two as our main focus is on the dist folder.

3) Now I will edit or add in the following lines of code in that spec file.

# -*- mode: python -*-

block_cipher = None


a = Analysis(['rocksweeper.py'],
             pathex=['E:\\Pygame\\project0\\src'],
             binaries=None,
             datas=None,
             hiddenimports=[],
             hookspath=[],
             runtime_hooks=[],
             excludes=[],
             win_no_prefer_redirects=False,
             win_private_assemblies=False,
             cipher=block_cipher)
			 
game_files =  [('world.py', 'E:\\Pygame\\project0\\src\\world.py', 'DATA')]		
game_files +=  [('win.png', 'E:\\Pygame\\project0\\src\\win.png', 'DATA')]	
game_files +=  [('vector2d.py', 'E:\\Pygame\\project0\\src\\vector2d.py', 'DATA')]
game_files +=  [('title.png', 'E:\\Pygame\\project0\\src\\title.png', 'DATA')]		
game_files +=  [('thick.png', 'E:\\Pygame\\project0\\src\\thick.png', 'DATA')] 
game_files +=  [('state_winning.py', 'E:\\Pygame\\project0\\src\\state_winning.py', 'DATA')]
game_files +=  [('state_playing.py', 'E:\\Pygame\\project0\\src\\state_playing.py', 'DATA')]
game_files +=  [('state_over.py', 'E:\\Pygame\\project0\\src\\state_over.py', 'DATA')]
game_files +=  [('state_losing.py', 'E:\\Pygame\\project0\\src\\state_losing.py', 'DATA')]
game_files +=  [('state_loading.py', 'E:\\Pygame\\project0\\src\\state_loading.py', 'DATA')]
game_files +=  [('state_engine.py', 'E:\\Pygame\\project0\\src\\state_engine.py', 'DATA')]
game_files +=  [('state.py', 'E:\\Pygame\\project0\\src\\state.py', 'DATA')]
game_files +=  [('ship_sprite.py', 'E:\\Pygame\\project0\\src\\ship_sprite.py', 'DATA')]
game_files +=  [('screen_win.py', 'E:\\Pygame\\project0\\src\\screen_win.py', 'DATA')]
game_files +=  [('screen_over.py', 'E:\\Pygame\\project0\\src\\screen_over.py', 'DATA')]
game_files +=  [('screen_lose.py', 'E:\\Pygame\\project0\\src\\screen_lose.py', 'DATA')]
game_files +=  [('screen_load.py', 'E:\\Pygame\\project0\\src\\screen_load.py', 'DATA')]
game_files +=  [('screen.py', 'E:\\Pygame\\project0\\src\\screen.py', 'DATA')]
game_files +=  [('rock_sprite.py', 'E:\\Pygame\\project0\\src\\rock_sprite.py', 'DATA')]
game_files +=  [('play_on.png', 'E:\\Pygame\\project0\\src\\play_on.png', 'DATA')]
game_files +=  [('next.png', 'E:\\Pygame\\project0\\src\\next.png', 'DATA')]
game_files +=  [('menu.png', 'E:\\Pygame\\project0\\src\\menu.png', 'DATA')]
game_files +=  [('maintile.png', 'E:\\Pygame\\project0\\src\\maintile.png', 'DATA')]
game_files +=  [('icon.png', 'E:\\Pygame\\project0\\src\\icon.png', 'DATA')]
game_files +=  [('game_state_engine.py', 'E:\\Pygame\\project0\\src\\game_state_engine.py', 'DATA')]
game_files +=  [('game_sprite.py', 'E:\\Pygame\\project0\\src\\game_sprite.py', 'DATA')]
game_files +=  [('gameover.png', 'E:\\Pygame\\project0\\src\\gameover.png', 'DATA')]
game_files +=  [('freesansbold.ttf', 'E:\\Pygame\\project0\\src\\freesansbold.ttf', 'DATA')]
			 
pyz = PYZ(a.pure, a.zipped_data,
             cipher=block_cipher)
exe = EXE(pyz,
          a.scripts,
          exclude_binaries=True,
          name='Rocksweeper',
          debug=False,
          strip=False,
          upx=True,
          console=False , icon='iconfile.ico' )
coll = COLLECT(exe,
               a.binaries,
               a.zipfiles,
               a.datas + game_files,
               strip=False,
               upx=True,
               name='Rocksweeper')

Basically I have added in all those files that the game needs under the game_files list and then added that list to the a.datas list

a.datas + game_files

The game_files list takes in three element 1) The name of the file 2) The full path to the file (remember to use double backslash in your file path) 3) The string ‘DATA’ which is required by the spec file.

[('freesansbold.ttf', 'E:\\Pygame\\project0\\src\\freesansbold.ttf', 'DATA')]

Besides that if we do not want a console to appear on the background when we start the game (although we have already used the ‘—noconsole’ option when we create the spec but the console will still start for a short time) then we will simply set the console value to false


console=False

We can also include an icon for our application by specifying the path to the icon file.


icon=’iconfile.ico’

After we have added and changed a few lines in the spec file we are now ready to recreate it with below command in the command prompt.

pyinstaller rocksweeper.spec

After we have ran the above command the contents of the dist folder will be rewritten and now you are ready to distribute the entire folder for the user to download. Although we can stop here if we want to because the dist folder has already contained everything we need to start the application (the main application file and it’s helper files such as image and the module files) but it will be very hard for the users to start the program if they are not familiar with the files inside the folder therefore we need to create an installer for our program which will lead us to the second part of this tutorial.

Create installer :

There are so many softwares for python developers to choose from when it comes to create an installer for their application but in this post I will only show you how to use Inno Setup to create the application’s installer for windows os.

Inno Setup is a free installer for Windows programs. First introduced in 1997, Inno Setup today rivals and even surpasses many commercial installers in feature set and stability.

As compared to other installers Inno Setup is easy to use thus you can create a workable windows’ installer with just a few clicks.

1) Download Inno Setup and install it.
2) Start Inno Setup, select ‘Create a new script file using the Script Wizard’ then press OK.

inno setup
start inno setup

3)

click the next button
click the Next button

4)

fill in the detail about your application
fill in the detail about your application

5)

click next button
click Next button

6)

Select the path to application file then select the folder where the helper files are located, make sure all the files inside the subfolders are selected as well
Select the path to the application file then select the folder where the helper files are located, make sure all the files inside the subfolders are selected as well

7)

click next
click next

8)

select license file
select license file

9)

next
next

10)

select the location to create the installer, named the setup file and provide the path to the icon file
select the location to create the installer, named the setup file then provide the path to the icon file

11)

Next
Next

12)

finish
Finish

13) If you like you can save the new script for future use before compile it, that is it, once you have compiled the script Inno Setup will create the installer for you which you can then upload to your website for user to download and install your program.

Creating application with python and then pack it up is a long and painful process which takes lots of your time to do so, so make sure you stay cool and always look for help on forum or blog!