Thursday, February 26, 2015

Cocos2d-x Hello World Practical Game Programming

In this post I am going to show you how to create a "Hello World!" program in Cocos2d-x game development engine.

  1. We will use C++ programming language
  2. Windows PC 
  3. Visual Studio 2012 for code editing
  4. Cocos2D-x version 3.4 game engine

It will be a hello world in true sense of the word. To learn about installing Cocos2D-x and setting things up for game development please check following link:

Step 1. Create a new Cocos2D-X project with Cocos-Console

  • Open command prompt (Widows + X then C in Windows 8, Windows + R then type CMD press enter on older versions). Run following command to create a new game project.

cocos new -p com.honesitconsultancy.helloworld -d "D:\Cocos\Projects" -l cpp "HelloWorld"

  • Now to to the folder location where you created the new project, in my case it is D:\Cocos\Projects\HelloWorld
Contents of the folder are shown in Fig 1. 
cocos2d-x-hello-world-blank-project
Fig 1: Blank Cocos2D-X project

  • Open the sub-folder "proj.win32".
  • Open the file "HelloWorld.sln"
The name can be different if you use anything other than HelloWorld.

  • Expand the solution in "Solution Explorer" window, often found on right side of screen.
  • Expand the solution sub folder "src" and click "HelloWorldScene.cpp"

cocos2d-x-visual-studio-hello-world
Fig 2: HelloWorldScene.cpp and Init function

HelloWorld::Init function

This function is the heart of a Cocos2D-X game/program. From a game programmer's perspective, this function is the new void main(void).
We will write our custom logic here.

Create a label object with cocos2d::Label

Anywhere inside the Init function, create a new label object.

auto lblHello = Label::create
("Hello World!", "Times", 48.0, cocos2d::Size::ZERO,
cocos2d::TextHAlignment::CENTER,
cocos2d::TextVAlignment::CENTER);

// code highlighting with http://tohtml.com/cpp/

The keyword "auto" is a new construct introduced in C++ 11 standard. Cocos 3.x follows the latest C++ standard. you may write cocos2d::Label instead, but let's live with auto for now.

We have created a new cocos2d::Label object with text "Hello World!", font "Times", and font size 48.

But it will not show on screen right now.

Scene Node

Cocos2D-X game engine keeps all game objects organized in a set of interlinked nodes. These nodes form a graph together.
Our game starts running from the top most node which is also called "root". Cocos2D-x has generated a default root node for us. Here's the default code:

auto rootNode = CSLoader::createNode("MainScene.csb");

addChild(rootNode);








We will add our newly created label as a child to the root node represented by "rootNode" object.
The label will appear on very bottom left of our screen. We can move it around by calling "setPosition" function on it to set position of our label on x axis and y axis. The source code is given below

rootNode ->addChild(lblHello, 1, "lblHello");

lblHello ->setPosition(300,500);

Now build the project by pressing F6 key, Ctrl+B keyboard shortcut, or going to menu "Build -> Build Solution". The build process might take a minute.

Once the build is finished, run the project by pressing F5 key or clicking the tiny play icon on top.
The result is shown below.

cocos2dx-helloworld-running
Fig 3: HelloWorld program running

The init method will look like the screen shot shown below after we finish editing.

Fig 4: Final code snippet

Bonus

Once you're done with the main subject of this post, try adding this code right before return true;

//bonus

auto actMove = MoveBy::create(1.5, Vec2(100, 100));

lblHello ->runAction(actMove);

Build & run and see what happens :)

For other articles in this series, please visit

Wednesday, February 25, 2015

Cocos2D-X Game Development in Android Studio

When we create a new Cocos2D-X project using Cocos2D-Console, an Eclipse project is generated by default. The problem is that Google has dropped support for Eclipse ADT, they're pushing IntelliJ Idea based Android Studio with full force.
In this post I will show you how to convert your Cocos2D-X Android Eclipse ADT game project into Android Studio project, how to configure NDK and JNI in Android Studio to run your game from Android Studio directly.

Note: A reader recently commented that he was using Cocos2D-JS on Linux, this article was useful in resolving his problem. Things tend to get buried in comments section, that's why I am putting an important fact inside the post. I highly recommend you to read the comments section, it has got some useful bits of information.

Important

 Do take a look at the previous article in this series, the link is given below. This article explains important concepts like setting important environment variables like NDK_ROOT. The same article also shows you how to compile a project in now obsolete Eclipse ADT. A quick look will be helpful I hope.

Compile Cocos2D-x Project For Android Game Development


Create a new Cocos2D-X Project

First of all, let's create a brand new Cocos2D-X game development project, you may skip this part if yo already have a project. Run the Cosos-Console command.
cocos new -p com.honesitconsultancy.indiegame -d "D:\Cocos\Projects" -l cpp "IndieGame"

Fig 1: Cocos-Console New Project


Once the command line operation is done, you will have a new project folder named "IndieGame" on path "D:\Cocos\Projects\". The folder will look like the screenshot below:

Fig 2: Cocos2D-X New Project Structure

1. Import Android project into Android Studio

Run Android studio, if you already have a project opened close it. Otherwise, it will show the project selection dialog exhibited below:
Fig 3: Android Studio New Project Dialog


I've blurred the project names on left to hide names of a few client project I'm providing consultancy through oDesk.


  1. Click on the item "Import project(Eclipse ADT, Gradle, etc.)
  2. Project selection dialog will open. Browse to your game path, in my case it was "D:\Cocos\Projects\IndieGame\". The sub folder "IndieGame" was not being shown by the user interface, I had to click the refresh button.
  3. Select the Android project generated by Cocos-Console command line. The name currently will be "proj.android". The refresh button is highlighted by a circle, the Android project is shown by an arrow.

Fig 4: Select Project Dialog Android Studio

The next dialog will ask for a path to save the new Android Studio project. You must keep the new project alongside the other projects.
Fig 5: Android Studio Select Destination Path

  • Change the name of project folder to proj.androidstudio and click Next

You'll see a few options on next screen. Android Studio is trying to help you, we don't need it though. check all 3 check-boxes reading "Replace jars with dependencies, when possible"; "Replace library sources with dependencies, when possible"; and "Create Gradle-style(camelCase) module names" on the next screen, as shown below. Click Finish button.

Fig 6: Android Studio Import project from ADT Options


The Android Studio will ask that the directory does not exist and do you want to create it? Click "OK" and a new directory/folder will be created for you.

2. Add NDK to your project properties

Android Native Development Kit(NDK) path will be added to your the "local.properties" Android Studio project file, it is an auto generated file.
Click on the proj.androidstudio name on top left of your screen, and select local.properties as shown in the screen grab below.
Android Studio Open local.properties


By default this file will contain the path to Android SDK, don't mess with it. We need to add a line of text below the existing SDK line.
The format of the NDK entry will be ndk.dir=%Path of your NDK directory%
In my case, the precise statement is shown below:

ndk.dir=D\:\\cocos\\android-ndk-r10d-windows\\android-ndk-r10d

Important: Windows users must modify the path string and add backslash in following places:
  • Right after the drive letter
  • Right every backslash in the path
Save the local.properties file and close it.

3. Modify Build.Gradle to handle JNI

  • On top left, click proj.androidstudio
  • Click IndieGame(or whatever project name you've chosen)
  • Click build.gradle




Add a new line right after closing bracket } pertaining to defaultConfig section.
Add following magic lines down there:

sourceSets.main
            {
                jni.srcDirs = []
            }
The sourceSets.main line will enable use of Java Native Interface or JNI in your project. JNI does same thing as Interop on Microsoft .Net.









Running your Cocos2D-x Indie Game on Android Devices

We need to perform just one more step before hitting the build icon.

  • Open command prompt.
  • Change directory to the location of your project.
  • Once there, type following cocos-console command

cocos compile -s ".\proj.androidstudio" -p android --ndk-mode debug

Be Patient: I got a system with Core-i7 CPU and 8 GB RAM, my system takes about a minute to compile the code. If someone's got a slower/older system, getting a cup of coffee while the code is compiling is a good idea.

4. API Level 9 Error

By default the Cocos-Console generates a project with Android SDK level 9. Its an old platform, if you don't have installed on your system Android Studio will show an error. To fix the problem, you'll need to modify the Android SDK level values in your game Manifest.xml and Gradle configuration file.

4a. Changes in Gradle Build File


  • Luckily you would already have the Gradle file opened to make half of the changes(otherwise follow Modify Build.Gradle to enable JNI section above). Find the defaultConfig section shown below and change values accordingly. I got platform 14 installed so I changed it to 14.


defaultConfig {
        applicationId "com.honesitconsultancy.indiegame"
        minSdkVersion 14
        targetSdkVersion 14

        ndk {
            moduleName "cocos2dcpp_shared"
        }
    }


  • Change the compileSDKVersion value as well. By default it was 10, I'll change it to 14.
  •     compileSdkVersion 14
Save the file.

4b. Changes in Android Studio Manifest File

Now open the Manifest file, you can do so by clicking project name hierarchy as shown by the thunderbolt in the screen grab below(proj.androidstudio -> IndieGame -> src -> main). I replaced the arrow, it looked boring :)


We need to change the minSDKVersion property here. We'll change it to 14(or any suitable SDK platform level you got installed).

<uses-sdk android:minSdkVersion="14"/>

After changing the value, save the manifest file. And hit the Synchronize button as well.

Make The Project

Here comes the climax!

Click the "Build" menu and select "Make Project" menu item. You may use shortcut key Ctrl + F9
Again, just stay calm and wait for a while as the project is being make.
Click "Run" button, or use shortcut key Shift + F10.

Note: I assume you've already configured a phone or emulator to work with your Android Studio, how to do so is beyond the scope of this article.

Once your blank Cocos2D-X game project starts running following screen will be displayed by default:
Please feel free to post comments on this blog, do check other articles in this series. You may contact me via e-mail using the form on left top of this post.
I will be posting more stuff, you better subscribe to the mailing list.

Monday, February 23, 2015

Compile Cocos2D-x Project For Android Game Development

honest-it-consultancy-game-development-android
My first Cocos2D-X game development project Running on Android Mobile

The code we write in C++ is used as it is to generate a build for Android platform using the tools supplied by Cocos2D-x engine. The platform dependent layer is very thin and lightweight, and you don't have to mess with it to develop Android game.

Compile Cocos2D-x Project using NDK & Cocos2d-Console

First of all we need to compile our Android project using Android NDK(Native Development Kit). You will need to download Android NDK first as mentioned here. Once you have the Android NDK.

Sunday, February 22, 2015

Cocos2d-x: How to create a new project(Android, iOS, Windows)

cocos-2dx-project-structure
Fig - 1: An empty Cocos2d-x Project
Once you have all the pre-requisites installed on your Windows PC, we are ready to use one of the best cross platform indie game development engines.
A new project is created through a Python script, remember Python was listed in the list of software we need to install beforehand. To read about list of prerequisites needed to create cross platform games with Cocos2d-x is visit following link:


Fig - 1 shows a new empty Cocos2d-x project. You can see it already contains projects for iOS, Android, and Windows(win32).

How to create new project using Cocos2d-console

Well that's just a fancy name for a Python script. Even the file name is different, "cocos.py".
When you install Cocos framework, the path is automatically configured and you can type "cocos" anywhere on command prompt.
This script file is present in Cocos framework installation folder(FYI). In my case I installed it on path "C:\Cocos". Full path of Cocos2d-x is given below:

C:\Cocos\tools\Python27\Tools\Scripts

The how-to guide present on Cocos website tells a different path, I couldn't find it on my PC and discovered this by just looking around for .py files.
Launch command prompt, and type the command given below








cocos new -p com.honesitconsultancy.indiegame -d "D:\Cocos\Projects" -l cpp

Important: Please create the project path folders before running the command, i.e. the path specified through -d switch.
cocos-2d-new-project-screenshot
Fig-2: cocos2d-x console screenshot

To learn more about the Cocos2d-X console, type following command to get the list of Cocos2d-x console options

cocos new --help

A screenshot of the help description is shown below
cocos2d-studio-help
Fig-3: Cocos console help 

How to write Cocos2d-x code using Visual Studio 2012

Go to the path which you specified in command line for creating a new project. Please refer back to Fig-1.
Open the folder "proj.win32", this folder will contain a solution file which will be named "indiegame.sln" or "MyCppGame.sln" in my case.
cocos-2dx-win32-project-contents
Fig-4: Cocos2d-x new Windows(win32) Project contents
A screenshot of how the project looks inside Visual Studio is given below:
cocos2dx-visual-studio-inside
Fig-5: Inside Visual Studio 2012 Cocos2d-x C++ Project

Where will you write the code?

To start with we will put the code inside HelloWorldScene.cpp file. If you're going through the programmer guide doc, try your practice code in method

bool HelloWorld::init()

Here's a short video demo to show off and make you jealous :D


For places with Youtube blocked, Vimeo video

Cocos2dx Visual Studio Helloworld Demo from Naeem Akram on Vimeo.

What about Android, iOS and other platforms?

First of all, refer to Fig-1 you will see there's a folder "Classes". This folder is utilized by Cocos2d-x framework to generate object files/dlls which are then used by all projects. Any change you make in Classes folder will be systematically used in Android, iOS,Windows, and Windows Phone Project.

Just yesterday I figured how to build and run a Cocos2d-x game project on my Android phone. In a few days I will write another blog post about how to run your Cocos2d-x indie game project on Android using NDK and Eclipse.

Stay with me on this journey to learn game programming, and feel free to communicate/ask questions. You may post a comment or send me an e-mail through the form on right side of page.
Follow me on Twitter: https://twitter.com/Na3mAkrm

Stay tuned for more!

Tuesday, February 17, 2015

Getting Started With Cocos 2D using C++ on Windows, What To Install?

cocos-2dx

Cocos 2d-x is a very popular cross platform game development engine. C++ is the programming language most university/college students now right out of college, that means maybe they can create a game while studying in college! Unity 3D, another game development platform is taking the market by storm but still many professional developers prefer Cocos 2D. My friend Mudaser recommended using Cocos-2D instead of Unity, he's got several years of game development experience so I followed his advice.


Getting started with Cocos was not very easy to be honest, it took me several hours to figure out which way to go. They got documentation on their website but it was not very helpful.

Tools to install for developing Cocos 2D C++ games on Windows





  1. Cocos Studio - Download
  2. Cocos Framework - Download
  3. Python - Download
  4. Visual Studio 2012 - Download
  5. Windows Phone 8 SDK - Download
  6. Java Development Kit (JDK), for Android version of your game - Download
  7. Android SDK, or Android version of your game- Download
  8. Android Native Development Kit (NDK), for Android version of your game - Download
I compiled this list after spending some time and I believe it is going to be helpful for people.

Tip

Most of the stuff can be downloaded after installing Cocos Studio on your system through the Cocos Store tab shown below. I recommend downloading Cocos Studio first.


cocos-store

Are you struggling with Cocos 2D-x game engine, let's learn together!!!

Feel free to get in touch with me through the "Contact Me" form on left side, you may comment the blog post as well.

What is Cocos Studio then?

It is not the place you will write your code in. Instead, it is a place where you create scene files which are then used by a programmer.
Your project will have various folders containing projects for Win32, Android, and Windows Phone as well. You will open appropriate project folder and modify files in there.

Why Python?

Not everybody loves PowerShell, open source community has got a much older and well tested alternative i.e. Python programming language. It is used to perform various tasks like creating projects etc. You will need to install it as well, no way around it ma techie.

Where do you write the Cocos2D-X game code?

On a Windows PC, the C++ game code is written in Visual Studio 2012. On a Machintosh, XCode is used to write and edit code. Same code can be reused as it is to generate an Android and iOS version of your game. You will need to provide graphics for major size changes, but don't worry about that for now.

Is it possible to create a Cocos2D-X game without C++?

Yes, it is possible to write HTML5/JavaScript based games, the tools are not covered in this blog post.
Lua scripting language is also supported and it can be used to create Cocos2D-X games.

android-os-logoNo direct debugging on Android

Don't just freak out, that's a matter of fact. You can't debug directly from Android devices. That's why its recommended to use Windows Phone emulator on Windows.
There is a good news for Apple iOS developers, they can directly debug their game code from their device. The reason is objective C is a child of C and it supports code written in C++.
On the contrary Android uses a virtual machine to run code, and C++ code gets converted into suitable byte code and back to assembly before hitting the processor.

Friday, February 13, 2015

SQLite Date Time Functions Examples


An SQLite Database table named 'trx_log' contains a string date time field trxDateTime and other fields like trxTargetNumber, trxAmount, trxStatus. A snapshot of table schema is given below, some sample data is also included.

sqlite-android-search-by-year-group-by-month



All fields other than trxAmount are string, only trxAmount which represents a superficial transaction amount is a number type.

SQLite Year calculation function

Sqlite provides strftime function to extract specific part from a date time string. We will use it to find out year in SQLite. Sample SQL query code is given below:

SELECT strftime('%Y', trxDateTime) as sYear 
FROM trx_log
This query will return four rows of data (based on snapshot shown earlier) each containing 2014 and labeled sYear.
The first parameter here is a format string, in this format string %Y represents a year.
Please notice that the Y here is a capital letter.









How to make where clause based on year in SQLite SQL?

You will get the year part of a date using strftime function and then make a decision based on that. For example, if we want data from year 2014 we can use following query.

SELECT strftime('%Y', trxDateTime) as sYear 
FROM trx_log WHERE  strftime('%Y', trxDateTime)='2014'  

Same technique can be used to group data based on year as well. Use of this technique to group by data is well demonstrated in following post:
http://aprogrammersday.blogspot.com/2014/02/group-by-month-or-year-and-sum-in-sqlite.html

SQLite month calculation function

The strftime function can also be used to find out the month section from a date time string column. The exact SQLite SQL query for finding the month is given below

SELECT strftime('%m', trxDateTime) as sMonth 
FROM trx_log
The query mentioned above will return four rows of data (based on snapshot shown earlier) containing 02 as month. It is worth mentioning again that the m in this case will be a small letter. Capital M will cause the SQLite engine to return minutes instead of month.

How to make where clause based on month in SQLite SQL?

It is very easy to use a month field as basis of a where query or group by operation in SQLite. We will use the same strftime function again. An example SQ< query is shown below.
SELECT strftime('%m', trxDateTime) as sYear 
FROM trx_log WHERE  strftime('%m', trxDateTime)='02'  
Please note that SQLite will return months between January to September as two digits where the leading digit will be 0 always. For months December to 

SQLite day calculation function

How to find a day from SQLite table using SQL? Use the strftime function and supply appropriate formatting string in first parameter. The SQLite SQL query for finding the month is given below:

SELECT strftime('%d', trxDateTime) as sDay 
FROM trx_log

How to make where clause based on month in SQLite SQL?

You can also use strftime function to filter data and group it by certain values of a specific day. We showed you earlier how to find out the day from a SQLite date field. How to use it for a where operation is shown below:

SELECT strftime('%d', trxDateTime) as sYear 
FROM trx_log WHERE  strftime('%d, trxDateTime)='02'  

Thursday, February 12, 2015

Network Programming Interview Questions C#.Net


  1. Which namespaces are used for TCP/IP network socket programming in C#.Net? AnswerSystem.Net and System.Net.Sockets
  2. An object of System.Net.Sockets.TcpListener will be used to listen for incoming connection requests. Answer: True
  3. Once we call the method TcpListener.Start, our TcpListener object starts handling incoming connection requests. Answer: False
  4. Which class is used to represent a callback or delegate method? Answer: AsyncCallback
  5. IAsyncResult.AsyncState contains the original TCPListener object which was passed as parameter to BeginAcceptTCPClient method call. Answer: True

  6. The Windows ____ can stop your code from using network, you better disable it for a while. Answer: Firewall
  7. An object of which class is used to handle client communication? Answer: TcpClient
  8. NetworkStream.BeginRead method will return data in ____ array. Answer: byte
  9. TcpClient.Client represent an object of which type? Answer: Socket
  10. Encoding.ASCII.GetBytes is used to convert text to bytes in order to send it over network. Answer: True
  11. A TCP/IP socket server needs to perform following network operations. Answer: Listen for incoming connections, send data to clients, receive data from clients.
Learn more about Socket and network programming in C# .Net in my Udemy course:
TCP/IP Socket Programming For Coders & Students 





Demo TCP/IP Sockets Read and Write in C#, Free Udemy Course from Naeem Akram on Vimeo.

Tuesday, February 10, 2015

Fix Parse 101 Error object not found for update

parse-com-cloud-screenshot


Parse.com is one of leading cloud service provider. I implemented push notifications in an ODesk based freelance client's app last year. They returned with some more work (I love returning clients!) and a request for updating the old app to latest Parse.com APIs. Latest Parse API version number is 1.8.2 at time of this writing.

I opened Parse.com documentation and started following it for sake of update. Several old methods have been deprecated from the API. For example the method
        PushService.subscribe();

Google's Mindset about adopted children Mozilla Firefox & Eclipse IDE

I had to switch from Eclipse IDE to Android Studio which is the new Google darling for writing code. Google did the same thing with Mozilla Firefox browser a few years back, they kept feeding Firefox to fight bloody battles with Microsoft Internet Explorer while they were conceiving their own child 'Chrome'. Once their own thing was in good shape, they kicked the adopted open source child out of their home.







How to fix Error object not found for update code 101

While following the instructions in Parse.com documentation I pretty much hit the wall with error 101. I then downloaded their sample application and in there I found some lines of code which were not mentioned in the docs. Adding these lines to my app code (application class onCreate) fixed things right away. The magic lines of Java code are given below:

ParseCrashReporting.enable(this);

// Enable Local Datastore.
Parse.enableLocalDatastore(this);

// Add your initialization code here
Parse.initialize(this, "*******", "******");

ParseUser.enableAutomaticUser();
ParseACL defaultACL = new ParseACL();

ParseACL.setDefaultACL(defaultACL, true);

// save the installation
ParseInstallation.getCurrentInstallation().saveInBackground();

I believe my readers will have enough sanity to avoid using * strings as parameters to initialize call.

Side note, more than one Parse.com apps

I also noticed later that I already had a parse.com app installed on my phone. This was the older version of the app which I was trying to update. So, I removed the older app as well just to get over with any confusion.

Bonus, a cool code image

Last but not least, here's a bonus C code image for you. I got it from pixabay, its a royalty free image. 

source-code-code-programming-c