Deploy Cocos2dx Project to Native Android on Mac



Deploying a game to different platforms always causes various issues. Even though Cocos2dx platform already helps us make those steps easy, sometimes unexpected errors still happen. In this blog, I summarize the steps of deploying Cocos2dx project onto native Android platform.

Step one: Download ADT or Eclipse which is used to run Android project (https://developer.android.com/sdk/index.html?hl=i)

Step two: Download NDK which is used to implement part of your app in native languages such as C or C++ (https://developer.android.com/tools/sdk/ndk/index.html)

Step three: Download Apache Ant which is a Java library and command-line tool that help building software. (http://ant.apache.org/bindownload.cgi)

Step four: Download Cocos2dx if you have not downloaded it yet. (http://www.cocos2d-x.org/download)

Step five: Navigate to Cocos2dx folder (I am using Cocos2dx 3.3rc0 for this blog)
Step six: Step up Cocos2dx by typing ./setup.py



Step seven: Start setup NDK_ROOT path and Apache ANT_ROOT path
(Notify: try to use NDK version r10c instead of r10, because r10 probably have bugs, so it cannot deploy successfully every time. )














Step eight: Execute command: "source .." to make added system variables take effect. (Just type whatever terminal displayed in quotation)
Step nine: Create a new Cocos2dx project by typing following command line in your terminal. (-p is package name, -l is language, -d is project destination folder)




Step ten: Open your created Cocos2dxAndroid project. Then use terminal to navigate to proj.android. And build android native project by typing ./build_native.py



Step eleven: Open native Android project in ADT, and build and run. That's it!!!

However, that is the way you setup and run HelloWorld cocos2dx project. When you start writing your own classes in Xcode and rebuild it, you will probably get errors when you try to run it in ADT or Eclipse. In order to solve this, you need to do some extra steps.

Step one: right click your Android project in ADT or Eclipse -> properties -> c/c++ build -> Environment -> Add..
You need to add NDK_ROOT into your environment.


















Step two: After you generate your own classes, you need to tell ADT where are they. Expend your Android project -> jni -> Android.mk. Then add those new classes under LOCAL_SRC_FILES: by following its format







Step three: Then you should be good to build and run. But you need to make sure to run on real device instead of emulator since emulator does not support OpenGL ES.

... Still not end ...
When you next time open ADT or Eclipse, you may get errors like "null pointer.." or "c/c++ index.." that makes you cannot even build the project. In that case, open proj.android file and delete .cproject file (that is a hidden file, so if you cannot find it, just make sure you show the hidden file by typing "defaults write com.apple.finder AppleShowAllFiles YES" in terminal and relaunch the finder).

If you still getting some errors, try the following things:
1. Make sure update "Android Support Repository" and "Android Support Library"
2. Make sure cocos2dx.lib file set to the correct path. The default may wrong.
    Right click Android project -> properties -> Java build path -> source -> PROJECTNAME/libcocos2d and then change the path to the correct one.


















How to install PostgreSQL on Amazon AWS EC2

The Elastic Compute Cloud (EC2) of the Amazon Web Services (AWS)  further leveled the technology start up play ground. Now, a group of ambitious founders can develop their web services and on a laptop and rent a AWS EC2 server and push their service on there and the whole world will have access to it.



TalentBits is part of the AWS EC2 user group. One very commonly asked question about setting up your environment on EC2 is how to set up PostgreSQL as it is one of the most commonly used open source SQL based database.

Step one: ssh to your AWS virtual box.
Upon registering the service, you will create an AWS instance you can control. Add your ip address to the security group with SSH protocol. Then you can follow the instruction provided to ssh into the AWS virtual box.

Step two: Switch to root role



Step three: Create a dedicated user for postgres. Postgres will not allow certain actions to perform under root.




Step four: Create a folder for actual data




Step Five: give pguser the permission of that data folder



Step Six: Install PostgreSQL



Step Seven: Edit the cluster path, make sure they aline with the folder you created for data






Step Eight: Switch to pguser role we just created




Step Nine: switch back to root and start pg service





Step Ten: Add it to auto start list




You should have successfully installed PostgreSQL service on the AWS box

Summary of Grand Central Dispatch (GCD)



Summary of Grand Central Dispatch (GCD)
   Grand Central Dispatch (GCD) is a library that provides support for concurrent code execution on IOS and OS X. Before GCD, developers were mainly using tools like NSThread or PerformSelectorInBackground to implement simple multithreading applications on IOS or Mac. After GCD got released, Apple also published another higher level Objective-C based API called NSOperationQueue since GCD API is based on C. It makes life much easier for Objective-C developers.

The Graph below summarizes the evolution of the tools for multithreading application development from Apple.
With newer and better tools like GCD and NSOperationQueue, one should never want to use NSThread or performSelector to create a multi-threading application. The link below details the reasons.

http://stackoverflow.com/questions/19500820/gcd-vs-performselectorinbackground-performselectoronmainthread

Within GCD, there are different queue types and their relationship is mapped below.


Below are some examples of how to use each queue in GCD to solve specific concurrent programming issues.
  1. dispatch_queue_create: it can create custom queue
          dispatch_queue_t q = dispatch_queue_create(“com.example.myQueue”, NULL);
          NULL means serial, 0 means concurrent. Better to use DISPATCH_QUEUE_CONCURRENT and DISPATCH_QUEUE_SERIAL instead of 0 and NULL.

  1. dispatch_set_target_queue: change the priority of the queue
dispatch_queue_t q_1 = dispatch_queue_create(“com.example.myQueue”, NULL);
   dispatch_queue_t q_2 =  
dispatch_get_globale_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0);
   dispatch_set_target_queue(q_1, q_2); // set q_1 same priority as 1_2
  1. dispatch_after: Add task into queue after certain amount of time
dispatch_time_t time = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC));
dispatch_after(time, dispatch_get_main_queue(), ^{
NSLog(“wait at least 2 seconds to put into queue”);
          });

  1. dispatch_group_t/dispatch_notify
dispatch_queue_t q = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0);
dispatch_group_t g = dispatch_group_create();
dispatch_group_async(g,q,^{});
dispatch_group_async(g,q,^{});
dispatch_group_notify(g,dispatch_get_main_queue(),^{});

  1. dispatch_barrier_async: make sure at the moment only one block is currently execute
dispatch_async(queue, ^{ // block for reading});
dispatch_barrier_async(queue, ^{ // block for writing });
dispatch_async(queue, ^{ // block for reading});

  1. dispatch_apply
dispatch_apply(5, queue, ^(size_t index){ });

  1. dispatch_suspend/dispatch_resume
dispatch_suspend(queue);
dispatch_resume(queue);

  1. dispatch_semaphore_wait: compare with barrier, semaphore can use to control for a small portion of the source code that has smaller granularity than serial dispatch queue or dispatch_barrier_async function.
dispatch_semaphore_t  s = dispatch_semaphore_create(1);
dispatch_async(queue, ^{
dispatch_semaphore_wait(s, DISPATCH_TIME_FOREVER);
// task you want to finish before move forward
dispatch_semaphore_signal(s);
});

  1. dispatch_once: used often in singleton design pattern
static dispatch_once_t token;
dispatch_once(&token, ^{));

Run Cocos2dx Projects on IOS Devices


   If you are first time trying to run a cocos2dx project on IOS devices, then probably you will get annoyed. However, if you do not want to spend time to read and implement the following three steps, then the easiest way is to update to latest version which is version 3.3beta0. After that, all you need to do is to specify the correct bundle identifier, the correct team, and the correct provision file. 
   
But if you have other versions including the stable ones, you have to go through the following three steps:

  1. set the Architectures to $(ARCHS_STANDARD_32_BIT) that means to turn off arm64
  2. set Build Active Architecture Only to NO.
  3. set IOS development target to 5.0
Then you would be ready to GO!

HTML CSS Layout: How to center objects?

When we start building the layout of a website, we will always encounter a situation that we want to center an object in a layout. I summarize a few scenarios down here:


1. Horizontally center objects in div

1.1 Description
We will simply use an attribute in CSS: text-align. This method can be used to center texts, images, spans, etc, but not div.

1.2 CSS code:

.horizontal_center {
  text-align: center;
}


2. Vertically center one object in div

2.1 Description
To make the objects center vertically in a div, we will use another attribute in CSS: line-height. This method can only be used to center one line of text, if you have two separate lines of text, this method will not work. This also does not work for div, just for a line of text, an image or a span, etc.

We will use the height of div for the line-height.

2.2 CSS code:

.vertical_center {
  line-height: {div_height};
}


3. Horizontally center objects in div using margin-left, and margin-right.

3.1 Description
This method can be only used when the width of the object is fixed, like 100px.

3.2 CSS code:

.horizontal_center_using_margin {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}

4. Vertically center div in div

4.1 Description
We will use a wrapper div in this method.So you will finally have 3 div, the outer div one is using outer class; inside outer div, there is a wrapper div using wrapper class; inside wrapper div, there is inner div using inner class. The inner div will be vertically centered.

4.2 CSS code

.outer {
 width: 400px;
 height: 400px;
 background: #99cccc;
}

.wrapper {
 width: 400px;
 height: 400px;
 display: table-cell;
 vertical-align: middle;
}

.inner {
 width: 100%;
 height: 200px;
 background: #000000;
}

Relax and Share


In software building business, we learn new stuff everyday; sometimes we learn it an easy way, other times in a hard way.

Let the experience and wisdom you gain from your past serve for your future. After we deliver a software product to our clients, we will put down what we learned in those projects.

There will be topics on the server design, database design decisions, Android, IOS, web design and general practices of how to build best software for clients.

Those topics will come here to our blog one bit at a time, so together they could be very talented bits. We hope we could learn from those past experiences and we also hope to share them as our contribution to the technology and design community and together we make tomorrow's world better.