Monday, May 12, 2014

Mobile Game Development Talks at So Cal Code Camp

I am only going to do two talks this year for So Cal Code Camp @ UC San Diego. The event will be held the weekend of June 28th and 29th in beautiful San Diego. Even if you are not local, I can't think of a better reason for a So Cal vacation. Remember, this is a free event which features lots of top notch speakers. Here are the descriptions of my two talks.

Introduction to Mobile Game Programming with Cocos2d-x

If we've learned anything from the "Flappy Bird" incident, it is that it is still possible for a free game, from an independent developer to make money, a lot of money. Video games are extremely popular on smart phones and tablets. While the odds are against your game becoming a smash hit, it is still possible to make a fun game which generates a bit of money.

In this two session talk, we will explore using Cocos2d-x, an open source game engine, to build games for all three major smart phone platforms - Google, Apple, and Microsoft. Cocos2d-x is free and it runs on many platforms giving you the ability to port your game not only to the most popular phone platforms but to desktop platforms like Windows and Mac OS X.

In the first session, we will start with the basics. I will show you how to add Cocos2d-x to your development environment. Then we will put together the same simple demo app using Cocos2d-x on all three platforms. Next we will explore CocoStudio, Cocos2d-x's free game development toolkit. With it you can create your levels, animate characters and design your game's user interface.

In the second session, we will put together a simple but playable game. We will write our code in JavaScript and get it running on multiple platforms. I will show how to animate characters and create levels in CocoStudio then use in our game. Plus I will delve into the crucial but rarely included technique of debugging your code.

If you are interested in attending, be sure to register for Code Camp and indicate your interest in these talks. The talks which have more interest get bigger rooms. I've done similar talks to standing room only crowds, while bigger rooms were only half full.

Wednesday, April 30, 2014

Getting Started with Android Development in 2014 - Windows Version

Getting started as an Android developer can be a bit confusing. Unlike developing for iOS or Windows Phone, Android developers have lots of choices. We can choose our development o/s: Windows, Mac, or even Linux. We can choose our IDE: Eclipse, Intellij, or the new Android Studio. We can even choose our device emulators: stick with Android emulator, build one with VirtualBox, or one from Genymotion. Yes, we have a lot of choices and it can be confusing.

So I am going to show you how to set up my PC development environment. I like it because it gives me the best combination of speed and tools to make developing good code easier. Luckily it only consists of three pieces and all of them are free.

Piece Number One: Java SE Development Kit 6u45

There is a bit of confusion in the Android world over which version of Java SE Development Kit we should be using. Java is rarely mentioned on When it is mentioned it usually mention Java SDK version 6. Now if you know anything about Java, you know that version 8 was released recently, so why are we using a version which is two releases behind? Most likely it is related to the ongoing litigation between Google and Oracle.

There are quite a few devs which say they are using Android with Java version 7 and some which say they have it working with version 8. I am too caution however to try the newer versions. I know that version 6 works. So until I hear something definitive from Google, I am sticking with it. Luckily it is still available. Don't fret over the security warnings. The warnings are mainly for servers apps built with Java not for Android apps. Use the link below to get the download. You have to be a registered member of Oracle website, but it is free, save a few emails you will get from Oracle.

Once you have installed it. You must add it to your path's variable and you should also create a Java_Home variable. You should do this before you continue, but don't worry it is easy.

Piece Number Two: Android Studio

Android Studio is still in beta, but it has been stable for me and since it is the future of Android, I recommend using it. Now there are somethings that don't work with it yet, but the only big thing is the NDK. I don't have any idea when Google is planning to add NDK support to Android Studio. The current version of Android Studio is 0.5.7 but it does feel pretty close to finish. It is super easy to install just go to the link below and follow the instructions.

Piece Number Three: Genymotion Emulator

Genymotion is built on top of Oracle's VirtualBox. Unlike Google's emulators it doesn't try to simulate an ARM processor instead, it uses the full power of your desktop's CPU to run x86 code. The difference is amazing. On a decent PC, Genymotion is fast enough to run games. 

Genymotion is free for personal use, but you do have to register. Go to:

To register. They will send a link to your email address in order to confirm it. Click the link and you are in. For Windows machines there is a special installation package which combines VirtualBox and Genymotion together. It is the first one listed under Windows. Be sure to choose it. 

Follow the installation instructions and once complete, you will need to download a few emulated devices. 


Tuesday, April 29, 2014

Understanding Android's WebChromeClient onCreateWindow Method

A complete demo application is on my GitHub account at:

Android's WebViews are pretty easy to use with the notable exception of the WebChromeClient's onCreateWindow. It is called when the webview would like the host application to create a new window. And new is the key. If you don't create a new webview, the call to onCreateWindow will fail, and worse yet, it will fail without exceptions or errors.

I initially had trouble with onCreateWindow. I couldn't seem to get it to work correctly and unfortunately I couldn't find a good working example of its use anywhere on the Internet. So I very carefully read the documentation again and follow the instructions to the letter. My first attempt to use onCreateWindow didn't create a new window, instead I tried to recycle a child webview that was already on the page. It didn't work, it didn't cause an error, and it did create an Intent for the web browser.

In order to get onCreateWindow to work, I created a special layout first. Take a look at main.xml. In it holds both the main webview and a relative layout, mainBrowserLayout, which will hold the child web view once it is created. 

onCreateWindow is triggered whenever the user taps on an <a> tag with the target attribute is set to "_blank". In a browser this would cause the destination link to open in a new window or tab, but since we are in a webview, there is no way to do this without the help of the parent application, hence the called to onCreateWindow and its behavior of launching the browser if the call fails. 

The heart of this application is off course the onCreateWindow method. The first thing it does is remove any current child windows which may still be attached to browserLayout. Then it makes the entire childLayout visible. It is by default set invisible. Next we create a new webview and give it some settings to make it function correctly. I added the new web to browserLayout. Then I do all of the required work to inform the new webview that it will be used to display the new link.

Next we set the webview client. I only implement this method so that I have access to the onPageFinished method. I use this method to read the title of the view, then set that text in mainTitleText TextView. 

To inform the system that our newly create webview will be used for the link's page, we convert the resultMsg.obj into a WebViewTransport, then we call the setWebView with a reference to the new webview. 

The last thing we do isn't necessary but makes things look cooler. We animate the childLayout sliding up from the bottom of the screen. The animation for it and its counterpart sliding down are in the anim folder.

Be sure to check out the complete source code on my GitHub account at the link at the top of the article.