Matt: I worked with Nick for the last 3 and a half years in Shanghai and in that time I learned so much from him, about design, about business, and about life. He took huge pride in his work, and in the company he had helped to build.

After cycling his way into the office in the Shanghai summer heat, Nick would stand in front of the air-conditioner, hair flying in all directions, trying to cool down. He would be the voice of reason and of calm.  He would frustrate and delight us. He would argue for hours about the difference between Helvetica Light Bold, and Helvetica Bold Light. He would go to faraway places and return with oddly-tasting gifts, but his greatest gift was the happiness he brought to everyone who met him. Shanghai and ReignDesign will never be the same without him.

Stephen: I first met Nick in 2007, shortly after I arrived in Shanghai. Like anyone who met him, we immediately hit it off. One thing I'll always remember is when I first heard him speak Chinese - I was in complete awe. Back then, I could barely say 'ni hao' and apart from Chinese TV personality "da shan" I had never heard a foreigner speak Mandarin so well. I had to ask: "How did you learn to speak Chinese like that?!" His advice stuck with me: "Just speak!! And don't' be afraid to sound stupid. You're *going* to sound stupid. But you'll get better."

Nick will always be remembered to me as the person who immediately lit up any room he entered, and who always made everyone feel welcome and a part of something big. He was never without an interesting or funny story to share, and was one of the most passionate and enthusiastic people I've ever known. I feel extremely fortunate for having known Nick, and he will always be an important part of my life.

Thinkey: I just can not believe such a sunny, funny and optimistic guy left us in such a sudden way.

I still remember the first time we met. On the game we played Nick had to perform Furongjiejie. He didn't like to do that. But when he began, he tried his best and performed so seriously, that delighted all of us and lead to a big laugh. At that moment, I said to myself the man who tries so hard in a game will surely make his place on anything he want to do.

I still remember the talks about career and ideal we had on MSN. He was quite busy in that period. But he talked to me so patiently to help me to make sure what kind of things I really want to do. He told me to take my time to do whatever I like, since that's my life. So, Nick, take your time to do whatever you like, that's your life!

Anna: Nick was the person who got me to come to Shanghai in the first place. I had no real intention to go to China and it was him who told me about it over the phone in a job interview - which he finished with the sentence: "you would need to come here within 2 weeks." - off i was.

During the time when we nearly fell apart as a team it was him who invested and believed in us first, and started the idea of our own company.

You could see how enthusiastic he was when he got sentimental late at night too, he would always share his ideas then. Nick dared things and inspired me to do the same, to anticipate something positive and dare to go for it. His cheeky sense of humor is a very smart way of showing his opinions although he would deliberately drive people mad angry with it and enjoy it too.

I saw and was around Nick almost every normal day of more than the last three years. And his passing away leaves a big hole in my reality which i find very hard to accept. I have to keep reminding myself that i wont see him again, that he wont be back. He will be missed dearly.

One night Nick described our company as one big flower. This was in the beginning of our new formation in the middle of the financial crisis and he continued the image by saying: "A flower WITH water, all the other flowers are dry these days."

Mark: Nick could teach lessons though laughing.  Not the nervous or sarcastic laugh which can be all too common.  Nick was a man of heartfelt, from the soul, genuine laughter.  The kind that let you know you were heard.  The kind that reminded you not to laugh sarcastically.  And that made you like him instantly.

I didn’t know Nick for that long, but he had a way of reminding you of old friends.  That college roommate who always had a joke.  The opinionated guy in art studio who actually knew what he was talking about.  The high school friend who always got you in trouble when he said, “Wouldn’t it be funny if we ...”  He had a bit of them all.  But he was also his own blend of courage, intelligence, and tenacity which made him so unique.  He will be missed.

Todd: Like a few others at ReignDesign, Nick was the reason I moved to China. I was looking for adventure, perspective, and a challenge - he delivered on all three counts. I will always remember our designer vs. developer bouts of witty banter (okay, maybe no one else enjoyed them) and those late night strategy sessions over a beer. Nick pushed me to prove my big ideas. Stop the talk and just do it.
In our last conversation, the night before he left for the Gobi March, he thanked me for my efforts at ReignDesign. Pig-headed as I am, I was dismissive, telling him we haven’t arrived yet and to save it. I’ll never have the opportunity to truly thank him - for his support, friendship, and enduring trust. He was a good friend to the end. I’ll miss you, Nick.

Not content to sit around in a pub watching the World Cup like some of us, ReignDesign's own Nicholas Kruse is currently participating in the Gobi March, part of the 4 Deserts series of footraces that take place in the "hottest, coldest, windiest, and driest places on earth."

The Gobi March spans 250km over seven days, and takes place across China's Gobi Desert.

Some quick facts:

• Temperatures for the Gobi March (China) can vary greatly – in 2010 average temperatures will be about 10°C / 50°F on the early part of the course and 35-40°C / 95-104°F on the later stages.
• Competitors come from more than 20 countries with roughly 1/3 from North America, 1/3 from Asia and 1/3 from Europe.
• The fastest completion time is around 25 hours and the slowest around 80 hours.
• The average backpack weighs 20 lbs (8-9 kilograms).

You can check out daily updated coverage of the competitors' progress here.

Best of luck, Nick!

Let's review the 3 tiers used in modern frontend web development. First, HTML is used to mark up semantic content. It provides meaning and structure to your content. Then CSS is used for presentation. It determines how your content appears: the colors, fonts and positioning. Finally, Javascript is layered on top for behaviour: allowing the user to interact and modify the content in interesting ways.

You've probably heard a lot about HTML5 recently. A lot of the talk has been around the new <video> tag. People are excited because for the first time, it will be possible to play video natively in the browser without plugins like Flash Player. Of course there's still a lot of discussion about which codecs will be supported. WebM? h264? Ogg Theora?

But there's so much more to HTML5 than the <video> tag.

Many other  new tags have been introduced which can add extra semantic structure to your HTML pages.  For example, <section> can be used to mark up distinct sections of your document, <nav> contains primary navigation, <aside> can be used for content like sidebars and pullquotes, <time> can be used to mark up dates and times so they can be easily parsed by computers.

Of course you were always able to use <div>s and <span>s to mark up your content, but the new elements promote more semantic, cleaner code with less need for cryptic id and class names.

Here's a sample HTML5 page.

It should look pretty familiar if you've worked with HTML5 before. Notice the new short DOCTYPE. We still have the familar <head> and <body> tags. We're using some of the new elements in the body. Let's dive deeper and take a look at another example.

This is a completely valid HTML5 snippet.

Yet, I can't help feeling that something is missing. There's something I can't quite capture using this markup. Something that's very difficult to express using existing HTML.

Of course, the problem is that Zapata's isn't a very classy bar. But how can I express that semantic meaning using HTML? I could try using <em> tags.

In most browsers, that will make the text italic. But that doesn't seem right, it's not clear why I'm emphasising the text. Perhaps it's because I really do like Zapata's. Now, thanks to HTML5, we have a solution. I simply mark up the text using <sarcasm> tags.

This is really great! Now it's explicit that the marked up text is sarcastic. And, because we're using semantic HTML, we can use CSS to easily style the presentation of our sarcasm. For example, here's a quick stylesheet which will make any sarcastic text italic, red, and a large font size.

And this really works! Here an example of the HTML5 snippet rendered in Google Chrome using this stylesheet. Now it's really easy to see that I'm being sarcastic.

This is just the beginning. We can take advantage of new features in CSS, like CSS3 Speech stylesheets to provide greater accessibility for users with visual impairments. A blind user using a compatible screen reader can be served a stylesheet like this:

Now you can ensure that any text marked up as <sarcasm> will be spoken with a particular voice, stressed, and with a subtle sound effect played afterwards just in case.

But there's a problem. And the problem is Internet Explorer.

As you can see, when I render the previous example using IE, no styling is applied. In fact, IE doesn't recognise the <sarcasm> tag, or any of the new HTML5 tags. They are not created as DOM elements, and can't be targeted by CSS or Javascript.

Luckily, there's a solution.

If we use Javascript to create one dummy <sarcasm> node in the document, that's enough to trick IE into recognising <sarcasm>. This works in IE8, IE7 and even IE6. Let's see how it works:

We're using conditional comments to hide this from browsers other than IE, then creating one dummy sarcasm node. Now, if we load a page containing <sarcasm> in IE, our styling is applied!

Now we've nailed cross-browser support, the opportunities are almost endless. For example, it takes only one line of code using jQuery and Greasemonkey to automatically replace any sarcastic comments with a video of Rick Astley.

And just think how useful it will be once other sites start using <sarcasm>. It will make online communication far simpler. We'll be able to tell easily when politicians aren't telling the truth.

So, I encourage you to go out and spread the word. Start implementing <sarcasm> on your site. Lobby the W3C, the web's governing body, to make <sarcasm> part of the official HTML5 spec.

Know that we are not alone. Gianni Chiappetta is someone else who appreciates the importance of <sarcasm>. He sent a tweet to the W3C proposing <sarcasm>:

If you'd like to talk more seriously about what HTML5 web applications can do for you and your business, do get in touch with ReignDesign!

Last time we talked about creating a simple menu in cocos2d. This tutorial will show you how to use CCMenuItemToggle to create a simple sound on/off button using images to represent the two states.

Create a new cocos2d application, or use the application from the last tutorial. We'll need to use some images for the on/off states, so add the following images to your project's Resources group:

• soundOn.png
• soundOff.png

In the scene where you would like to place your sound on/off button, add the following code to your init method:

// Sound on/off toggle
CCMenuItem *soundOnItem = [CCMenuItemImage itemFromNormalImage:@"soundOn.png"
						selectedImage:@"soundOn.png"
						       target:nil
						     selector:nil];
 
CCMenuItem *soundOffItem = [CCMenuItemImage itemFromNormalImage:@"soundOff.png"
						 selectedImage:@"soundOff.png"
							target:nil
						      selector:nil];
 
CCMenuItemToggle *soundToggleItem = [CCMenuItemToggle itemWithTarget:self
							    selector:@selector(soundButtonTapped:)
							       items:soundOnItem, soundOffItem, nil];

First, we create two menu items from our sound on/off images. They'll just be used as reference for our toggle item, so we just set our target and selector to nil.

Next, we create the actual CCMenuItemToggle. The target will be self, and we'll specify a soundButtonTapped: method for our selector (which we'll create later). Then, we add our soundOnItem and soundOffItem to the toggle.

Now, we'll create a menu to add our soundToggleItem:

CCMenu *bottomMenu = [CCMenu menuWithItems:soundToggleItem, nil];
soundToggleItem.position = ccp( -90,-120);
[self addChild: bottomMenu z: 10];

Finally, let's just add our method for when the sound button is tapped:

-(void) soundButtonTapped: (id) sender
{
 	// do something… maybe even turn the sound on/off!
	NSLog(@"Sound button tapped!");
}

Build and run, and you should see a sound on/off button that changes state each time you tap it.

Last Friday the ReignDesign team spent the day at the Shanghai Expo. The weather called for rain, but luckily it decided to co-operate with us and hold off. Also, being a relatively quiet day with only 432,000 people in attendance, we got to check out the massive Expo grounds and different pavilions about as crowd-free as one can expect.

Some highlights included:

- Lunch at Sri Lanka's pavilion
- Beer and fries at the Belgium pavilion
- Wine and cocktails at the Chile pavilion
- Mojitos at the Cuba pavilion (started seeing a pattern here...)

Overall, it was a great day and fun was had by all.

The wait for most of the major pavilions was in the 3-hour zone, but that didn't stop us from posing for shots outside our respective countries' attractions!:

Steve outside the Canada pavilion

Fluxa outside the Chile pavilion

Thinkey outside the China pavilion

Anna outside the Germany pavilion

Matt outside the UK pavilion

Mark, Nick, and Todd outside the USA pavilion

Want to join us at our next company event? Become part of the ReignDesign team!

ReignDesign at Shanghai Expo 2010

cocos2d for iPhone is a fast, free, flexible, community-supported and easy to use framework for making iPhone games.

In this first tutorial, we'll discuss how to create a main menu scene with transition to a second scene using cocos2d.

What you'll need:

• A Mac with Xcode 3.0 or higher installed.
• A recent version of the cocos2d framework installed. You can find it and installation instructions here.

Create a new cocos2d project

In Xcode, choose File -> New Project and select cocos2d Application from your list of templates.

Click "Choose", name the project "BestGameEver", and click "Save". If this is your first time using cocos2d, you might want to build and run the default HelloWorld application in the simulator. We won't be needing the HelloWorldScene, so let's just delete both the HelloWorldScene.h and HelloWorldScene.m file.

Next, open up the BestGameEverAppDelegate.m file and look for this line in the applicationDidFinishLaunching: method:

[[CCDirector sharedDirector] runWithScene: [HelloWorld scene]];

This is the scene that will load when your app launches. Change HelloWorld to MainMenuScene, which we're about to create:

[[CCDirector sharedDirector] runWithScene: [MainMenuScene scene]];

At the top of the file, change the HelloWorld import statement to import our MainMenuScene instead:

#import "MainMenuScene.h"

Create the new scenes

What we will be need are scenes for our main menu and for our game, so let's create those now. From the Xcode menu, click File -> New File… In the templates menu select Cocoa Touch Class and double-click Objective-C class.

Name the file MainMenuScene and be sure that "Also create MainMenuScene.h" is also checked. Repeat this process to create your GameScene.h and GameScene.m files.

Let's deal with the MainMenuScene first. Open up the MainMenuScene.h interface file and replace whatever is in it with the following:

#import "cocos2d.h"
 
@interface MainMenuScene : CCLayer
{
}
 
+(id) scene;
 
@end

This is the standard structure of scenes in cocos2d. First, we're importing the cocos2d class files. Next, we're setting up our interface section and declaring our MainMenuScene which will be a child of the cocos2d class CCLayer. Finally, we declare the class method that will return our scene.

Next up, the MainMenuScene.m implementation file. Select it, delete its contents, and replace with the following:

#import "MainMenuScene.h"
 
@implementation MainMenuScene
 
+(id) scene
{
CCScene *scene = [CCScene node];
 
MainMenuScene *layer = [MainMenuScene node];
 
[scene addChild: layer];
 
return scene;
}
 
-(id) init
{
 
if( (self=[super init] )) {
 
}
return self;
}
 
- (void) dealloc
{
 
[super dealloc];
}
@end

Again, very similar to the HelloWorldScene.m. First, we're creating our scene which will contain all of our main menu's content. Then we're creating a MainMenuScene layer where we'll put our text, buttons, etc.

There is a bit of confusion between scenes and layers, so let me try to simplify it through an example. Think of scenes are containers for different views or screens in a game. You put your content on layers, and add these layers to the scene. For example, you might have a MainMenuScene, a LevelSelectScene, a GameScene, a GameOverScene, etc. In the GameScene you might add a background layer, a score layer, and a sprites layer.

The init method contains all the things you want to happen when the scene is loaded. For example, here you might want to add your buttons and title. Put everything between the:

if( (self=[super init] )) {
 
}
return self;

The dealloc method is for memory management stuff we won't need to worry about for this tutorial.

Add a title to our scene

So our MainMenuScene looks like a menu page, let's give it a title and position it near the top of the screen:

CCLabel *title = [CCLabel labelWithString:@"Main Menu" fontName:@"Courier" fontSize:64];
title.position =  ccp(240, 240);
[self addChild: title];

Create a new menu layer

In this simple tutorial we really don't need another layer, but let's make one anyway to help illustrate their purpose. First, we'll declare a new layer for our menu and add it as a child of our scene:

CCLayer *menuLayer = [[CCLayer alloc] init];
[self addChild:menuLayer];

This layer will contain all (one!) of our menu items. Next, we'll add a button/link to start our game using CCMenuItemImage. When the user touches the button, it will change to the selected image and when released, launch the game scene. We'll use some images for the button, so add these two images to your Resources group in Xcode:

• startButton.png
• startButtonSelected.png

CCMenuItemImage *startButton = [CCMenuItemImage
					itemFromNormalImage:@"startButton.png"
					      selectedImage:@"startButtonSelected.png"
						     target:self
						   selector:@selector(startGame:)];

Note the startGame: method. We'll create this later.

Create and add the menu

Now, let's actually create the menu and add our startButton to it. Note that we're adding the menu to the menuLayer we just created.

CCMenu *menu = [CCMenu menuWithItems: startButton, nil];
[menuLayer addChild: menu];

Create the startGame: method

Everything looks good so far, but we'll need to define where to go when the startButton is pressed. To do that, add the following method below your init method, but before the @end statement of your MainMenuScene.m file:

- (void) startGame: (id) sender
{
[[CCDirector sharedDirector] replaceScene:[GameScene scene]];
}

As you can see, we're replacing the current scene with our GameScene. We'll need to import our GameScene.h file now, so add an import statement to the top of the MainMenuScene.m file:

#import "GameScene.h"

Great, but our GameScene is blank so let's add some content to it.

Add GameScene content

Just so we don't launch to a black screen and you think this whole tutorial is a big lie, add the following to your GameScene.h file:

#import "cocos2d.h"
 
@interface GameScene : CCLayer
{
}
 
+(id) scene;
 
@end

And add the following to your GameScene.m file:

#import "GameScene.h"
 
@implementation GameScene
 
+(id) scene
{
CCScene *scene = [CCScene node];
 
GameScene *layer = [GameScene node];
 
[scene addChild: layer];
 
return scene;
}
 
-(id) init
{
 
if( (self=[super init] )) {
 
CCLabel *message = [CCLabel labelWithString:@"Greetings" fontName:@"Courier" fontSize:64];
message.position =  ccp(240, 160);
[self addChild: message];
}
return self;
}
 
- (void) dealloc
{
 
[super dealloc];
}
@end

Build and run the application. First, your MainMenuScene should load. Clicking the startButton will replace it with the GameScene.

Ok, maybe BestGameEver is a bit of an overstatement, but it's a start! Next time, I'll explain how to import a spritesheet, and add a sprite to the game scene.

If you're interested in cocos2d, I'd also suggest checking out Ray Wenderlich's fantastic cocos2d and iPhone tutorials.

If you're developing apps or games for Apple's iPhone/iPad/Touch devices, chances are you're using Xcode. Xcode has a lot of great features that can help increase productivity, so we thought we'd put together a list of ten power user tips for those new to the environment.

1. Quickly switch between .h and .m files

One of the more common tasks you'll be doing is switching between interface and implementation files. As luck would have it, there are a couple of shortcuts to do this so you don't have to manually select the files each time:

• Click the Go to Counterpart double-squares icon in the top-right corner of the editing window.
• Use the keyboard shortcut ⌘ Command + ⌥ Option + Up arrow.

2. Change default company name at the top of each .h and .m file

When you create class files in Xcode, you'll notice the header contains default some boilerplate information commented out:

//  Created by stephen on 10-05-18.
//  Copyright 2010 __MyCompanyName__. All rights reserved.

To customize the company name, open up a terminal and enter the following:

defaults write com.apple.Xcode PBXCustomTemplateMacroDefinitions "{ \"ORGANIZATIONNAME\" = \"ReignDesign\";}"

replacing ReignDesign with your company name. Restart Xcode for the change to take effect.

3. Symbol identifier definitions

To jump to the definition for any symbol, hold ⌘ Command + double-click the symbol. For example, if you hold ⌘ Command + double-click a method name, you'll be brought to its .h definition.

4. Symbol documentation

To bring up a brief documentation abstract for any symbol, hold ⌥ Option + double-click the symbol (the cursor will become a crosshair).

Information about the symbol will be displayed in a small window with links to its documentation page and definition.

5. Parenthesis matching

Lost in a nest of if statements? Just double click any bracket or parenthesis, to see its corresponding open or closed counterpart.

6. Edit all in scope

Need to rename a variable but don't want to do it manually, and don't trust Find and Replace? Right-click its name and choose Edit all in scope. All instances will be selected, and when you start typing they'll be modified.

7. ESC to pop-up available code completion options

Code completion is great, but sometimes it just doesn't provide what you're looking for. In these instances, if you press the Escape key, Xcode will pop-up a list of possible suggestions.

8. Snapshots

Xcode's "Make Snapshot" option enables you to take a snapshot of your project's current state and revert back to it. You can also save multiple snapshots. To take a Snapshot, click File and choose Make Snapshot.

Note: Xcode's Snapshot feature hasn't been 100% reliable for some users. While it is a useful and convenient feature, we'd suggest not relying on it as your only form of back up!

9. Re-indent selection

After rewriting that method a few times, your code may not be lined up as perfectly as you'd like. In these cases, Xcode can re-format the code for you so it lines up:

• Select the area of text you wish to reformat
• Right-click the selection and choose Re-Indent selection from the context menu

Voila! Your code is neatly lined up. Works well with Parenthesis matching.

10. Pragma mark directives, //TODO:, //FIXME:, //!!!:, and //???:

As your implementation files grow, pragma marks can be an extremely useful way to keep things organized. For example:

#pragma mark -
#pragma mark Cleanup

Note that there is no space after the dash in the first #pragma mark. An alternative - since #pragma mark directives are compiler dependent - is to use // MARK:. For example:

 
// MARK: Cleanup
 

In addition to using pragma marks, you can also use the following tags to make certain items stand out:

//TODO:
//FIXME:
//!!!:
//???:

Have a great Xcode productivity tip that we missed? Let us know in the comments!

ReignDesign partnered recently with Red Rocket Games to help develop their latest iPhone/iPod Touch game, Crash the Crib.

Description from Red Rocket Games' website:

"Hollywood… Southern CA. Smug celebrities flaunting their wealth in our faces like there’s no tomorrow. That’s where YOU come in; take your modern-day siege engine and obliterate the lifestyles of the rich and famous! Load your Junk-Chucker with quality ammo: paparazzi, lawyers, groupies, and obnoxious sports cars. Leave a trail of destruction, mayhem, and depressed B-list celebrities in your wake."

Crash the Crib is a ton of fun, and smashing these so-called stars' cribs with your trebuchet is even more fulfilling than it sounds.

Check it out on the iTunes App Store, on sale now for $0.99!

iTunes App Store Link

A few weeks back we released a major update to our loveable little pig game, Pig Rush. We've received a ton of great feedback from users all over the world, and the response has been great.

That said, it still took us by surprise to see Pig Rush featured in Apple's New and Noteworthy section in the US App Store. Thanks Apple!

Next stop, "What's Hot!" section!

As you probably know, Apple has an app download limit for users downloading over 3G. Up until recently, this limit was 10 MB. If your app's file size exceeds the limit, users attempting to download it over 3G receive an error and must try again later over wifi. Needless to say, this can lead to frustrated users and lost sales and if you can get your app under this limit, it's definitely worth the effort.

So, when we submitted our latest update of Pig Rush to Apple for review, we worked hard to get it under the (then) 10 MB 3G app download limit.

Eventually, we got the file size down to 8.9 MB, knocking a massive 66% off of the original file size. Awesome!

We then submitted our update to Apple for review. Amazingly, only 12.5 hours later it was approved and live on the App Store. Excellent!

Then we noticed the file size listed in the App Store… 16.5 MB.

How could this be? This was nearly double the size of what what we submitted!

We downloaded the compressed package from the app store, and compared it to the version we uploaded. Sure enough, the version on the App Store was larger: 17.4 MB vs. our 8.9 MB version.

We extracted both files to compare, but apart from some standard config files added everything was the same.

Upon further inspection, it turned out there was one big difference: the main executable was 13.7 MB in both versions. However, the App Store version of this file compressed to 12.4 MB while ours compressed to 4 MB.

That's a pretty significant difference. We decided to ask Apple about this, and here's the answer we got:

"When your application is delivered to Apple, it is encrypted for DRM purposes and re-compressed. When the encryption is added, the size of the compressed file will increase. The exact size of the increase will vary from app to app, however, the size increase can be large when the binary has a lot of contagious zeros in it. We are unable to guarantee the size of your file after the encryption has been added."

File size increasing after encryption is added makes sense - but an increase from 4 MB to 13.7 MB seems extremely high. I've also never heard of "contagious zeros" before, and it looks like I'm not the only one.

Luckily, the new 3G limit has been upped to 20 MB so we still fall under it, but I'd still be interested in hearing others' experiences in final app package size vs. what was uploaded. Also, if you have any suggestions on limiting the number of contagious zeros in your binaries, please let us know.