Code, Nerdyness, and Nonsense

Vim For iOS Is Incredible

2012-01-25T00:00:00-08:00

I used to be an Emacs guy and would battle to the death on the war between Vim and Emacs. It wasn't until a coworker of mine sat down and really showed me just how cool/simple/powerful Vim can be. Just using Vim is a new adventure every day and has really improved my productivity. I now use it to code, blog, and even jot down quick notes.

Last week, I saw on Hacker News a link announcing Vim has been ported to iOS. I have spent a week or so with it and can honestly say the port is almost perfect!

It has most of the major Vim features and commands including:

Automatic indentation
Visual mode (block operations)
Language-aware syntax highlighting
Integrated scripting language that lets you extend functionalities
Macros recording and playback
Markers management (to quickly move around the edited file)
Multiple clipboards

You even have access to the config file to remap keys and define your own custom macros.

There are a few features that would make this better on mobile however:

Dropbox Support - Currently you must use iTunes to work with Vim documents on mobile. There needs to be an easier way to share these.
Keyboard bar - Since you have to switch modes so frequently and there are some keys you type often ( ":" ), it would be nice to have quick access to these.
Plugin support - This is an Apple limitation :(
NERDTree - The file browser that's built in doesn't work too well.

With Vim mobile, you can now look even more nerdy on your iPhone ;)

Download Vim For iOS

Fluid For Mac

2012-01-19T00:00:00-08:00

As of OSX Lion, I have started to seriously loathe some of the build-it Mac apps (such as Mail, and iCal). While I previously had no issues with them, they now seem to be very clunky and crash quite often. Being a developer, I thought "why don't I write an app that wraps web apps for you so you basically get "native web apps" that have icons and are launchable?".

After a quick Google search, I realized this already exists!. The app is called Fluid and it does an incredible job of what I described above and more.

Here are the feature highlights.

Create a "native" Mac app for any web app
Custom icon for each "native" app you create
Full screen mode
User scripps. These are my favorite. They allow you to update the badge count based on information in the browser. See below for a sample user script.

Sample User Script For Twitter

    (function () {
        if (window.fluid) {
            setInterval(function updateBadge() {
                var counts = /\d+/.exec(document.title);
                if (counts && counts[0] > 0) {
                    window.fluid.dockBadge = counts[0] > 99 ? '99+' : counts[0];
                } else {
                    window.fluid.dockBadge = '';
                }
            }, 2000);
        }
    })();

Source

Fluid is free with some minimal features, but I urge you to drop the $4.99 to gain full screen mode and user scripts. It's well worth it. I am not affiliated with them in any way, just a happy customer.

Download Fluid

Amazon - A Terrible Solution To A Huge Problem

2012-01-16T00:00:00-08:00

tl;dr; Don't buy a Kindle Fire for your kid until they resolve the parental control issues. Wifi password protection is their current solution, and it sucks.

Like many parents, I thought it would be a good idea to get a tablet device for my son so that he could play some educational games and watch some Netflix (in moderation of course). After doing quite a bit of research, I settled on the Kindle Fire. Before the Apple fanboys give me crap, know that I am one, I have an iPad, it's too expensive for my son.

Honestly, I really love the fire. I think it has the least terrible Android interface of any of the devices. It's intuitive and my 3 year old was able to grasp navigation right away. In addition to navigation, he quickly figured out how to acquire new content (apps, video, children's books) thanks to Amazon's "One-Click Ordering". Obviously, Amazon thought the process they use on the web transfered well to a tablet device and was not willing to compromise on that. That's neither here nor there. You can find plenty of posts about user's complaining about the initial lack of parental controls.

The Update

Shortly after receiving some pretty rough reviews for their interface, Amazon rolled out their first update which brought us to 6.2.1. In addition to fixing some of there terribly choppy UI, they rolled out their "fix" for the lack of parental controls.

I noticed a new security setting that I had hoped would allow the device to require a password for content purchase, but it turns out the setting is to password protect enabling wifi.

Password protect enabling wifi? Really?

This is laughable at best. What a worthless feature. I could not figure out why anyone would ever want that. And then I had a conversation with "tech support".

Their "Solution" Confirmed

After seeing an email from Amazon the other day showing my purchase for $17.99 for Team Umizoomi Season 1 (whatever the crap that is), which obviously my son purchased, I set out to chat with customer support. The conversation went something like this:

...
Me: Refund!? No parental controls!

Outsourced Guy: Enable Wifi Password = protection!

Me: No, watch Netflix! Browse Web! Stupid Solution

Outsourced Guy: Yes Netflix Need Wifi. Did I solve your problem?

Me: ?

Outsourced Guy: Phone Number. Call Video Support

So there you have it. Amazon actually pushes this as their solution to the lack of parental controls. My suspicions were confirmed by Outsourced Guy.

Conclusion

It's sad that a huge company such as Amazon feels that their process is more important than listening to their customers. Although their devices have been selling like fire (badum ch!), they need to address such gaping issues if they are to maintain their edge in the "affordable" tablet space. Especially as the younger generations start embracing the technology.

Why I Went Back To Jekyll - Also Rackspace Sucks

2012-01-03T00:00:00-08:00

Recently, I was pretty humbled when a post of mine titled WordPress To Jekyll And Back Again made it to the front page of Hacker News. I was a little down on Jekyll for the reasons listed in that post and was feeling pretty good about my Wordpress install.

At the time, I was running my own virtual instance on Rackspace cloud hosting (we'll get to this momentarily). I also had all of the caching and optimization plugins installed and welcomed the Hacker News traffic.

As you can imagine, the influx of HN traffic crashed the server multiple times and I was (with good reason) mocked in the comments ("must be because he's 'back to Wordpress'"). So, I asked for advice and further "beefed up" my setup switching from Apache to Nginx, upping the ram, and switching caching plugins. Wordpress is a beast and hard to optimize. That's not even the kicker as to why I switched away.

A Call From Rackspace...

About a month ago, I realized my blog was down. I figured that it might have been that I was featured somewhere else which was crashing it (again I was rolling my eyes at Wordpress). But then, I got a call and email from a very helpful Rackspace employee. The email went like this:

Despite the very best efforts of or our Engineering and Datacenter Operations Teams, unfortunately the host machine that your cloud server 'Websites' resides on was not able to be recovered. At this point, we are looking at complete data loss.

and... Rackspace, in this poorly phrased email, was basically like. "Well, sucks to be you, hope you had a backup!". Well, I admit this is partially my fault for not having a backup as I am a bit of a n00b when it comes to server admin, but I had been hosting for years on (don't judge me) GoDaddy before that and a couple years on Rackspace. I had no idea that hosting companies didn't have backups of their own. It would seem that this might be crucial to their business.

Needless to say, I lost everything including a jewelry site that I ran (not many sales), an iPhone leaderboard site (not very popular), 2 of my buddies Wordpress blogs, and my current Wordpress blog.

Jekyll To The Rescue

I was pretty angry at Rackspace and myself for never making a backup, but then it hit me that most of my posts had been converted to Jekyll and were backed up in a github repository. I was able to restore my blog within a few minutes (now hosted on GitHub) and recover the Wordpress posts from the Feedburner cache of my site.

As for my buddies' sites... I feel for them :(

New List Of Why Jekyll Is Awesome

Automatically backed up - This is huge. If not for switching to Jekyll at one point, I would have lost years worth of content. If you have every tried to back up Wordpress, it's a huge frackin pain since the database dump usually gets HUGE.
Free To Host - I'm not sure why I was so stubborn about doing my own hosting. I am now hosting on GitHub and it couldn't be more stable and fast.
Mobile Blogging - This was my largest gripe about Jekyll. I was jealous that I couldn't blog from my iPhone like Wordpress users. Well, I have found a pretty decent solution (tutorial to follow), which involves a combo of Prompt, Screen, and Vim.
Content Oriented - Wordpress makes it super easy to dump tons of images into your posts. While blogging with Jekyll (inside of Vim in my case), it's a little bit more of a pain to add your own images. That being said you must be choosy forcing you to focus more on the content and less on using visual crutches.
Blog Anywhere - This was another limitation I was placing on Jekyll in my last post. However, I just wasn't using Jekyll to its full potential. I was building my site locally and rsyncing it up to my server. This process was a little tedious and discouraged me from writing many new posts. Now, hosting with github, posting is as simple as a quick push to the repo.
Ninja Fast - This one should be obvious.

Conclusion

I am quite happy blogging with Jekyll. As far as I'm concerned there is no reason to ever host my own blog again (as long as Github doesn't ditch pages ;) ). Also, if you currently have stuff on Rackspace, go make a backup now (or ditch them altogether). Thanks for reading and look out for my next post about mobile blogging with Jekyll.

Happy Blogging!

New Year - New Theme: Focus On The Content

2011-12-31T00:00:00-08:00

As you may have noticed, my blog has a new (much cleaner) theme. For 2012, my blogging goals are to focus much more on content rather than flashy visuals.

I have also minimized my set up to save blogging costs (I now blog for FREE) and to simplify things greatly. Here is my new setup:

Jekyll as my "blog engine"
The WPTypo Wordpress Theme I ported this to Jekyll
GitHub for hosting (it's free).
Vim - I'm using this as my "blog editor". There are some incredible plugins that I am using to help facilitate blogging using Jekyll (post on how I do this to follow)

That's about it. I am now free from server costs and my blog is always backed up and easily accessible.

2011 has been a very successful year in terms of blogging for me. In addition to writing here and on iCodeBlog, I have recently started blogging for Mobile Tuts + on the Envato Network. You can check out my 7 part game series on creating a caterpillar game using Cocos2D here.

I can't wait to start posting some great content in this new year. Given my new setup, I literally have to adhere to the title of this post as blogging in VIM doesn't really lend itself to visuals ;).

Happy New Year and Happy Hacking in 2012!

SVProgressHUD Is Quickly Becoming My Favorite iOS Library

2011-12-07T00:00:00-08:00

From the first time I saw this effect in the Tweetie (now Twitter for iPhone), I was crazy about it. I had written my own hacks to make something close, but it was always terrible. Within the past few months, I have been using a perfect/elegant solution to this problem called SVProgressHUD.

Using this in your project is as easy as calling:

// showing
[SVProgressHUD showWithStatus:@"Logging in..."];
// hiding
[SVProgressHUD dismiss];

Clone SVProgressHUD On Github

Tether Your iPhone Without Jailbreaking (Or Paying For It)

2011-11-29T00:00:00-08:00

With all of the buzz around the iTether App, I figured I’d offer a more permanent solution since Apple will surely yank this soon

Last year, a developer published his code for an http SOCKS proxy called iProxy. This will give your iPhone the ability to create a SOCKS server in which your laptop can connect to via the Bonjur protocol.

Once connect, all of your computer’s http traffic will be routed through the server on your iPhone essentially giving you free tethering. Since this isn’t using the iPhone’s built-in tethering method, I’d assume At&t could not detect it*. After looking at the code, it becomes pretty obvious how the SOCKS proxy works and makes me kick myself that I didn’t write it (or find this code sooner).

The setup is a little complex, but you only need to do it once. I would love to hear in the comments if any of you has had some experience with this. I will also share my own as soon as I can get it installed later today.

Download the project over at github.

Happy Coding!

_{*This has not been verified by me}

Caterpillar 1.1 Released

2011-11-22T00:00:00-08:00

I have just released the update to my Centipede clone called Caterpillar. For those of you who don’t know, I am doing a 6 part series on how to create this game over at MobileTuts+.

This update adds some interesting functionality on which I will be blogging about in the near future.

I have added iAds to my cocos2D project and when the iAds fail to serve (which is about 75% of the time), I replace them with Admob ads. This was achieved by creating a new Admob ad view inside of the bannerView:didFailToReceiveAdWithError: delegate method.

I will either post a full tutorial about doing this Here or on Mobile Tuts. Either way, I’ll keep you posted.

Also, be sure to download the game, test it out, and lemme know if you have suggestions. Version 1.1 addressed quite a few issues from feedback (namely poor controls).

Happy coding!

WordPress Plugin For iOS Developers And Bloggers

2011-11-21T00:00:00-08:00

This plugin looks to be super useful for people wanting to blog about iOS apps. It even supports the affiliate urls.

In any post or page, insert the following shortcode: [ios-app id="1234"] (where “1234″ is your application’s App Store ID).
You can also specify a download link like this: [ios-app id="1234" download_url="http://www.yourlinktrackerurl.com"]

Download The Plugin Here

Voices That Matter Conference: Highlights

2011-11-16T00:00:00-08:00

This past weekend, I attended the voices that matter conference as a sponsor for a new product my team is working called MaaSive. We had an absolute blast at the conference and I learned quite a bit from all of the speakers.

Here were a few of my favorite parts:

Keynote by Graeme Devine

For those of you who don’t know Graeme is a legend in the game development industry. He was responsible for titles such as Quake 3, 7th guest, and Halo Wars. His presentation entitled “Social Gaming is Dead” was spot on. In it Graeme talked about how game developers have become less focused on the quality of games and more focused on “how do I make a profit?”. A statement that has stuck out to me is:

“Be generous with fun. We are mean with it!”

Basically, we are charging our users for fun or making them do real work (see Farmville) in order to obtain it. His message was “stop it, make something fun, and dont’t focus on profit”. Otherwise you are doomed.

Follow Graeme on Twitter

Moving To 3D by Mike Daily

Mike is a good friend of mine and I look forward to hanging out with him at the conference each year. His talk was all about showing the developers how easy it actually is to create a 3D game without the use of a game engine. Mike’s demo (show below) was an absolutely incredible space shooter where you used the gyroscope to maneuver around.

Mike will be posting a series on his blog in the near future about how to make his game using GLKit in the near future.

VTM Game Prototype from Michael Daley on Vimeo.

Follow Mike on Twitter

Storyboarding by Erica Sadun

Erica is an OG (original gangster) when it comes to iOS development. She has been in the space since way before the first SDK was published (in fact she had a jailbroken dev book almost ready to go). Her current book, The iPhone Developer’s Cookbook is a beast containing almost 900 pages!!!

Her talk showed how easy it is to use storyboarding and just how powerful the technique can be.

Follow Erica on Twitter

Conclusion

It should be obvious from this post, that the VTM conference was incredible to say the least. If you didn’t attend, I strongly urge you to check out their next one. Hopefully you will get to blog about my talk at it (assuming I get my crap together).

Happy Coding!

Caterpillar-HD Now In The App Store: Tutorial Series To Follow

2011-11-16T00:00:00-08:00

I have just released the update to my Centipede clone called Caterpillar. For those of you who don’t know, I am doing a 6 part series on how to create this game over at MobileTuts+.

This update adds some interesting functionality on which I will be blogging about in the near future.

I will either post a full tutorial about doing this Here or on Mobile Tuts. Either way, I’ll keep you posted.

Also, be sure to download the game, test it out, and lemme know if you have suggestions. Version 1.1 addressed quite a few issues from feedback (namely poor controls).

Happy coding!

WordPress To Jekyll And Back Again

2011-11-14T00:00:00-08:00

Earlier this year, I jumped ship on WordPress and moved to Jekyll after reading this post on Hacker News. I wanted to be 1337! I wanted to ditch the whale that was WordPress.

Well, it was quite a run, but in the end I decided to revert back to WordPress. Although Jekyll is much faster than WordPress, here were my issues:

Build Times

As my post count grew, so did the time to compile my jekyll site. Jekyll is a static site builder, so naturally it has to rebuild your site any time anything changes. With my blog containing hundreds of posts, my site build times started getting into minutes. I simply don’t want to wait forever to publish a post.

Since it took so long to build my site, it discouraged me from posting. I would only write posts on my specified #iDevBlogADay days, rather than just posting quick info posts.

Too Many Dependancies

Jekyll is a beast to install, especially if you want to support some of the fancier plugins like syntax highlighting. This limited my blogging to only my machines. I couldn’t blog from anywhere anymore. I could have installed Jekyll on my server, but that just seems like a hassle, also see my first point about build times.

No Mobile App

I like to blog on the go, and with Jekyll I just couldn’t find an elegant solution to blog from my iPhone or iPad. I found myself trying to come up with hackish solutions and write custom scripps, but in the end it just wasn’t worth it.

I can now use Markdown with WordPress

I fell in love with Jekyll because I could write in markdown. With this plugin, I can now do just that with WordPress. It stores the Markdown in a separate meta field and generates the post_content html upon publishing the post. So, I’m not married to the plugin in case I decide to ditch it.

I have also hid the disgusting “Visual Editor” that WordPress is unfortunate enough to ship with. This makes my writing experience much more pleasant.

The Future

While Jekyll was a fun experiment, I think I will stick with WordPress for now.

geekCred–;

What's Your Cruising Speed?

2011-10-04T19:20:00-07:00

Earlier this year, I launched an application called Smart Lockscreen Creator. It was a pretty simple app that allowed you to add dynamic data (such as weather) to your wallpaper and save it back out to your camera roll. The idea is to improve the functionality of the user's lockscreen. It did very well on launch (and even made it to #1 in the Israel App Store). At the peak, I was selling about 600 copies per day.

Well, the honeymoon period is over and sales have slowed down quite a bit, however they have completely stabilized around what I'm calling the "cruising speed". So, what's my speed? On an average day, I will sell between 10-15 copies of the application per day. This is with no additional marketing, I'm not on any top 500 pages, and honestly I haven't done much to the application at all. The app even has ~2 star rating. Not because it sucks, but because people don't read the description and assume it will constantly update their lockscreen.

I have asked a few developers and this seems to be a fairly common cruising speed. So, now I'm asking you.

What's YOUR cruising speed?

Do you think updating the application will affect this speed?

What dictates the speed?

I'd love to hear your responses in the comments.

This post is part of iDevBlogADay, a group of indie iOS development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, or Twitter.

Join Me At The Voices That Matter iOS Conference

2011-09-06T21:00:00-07:00

In November, I will be attending the Voices That Matter iOS Developers conference. It will be my third time attending, and I can't recommend it enough. One major change from this year however is, I will be attending as a sponsor. A new company/project (currently in private alpha) will be participating as a sponsor at the conference.

We intend to have a table set up with multiple computers and devices so you can check out our product first hand. Bleh, that sounds kind of spammy. But, we have been working on something incredibly killer and I can't wait to share it with all of you.

If YOU are planning on attending the conference, please comment on this post, write me on Twitter, or email me. I'd love to set up a one on one time to give you the full demo.

Also, I'm sure many of you already have a discount code, but if not, I have a pretty sweet promo code for $100!

BSTBLOG

Enter that at checkout. Combining that with the "Early Bird Pricing", you save $300! Not a bad deal.

So, if you do end up coming (you are crazy not to), please communicate with me. At least to say hi, you don't have to here my super awesome sales spiel if you don't want to...

Happy Coding!

This post is part of iDevBlogADay, a group of indie iOS development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, or Twitter.

Beginning Jailbroken iOS Development - Your First Tweak

2011-08-23T22:00:00-07:00

This is the 3rd installment of my jailbroken iOS development series. If you haven't already, make sure you read the following tutorials to get up to speed.

Today I'm going to show you how to patch any internal Apple method that you want. In this demo, we are going to hook into the init method of Springboard and show a UIAlertView upon starting your phone up. It's not the coolest of applications, but the design pattern and concepts used can be applied to patching any other internal method of any class.

Getting Set Up

In order to create a tweak, you must interface with Saurik's libsubstrate.dylib dynamic library. This might come packaged with theos, but if not, you need to download a fresh copy. One can be found on this very spammy site. Download libsubstrate.dylib

Once you have downloaded it, copy it to the folder /opt/theos/lib. This is the folder where you will copy any other dynamic libraries that you might need to use in your application.

The iOS Headers

Most likely, theos came with the iOS headers that you need. If not, you need to obtain them by doing a header dump on the device OR Googling around for them. I suggest the latter as someone else has surely done the work for you. Once you have these headers, you need to put them in the folder /opt/theos/include. For this example you should have a folder in there called Springboard containing all of the Springboard headers.

Creating The Project

The process for creating the project is simple. I'm going to assume that you already have all of your environment variables in place that we discussed in the last tutorial. If not, you will get errors.

Open the console, cd into the directory where you want to create your application and type the following command to create a new Tweak application.

$THEOS/bin/nic.pl

Now, when prompted select the number [5] for a tweak. Next, you will enter all of the information about your project. The resulting output should look like this:

NIC 1.0 - New Instance Creator
------------------------------
  [1.] iphone/application
  [2.] iphone/library
  [3.] iphone/preference_bundle
  [4.] iphone/tool
  [5.] iphone/tweak
Choose a Template (required): 5
Project Name (required): WelcomeWagon 
Package Name [com.yourcompany.welcomewagon]:                 
Author/Maintainer Name [Brandon Trebitowski]: 
MobileSubstrate Bundle filter [com.apple.springboard]: 
Instantiating iphone/tweak in welcomewagon/...
Done.

The Tweaks File

Once your project has been created, you can open in up in your favorite editor. I prefer TextMate. Theos creates a file for you called Tweak.xm. This is a special file that will run through theos's preprocessor in order to hook into the classes and methods that you specify. So, rather than us having to write tons of boilerplate/crazy hook code, Theos does that all for us with a nice interface.

By default, EVERYTHING in that file is commented out. It took me longer than I care to admit to figure that out when I created my first Jailbroken iOS app.

The Preprocessor commands

There are a few commands that you need to know in order to hook into a class:

%hook and %end

%hook Springboard
// overwrite methods here
%end

The first command is called %hook followed by the name of the class you are hooking in to. You choose the methods to overwrite within the context of %hook className and %end. In the above code, we are saying that we want to hook into some methods in the SpringBoard class.

%orig

When inside a method, the %orig command will call the original method. You can even pass arguments to the command like this %orig(arg1,arg2). One thing to note is, if you don't call %orig, the original method will never be called. So, if you hook SpringBoard's init command and fail to call %orig, SpringBoard will never start and your phone will be unusable until you delete your app via ssh.

Hooking Into Springboard

Open up Tweak.xm and add the following code. Don't worry, I will explain it afterwards.

#import <SpringBoard/SpringBoard.h>

%hook SpringBoard

-(void)applicationDidFinishLaunching:(id)application {
    %orig;
    
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Welcome" 
        message:@"Welcome to your iPhone Brandon!" 
        delegate:nil 
        cancelButtonTitle:@"Thanks" 
        otherButtonTitles:nil];
    [alert show];
    [alert release];
}

%end

OK, so what's going on here. First, we import the Springboard.h header. This will allow us access to springboard. Next, we tell the preprocessor to hook into the Springboard class.

The method that we are overriding here is the applicationDidFinishLaunching: method. This will of course fire right when SpringBoard starts up. Notice that we make the %orig call. If we omit this, our phone would never boot up properly as SpringBoard needs it's initialization method.

Finally, we just throw up a UIAlertView. Again, not too exciting, but you get the point.

Adding Additional Frameworks

If you were to type build to build this project at this point you would see an error like this:

Tweak.xm: In function ‘objc_object* $_ungrouped$SpringBoard$init(SpringBoard*, objc_selector*)’:
Tweak.xm:6: error: declaration of ‘objc_object* self’ shadows a parameter

This is because we depend on the UIKit framework to show alerts. In order to tell theos that we want to link in UIKit, we must create an addition to the Makefile. Add the following line to your Makefile.

WelcomeWagon_FRAMEWORKS = UIKit

This will ensure that UIKit gets linked in.

Building, Packaging, And Installing

In the terminal, cd into your project's directory. At this point, you can type make to simply build your project. Theos has provided a nice way to automatically install your library on your device. In order for it to work you must have the THEOS_DEVICE_IP environment variable set to your iPhone/iPod's IP address. This is explained in the previous tutorial.

In the terminal type:

make install

This will build your tweak and install it on your device. When prompted to enter your password, the default is "alpine". Also, make sure that SSH is installed on your device.

After installation, your device will respring and you will be greeted with your custom message like this:

Conclusion

You should now have a basic understand of how to patch any method inside of iOS. With this knowledge, you can customize ANYTHING that you don't like about the device. If you have any questions or comments, feel free to leave them in the comments section of this post.

You can download the source code for this tutorial here.

Happy Jailbreaking!

This post is part of iDevBlogADay, a group of indie iOS development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, or Twitter.

10 Great Pixel Art Tutorial And Free Resource Sites For Your Games

2011-08-13T20:30:00-07:00

I don't usually create "list" posts, however I wanted to share a grouping of resources I have been collecting over the past few months. As you may have noticed, I'm a bit of a Pixel Art fanatic and wanted to share with you the tutorials that helped to get me started as well as some sites offering some high quality free pixel art.

Keep in mind that some of these sites have similar content, however they all take a slightly different approach in teaching. I found it very helpful to read each of the tutorials and learn from different points of view.

1. Gas 13 - Isometric Pixel Art Tutorial

link

This was my very first pixel art tutorial. I was amazed at how quickly I was able to make a really professional looking pixel art building. I highly recommend all of the tutorials on this guy's site. Some of them however can be quite complex.

2. Derek Yu - The Pixel Tutorial

link

This was another site that I stumbled upon early on in my pixel art quest. Derek provides a nice story telling approach to teaching the in's and out's of pixel art. I really appreciated his tutorial on lines.

3. Mini Wizard Studios - What is 'Isometric' pixel art

link

This guy offers another dead simple intro to pixel art. Most of it is just explanation, however his examples are quite good. He shows examples of Backgrounds, Characters, objects, tiles, as well as a ton of different UI elements and icons. It's a great place to go for some inspiration.

4. Hub Pages - How To Start With Pixel Art

link

Again, another great site for the pixel art n00b. This tutorial goes over all of the basics of line, cubes, and texturing. It also links out to other great pixel art tutorials for creating various objects such as a bed, table, and lamp.

5. Bio Rust - Isometric Pixel Art

link

This tutorial is a bit rushed however it provides a great overview for creating other basic shapes besides a cube. In addition to lines and cubes, it demonstrates pyramids, cylinders, and spheres.

6. Oceans Dream - Pixel Art Tutorials

link

This is the most comprehensive site for pixel art tutorials. While many of them aren't for the faint of heart, there is some fantastic content here. This site has everything from tips and tricks, to character creation, to breakdowns of existing games. I could spend hours on this site.

7. Pixel Character Tutorial - NekoSoraYagami on Deviant Art

link

This is a nice in depth tutorial for creating a custom character from start to finish. They start out with a base character (plain, nude, genderless) and turn it into their own creation. Very well written and very fun to follow.

8. City Creator

link

The City creator is not so much a tutorial as it is a resource for creating gorgeous pixel cities. It has a nice interface and a huge selection of buildings, objects, roads, signs, and trees to go into your city. I am not sure what their license is on the generated cities, however I didn't see any clause about not reusing the graphics in your own projects.

9. Has Graphics

link

Has graphics provides tons of free game graphics mostly geared towards tiled games. So, if you are hacking an old school RPG or platformer, I would definitely check out this site.

10. VX Resource Planet

link

This is the Motherload. I have saved the best for last. This a wordpress blog that contains TONS of free pixel art and tilesets for use in your games. They have endless spritesheets and beautiful tiles that would enable anyone to have a very professional looking game. If you visit one site from this list, visit this one.

Conclusion

If you have any resources of your own, please paste them in the comments. My readers and myself would be very interested in them.

Happy Coding!

This post is part of iDevBlogADay, a group of indie iOS development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, or Twitter.

Cocos2D Tutorial - Dynamically Coloring Sprites

2011-07-30T16:05:00-07:00

Have you ever seen a game (such as Tiny Tower) that contains similar sprites that only vary by certain attributes (coloring, shading, accessories, etc...)? I would often wonder how long it would take the artists to create each permutation of these sprites. After discovering that you can call a method on a CCSprite called setColor, I realized how most of this customization is done in code.

This tutorial will be a continuation of my last post about creating your own Bitizen in Photoshop. So, if you don't already have a Bitizen character to work with, I suggest you follow that tutorial OR download my template here.

White Out

As I mentioned above, we are going to be using the setColor method of CCSprite to dynamically color each part of our Bitizen. The way it works is each pixel's color is multiplied by the value passed into setColor giving it a "tint". So, pixels that are all white will be fully tinted and pixels that are all black will have no change.

So, our first goal is to create an "all white" version of our Bitizen. Don't worry about shading for now, I will cover that in a moment. I just started with our Bitizen as a base and created new layers for each of the "white" components.

You should end up with 5 new layers:

white-head
white-skin
white-hair
white-pants
white-shoes

For each layer, trace over the corresponding colored layer. For the "white-skin" layer, make sure to trace over the hands as well as the face. This will ensure that your Bitizen's color is consistent. When you are done, your Bitizen should look something like this:

Looks pretty bland... The next step is to add our shading. We will be using only black with varying alpha in order to achieve the desired shading. So, make sure to play with it a bit and get the shading to your liking. Add a new shading layer for each component (or simply draw on top of the current layer with the black pencil).

Your bitizen should look something like this after doing all of the shading:

Chop It Up

The final thing we need to do with our graphic is chop up the pieces so that they can be individually colored. Convert each of the white-* layers to Smart Objects, copy them to a new document, and save them. You should end up with 5 .png files (head.png,skin.png,hair.png,pants.png,shoes.png).

I increased the size of my Bitizen by 4 before doing this step. You might consider increasing their size as well. Remember that the size increase you choose will change some of the values when we recreate the Bitizen in Cocos2D. So, if you want to follow along, make sure your Bitizen is 60x100 before exporting the various parts.

One thing to note is we are going to bring these into Cocos2D as 5 different sprites. There are some optimizations that you could do using sprite sheets, however I want to make things as clear as possible. So, we are going the long way.

You can download my completed white bitizen here.

Rebuilding The Bitizen In Cocos2D

Once you have imported the 5 Bitizen image files into Cocos2D, you need to reconstruct them in code. This involves adding each sprite to the layer.

Here is the code to display the skin/head+hands in our layer. As a note, I simply created a new Cocos2D project and am using the retina only mode for my display using [director enableRetinaDisplay:YES]. The offsets will change quite a bit if you are choosing to support non-retina.

int spriteX = 240;
int spriteY = 160;

CCSprite *skin = [CCSprite spriteWithFile:@"skin.png"];
[skin setPosition:ccp(spriteX, spriteY)];
[self addChild:skin];

This will draw our white(shaded) head on the screen. That's pretty boring so let's draw the rest of the body. Update your code to look like the following:

int spriteX = 240;
int spriteY = 160;

CCSprite *skin = [CCSprite spriteWithFile:@"skin.png"];
[skin setPosition:ccp(spriteX, spriteY)];
[self addChild:skin];

int hairOffset = 11;

CCSprite *hair = [CCSprite spriteWithFile:@"hair.png"];
[hair setPosition:ccp(spriteX, spriteY+hairOffset)];
[self addChild:hair];

int shirtYOffset = -9;
int shirtXOffset = 1;

CCSprite *shirt = [CCSprite spriteWithFile:@"shirt.png"];
[shirt setPosition:ccp(spriteX + shirtXOffset, spriteY+shirtYOffset)];
[self addChild:shirt];

int pantsYOffset = -15;
int pantsXOffset = 1;

CCSprite *pants = [CCSprite spriteWithFile:@"pants.png"];
[pants setPosition:ccp(spriteX + pantsXOffset, spriteY+pantsYOffset)];
[self addChild:pants];

int shoesYOffset = -17;
int shoesXOffset = 1;

CCSprite *shoes = [CCSprite spriteWithFile:@"shoes.png"];
[shoes setPosition:ccp(spriteX + shoesXOffset, spriteY+shoesYOffset)];
[self addChild:shoes];

Now, you should see the lonely ghost of a Bitizen standing in the center of your screen.

Still boring... Time to spice him up with some color.

Tinting Cocos2D Sprites

As I mentioned before, tinting Cocos2D sprites is very simple. I would recommend keeping all sprites that you wish to tint a shade of white/gray otherwise some crazy things will happen.

The setColor method takes an array of integers from 0-255. This array contains 3 numbers (1st for red, 2nd for green, 3rd for blue). For example, we can pass all Red to the setColor method by sending it {255,0,0}.

Let's start by tinting our Bitizen's shirt a random color. Change the code that displays the shirt to look like this:

CCSprite *shirt = [CCSprite spriteWithFile:@"shirt.png"];
[shirt setPosition:ccp(spriteX + shirtXOffset, spriteY+shirtYOffset)];
ccColor3B shirtColor = {arc4random() % 255,arc4random() % 255,arc4random() % 255};
[shirt setColor:shirtColor];
[self addChild:shirt];

Now, every time you run the application, the Bitizen should have a different shirt color. You can apply this principle to each of your sprites to completely customize your Bitizen.

What if you only want to limit certain colors? (you ask). Well, that's a great question. I solved this by creating an array of ccColor3Bs. Basically an array of arrays. And then I index into this array and set the color accordingly. Here is an example of setting a random skin color to avoid having blue people (unless maybe you are making Smurfs).

ccColor3B skinColors[] = { 
    {247,224,194},
    {255,232,214},
    {136,119,82},
    {245,232,205},
    {144,110,38}
};
CCSprite *skin = [CCSprite spriteWithFile:@"skin.png"];
[skin setPosition:ccp(spriteX, spriteY)];
ccColor3B skinColor = skinColors[arc4random() % 5];
[skin setColor:skinColor];
[self addChild:skin];

I have an array of 5 different arrays and randomly index into it using skinColors[arc4random() % 5]. This will give me a random color within my skin color group.

After running this through a loop and adding random colors to some of the other sprites, I ended up creating the image you see at the top of this post.

Conclusion

I hope that this tutorial has found you well and I have demystified the magic that is dynamic sprites. You may download the source code for this tutorial (include the code to generate the screenshot above) here.

If you have any questions or comments, please feel free to leave them in the comments section of this post. Also, make sure you subscribe to my RSS feed for more great tutorials!

Happy Coding!

This post is part of iDevBlogADay, a group of indie iOS development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, or Twitter.

Pixel Art Character Tutorial - Creating And Customizing A Bitizen

2011-07-16T13:05:00-07:00

This will be a continuation of my last pixel art tutorial about configuring Photoshop for Pixel Art. For the past month or so, both my wife an I have been pretty addicted to this amazing game called Tiny Tower created by Nimble Bits. The biggest draw for me to this game isn't the fact that it has great simulation style game mechanics, it's the fact that it was created using Pixel Art.

As I mentioned in my other post, I have a serious passion for pixel art and have been doing everything I can to learn about it and improve my skills. One great thing about it is, anyone can do it. You don't have to be this amazing artist to be able to create interesting pixel art.

Getting Started

They say that imitation is the best form of flattery, so we are going to flatter the heck out of the Nimble Bits guys are learn how to make our own Bitizen characters from Tiny Tower. I have found that a good starting place for learning pixel art (or anything really), is to start with something that already exists, copy it, then modify it. Once you do that a few times and get comfortable, then you should have the confidence to branch out into creating your own artwork.

When creating a game (or complex piece of pixel artwork) that involves a ton of different characters, it will save a ton of time and energy if you create a "base character". What I mean by "base character" is one that is very bland and plain. Something that is easily customizable. So, that's what this tutorial is about, we are going to create a bland white guy for Tiny Tower.

One thing I want to point out before we start is, I have lowered the resolution of the character a bit and am not putting in as much detail as the Nimble Bits team. This is just for simplicity's sake in order to get my point across and make things easier on you.

New Document

Start out by creating a 15x25px document. I know, it's very small, but we don't need much. Make sure you have Photoshop configured for pixel art. At this point, I'd suggest creating all of the layers for your bitizen. Why use layers? you might ask. Great question. Well, in order to quickly modify our base character, we want to have a separate layer for each of his features/body parts. So, create the following layers.

Head
Mouth
Hair
Eyes
Shirt
Pants
Feet
Arms

Now, you can confidently modify any part of your Bitizen without the risk of destroying the rest. As I reference each part below, make sure you switch to the correct layer when drawing.

Creating The Head

The head is perhaps the most complicated part of the Bitizen due to its odd shape and shading. The shape is due to the fact that the Bitizen is always looking in the forward direction.

Start with a skin tone color (I have used #f7e0c2) and create a 10 x 6 rectangle in the center of your view like this:

Now, that the base head is in place, it's time to draw the chin and neck. With the same color, indent one pixel in on the bottom and draw straight across. Finally, indent 3 more pixels in, and draw 4 pixels across. This is what your head should look like at this point.

Shading

Shading with pixel art is simply a matter of drawing with a darker shade of your main color. With the color chooser in PS and the skin tone still selected, drag the color down to a slightly darker shade and lowlight a 1 pixel line on the right side of the face. In our example the Bitizen is looking to his right, so his left will be shaded.

Then, add some more shading as you see necessary. If you look at mine, I have used a bit of shading to extend the head a little bit.

Hair, Mouth And Eyes

The mouth and eyes are very simple with our Bitizens. The eyes are just single black pixels and the mouth is just a 4 pixel line using a darker shade of the skin tone.

Hair can be whatever you like. I have chosen a very simple hairstyle that you see quite often in the game with a simple shade of brown. I have also applied the same shading technique to the hair that I did to the face and neck. When you are finished, it should really start looking like a person.

Creating The Body, Legs and Feet

For the body, start with 6 x 5 rectangle set to the color that you want to make the shirt. I chose #63cfea. For the pants, simply draw a solid line. Finally, the feet are just two 2px lines spread apart by two more pixels. If you notice in the game, to animate the movement of these guys, they simply alternate between this position and a centered 4px line. It just goes to show you how much things can be simplified when you use pixel art.

To finish up our Bitizen, we add single pixel dots for hands and a couple pixels for arms. After that, we add a collar and some simple shading.

Here is what the completed Bitizen looks like:

Conclusion

The one thing to remember when creating pixel art for game is to keep it simple. Simplify everything. Take for example the Toy Story characters I made at the top of this post. They are very simplistic yet you recognize who they are right away. My 2.5 year old son was yelling "Woody! Buzz!" the entire time I was creating them. I think this is one of the largest challenges; sticking to "less is more".

There are some other fun things we can do to customize these guys. We can even do it in code! Next time, I will show you how to take a "base character" and customize its colors using Cocos 2D. This can save you even more time and energy when trying to make dynamic characters for your game.

If you are feeling lazy and want to simply download my bitizen base, click the following link:

Download my bitizen.psd template

On a final note, don't just copy these guys for YOUR game! I know it might seem tempting to give em a different shirt and plop them in your super rad fart machine RPG, but these guys are the product of the hard work of the guys at Nimble Bits.

If you have any questions or tips, please feel free to leave them in the comments.

I would also LOVE to see some of the custom bitizens you guys come up with. Please link to them in the comments if you end up creating some.

Happy Coding!

This post is part of iDevBlogADay, a group of indie iOS development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, or Twitter.

Configuring Photoshop For Pixel Art

2011-07-02T07:00:00-07:00

First things first. My wife and I had welcomed a new baby boy into the world on Monday so you guys are going to have to see the obligatory "dad" pics.

Here they are

Ok, now that's past us, let's chat about pixel art. I have always been a HUGE fan of pixel art both in games and as a form of art. As an aspiring game developer (games coming soon ;) ), I found pixel art a great fit for me. Not only is is aesthetically pleasing, it also allows developers to create "better" art than developer art. All it takes is a little patience.

Today, I'm going to share with you how I have configured Photoshop to create some pixel art and eventually show you how to make your own Bitizens from Tiny Tower in a follow up post.

Some of you might argue that Photoshop is not the way to go and that there are better tools for Pixel art. I have tried quite a few and keep coming back to PS because of some of it's great features (shapes, layering, masks, gradients, noise filters, etc...). We can use a lot of these tools to our advantage when creating pixel art, PS just needs to be set up correctly.

Just a heads up before I start, I'm using Adobe Photoshop CS3 for Mac.

Change The Way Photoshop Scales Images

First, we need to change the way PS scales images. This is useful for when you are ready to export your sprites for production. By default, PS uses a Bicubic algorithm when you want to enlarge an image. This generally produces a very blurry effect. It's quite useful in many cases, but terrible for pixel art. Here, we need to tell PS to use a "Nearest Neighbor" scaling algorithm. This will preserver all of our edges without PS mucking with the blending.

To change this setting, navigate to Photoshop->Preferences->General

The only setting you need to modify is "Image Interpolation". Make sure to change it to "Nearest Neighbor".

Enabling A Grid

When creating pixel art, it is very useful to have a grid in place in order to determine where to place your next pixel. Without it, you are just blindly placing them. To turn on and configure a grid in PS, navigate to Photoshop->Preferences->Guides, Grid, Slices & Count...

Make sure to set Gridline every to 1 and Subdivisions to 1. This will create a 1px grid on for you to use as a guide.

Once you have configured the grid, click on View->Show->Grid to display it. You might have to do this for every document.

Configuring the Pencil Tool

When creating pixel art in PS, the pencil tool is your best friend. You will use it ~95% of the time when drawing. We need to make sure that the pencil draws single pixel dots without any interpolation. With the pencil tool selected, click the dropdown next to brush, tap the arrow and then select basic brushes. When prompted to replace current brushes, click OK.

Next, select the 1 px brush (it should be in the top left). Most of the time, you will want to draw with single pixels.

Creating A New Document

Deciding on a document size can be tricky. You generally want to create your document as small as possible to avoid having to do more work than you need. The size depends on how "pixellated" you want your art to look after scaling. Basically, using the scaling we chose above (nearest neighbor), the "pixels" will just increase in size.

Here is a blown up view of our 15x25 image that we will use in the next tutorial to create a Bitizen from Tiny Tower.

Since the zoom level isn't too high, we are seeing grid slices every 2 pixels rather than 1. As you zoom, you will see the grid size increasing.

Multiple Zoom Levels In View

One cool trick with PS is, it allows you to have multiple windows of the same document open. The reason this is handy is you can see various zoom levels for your artwork all at once. While drawing each pixel zoomed in, you can see the result in the desired resolution. This helps out dramatically when you are trying to fine tune your work.

To do this, go to Window->Arrange->New Window for [projectname.psd] Now you can control the zoom level of each window individually.

In the next post, I will go over how to make these Bitizens as well as some tips for customization as an example for creating dynamic characters. We will also go over some of the basic techniques that were used.

If you have any comments, questions, or Photoshop Pixel Art Tips, please feel free to post them in the comments.

Happy coding!

This post is part of iDevBlogADay, a group of indie iOS development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, or Twitter.

Announcing iOS 4 In Action + Free Chapter!

2011-06-18T07:00:00-07:00

Wow, I can't believe it has been over a year since the release of my book iPhone And iPad In Action. Since then, we have sold over 6,000 copies and have just have released in numerous languages!

As with all iOS (tech books really), my book was almost outdated the moment it hit the shelves due to Apple's constant SDK release cycle. My book ended with "here is what's coming in iOS 4…", and didn't hit the shelves until after iOS 4 was released.

I was asked last year by Manning Publishing to write the 3rd version of the book to include all of the 4.0 SDK changes. Due to some huge changes in my life, I was unable to accept and they had to find the 4th author to work on the book.

Earlier this month, Jocelyn Harrington released the 3rd version of the book titled "iOS 4 In Action". Here is a bit about this version from their site.

Written for Xcode 4, iOS 4 in Action guides you from setting up your development environment, through coding your first app, all the way to selling in the App Store. Work through sample applications including a chat client, a video game, an interactive map, background audio, and more as you explore the iOS 4 SDK.

Here are some highlights about what's inside.

Full coverage of iOS SDK 4.3
Mastering Xcode 4
Multitasking for iPhone and iPad
Game Center, iAd, and AirPrint
Local and push notification
Implementing in-app purchasing

This is a significant update and I'm really excited to get my copies in the mail. As soon as I do so, I'll do a couple giveaways on my blog. Make sure you stick around or subscribe to the RSS feed so you don't miss it!

Freebie

Manning is allowing anyone to download the full Chapter 21 on multitasking now for free! Go grab your copy!

Happy Coding!

This post is part of iDevBlogADay, a group of indie iOS development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, or Twitter.