qq_tracker_code_advanced_default

We thought it would be a great idea to have an installer for the cocos2d game engine to make it quick and simple for everyone to install the latest stable cocos2d build. The cocos2d installer app is a native Mac OS X app that after installation allow you to, with a click of a button, download the latest stable build of the cocos2d game engine, install it and the Xcode templates to get you up and running and making games simple and quick.

You can download Cocos2d Installer by clicking on the link below:

  cocos2d Installer (368.6 KiB, 974 hits)

As new cocos2d builds become available we will update the Cocos2d Installer app so that you can grab the latest version of cocos2d.

We were going to list this app for free on the Mac App Store but because of some of Apple’s guidelines, specifically file locations, we have had to remove it and host it here. If you find the app useful or can think of something else to add to it to make it more useful then feel free to leave a comment.

I would like to start this post by introducing some new software that will make the lives of developers much easier. When I first starting developing my new game Elementals HD for the iPhone I had no idea that loading individual PNG’s as textures for sprites would result in a final memory consumption of over 130MB on load. That’s really bad considering that the newest iPod Touch only comes with 256MB of RAM which to this day I will never understand. Apple added the hi-res display to the iPod Touch which means that images will use twice the amount of memory that they were using before. With the iPhone 4 they did it right and doubled up on the memory which helps a lot with the HD images taking up twice the amount of memory as the SD ones do. So anyway, back to the topic.

I needed some way to minimize the amount of memory utilization, so I started reading about sprite sheets and image sizes in the power of 2, etc… I found a neat utility called Zwoptex to create sprite sheets of all my images. This ended up helping me quite a bit, not only did it reduce the amount of disk space but it also reduced the amount of memory being used. At this time I was able to get my memory utilization down to about 90MB. To me, this is still quite high and I was not satisfied with the result, so I continued to look for a solution. I started reading about PVR’s and how fast they load and then I read about compressed PVR’s. Next, I needed to figure out how to use these PVR’s to lower my memory utilization and speed up my loading times.

I found an awesome app called TexturePacker which runs natively on Mac OS X. TexturePacker is a very similar tool to Zwoptex in that it creates sprite sheets from images but is very different and far more advanced when it comes to optimization. Long story short, I was able to use TexturePacker to create *.pvr.ccz sprite sheets for HD and SD images and reduced my memory utilization down to 50MB… WOW.. Now that is a lot better then the 130MB I started with. What I’d like to do now is present a tutorial on the usage of TexturePacker and walk you through step-by-step to get HD images loaded into TexturePacker, optimize them, publish them and finally write the code in Xcode to make them work. I’ll also share some best practices for memory management at the end of the tutorial.

Software you will need:

  1. Texture Packer

After you are done downloading the software above, you can follow the below steps to install TexturePacker and start up the Demo Project

Install TexturePacker:

If you haven’t downloaded Texture Packer yet, you can download it here. After the download has completed you can double click on the DMG file so that it mounts a disk image. The disk image contains the Texture Packer installer package. The screen should look like the screen shot below:

Texture Packer - Disk Image Contents

Double-Click the TexturePacker Package File and you will see the install screen, like the one below:

Texture Packer - Install

Texture Packet - Install

From there just follow all of the prompts until Texture Packer has completed the install process. You will find Texture Packer within your applications folder. Go ahead and launch Texture Packer. You will get the following screen:

Texture Packer Essential vs Texture Packer Pro

Texture Packer Essential vs Texture Packer Pro

Unless you’ve purchased a license you should choose Essential. The main difference is that with the Essential (Free Version) anything you export will be exported in red. In the next section I will give a brief overview of Texture Packer and the features we will use the most.

Note: All typos within the installer have been fixed since version 2.1.3

Importing Sprites:

Texture Packer - Import Sprites

Texture Packer - Import Sprites

Referring to the screen shot above I used the Import Sprites button to import a selection of sprites to work with. Once I imported the sprites, Texture Packer automatically adjusts the sprite sheet size to fit the 3 sprites I imported. If you look to the bottom right of the application on the status bar, Texture Packer displays the size of the resulting sprite sheet and the amount of memory it will consume. In this case with the above images, my sprite sheet will be 128×128 and consume 64 kB of memory. 64kB of memory isn’t a whole lot but lets go ahead and do some optimization anyway and see if we can cut down on memory usage.

On the left hand side of the app you will see the Texture Settings menu that is divided into 3 categories; Geometry, Layout and Output. Scroll down to Output and find the Image format setting. The default for this setting is RGBA8888 which results in a sprite sheet with the highest quality and the most memory usage. Change this setting to RGBA4444 and watch what happens to the memory usage. 32kB is what the memory usage is now… WOW we just cut memory usage in half but at the cost of quality. Why? The reduced quality comes from taking a 32-bit image and converting it to a 16-bit image. Make sense?

Ok, lets fix the quality to make it look a little better. Two fields down, you’ll see Dithering. The default Dithering setting is NearestNeighbour which makes for some ugly gradients when going from 32 to 16-bit. Go ahead and change this to FloydSteinberg+Alpha and watch in amazement as your gradients start to look like gradients again. You may notice that this results in your sprites looking a bit noisy but remember, we are working with hi-res images here and every 4 pixels will equal 1 point so the image should look pretty sharp, at least that’s what I’ve experienced.

Let’s take a minute to go over the Output Category that’s in the Texture Settings Menu:

  • Data Format – This setting is for defining in what format the sprite sheet data should be processed in. We need to select cocos2d for this. What this will do is generate a plist file that we will load into frame cache a little later.
  • Data File – This will be the output location and name of the data file (plist file for cocos2d) You don’t need to set this as it will automatically be filled when you set the Texture File
  • Texture Subpath – Not sure what this is for, I’ve never used it
  • Trim sprite names – Leave this unchecked, I’m not sure what this is used for
  • Texture Format – Here you will choose the output format of your sprite sheet. You can choose any format you like, they are all compatible with cocos2d but I recommend Compressed PVR (.pvr.ccz). This will give you the most compression and pretty quick load times.
  • Image format - This is where we will get most of our optimization from. For most of the sprite sheets we create we should choose RGBA4444 as it will give you the best result. RGBA4444 is used for sprites with transparency’s. If you have a sprite that doesn’t use any transparency you should use RGB565. If you have a sprite sheet that absolutely needs to have the highest quality then use RGBA8888 but we aware that this will result in high memory use, especially if your sprite sheet is 2048 x 2048.
  • Texture File – This is where you would set the name of your texture file. Click on the browse button to select your location and then give a name. If you are working with hi-res images be sure to add -hd at the end of the filename, you’ll see why, later.
  • Dithering – I covered this earlier but just to re-cap, if you are using RGBA4444 you should use FloydSteinberg+Alpha and if you are using RGB565 then use FloydSteinberg
  • Premultiply alpha – This is used to limit the amount of artifacts and possible thin black borders around your sprites when sprite anti aliasing is on. Also semi-transparent pixels might get too dark without this setting. If this is enabled be sure to add the following to your code:
    [CCTexture hasPremultipliedAlpha:YES]
  • AutoSD – This is one of my favorite features of TexturePacker. What this little nifty checkbox does is automatically create a low-res sprite sheet and plist file for you but you have to make sure that you named your Texture file with a -hd at the end.

A Note from the author of TexturePacker: Whenever possible, you should use Add Folder to import your sprites because this uses smart folder. Every time you add sprites to the folder and update your sprite sheet it re-scans the contents of the folder and adds all sprites. This makes sprite handling much easier than adding single sprites.

Ok, so now we have our sprites imported and have everything optimized. Next we will talk about Publishing.

Publishing Sprite Sheets:

Before you click on the Publish button be sure that you’ve got all of your settings configured the way you want them. Here’s a quick step-by-step re-cap of the steps above:

  1. Import sprites either by using the Add Sprites or the Add Folder button.
  2. Set Data Format to cocos2d
  3. Set Texture format to Compressed PVR (.pvr.ccz)
  4. Set Image format to RGBA4444
  5. Set Texture file to something-hd
  6. Set Dithering to FloydSteinberg+Alpha
  7. Check AutoSD

With all of the above completed go ahead and click on the Publish button. Texture Packer will now export your hi-res and low-res sprite sheets and associated plist data files.

You should have something similar to the following screen shot:

There isn’t too much to say about publishing, the next section will cover how to get your sprite sheets to work with cocos2d.

Writing The Code:

After publishing your sprite sheets with Texture Packer, the next and last step would be to add this into your project and get them to show up in your scene. I’ll be walking you through adding your sprite sheets to your project and showing you code examples of how to make the best use of your new sprite sheets.

Open up Xcode, create a new cocos2d Project from one of the cocos2d templates and copy the 2 sprite sheets and 2 plist files that were exported from TexturePacker into your Resources folder within your Xcode project, make sure that copy files is checked.

Copy Items

Copy Items

Once the sprite sheets and plist files have been added go ahead and click on your HelloWorldScene.m and find your init method. Once you’ve located your init method replace what’s inside the if statement with the following lines of code:

[CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGBA4444];
CCSpriteBatchNode *spritesDemoNode;
spritesDemoNode = [CCSpriteBatchNode batchNodeWithFile:@"demosprite.pvr.ccz"];
spritesDemoNode.tag = 805;
[self addChild:spritesDemoNode];
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"demosprite.plist"];

The code above does the following:

  1. Sets the current Pixel format to RGBA4444 to match that of our sprite sheet that we set in TexturePacker
  2. Creates a sprite batch node using the Compressed PVR
  3. Sets a tag ( has nothing to do with texture packer but I use tags for other reasons )
  4. Adds the node as a child to your current Layer
  5. Adds the sprite frames to cache from the plist file that was exported by Texture Packer

Next we need to create a CCSprite from the frames that are in cache, we do this with the following code:

CCSprite *spriteDemo = [CCSprite spriteWithSpriteFrameName:@"fireball.png"];
spriteDemo.position = ccp(size.width/2, size.height/2);
spriteDemo.tag = 1;
[self addChild:spriteDemo];

The above code does the following:

  1. Creates a sprite from the frames in cache. In this case I had an image named fireball.png that was one of the images that was imported into Texture Packer. When Texture Packer creates the plist file it uses the names of your sprites for the frame names, which makes it easy to use.
  2. Next I am setting the position to the center of the screen. size is a variable that I’ve setup that has the height and width of the screen as properties.
  3. Again I am setting a tag, not something you have to do
  4. Last we are adding the new sprite to our layer.

If all went well and you’ve followed all of the above directions then you should be able to build your project and see your sprite on the scene. Granted, this is more work then copying individual PNG’s into your project and just creating sprites from the PNG’s but that is a big waste of memory and will eventually crash your app. Remember, with Texture Packer I was able to reduce my memory to more then half of the original memory utilization even using Zwoptex did not make a huge improvement with memory usage. I would definitely recommend Texture Packer to anyone that is interested in optimizing memory.

If anyone has any questions or comments please feel free to leave them. If anyone has any more optimization tips, please share, I would love to hear them and I’m sure everyone else would appreciate it as well.

Have you ever had to send a text message, but you just lost your cell phone. Maybe had it stolen, or just happened to drop it in the toilet one drunken night (not judging).

Anyway If you’ve ever been in one of the above situations or similar, or just want to try a cool experiment, here’s how you can send a text message for free by sending an email.

Just send your email to one of the email addresses below, substituting ‘number’ with the 10 digit US number you’re sending it to.

  • AT&T: number@txt.att.net
  • Qwest: number@qwestmp.com
  • T-Mobile: number@tmomail.net
  • Verizon: number@vtext.com
  • Sprint: number@messaging.sprintpcs.com or number@pm.sprint.com
  • Virgin Mobile: number@vmobl.com
  • Nextel: number@messaging.nextel.com
  • Alltel: number@message.alltel.com
  • Metro PCS: number@mymetropcs.com
  • Powertel: number@ptel.com
  • Suncom: number@tms.suncom.com
  • U.S. Cellular: number@email.uscc.net

Fill in the body with whatever you were going to type in your text message and hit send.

UPDATE: I just released A Geek Clock on the App Store, you can check out more info in this post A Geek Clock

So I decided that I would write up a quick tutorial on how to read a binary watch. It’s actually pretty simple after you learn how to convert binary to decimal. Not to worry converting from binary to decimal is easy. I’ll give you a quick example of how this can be done, quickly and easily.

Let’s say you have an 8 bit binary ( base 2 ) number 00010011 and you want to know how to convert it to a decimal ( base 10 ) number. You can write it out similar to the example below.

128 64 32 16 8 4 2 1
0 0 0 1 0 0 1 1

All you have to do her is for every number that has a one in the bottom field add the top numbers together. So in this example we have 16 + 2 + 1 which equals 19. So our binary number 00010011 becomes 19 in its decimal form. This is as much information as you’ll need to know about converting binary to decimal in order to read a binary watch, therefore I will not go much further into converting binary to decimal or decimal to binary.

Most binary watches have 2 rows of lights, the lights indicate a 1 or 0. If the light is on, it represents a 1 if the light is off it represents a 0. I’m going to use the image below as an example:

Example Binary Watch

Example Binary Watch

In this example, there are 2 rows. The first row reads 1011 and the second row reads 110100. See if you can figure that out on your own by looking at the watch. Notice that I’ve substituted the lights that are on with 1′s and the lights that are off represent 0′s.

You’ll also notice that these watches don’t represent 8 bit binary numbers. This is o.k. and doesn’t pose a problem whatsoever. Either you can read from right to left or you can add leading 0′s. For example:

The top row being 1011 would actually be 00001011 and the bottom row of 110100 would be 00110100. Not too bad but it does waste time doing it this way. If you can remember the numbers: 1,2,4,8,16,32 then you’re all set, each number is just a multiple of the previous one. So knowing these numbers, we would read the lights from right to left. Starting with the top row, the light is on so it has a value of 1, the 2nd light is on so it has a value of 2 and the 4th light is on, so it has a value of 8. If we add these numbers together we get 11 and that would be the hour of the time. Now for the bottom row, The first and second light are off so they don’t get a value the third light is on so it has a value of 4. The fifth light is on and thus has a value of 16 and the sixth light is on giving it a value of 32 if we add all of these number together: 4 + 16 + 32 we get 52 which is the minutes. So the time that this binary watch is displaying is 11:52

It may seem like a difficult task at first but the more you use it, the easier it will get. Just think about it this way, we were all raised on base 10 system growing up. So for all the years in our life we’ve been using this base 10 system, trying to get used to a base 2 system for every day use is not simple but can be achieved with patience and practice.

On a side note, as I was writing this post, I thought it would be cool to make a dashboard widget of a Binary Watch for Mac OS X. I’ve actually finished developing it before I finished writing this post. You can download the widget from my Projects Page. Let me know what you guys think. If you like this widget, then you should definitely check out the real thing. How cool would it be to wear this widget on your wrist. Well if you check out thinkgeek.com, you’ll find that they are selling a binary watch that you can wear on your wrist. In fact their design is what inspired this widget. Here is a link to the watch http://www.thinkgeek.com/gadgets/watches/6a17/

So, you have an iPhone and apart from the many different apps you can download and things you can do with your iPhone, you can also share your current GPS location with your friends. I’m about to show you a tutorial for doing just that.

Note: You will need to have at least OS 3.0 installed for this to work.

It’s actually quite simple, you can do this using either an iPhone or an iPod Touch.

  1. Using the iPhone or iPod Touch click on the App Store
  2. Click Search
  3. Type in Navizon Lite
  4. Click on Navizon Lite
  5. Click on Free and then click Install

Push the home button and then launch the Navizon App. If you haven’t created a Navizon account yet, you can do it from the first screen or enter an existing account.

Once you are logged in, click on Settings and change Appear Visible to On, this will update your location every 10 minutes. If you want your friends to be able to text you with a keyword at any time to find out your location then turn on Locate-by-SMS and set the specific keyword to trigger the location.

To add your friends click on Buddies on the bottom right hand corner of the App and then click the + icon on the top right corner, enter your email address and your friends email address. An email will be sent with a link to accept your invitation. Once accepted, your friend will appear in your list.

What if you want to share your location with someone who isn’t using Navizon? or doesn’t have an iPhone? Stay tuned for my next article on updating your FireEagle location with Navizon.

Managing your iPod with Songbird can be accomplished without much difficulty. Just follow this easy to use tutorial.

First things first. If you don’t have iTunes installed then you can skip the iTunes configuration steps.

iTunes Configuration:

  1. Plug in your iPod and open iTunes (if it doesn’t auto-launch). Select your iPod and then choose the Settings tab. Uncheck Open iTunes when this iPod is attached and check the box labeled Enable disk use (per the iPod plugin for Songbird page). Move the slider all the way over so that the maximum amount of “Data” is available. This will erase all of the songs currently on your iPod. Click Apply.
  2. Exit out of iTunes

Songbird Configuration:

  • If you don’t already have Songbird installed you can download it from here Get Songbird
  • Download the iPod plugin you can download and install it from here.
  1. When you launch Songbird for the first time, if you’ve previously used your iPod with iTunes, it will ask you if you want to change the library over to Songbird. Click Yes.
  2. If your iPod is connected you should see it listed in the left pane. You can click on it and set your options. My personal preference is to manually manage songs and playlists.
  3. Drag some songs from your library to your iPod

Note: If you have iTunes, the next time you open it and your iPod is connected, it will probably ask if you want to erase the new library and sync with iTunes. Click Cancel if you want to continue using Songbird as your iPod manager.

Have you ever stressed out about all those duplicate songs on your iPod. I know I have and I’ve recently done some research to help remedy the problem. I found a great free tool for Mac’s that removes duplicates from your iPod and also allows you to copy songs from your iPod back to your Mac.

You can download the program here: YamiPod

Download the software, mount the DMG and the copy YamiPod to your Applications folder. Run the YamiPod Application if your iPod is disconnected you will get the following prompt

 

YamiPod - iPod Not Connected

YamiPod - iPod Not Connected

 

Connect your iPod and you will be prompted with the following screen

 

YamiPod - Select iPod and enter FWID

YamiPod - Select iPod and enter FWID

 

Select your iPod and type in your FWID also known as the serial number. You can find this ID by following theses steps.

  1. From the apple menu ( top left of screen ) select About this Mac and click More Info
  2. In the left column select Hardware and then USB
  3. In the USB Device Tree you should see your iPod listed, select it
  4. The FWID is the Serial Number listed in the lower box

Once you enter in the FWID and click OK you may be presented with the following warning

 

YamiPod - Warning

YamiPod - Warning

 

Ignore it, click on Continue, at this point you should have a window with a list of all the songs on your iPod.

 

YamiPod - Song List

YamiPod - Song List

 

To remove duplicates follow these steps

  1. Tools -> Advanced -> Remove Duplicates
  2. By default everything being compared will be checked, you can uncheck anything that you don’t want YamiPod to compare, I usually leave defaults.
  3. Click OK
  4. If any duplicates are found it will show you which ones it found and give you the option to remove them

To copy songs from your iPod to your Mac follow these steps

  1. You’ve got several options here, you can copy all the songs from your iPod, a particular album, a particular artist, or a single song.
  2. In the top left pane you’ll see your artists, select one and it will show you all songs by that artist in the bottom pane, you can Right Click ( Control-Click ) on a song to save a single song or you can Select all and then right click again and click Copy Song To, this applies for any of the configurations in step 1.
  3. After clicking on Copy Song To, you will be presented with a window with options. Leave the defaults then click on Destination, a window will pop-up that will ask you where you want to copy the songs to.
  4. Select your destination and click copy.

This software has many other useful features, have fun exploring. Hopefully this tutorial was helpful.

So I was reading through the May issue PC Magazine and found a few articles I wanted to share. This particular post will reveal a few tapping tricks for your iPhone.

  • Tap the Status bar at the top of the screen ( where the clock usually is ) to return instantly to the top of long pages.
  • Hold a finger on a link in Safari to get a pop-up saying where the link goes.
  • Tap the bottom left or right corner to scroll left or right.
  • Tap with two fingers to zoom out in Maps.
  • Drag inside text boxes with two fingers to scroll without scrolling the whole page.
  • Double-click the Power/Lock button to send incoming calls to your voice mail.
  • Double-click the Home button in any app to bring up the iPod controls.

Feel free to comment and add your own tapping tips / tricks for the iPhone