In the second half of the year, I shifted my focus to another iPhone apps (not game), which I think I am better at. However, I am still curious about how far my PenguinLinks games can go if they can have some exposure. Nowadays, the most used iOS app promotion technique is probably “Free Promotion”. So I asked several companies in this business, including FreeAppADay, FreeAppParty and a few others. Their offers are from $4000 to $18K per promotion, and usually guarantee top 25 in Game category. Some of them also offer performance based charge, usually $1 per install — please note this is actually a much more expensive one: your app can easily get tens of thousands of downloads when it becomes free, which means you need to pay $1 for each download to the promotion provider. It’s like a no-limit hold’em game.

The Free Promotion

To me, all the options are too expensive. Most importantly, I am not 100% sure how much it can help, specially once my game goes back to paid. So I decided to run a free promotion by myself. Here are what I have done and the result:

• On 12/18, I released version 2.6, with the fix of a few bugs, and also let the game pick up some momentum.
• On 12/22 12AM, my paid game “PenguinLinks Pro 2” went free.
• I twitted it, and also posted the news on my facebook page: http://www.facebook.com/clingmarks, which has almost 1000 fans.
• In the following several days, the news got twitted 25 times on twitter, 17 times on weibo.com (twitter like service in China).
• The news was also picked up by techbargains.com on 12/22 (see screenshot bellow). I don’t know how many downloads this has contributed, but it’s certainly fun to see my game mentioned on one of the most popular tech deal sites.
  
• Results:
• On the first day of the promotion, the rank of my game “PenguinLinks Pro 2″ went up dramatically in most countries:
• US: 28 in Board, 45 in Family, which is the best it ever achieved.
• China: 2 in Board, 3 in Family, 25 in Games, 71 Overall — this was achieved a few days later, actually today, 12/28.
• On the first day of promotin, it received 12.5K downloads total: China — 8.7K, US — 2.4K.
• In the following days of the promotion, downloads from China grow gradually to about 10K and stay there; downloads from all other countries have dropped significantly comparing to day one.
• The reviews for the game has been very positive:
• US: 20 ratings, 4.5 on average;
• China: 272 ratings, 4.5 on average.

Before the promotion, my goal was pushing my game to top 25 in one category in US, and top 25 in Games in China. As of today, it has reached the goal in China, but nowhere near the goal in US. But I am still pretty happy about the result. What I have learned from this promotion are:

• Quality is the ultimate factor of success. You can push an app up to the top, but only apps with great quality stay. Ranks of most the apps will drop like a rock once promotions end. Remember this is just a chance to show, and it doesn’t convert to success directly.
• You can run a “test” free promotion like mine just by yourself. Many services, websites are monitoring price drops in Apple App Store. By making a paid app free, you will naturally gain a lot of free exposures. It will give you a better sense about how far your app can go; and from user feedbacks, you will know what to improve next.
• Are all kinds of expensive-for-developers free promotions really worth it? It all depends on the quality of your app. All the promotions can give you is short time exposures. To stay there, your app must have high quality.
• Last but not least, different markets have different needs. That’s what I am going to talk about next –

Chinese App Market

A few days ago, I read an article on Techcrunch. It mentioned that:

In January, China generated only 18% of the downloads when comparing the U.S. iPhone App Store together with China’s. By November, it was generating 30% of the combined total downloads. And on the iPad, the two stores are almost equal in size in terms of downloads.

I totally felt it in this free promotion.

In August 2010, the first version of my game “PenguinLinks Free” become #2 overall app in the whole app store in China, and stayed there for about a week. At that time, it had about 8K to 10K download per day. 16 months later, with about the same amount of downloads, my game is only #25 in Games, #71 in Overall. #71 to #2, that’s a huge difference. I don’t know how many more downloads it takes to get to #2 overall today. But if somebody tells me it needs a few hundreds of thousand, I won’t be surprised. Just from this one small case, you can see how much the Chinese app market has grown in last 16 months.

Apple also sees the opportunity there. Recently, Apple just started accepting the local currency in China. Also, credit card is not a required payment method anymore in App Store China, since most people there don’t have a credit card capable of foreign transactions. Apple also added a way to pay by cellphone, which is popular in China, Japan and South Korean. All these are important steps to attract more paid customers there. In the next several years, with the introduction of the new iOS devices, this market will grow even bigger, with no doubt.

Grand Canyon

My free promotion started on 12/22, just a few hours before the iTunes Connect locked down. And then, on 12/23, I went to Grand Canyon for a vacation. Yes, it’s cold there. But the stunning view is well worth it. As an indie developer, vacations is as needed as any other career. So take advantage this holiday season, go out, enjoy. And come back refreshed, with more energy and ideas.

And finally, I plan to end my free promotion tomorrow morning. So if you are interested, don’t miss this opportunity. Grab it. You may like it. Who knows?

This blog was started back in 2007 (it was not under clingmarks.com domain at that time). From day one, it uses just some very basic wordpress themes. When we had more and more games, we started to think migrating this site to a more professional looking one. But for various reasons, this project had never been on the top of our to-do list.

Last week, finally I decided to do it. My goals are:

• A more professional looking site
• Make it a showcase of our products
• Prettier blog post, with better SEO support
• Fully integrated with Facebook, Twitter and Google+

With our objectives set, we purchased a professional theme for business, and hoped that we just needed to apply it, and everything would be done. But it’s not that simple. The theme is not as flexible as we want, and we also have some specific requests. It actually took me almost a week to work everything out, with the help from the tech support from the theme creator.

On Friday night, we finally figured out all the issues and pushed site to live. The end result is what you are seeing now. I think it’s day and night comparing to our original site. I am very satisfied — just check out this before-and-after here:

Being indie developers is really our passion. That’s what I wrote in the “About Us” page. I am going to quote that page to end this post.

We started by introducing the Penguin Links game on Android Marketplace in March 2009. And it was called “Pair Up”. We did not expect much. The whole practice was really just an Android exercise. However, just a few hours after the initial release, we got the first review! I still remember the excitement we had when we saw that. The first version was very rough, as you can imagine. But users’ feedbacks helped us to get better and better. And a few months later, the “Pair Up” game had become one of the top games in puzzle category, and stayed there for a long time. In last almost three years, this game had more than half million downloads, and thousands of reviews.

At the meantime, we were also working on an iPhone apps, which took longer than we thought. In June 2010, PenguinLinks for iOS was released. However, at that time, the competition at App Store was already very strong, and the games didn’t do as well as we expected. But things changed in the middle of August, 2010. One day when I took out my iPhone to check the number of downloads, I was surprised to see the it has more than doubled from the previous day. But I thought it could be something random. The day after, it doubled again. And tripled again after another day. I knew it must be something big. I checked the downloads by country and found most of them were from China. Then I opened the App Store for China, and saw our game “PenguinLinks Free” was already No. 2 app in the whole app store! Not in one category, not in games, but the whole app store! Our server was so busy (since there was no game center yet at that time, we used our own server to host score board) in those days that it almost crashed. What a fun!

Be frankly, our games were never a big success, such as Angry Bird, Tiny Wings, Jewellust, … But we have enjoyed doing this as much as anybody. The feeling of building something actually used by somebody, loved by somebody, or even criticized by somebody, is just awesome.

We are still working on these projects, on and off — since these are not our fulltime jobs. We may stop working on them someday. But we have had a lot of fun by building this. And hopefully we have brought some fun to our users.

At the meantime, if you want to know more about our products, check out the product page. You can also follow us on Facebook or twitter (please see the footer of this site). Email is always welcome, too. Just drop a line to: support [at] clingmark.com, we’ll get you back.

And finally, thank you ALL for reading this blog, playing our games, leaving feedbacks, … It’s YOU who drives us this far. And we really appreciate that.

To abstract things a bit, what I need to do is, use my production apache server to route the internet traffic based on the request’s domain name: if it’s for the test sub domain, forward to the test server; otherwise serve it locally.

To achieve that, the production apache server needs to act like a proxy server. To change its behavior, I just need to modify the production server’s configuration file at path (on ubuntu server):

/etc/apache2/sites-available/clingmarks.com.conf

All I need to do is to add this section to the end of the original configuration file (the sub domain for my test server is test.clingmarks.com, with IP address 192.168.2.5):

<VirtualHost *>
    ServerName test.clingmarks.com
    ProxyPass / http://192.168.2.5/
    ProxyPassReverse / http://192.168.2.5/
</VirtualHost>

Of course, I also need to add a DNS entry for my sub domain to my domain name registrar, to point to the same IP address as main main domain.

After these changes, the support guy is able to log in my test server from address http://test.clingmarks.com .

The closest match is the Matias Tactile Pro 3. It’s a beautiful keyboard that looks just like the original Apple Extended Keyboard. And it’s completely mac compatible (of course). However, the key switches it uses are ALPS, which is stronger than cherry blue switch — the switch I preferred. So I finally give it up. I kept trying keyboards with different brands, and eventually settled with a DAS keyboard Model S. I know it’s not a mac keyboard, but I like its simple looking, the overall quality (see my P.S. at the end of the post for another story), and the relatively low price (still more expensive than membrane keyboards, though). And it works fine with my mac. But sometime, I still hope that one day, I can find a keyboard I love, with the authentic mac keyboards’ look and feel.

DAS Model S Professional Keyboard

Until I found this post on geekhack.org — an online community for geeks with love for keyboards: http://geekhack.org/showthread.php?23203-Finishing-Touches-for-a-Layout.

The original author, iindigo,  is a genius. He designed a wonderful mac keyboard layout to match exactly the look of the original mac keyboard. All the font, position of each character, are carefully designed so that they look just like the Apple mac keyboard. Then, based on this layout, a set of custom key caps can be ordered to replace the original ones — a big benefit of using mechanical keyboards is that all the key caps are replaceable — to make the keyboard a lot more mac-looking.

And the best part is, iindigo is general enough to share his work with everybody, for free!

So I asked him to send me the layout file. And then I added a few extras based on the layout of the current Apple keyboard. The additional changes are:

• Multimedia symbols on F1-F15.
• Change the original “menu” key to a apple logo key — which will be the “Fn” key. I also make it the only black key to give the whole keyboard a little kick.
• Right-align the right “control” key.
• And just for fun, I added a “pig king” from Angry Bird to the space bar!

I submitted an order for the custom key caps on www.wasdkeyboards.com, a website that specializes in custom keyboards, and keyboard parts. After just a day, I was told the key caps were ready to pick up (yes, I am luck enough to be close to them). WASD keyboards was also kind enough to offer me to change all the keys in their office, so that I can use their wire key cap puller — just to make things easier.

When I walked into WASD Keyboards’ office, my key caps are already there, nicely laid out on a table, just like on a keyboard:

At the first look, I was a little worried that the letters seemed a bit too thin, and not dark enough on the keys. But overall, the laser etched letters/symbols are very crisp, and look nice on the white key caps. WASD’s staffs were very nice, too. Not only they let me do the key switching in their office, they also showed me how to lubricate the stabilizers of the bigger keys (this is my first time changing all the keys of a mechanical keyboard). The whole thing turned out a little longer than I thought. But once it was finished, I was really amazed by the overall look of this “new” keyboard. The font is perfect, not thin at all; the white key caps on the black base provide a great contrast. It just looks beautiful!

Once I got back to home, I created a custom configuration file for KeyRemap4Macbook, to remap all the “Fx” keys to their corresponding multimedia keys. Now, after all these effort, I finally have a good-looking, mac compatible mechanical keyboard! I know it is still not a mac keyboard, but the feeling of creating something new, is just more satisfying than anything!

OK, enough talk. Now let’s look at the pictures. I also attached the design layout and my KeyRemap4Macbook configuration file at the end.

P.S.:

• Usually DAS keyboards’ quality is pretty good. But the one I received has a stucked key. And the return/exchange experience is just suboptimal. I should have bought it from Amazon or Newegg instead of from DAS’ website directly. Eventually I chose to live with it instead of go through more hassles to exchange it. After all it’s the not-often-used F12 key.
• For anybody who is interested in, and new to mechanical keyboards, here is the must-read guide: Mechanical Keyboard Guide.

Keyboard with new key caps

Keyboard without key caps

Opt, Cmd, Shift and Return

Multimedia keys

The "pig king" space bar

Keyboard layout

2/11/2012 Update: Since this blog was published, I got so many requests for the my design layout file that I decided to put it here for everybody to download under Creative Commons license. You are free to modify it. But if you want to redistribute it, please mention my site or this post. NO RESALE OR COMMERCIAL USE!

Adobe Illustrator File: Yuchen’s_Mac_Keyboard_Outlines_final.ai

Custom Mac Keyboard Layout For Mechanical Keyboards by iindigo, yuchen is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Based on a work at www.clingmarks.com.

Finally, here is my configuration file for KeyRemap4Macbook:

<?xml version="1.0"?>
<root>
  <list>
  	<item>
  		<name>Remap Num to Clear</name>
  		<identifier>private.remap_num_to_clear</identifier>
  		<autogen>--KeyToKey-- KeyCode::PC_KEYPAD_NUMLOCK, KeyCode::KEYPAD_CLEAR</autogen>
  	</item>
  	<item>
  		<name>Remap Application to Fn</name>
  		<identifier>private.remap_application_to_fn</identifier>
  		<autogen>--KeyToKey-- KeyCode::PC_APPLICATION, KeyCode::FN</autogen>
  	</item>
 
    <item>
      <name>Remap Volume Keys</name>
      <appendix>Up, Down, Mute</appendix>
      <identifier>remap.volumeKeys</identifier>
      <autogen>--KeyToConsumer-- KeyCode::PC_PRINTSCREEN, ModifierFlag::FN,
      							ConsumerKeyCode::VOLUME_MUTE</autogen>
      <autogen>--KeyToConsumer-- KeyCode::PC_SCROLLLOCK, ModifierFlag::FN,
      							ConsumerKeyCode::VOLUME_DOWN</autogen>
      <autogen>--KeyToConsumer-- KeyCode::PC_PAUSE, ModifierFlag::FN,
      							ConsumerKeyCode::VOLUME_UP</autogen>
    </item>
 
    <item>
      <name>Remap Brightness Keys</name>
      <appendix>Darker, Brighter</appendix>
      <identifier>remap.brightnesskeys</identifier>
      <autogen>--KeyToConsumer-- KeyCode::F1, ModifierFlag::FN,
      							ConsumerKeyCode::BRIGHTNESS_DOWN</autogen>
      <autogen>--KeyToConsumer-- KeyCode::F2, ModifierFlag::FN,
      							ConsumerKeyCode::BRIGHTNESS_UP</autogen>
    </item>
 
    <item>
      <name>Remap Music Play Keys</name>
      <appendix>Previous, Play/Pause, Next</appendix>
      <identifier>remap.musickeys</identifier>
      <autogen>--KeyToConsumer-- KeyCode::F9, ModifierFlag::FN,
      							ConsumerKeyCode::MUSIC_PREV</autogen>
      <autogen>--KeyToConsumer-- KeyCode::F10, ModifierFlag::FN,
      							ConsumerKeyCode::MUSIC_PLAY</autogen>
      <autogen>--KeyToConsumer-- KeyCode::F11, ModifierFlag::FN,
      							ConsumerKeyCode::MUSIC_NEXT</autogen>
    </item>
 
    <item>
      <name>Remap Eject Key</name>
      <appendix>Eject</appendix>
      <identifier>remap.ejectkey</identifier>
      <autogen>--KeyToConsumer-- KeyCode::F12, ModifierFlag::FN,
      							ConsumerKeyCode::EJECT</autogen>
    </item>
  </list>
</root>

Three20 is an open source iOS library, contributed by Joe Hewitt, the developer of original Facebook iPhone app. It is a big package, with very rich functionalities. Many familiar UI elements you see from the facebook app can be found here: the Laucher View (the startup screen with icons for different functionalities), photo album, … Some UIKit classes are also enhanced, which makes them easier to use (once you have learned it), and also more powerful.

However, everything comes with a cost. And three20 is not perfect either. The most complained issues are the complexity of this framework, not-well-managed dependencies, and lack of documentation. There are some basic information on its official website — three20.info, but far from enough for such an advanced framework. Most people, including myself, learned this framework by try-and-error, google search and the community’s help. There are also some alternative projects that try to provide similar functionalities while fixing three20′s shortcomings — such as nimbus, but so far none of them has provided the same level of functionalities as three20 does.

To make things easier for myself, and for other three20 newcomers, I decided to start this blog series for three20. Each of the post will cover one topic in three20. And as the title says, they are just my learning notes. I’ll include a lot links to other resources and also try to explain it briefly. So here we go!

Today the topic is “URL based navigation”. Be frankly, I think this is one of the smartest idea in three20. In an iOS app, we need to deal with view transitions all the time. And it’s tedious. The procedure is always the same: find out which view to transit to, decide what animation effect to be used in this transition, pass any parameter if needed. Three20′s “URL based navigation” makes this a lot easier, and more intuitive. The whole idea is to treat view transitions in iOS apps similar to web view transitions in a browser. In a web browser, you don’t care how to navigate to he next page — you just click on links (URLs). That is basically the idea of “URL based navigation”.

In three20, to implement “URL based navigation”, first you define a mapping table which maps urls to view controllers. And when you need to go to another view, just call

TTOpenURL(URL);

where the “URL” is mapped to the view you are going to. Now you know the basic idea of this topic, following are the resources I found useful:

• Basics of “URL based navigation”

 

• URL-based navigation and state persistence

 

• Difference between “toViewController”, “toSharedViewController” and “toModalViewController”

 

• Passing multiple parameters in URL based navigation

 

• Mapping a URL to a method call:

  [map from:@"tt://urlToDoSomething" toSharedViewController:[MyViewController class] selector:@selector(doSomething)];

• Specify transition animation:

  [[TTNavigator navigator] openURL:@"tt://login" animated:YES transition:UIViewAnimationTransitionFlipFromLeft];

Other Three20 Resources:

• Joe Hewitt: http://joehewitt.com/
• Joe Hewitt on three20: http://joehewitt.com/2009/03/23/the-three20-project
• Threee20 official website: http://three20.info/
• Three20 forums: http://forums.three20.info/
• Three20 on github: https://github.com/facebook/three20
• Nimbus (Three20 alternative): https://github.com/jverkoey/nimbus

1. www.raywenderlich.com
   • Posting Freq: High
   • Pros: This is by far my favorite iOS tutorial blog site. Ray and his co-bloggers did a wonderful job in all aspects, from explaining simple concepts to showing you how to make a fully functional complex games. Everything is made crystal clear. I specially like their style of “tutorial series”: which covers a big topic in several posts. Currently the topic is “iOS 5 Storyboard”.
   • Cons: My only wish for them is to cover more UIKit stuff. After all, not everybody is using cocos2d for his/her project.
2. MKBlog
   • Posting Freq: High
   • Pros: I discovered his blog when I started learning In App Purchase. And then has been following him. His posts covers many different areas and with a lot of attention to details. Very helpful.
   • Cons: Since this blog is also his personal blog, sometime there are some posts not related to iOS programming. While I still enjoy reading them, they are certainly not part of the techy posts.
3. iDevBlogADay
   • Posting Freq: Very High
   • Pros: Well, I think I don’t need to say much about this, . We all love it.
   • Cons: Not all blogs are in the same quality level. This is understandable since people has different priorities and sometime may not in the mood of writing.
4. Cocoa With Love
   • Post Freq: Low
   • Pros: Very, very good tutorials. The depth of their posts is one the best. Some posts provided very unique solutions to interesting problems.
   • Cons: I just hope they write more often, otherwise it will be a 5 star!
5. Cocoa is my girlfriend
   • Post Freq: Medium
   • Pros: Similar to “Cocoa with love” (both are about Love, isn’t it? ), this blog has awesome tutorial with great details. The author is also the author of the book “Core Data: Apple’s API for Persisting Data under Mac OS X” and “Core Animation: Simplified Animation Techniques for Mac and iPhone Development“.
   • Cons: Same, more posts will be great!
6. Use Your Loaf
   • Post Freq: Medium
   • Pros: Very good posts, with a lot of examples and well written.
7. nachbaur.com
   • Post Freq: Low
   • Pros: They don’t post often, but when they do, you can find some really good stuff, such as the Core Animation series.
8. Other iOS programming blogs I read:
   • Cocoanetics
   • iPhone Development
   • iPhone Development Blog

So what blogs do you read? Please share that with us in the comments!

At 10AM, I checked it again. Still no luck. So I logged into ITC’s website, and wanted to check the sale status from there. When I clicked on the “Sales and Trends”, first I got a SSL certificate alert. I ignored it, and let the browser continue. After a few seconds, I saw a shocking view on my browser:

When I saw this, the first thing went through my mind is I was on a wrong website. But I checked the url, and yes, it was “reportingitc.apple.com”. Then I remembered the warning about the SSL cert. So obviously the DNS of this domain (reportingitc.apple.com) was pointing to somewhere else — in this case, it was infoblox. Was ITC hacked? it might be. But I doubt it. The hacker has no reason to point the site to infoblox, which is another legitimate company. I think it’s more like something wrong at Apple internally.

A few hours later, ITC was back to normal. As usual, there was no update about this several-hour outage.

We all know Apple making excellent products, with the reputation of great attentions to details. But ITC shows another side of Apple — inefficient, reckless,  and maybe even unprofessional. For even small websites, they would put a note when the sites are going down for maintenance. But Apple often doesn’t. For any website, with such an embarrassing event, it would worth a explanation or apology. But none from Apple. I don’t even want to mention the quality of the ITC site, which is so last generation — that could be one of the reasons why they have so many down time.

Apple is a very capable company, both technically and business-wise. They have done many things right. But ITC is certainly not one of them. To me, only one thing can explain this: lack of attention. Yes, App Store is important to Apple. But developers not necessarily are. So a basic website is provided to support developers, with basic functionalities, and basic support. In short, to Apple, ITC is too trivia to care.

I really hope Android market can catch up more so that Apple may have a stronger sense of competition, which might leads to more resource on developer support. Hence better ITC. But at the meantime, I just want to let Apple know, please, please be serious about ITC.

P.S.: As many other pointed out, Apple did send out an email a few days before about this maintenance downtime. However, that outage clearly started earlier and ended later. Also, no matter what kind outage it is, the DNS error like that was simply unacceptable. What’s more, isn’t “no down time” should be the standard for modern websites? Even with releases. When do we see downtime on Google, Amazon, facebook, … ? Apple just took a lower standard on this.

In most of the cases, particle emitter generates particles randomly — random color, random size, random direction — with the control of some key parameters. But it is not always like that. Sometimes we want the generated particles to follow a certain path, such as water trace, a group of firefly, or sparkles in the wind. That’s what I am going to talk about this time — how to generate random particles along a path. Before we start, let’s take a look at the end result first.

As you can see in the demo, at first the particles ran around the character “2″; then in the second demo I created a path manually by clicking on all the vertices, and the particle emitter generated particles along the path I just created.

The details of how to create a particle emitter itself is not the focus of this post. There are plenty of good tutorials online about that. Actually my system is based on 71squared’s tutorial, which in my opinion is the one of the best tutorials in this category (link to tutorial). Their “Particle Designer” is also a great tool to simplify the process to create beautiful particles. If you haven’t read their tutorial but want to learn more about particle system, I strongly suggest you to go through it first. This blog is an improvement on top of the particle system implemented by 71squared.

Now let’s get to the details.

Every a fraction of a second, the particle system will update the positions of all live particles, and generate new particles at its predefined source location (with variances). New particles are generated one by one sequentially. To make them appear along a path (assuming CGPath in this post), we need to figure out at a certain timestamp, which point on the path should be the source location.

In the most straightforward case — when the path is a straight line, it is simple: we know the current moment and total duration, hence we know how many percent of time has passed; using this percentage, we can locate a point between the start point and the end point, which will be the source location to generate the particle for this moment.

It’s the same for other types of paths. The only difficult part is, since most the paths are polygonal lines, how to locate the point based on the percentage of elapsed time?

Imagine the polygonal line is a rope, and mark all the vertex points as red; now straighten the rope, you have a straight line with many red dots on it. Each dot has its own percentage value based on its distance to the start point and the total length of the rope. Once we are given a percentage value (P), by comparing with each of the vertex, we can eventually find two adjacent vertices with a smaller percentage value (P1), and a greater value (P2). Then we can get the location of the point at this moment:

x =  P / (P2 - P1) * (X2 - X1) + X1
y = P / (P2 - P1) * (Y2 - Y1) + Y1

So the steps to generate particles along a path are:

1. Once given a path, find all it’s vertices;
2. Get the percentage value for each vertex;
3. Locate the point based on the current percentage value and vertices;
4. Generate particle at this point.

Now let’s get to the programming part.

1. Find vertices of a CGPath

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

typedef struct {
    CGPoint point;
    CGPoint previousPoint;
    float portionFinished;
} CGPathControlPoint;
 
CGPathControlPoint *controlPoints;
 
- (void) setAnimationPath:(CGPathRef)path {
    if (animationPath) {
        CGPathRelease(animationPath);
    }
    if (controlPoints) {
        free(controlPoints);
    }
 
    animationPath = CGPathRetain(path);
 
    NSMutableArray* points = [NSMutableArray array];
	CGPathApply(animationPath, points, extractPointsApplier);
 
    totalControlPoints = [points count];
    if (totalControlPoints > 0) {
        controlPoints = calloc(totalControlPoints, sizeof(CGPathControlPoint));
 
        if (controlPoints == NULL) {
            NSLog(@"not enough memory to save cgpath information");
            return;
        } else {
            CGPoint prevPoint = CGPointMake(0.0, 0.0);
            float totalDistance = 0;
 
            for (int i = 0; i < totalControlPoints; i++) {
                CGPoint point = [[points objectAtIndex:i] CGPointValue];
 
                float thisDistance = 0.0f;
                if (i != 0) {
                    thisDistance = sqrtf(
                                         (point.x - prevPoint.x) * (point.x - prevPoint.x)
                                         + (point.y - prevPoint.y) * (point.y - prevPoint.y)
                                         );
                }
                totalDistance += thisDistance;
 
                controlPoints[i] = (CGPathControlPoint) {point, prevPoint, totalDistance};
 
                prevPoint = point;
            }
 
            for (int i = 0; i < totalControlPoints; i++) {
                CGPathControlPoint p = controlPoints[i];
 
                if (i == 0 && totalControlPoints > 1) {
                    CGPathControlPoint nextP = controlPoints[1];
                    CGPoint prevP = CGPointMake(2.0 * p.point.x - nextP.point.x, 2.0 * p.point.y - nextP.point.y);
 
                    controlPoints[0] = (CGPathControlPoint) {p.point, prevP, p.portionFinished / totalDistance};
                } else {
                    controlPoints[i] = (CGPathControlPoint) {p.point, p.previousPoint, p.portionFinished / totalDistance};
                }
            }
        }
    }
}

At first, I defined a new struct called “CGPathControlPoint”, which includes the current CGPoint and its percentage value. The previous point is also kept there for the purpose of calculating the emission angle, which is not a topic in this blog, so you can ignore that field for now.

Then I defined an array of control points “controlPoints”. Our goal is find all the vertices in a CGPath, and put them in this array. The magic happens at line #20:

CGPathApply(animationPath, points, extractPointsApplier);

CGPathApply is an iOS built-in method since version 2.0. What it does is, “for each element in a graphics path, calls a custom applier function”. In our case, the custom callback function is “extractPointsApplier”. Basically I created an array first (line 19), and the CGPathApply function will extract all vertices from the CGPath, and apply them to the callback function, which puts them back to the array. Here is the code for the callback function:

1
2
3
4
5
6
7
8
9

static void extractPointsApplier(void* info, const CGPathElement* element)
{
    NSMutableArray* points = (NSMutableArray*) info;
 
    if (element->points && element->type != kCGPathElementCloseSubpath) {
        CGPoint p = *(element->points);
        [points addObject:[NSValue valueWithCGPoint:p]];
    }
}

In above method, each CGPathElement is actually a vertex. It contains the CGPoint itself and a point type, which includes:

1
2
3
4
5
6
7
8

enum CGPathElementType {
   kCGPathElementMoveToPoint,
   kCGPathElementAddLineToPoint,
   kCGPathElementAddQuadCurveToPoint,
   kCGPathElementAddCurveToPoint,
   kCGPathElementCloseSubpath
};
typedef enum CGPathElementType CGPathElementType;

The callback function put all points in the array except the ones with type “kCGPathElementCloseSubpath”, because that usually means a duplicate point from the last vertex, just with different type.

2. Get percentage value for each vertex
After the call to CGPathApply, we have an array with all the vertices on the path. Then it’s easy to calculate the distances between two vertices and the total distance. On list 1, after line #20, is the implementation to find out the percentage value (portionFinished) for each vertex.

3. Locate the point
At each moment when we generate particles, we know exactly the elapsed time and total duration (or how many particles has generated and the max number of particles). Hence we know the percentage we have finished. Based on that percentage and the vertices we have extracted, it’s easy to figure out the current location:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

- (CGPathControlPoint) getPointByFinishedPortion: (float) portion {
    if (portion <= 0) {
        return controlPoints[0];
    } else if (portion >= 1) {
        return controlPoints[totalControlPoints - 1];
    } else {
        for (int i = 0; i < totalControlPoints; i++) {
            CGPathControlPoint cp = controlPoints[i];
            if (portion < cp.portionFinished) {
                CGPathControlPoint prevP = controlPoints[i - 1];
                float r = portion - prevP.portionFinished;
 
                float total = cp.portionFinished - prevP.portionFinished;
                r = r / total;
 
                float x = (cp.point.x - prevP.point.x) * r + prevP.point.x;
                float y = (cp.point.y - prevP.point.y) * r + prevP.point.y;
 
                return (CGPathControlPoint) {CGPointMake(x, y), prevP.point, 0.0};
            }
        }
 
        // should not happen
        return controlPoints[0];
    }
}

I think the code is pretty self-explained, so I won’t go though each line of them here.

4. Generate particles
Finally it’s time to generate particles. Again, I won’t cover actually how to generate particles here. Please refer 71squared’s tutorial and sample program for detail. The only different part is, in “addParticle” method, I added following lines:

1
2
3

if (animationType == kAnimatePath) {
        [self initParticle:particle atCGPathControlPoint:[self getPointByFinishedPortion:((float)particleCount / (float)maxParticles)]];
}

Basically the percentage value is calculated based on the generated particle count and the max number of particles, and then the current point is retrieved by using the function in step 3. In the method “initParticle:atCGPathControlPoint:”, a particle is generated at the control point, instead of the predefined source location. In this way, a particle is generated at each moment at different location. When they are put together, it looks like the particles are running along the path, just like what we have demoed in the video.

Finally I’ll put my demo project and some useful links here. Hopefully this post is helpful to you.

Links:

1. Xcode Project
2. http://www.youtube.com/watch?v=66qQ21ZVOoc
3. 71squared Tutorial For Particle Emitter
4. 71squared’s Particle Designer

In my previous post — A Perfect Hackintosh Machine, I have described how I installed Snow Leopard on my almost-4-years-old, but still pretty decent desktop. And installing Lion is pretty similar.

(Disclaimer: The following process potentially violates Apple’s End User License Agreement for Mac OS X. Please check the Aggreement before following these steps.)

To make things less complicated, I decided to do a fresh install and then migrate all my stuff from Time Machine backup (that’s one of many reasons why I love TM!). The whole installation process is actually very easy — thanks to this really good tutorial: Lion installation via USB stick using Chameleon, DP4, GM and FINAL. I just followed the guide and after about half hour, Lion is up and running on my desktop. And then I migrated all my personal stuff and Applications from TM backup, which takes a little bit more than an hour. The installation process is very smooth so far.

But there are a few glitches.

First, the default network card doesn’t work. The chipset of my built-in network card is RTL8111B. To make it work, I have to replace the IONetworkingFamily.kext (put it in /Extra/Extensions).

Secondly, the sound card doesn’t work, which is expected since ALC888 is not supported natively by Apple since 10.6.3. To fix it, we need three extensions: ALC8xxHDA.kext, AppleHDA.kext ad HDAEnabler888.kext. Copy all three extensions to /Extra/Extensions directory, and then manually copy AppleHDAppleHDA.kext ad HDAEnabler888.kextAppleHDA.kext to /System/Library/Extensions. Remember to use kext utility to fix permission after that. All three extensions can be downloaded here.

After reboot, everything seems working fine now. However, when I tried to download Xcode 4 from Mac App Store, I got a weird message “Your device or computer could not be verified. Contact support for assistance.” After some research, it seems this is caused by Mac App Store not recognizing the ethernet card. It can be fixed by adding these lines to the Boot.plist file:

EthernetBuiltIn
Yes

Now my hackintosh almost runs perfectly — except sleep. But I don’t care this feature that much because it’s really fast to boot from SSD. So I just turn the machine off when needed.

The last mission is to upgrade to the latest 10.7.1. The first upgrade made my system unbootable. The message shows it was caused by SleepEnabler.kext. Fortunately the Internet can always come to help. A new version of this extension, which is compatible with 10.7.1, is already available online (click to dowload). After replacing the old one and a reboot(remember to use “-f” option when reboot, which will clear the kext cache), my hackintosh is happily running on the latest OSX.

P.S. There is a final catch after all these are setup. When I tried to open an image with Preview, it crashes. At first I thought it must be some library not fully compatible. But after soem research, it turns out a simpler issue: since my SSD only has 120GB, I removed the original “Downloads” directory from my home, and created a symbolic link to the “Downloads” directory on my second harddrive. That’s the cause of crash (don’t ask me, I don’t know why Preview is unhappy about the link). The fix is easy: just remove the symbolic link, and then run Preview once, and then re-create the link. That’s it! Everybody is happy.

Summary of links:

• My previous post: A Perfect Hackintosh Machine
• Lion installation guide
• IONetworkingFamily.kext
• Files to fix sound
• SleepEnabler.kext: compatible with 10.7.1

P.S. 11/1/2011: Today I just realized my dvd drive has stopped working. I barely use it, that’s why I haven’t noticed that earlier. Since my DVD drive is a really old IDE one, I need the JMicron36xATA.kext to make it work with Lion, which can be found here.

1. Development Environment

Before I started iOS programming, I was a long time Java programmer. I was used to some awesome programming IDEs such as IntelliJ IDEA, Eclipse, or NetBeans. My personal favorite is IntelliJ. I like it not only because it has a rich feature set, but also the consideration they have put in for those features. The seamless integration with maven/ant, color coded file names, highlighted changed lines, quick and easy refactoring … Nowadays, number of features is not enough to distinguish an IDE from others, it’s those little “productivity features” that make an IDE outstanding.

That’s why the first time when I started using Xcode 3.x, I was so surprised how outdated it was. It’s like programming in year 2000 on Visual C++ 6.0. No kidding! It does have all the necessary features — it compiles, it edits, it has source control integrated, it can even do refactoring. But all those “productivity features” are not there! You have to go down several levels of menu to do a “svn add”; and the worst part is, you can’t tell if the file is added or not after you clicking that menu! The refactoring often changes the wrong files. It’s hard to find a file. … Even after more than a year working on Xcode, I still felt so happy/relaxed whenever I was back to Java/IntelliJ — because everything I need is just right next to my hand!

Comparing with Xcode 3.x, Xcode 4 is definitely a big progress towards the right direction. I can see more signs from a modern IDE there. More convenience features are added. But as a whole, it still lags behind other modern Java IDEs. I also learned that JetBrains, the company makes IntelliJ IDEA, is creating an IDE for iPhone programming, called AppCode. I am so glad they are doing that — at least they can introduce some competitions to this area.

But on the other hand, I do appreciate Apple giving the whole development package to developers for FREE (thank god they don’t charge us for thousands of dollars like Microsoft charges for Visual Studio) — except the $100 membership fee I have to pay. Many of the tools included in the package, such as Interface Builder, Instruments, are so powerful that their equivalents on Java side can easily cost hundreds or even thousands of dollars. On this part, iOS developers are lucky to have this great all-in-one package.

It’s a close call to decide who wins this category. Java IDEs are better, but Apple does provide better supplement tools and it is catching up quickly on IDE. So I’ll leave this decision for you. Leave a comment and let me know what you think on this topic.

2. App Store vs. Android Market

Since I started programming on iOS, I have watched the amazing growth of the apps on App Store. The invention of “App Store” is a huge benefit for everybody — developers now can list their software on a central place, accessible by hundreds of millions of people all over the world; and consumers can get some top notch games/applications with just 99 cents, which is unimaginable before the App Store era. Apple’s vision and implementation on App Store is probably one of the most important contributions to the consumer software industry.

Google also launched its Android Market soon after iOS App Store, and the number of Android apps have grown rapidly since then. But in many ways, Google’s Android Market is still behind iOS App Store.

One big problem for Android Market is its lack of functionalities. One example is its lack of ways to promote new apps to Android Market. On iOS App Store, a new app could get on many special categories to attract users’ attention, such as “New and Noteworthy”, “What’s Hot”, “Staff Favorites”, … They may not really mean much, but they do provide extra ways for those better new apps to stand out. And if those apps are good enough, they will prevail. But on Android Market, once an app is released, the only way it could be noticed is through “Newly Released” category. With thousands and even tens of thousands new apps released for each category every day, you new app will soon be flooded to nowhere, no matter its quality is good or bad.

So, in this category, Apple is the clear winner!

3. Supporting Infrastructure

When I am talking about “Supporting Infrastructure”, I mean those processes/softwares behind App Store/Android Market, or iTunesConnect/Publisher Console, and those servers running 24×7 to keep the site up, and data up-to-date. You can’t see them, but you can feel it whenever you make a change to your app, either a new release or just a description update. They are the ultra-power behind the scene.

About a month ago, I released my “PenguinLinks 2″ games to App Store. It was an awful experience. At first, my free game went out, but the two “In-app Purchases” associated with it didn’t went out until two weeks later. And then, after my paid version was out, I decided to run a free promotion on a weekend. Unfortunately that’s the weekend when Apple rolled out App Store to 33 more countries. The price change didn’t take effect until Sunday morning. And the worst part is, it briefly went free for an hour, and then was completely rolled back. Clearly there were some glitches in the release process. But it was a disaster to me: when I saw the price changed the first time, I thought that was it; so I sent out all my promotion emails to many websites / friends. An hour later, I got tons of emails complaining it was NOT free.

I don’t really blame Apple on this. I was a backend developer, I know things can go wrong sometime. However, from these incidences, you can tell Apple’s backend infrastructure  supporting App Store and iTC is really outdated. Just think about it, how often do you see other major websites going down for hours just for maintenance? And how slow iTunes is comparing with other websites?

Actually, many things we take as granted nowadays are still not available on App Store. When a user submit a review for your app, it is available immediately on Android Market; but it takes hours to show up on App Store. At Android Market’s publisher console, you can see sales in realtime; but on App Store, sometime you don’t even have an aggregated sales report one day later. I don’t even compare iAd report to Google’s adsense report — there is no comparison.

It may not be fair to compare Apple to Google on this category. After all, Google is probably one of the most capable technology companies (if not “the” company) at processing large volume of data quickly and effectively. Years of experience on search and data mining make it easy for Google to handle those data from Android Market. But for Apple, this is a whole new area. Apple must know this as well. They are building new data centers and hiring data processing experts. I have no doubt they will get better and better, but for now, Google wins this round.

So, which mobile platform is better? Well, as you can see, it’s a really close call. I would rather leave that to you. I actually like this because competition is always good, isn’t it?