Wednesday, September 11, 2013

iOS 7's Sprite Kit

Apple unveiled iOS 7 in Jun 2013, and recently confirmed that the new iOS 7 is to be staged on 18 Sep 2013. I am not a big fan of iOS7 flat design, but as an iOS developer I love the new OS so much because it gives developers a great tool SpriteKit to write games. Among those new features or APIs of iOS 7, the SpriteKit shall be top one.

Before Sprite Kit, writing Games for mobile needs strong knowledge in OpenGL ES, or build on top of third party game engines, e.g. Cocos2D, Unity, which handles low level OpenGL stuff for developers. It's easier to do games with third party engines, but there is still a substantial hurdle for a normal iOS App developer to write games. However, games are the most profitable category on the App Store, and iOS users love games, people love games. This is why the new Sprite Kit are so welcomed by iOS developers.

I had some experience with Cocos2d, it has a node based objects system together with Box2d and Chipmunk as the physics engine, and CocosDenshion as the sound engine, with all together developers can develop great games, and majority of 2D games on the App Store today are built with Cocos2D.

Apple's SpriteKit embraces a similar nodes system, actions, physics, and sound, all together in one framework, . I have tried some codes with it and found it is insanely simple to use. The framework is shared by Mac OS and iOS, integrated deeply with Cocoa and UIKit. That means games developed with SpriteKit can reuse/share a lot of code between both platforms. Apple has made a great documentation for the framework called 'Sprite Kit Programming Guide' and Apple is also very kind to provided a 'code explained' sample project called 'Adventure'. The sample project is coded for both Cocoa and iOS, and uses most of the features of the SpriteKit.framework. Developers can start to build games after finish learning the sample project.

screen capture of Adventure

The new Xcode 5 has also embedded some cool function to support SpriteKit. I have noticed that it has a built-in particle editor that is so simple and easy to use. Changes can be previewed at real time. Besides, the new Xcode also handles atlases for developers. Developers just need to put all images in a folder with special name, and the XCode will automatically create atlases for them during compile. Specially, to use any sprite from Altas, developers don't need to write any special code, just use it as a standalone image, call it with the name of the image. People used to edit particles and make atlases with third party tools when using Cocos2D.

At this point, I am so excited about this new framework and so looking forward to making games. I think Apple is ambitious for Games, haven't mentioning that there is another new important Game related framework 'GameController.framework' came with iOS 7. GameController is the framework to talk to physical Game Controllers. Just look at the picture below you will get all what I am talking about. The whole thing together will bring gamer's experience to another level up.

Friday, April 12, 2013

UIWebView + javascript

Javascript is a very powerful tool for a web developer. iOS SDK's UIWebView can display a webpage or a html string. Most of time, developers just use the webpage for displaying. Actually, the SDK provides a little but powerful API for us to interact with the Web using javascript. It is :

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script

From this method, we can pass in a string of javascript, and get return as as string. I am going to demonstrate some of the typical uses of this method.

The HTML code

the html code looks as following. style, div,p, script, those are typical elements that an usual html page has.

        font-size: 15px;

<div id="pageWrap">
    <h2 id="demo-title">Demo Title</h2>
    <p>Demo text, just some dummy text here. Demo text, just some dummy text here. 
    Demo text, just some dummy text here. Demo text, just some dummy text here. 
    Demo text, just some dummy text here. Demo text, just some dummy text here.
     Demo text, just some dummy text here. Demo text, just some dummy text here. 
     Demo text, just some dummy text here. Demo text, just some dummy text here. 
     Demo text, just some dummy text here. </p>
    function testing(){
        alert('OK for Testing');
    function getSum(x){
        return x+100;

The Objective-C code

The objective-c code looks as following. we can see that the html is loaded from a local file.

  1. fontSizeChange: is the method to change the page text size adjust, triggered by the UISlider. We just passed a string of javascript, and not interested with the return.
  2. showAlert: is the method triggered by the UIButton with title 'Show Alert'. Here the js string we passed in is actually a function call. The Alert title is related to the what we gave for baseURL in [theWeb loadHTMLString:theS baseURL:base];
  3. getjsFunctionReturn: is the method triggered by the UIButton with title 'Get Return'. In this methods, we are calling a js function with a input integer 3, get back 103.

- (void)viewDidLoad
    [super viewDidLoad];
    currentFontLbl.text=[NSString stringWithFormat:@"%d%%",scale];
    NSString * path=[[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    NSString * theS=[NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
    NSURL *base=[NSURL URLWithString:@""];
    [theWeb loadHTMLString:theS baseURL:base];

- (void) webViewDidFinishLoad:(UIWebView *)webView{

- (IBAction)fontSizeChange:(UISlider*)sender{
    currentFontLbl.text=[NSString stringWithFormat:@"%0.f%%",sender.value];
    NSString * jsString=[NSString stringWithFormat:@"document.getElementById('pageWrap').style.webkitTextSizeAdjust='%@';", currentFontLbl.text];
   [theWeb stringByEvaluatingJavaScriptFromString:jsString];

- (IBAction)showAlert:(id)sender{
    NSString * jsString=@"testing();";
   [theWeb stringByEvaluatingJavaScriptFromString:jsString];

- (IBAction)getjsFunctionReturn:(id)sender{
    NSString * jsString=@"getSum(3);";
    NSString * returnS=[theWeb stringByEvaluatingJavaScriptFromString:jsString];




Source code can be downloaded at: Link

Sunday, March 24, 2013

Some Tips for using Apple's Devices

iOS: Double click Home Button

When you double click the physical 'Home' Button of your iPhone, the background 'running/idle' Apps will be brought up. Then, you long press any of those small icons; you will see little 'close' buttons. Most of time, you will surprisingly see a lot of 'running/idle' Apps here. Close them to free up some memory for the forefront App. There is another tip here. It supports multiple fingers touch, which means you can use 3-4 fingers to tap this area to speed up closing them.

iOS: Lock Orientation Change

Same as above, double click the physical 'Home' Button of your iPhone, scroll to the left until you see the following. Click the left most icon, which is the lock orientation button.

iOS: Quick Language Switch

Most of people just know click and change language. Change one by one click. When you press and hold, you will see the following. Hold and move your finger to the language you want and release. Doing so, you've got the language selected.

Mac: Resize Bar Icons

It is really difficult to find, if you've never been told. Look at the red highlighted spot. You know what to do. Try it!