Cocos2d – useful tools

最新推荐文章于 2022-11-21 18:21:52 发布

love_hot_girl

最新推荐文章于 2022-11-21 18:21:52 发布

阅读量2.2k

点赞数

分类专栏：各式工具引擎

各式工具引擎专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Cocos2d – useful tools

July 5, 2012 by Chris

Three years ago there was a dearth of tools for cocos2d development. It’s a lot better now. This is not a comprehensive list of all the tools out there but covers the ones I’ve tried and found useful. If you’re looking for something and it’s not in the list try the Cocos2d forum, there’s a sub forum specifically for editors/tools.

Some of the tools are free, others have trial versions so you can try them out before purchasing, those that are not free I have paid for personally. A few of the tools started out with less features and early adopters were rewarded with a lower price, as the tools have had features added the price has increased to reflect this. Getting in on an app early helps support the developer in the early stages while often saving you money over time.

The sample code alongside some of the apps below is not meant to serve as best practice, they’re small code snippets that will hopefully help find the answers you’re looking for in google/cocos2d forums. A search for CCLabelBMFont should bring up far better cocos2d specific label answers than typing in ‘label‘. This article follows on from the Cocos2d – Getting started post.

Graphics tools

Particle Designer

Paid app available from the Particle designer site. Before particle designer, trying to get a particular look for a particle system in cocos2d was a long winded process of trial and error, change some values in the code, build, run, change, build, run etc. Particle designer is a Mac app that gives you a dashboard of sliders and a preview so you can modify your particle system on the fly. When you’ve finished you simply select the embedded texture option, save out as a cocos2d plist and add it to your project.

For a plist saved out as myParticleSystem.plist get your particle effect to appear in your project using the following code;

  // 1. Create a particle emitter using the setting in the plist file. ARCH_OPTIMAL_PARTICLE_SYSTEM
  //    is a macro that picks the optimal particle system for the device you're running on.
  CCParticleSystem *emitter = [ARCH_OPTIMAL_PARTICLE_SYSTEM particleWithFile:@"myParticleSystem.plist"];
 
  // 2. Add the particle system
  [self addChild:emitter];

Particle designer has a random mode and also contains a library of shared emitters submitted by other users.

Glyph Designer

Paid app available from the Glyph designer site.If you have text being regularly updated in a game, CCLabelTTF is going to start hitting your performance. A solution is to create a bitmapped font atlas, a single texture that contains all the characters that you are going to need along with a data file that contains the coordinates of where those characters are located. Cocos2d provides a CCLabelBMFont class that reads the fnt file format and build up your text by copying the characters you need from the texture atlas you provide.
Building these atlas and data files by hand would be very painful, Glyph designer makes creating the files very easy and you can preview the final font output in real time as you add effects like drop shadow, outline etc.

Once you’re happy with your font, export it as a .fnt file (Cocos2d Text format). Add the generated .fnt and .png file (generated at the same time) to your project and use the code below to get it to show.

  // 1. add the .fnt and .png generated by Glyph designer to your project
 
  // 2. create a CCLabelBMFont label, specifying the initial text and the .fnt file
  CCLabelBMFont *myLabel = [CCLabelBMFont labelWithString:@"hello world" fntFile:@"blob.fnt"];
 
  // 3. Add it
  [self addChild:myLabel];
 
  // ... when you want to update the string use setString
  [myLabel setString:@"This is an update!"];
 
  // Only characters that are in your font atlas will be displayed

There’s no font alignment setting in Glyph designer, you need to handle that in cocos2d, for a single line of text it’s just a case of moving the anchor point.

Font alignment

  // by default label is center aligned (a)
  myLabel.anchorPoint = ccp(0.5, 0.5);
 
  // left aligned (b)
  myLabel.anchorPoint = ccp(0, 0.5);
 
  // right aligned (c)
  myLabel.anchorPoint = ccp(1.0, 0.5);

Anchor points are not set using pixels or points but as a fraction of the contentSize. Right aligned for example ccp(1.0, 0.5), the ccp is a macro shortcut for CGPointMake, the x value1.0 indicates that we need the full width of the Label for our anchorPoints x position and the0.5 y value gives us half of the labels height for the anchorPoints y position.

Photoshop

Paid app available from the Adobe site. The daddy of the digital art world, comes at a premium price but packed with features and with .PSD files being pretty much an industry standard, one that’s hard to be without. I’m still happy with CS3 but the rest of the world is up to CS6.

At it’s heart Cocos2d maps textures onto openGL geometry, these textures will likely start life as .png files in Photoshop or Gimp. When you create a sprite, CCSprite creates some geometry (two triangles) to map some texture data onto (an image) and calls addImage on a singleton object called CCTextureCache. The image is converted into a form that openGL can deal with efficiently and the filename is used as a reference. This means if you create a 100 sprites using the same image file, the texture is only created once and shared between all the sprite instances, saving memory and vastly speeding everything up.

Unless you need to save space in your bundle avoid jpg files, apart from the loss in quality the first thing Cocos2d does is convert them to .png files before loading them in as textures. Opening up CCtextureCache.m and looking in the addImage method (called by CCSprite initWithFile) should reveal the following;

  // Issue #886: TEMPORARY FIX FOR TRANSPARENT JPEGS IN IOS4
  else if ( ( [[CCConfiguration sharedConfiguration] OSVersion] >= kCCiOSVersion_4_0) && 
          ( [lowerCase hasSuffix:@".jpg"] || [lowerCase hasSuffix:@".jpeg"] ) ) 
          {
            // convert jpg to png before loading the texture
            ...

Images/Textures have so many more uses than simply decorating an app, they can be used to store data or create effects that could otherwise be processor intensive.

If you’re using Photoshop with bitmap art pressing CMD + K and setting nearest neighbour as Image interpolation will prevent your images getting antialiased during scaling.

Gimp – GNU Image Manipulation Program

Free app available from here. A freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.

Assuming we’ve created a 480 x 320 .png image called background.png, we can display it in the center of the screen using the following e.g in the init method;

  // ask CCDirector for the screen dimension
  CGSize size = [[CCDirector sharedDirector] winSize];	        
 
  // Create a CCSprite.
  // CCSprite derives from CCNode but adds the geometry (basically a billboard) that
  // we can slap our background.png image onto. Under the hood CCSprite passes the
  // image to the CCTextureCache, uses the filename to check if we've already loaded
  // this texture and if not adds the image into the texture cache.
  CCSprite *background = [CCSprite spriteWithFile:@"background.png"];
 
  // position the background sprite which is anchored in the center, to 
  // the center of the screen
  background.position = ccp(size.width*0.5, size.height*0.5);
 
  // Add the sprite to the layer
  [self addChild:background];

Seashore

Free app available from here. Steffen (@gaminghorror) recommended this native Mac OSX app that does away with any requirement for X11, I’ve only had a quick play but it’s looking good and it also saves typing Gimp into google which is always a winner

ShipIt!

Paid app for creating retina and standard sized images. More useful for standard UIKit development, this app will take a retina image, add the @2 extension onto it and then create a standard sized image without the extension.

Cocos2d does not get on with the @2 extension as there are conflicts in some parts of the framework with apples approach to Retina. The Cocos2d director has a method contentScaleFactor that defines the relation between point and pixels. If it is 1, points and pixels are the same, but if it is 2 (like retina displays ) it means that every point has two pixels.

  CCDirector *director = [CCDirector sharedDirector];
  float contentScaleFactor = [director contentScaleFactor];

You enable retina assets in the CCDirector, I’ve changed it slightly here to only allow Retina mode if we’re not on an iPad.

  // Changed slightly to avoid Retina assets on the retina iPad
  if(UI_USER_INTERFACE_IDIOM() != UIUserInterfaceIdiomPad)
  {
    if( ! [director enableRetinaDisplay:YES])
       CCLOG(@"Retina Display Not supported");    
  }

Spritesheets and Physics

There are a number of tools available for handling texture atlases and physics data, Zwoptex was the original atlas creation tool and I used the online and offline version for a while until TexturePacker came along. I now jump between TexturePacker and the SpriteHelper/LevelHelper combo depending on what I’m building.

To find out which is the best app for you, you really need to try them out. I’d previously avoided physics libraries like Box2d and Chipmunk as I’d only needed limited physics and could roll my own. After seeing some of the stuff Juraj at GameCollage was producing I wanted to play and around the same time Mekanimo announced a Mac beta. After having a number of emails ignored and not wanting to run a PC just to generate physical systems Mekanimo was dropped. Since then I’ve found LevelHelper and it’s really nice

TexturePacker

Paid app available from the Texture Packer site. The tool runs on the command line but also has a GUI, the benefit of this setup is that you can script the texture atlas creation into your build. You create a folder of images and configure the script to create the atlas using your settings, when a new image is added the build simply adds it into the texture atlas (spritsheet). If you use flash to animate, TexturePacker also has the ability tooutput your animations to a SpriteSheet

Details of XCode4 integration of TexturePacker for Cocos2d can be found here

For the best explanation by far why packing multiple images into one texture is important, watch the following video by Code’n'Web;

The website is packed full of tutorials, testimonials and information and well worth a visit.

TexturePacker has come in useful in a wide rage of projects including UIKit and Flash based work, the CLI access means it’ll be staying in my toolkit for a long time to come.

A quick example

To use a spritesheet we need to create a CCSpriteBatchNode. First add some sprites into TexturePacker making a note of the filenames (and make them meaningful).

Export the image (.png) and data (.plist) files from TexturePacker and add them to your project.

  // 1. Store all the coordinates, rotation info etc generated
  // by Texture packer. We use the filename as a key to find the
  // information for each sprites texture offset in the png.
  // CCSpriteFrameCache is a singleton.
  [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"bob.plist"];
 
  // 2. The batchnode will draw all the sprites within it in one
  // pass, all the sprites texture data must be contained within 
  // the same .png file
  CCSpriteBatchNode *myBatchNode = [CCSpriteBatchNode batchNodeWithFile:@"bob.png"];
 
  // 3. Add a sprite to the batchnode, we use spriteWithSpriteFrameName
  // NOT spriteWithFile as the texture data will be provided by the 
  // batchnode. The filename is only used here as a key into the
  // CCSpriteFrameCache to find the right bit of the texture
  CCSprite *head = [CCSprite spriteWithSpriteFrameName:@"head.png"];
  [myBatchNode addChild:head];
 
  // ... add more sprites
 
  // 4. We now have sprites being drawn in the batchnode but the 
  // batchnode itself is not being drawn, add it to the layer.
  [self addChild:myBatchNode];

Physics Editor

Paid app available from here. The only app in the list I do not own but as it pairs with TexturePacker thought it deserved a mention.

Makes creating collision shapes very simple;

Drop shape
Press AutoTrace
Export to your game engine

The Physics editor website contains a number of tutorials.

SpriteHelper

Paid available from Mac app store or directly from the Spritehelperwebsite. I bought SpriteHelper and LevelHelper when they first came out, used them for a couple of days and then reverted back to TexturePacker. I didn’t really see the point in SpriteHelper and felt it was a little tightly coupled to LevelHelper. Having played with the recent beta I have a feeling they are going to become my tools of choice for physics. Creating complex systems is a case of drag and drop and the tools generate the code required to run the systems.

Another nice feature of SpriteHelper is it can directly import PSD files

LevelHelper

Paid available from Mac app store or directly from the LevelHelperwebsite. From the website there are a number of Purchase optionsincluding a bundle with Spritehelper.

The recent update in the beta has meant I need to rebuild my example files so I’ll post the example code up next week. There are full game tutorials on the site and Ray has a great 4 part article on building a game like Jetpack joyride using LevelHelper.

Zwoptex

Paid app available from the Zwoptex site. Great app packed with features, I still own a copy but TexturePackers build integration and CLI was too good to pass on.

The free Flash version is still available from the bottom right of their website but it may not be up to date.

There’s a great animation tutorial that uses zwoptex over on Ray Wenderlich’s site.

Audio

There are some great tools for handling audio, before firing them up though it may be worth taking a little time to get acquainted with the audio formats and best practices for sound on iOS;

CFXR

Free Mac port of SFXR available from the CFXR site. A great tool for creating simple sound effects, I’ve had issues getting the exported sound to match the previewed sound so used Audacity instead (below) to record them.

Audacity

Audacity is a free, easy-to-use and multilingual audio editor and recorder for Windows, Mac OS X, GNU/Linux and other operating systems. You can download it from the Audacity site. A great app for trimming, manipulating, recording sounds for use in apps.

Keeping your effects short and using the same format (little endian, 16 bit, 22kHz CAFF files) can help reduce the amount of work the audio system has to do.

Converting a file

   # creates mysound.caf (little endian, 16 bit, 22kHz) 
  
 afconvert -f caff -d LEI16@22050 mysound.wav

The best practices link takes this a step further with a script for converting a directory of wav files at once.

The iPhone can only hardware decode one mp3 at a time so you would usually use the mp3 format for your background music and CAFF files for your sound effects. The following samples handle audio in a very simple synchronous approach, Rod Strougo and Ray Wenderlich have a nice approach to asynchronous audio in their book Learning Cocos2D: A Hands-on Guide to Building IOSGames with Cocos2D, Box2D, and Chipmunk (Addison-Wesley Learning Series).

Playing a sound effect

  // The SimpleAudioEngine is another singleton, grab a reference to it 
  // and preload the wav file mysound.wav. This could be done in a loading 
  // scene. The sound is stored and referenced by the filename
  [[SimpleAudioEngine sharedEngine] preloadEffect:@"mysound.wav"];
 
  // Play the sound when required using the filename to identify the
  // sound, if there's a preloaded version it will use that version.
  [[SimpleAudioEngine sharedEngine] playEffect:@"mysound.wav"];

Playing background music

  // Preload the background music. This could be done in an earlier scene
  // [SimpleAudioEngine sharedEngine] is a Singleton and will be available
  [[SimpleAudioEngine sharedEngine] preloadBackgroundMusic:@"Beelzeboss.mp3"];
 
  // Play and loop the background music 
  [[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"Beelzeboss.mp3" loop:YES];
 
  // When you're done with it, stop it and unload it
  [[SimpleAudioEngine sharedEngine] stopBackgroundMusic];
  [[SimpleAudioEngine sharedEngine] unloadEffect:@"Beelzeboss.mp3"];

If you need to do something a little more complex with audio in Cocos2d look at the CDAudioManager (CocosDenshion NOT compact disk) written by Steve Oldmeadow and also distributed along with cocos2d. Here Lam of FancyRatStudios.com shows it running as an audio meter;

Layout

Tiled

Free app available from the Tiled map editor site.
Tilemaps allow the creation of larger levels by creating them out of smaller tiles. They are far more efficient than creating and scrolling large bitmap images.

There’s a great set of tutorials How To Make a Tile-Based Game with Cocos2D over at Ray Wenderlich’s site

From the tiled site
Tiled is a general purpose tile map editor. It’s built to be easy to use, yet flexible enough to work with varying game engines, whether your game is an RPG, platformer or Breakout clone. Tiled is free software and written in C++, using the Qt application framework. The main features in a nutshell:

General purpose tile map editor with XML-based map format
Supports orthogonal and isometric maps
Custom objects can be placed with pixel precision
Full undo/redo and copy/paste support
Add custom properties to tiles, layers, objects or the map
Automatically reloads tilesets when changed externally
Resize or offset your tile map later as needed
Efficient tile editing tools like stamp and fill brushes
Supports input/output plugins to open and save files in custom formats

Example file forest.tmx generated by Tiled

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="20" height="15" tilewidth="32" tileheight="32">
 <tileset firstgid="1" name="dg_grounds32" tilewidth="32" tileheight="32">
  <image source="dg_grounds32.png" width="288" height="608"/>
 </tileset>
 <layer name="Tile Layer 1" width="20" height="15">
  <data encoding="base64" compression="zlib">
   eJzjZWBg4B2C2JYApqZZpJhJrFnEmEmsWnLUUTsOSFE/VM3DZSa90gyleYQacT7QGAD6gB49
  </data>
 </layer>
</map>

Here dg_grounds32.png is the image that provides the tile textures and the data element is compressed data that describes the tile layout.

Multiple tilemap layers can be created within the same tmx file and layers can be object layers or Tile layers. Tile layers are visual, object layers could be used to describe properties of each grid square.

  // Load Tilemap data from the tmx file into a CCTMXTileMap. The .png file
  // containing the tile textures is referenced within the .tmx file
  CCTMXTiledMap *mapNode = [CCTMXTiledMap tiledMapWithTMXFile:@"forest.tmx"];
 
  // Add the tile map to the layer, that's it. Done :)        
  [self addChild:mapNode];

Inkscape

Free app available from Inkscape site. Inkscape is an open source vector graphics editor similar to Adobe’s illustrator and uses the Scaleable Vector Graphics (SVG) file format.
There’s no support in cocos2d for SVG as a graphic format but we could use it as a data format to hold level layout information especially for physics games. This was the approach that LevelSVG took before it was removed from sale.

The geometry can be laid out using the simple drawing tools. If you need to add a custom property to an object, select it then press Control + SHIFT + x to bring up the XML editor. Below I’ve created a new property called myProperty with a value myValue.

Saving the file as an Inkscape SVG file will include the custom data we added to our objects e.g myProperty in the output SVG file. This file can be parsed using any number of XML parsers.

  <svg>
  ...
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="fill:none;stroke:#000000;stroke-opacity:1"
       id="rect3755"
       width="391.42856"
       height="208.57143"
       x="54.285713"
       y="78.076469"
       myProperty="myValue" />
  </g>
</svg>

Control + SHIFT + e will bring up the export Bitmap dialog, selecting the Page button and then Export will output the layout you’ve created as a bitmap image which could then be used as a layout guide in Photoshop to draw over.

CocosBuilder

** Update ** There’s a pre alpha of the new Animation editor available here, help out the developer by having a play and giving feedback

Free app available from the CocosBuilder site.

From the CocosBuilder site
CocosBuilder is a free tool for graphically laying out sprites, layers and scenes for Cocos2D iPhone and Mac. It’s ideal for quickly and accurately creating menus and other parts of the interface, but can also be used to create levels, particle systems or any other kind of Cocos2D node graphs. CocosBuilder is released as open source under MIT license.

The latest development only supports Cocos2d v2.0 but there is an older version 1.0 that supports cocos2d v1.

You build up your layout in CocosBuilder visually and then save the layout as a .ccb file, this is a .plist file that represents the nodeGraph you have built. This file is parsed by some helper files you add to your project (CCBReader.h, CCBReader.m).

You can associate objects in the CocosBuilder editor with bespoke classes that derive from the object you have added. e.g if you add a CCLayer and need to add some functionality, create a myLayer class that extends CCLayer and add your own code. Don’t override the init method instead use the didLoadFromCCB method. You can also link objects in your nodeGraph (e.g a CCSprite) to a member variable, and add callbacks to buttons.

There is documentation included in the distribution, and an example project you can download.

1. Open and run the example project in XCode to see the sort of effects you can get
2. Right click the .ccb file under resources in Xcode and open with external editor to see the nodeGraph in CocosBuilder. If you have both versions of CocosBuilder on your system, open the v1.0 version first and then right-click and select open.

-(int)methodname
  // 1. Add the CCBReader.h and CCBReader.m files to the project
 
  // 2. Add the CCBReader import
  #import "CCBReader.h"
 
  // 3. Import any assets you've used, the files are relative to the .ccb file so easiest to create 
  // the file in your resources directory and add the images to your project as you add them
  // in the .ccb file
 
  // 4. Load the scene from the example.ccb file
  CCScene* scene = [CCBReader sceneWithNodeGraphFromFile:@"example.ccb"];
 
  // 5. Start the first scene in AppDelegate
  [[CCDirector sharedDirector] runWithScene: scene];
 
or
 
  // 5. Push a new scene if this is not the first scene
  [[CCDirector sharedDirector] replaceWithScene: scene];

In the example project, the main Layer has a custom class associated with itHelloCocosBuilder. A button with a selector pressedButton: added to it and a sprite linked to a member variable named sprtBurst.
I’ve included the .h and .m files below;

//
//  HelloCocosBuilder.h
//  CocosBuilderTest
//
 
#import <Foundation/Foundation.h>
#import "cocos2d.h"
 
// This is a custom class for a layer specified by setting the custom
// class attribute in CocosBuilder for the root node.
// It is loaded from AppDelegate.m
 
@interface HelloCocosBuilder : CCLayer
{
    // These instance variables are defined in the CocosBuilder file
    // (example.ccb) and automatically assigned by CCBReader
    CCSprite* sprtBurst;
    CCSprite* sprtIcon;
}
@end

//
//  HelloCocosBuilder.m
//  CocosBuilderTest
//
 
#import "HelloCocosBuilder.h"
 
@implementation HelloCocosBuilder
 
// This method is called right after the class has been instantiated
// by CCBReader. Do any additional initiation here. If no extra
// initialization is needed, leave this method out.
- (void) didLoadFromCCB
{    
    // Start rotating the burst sprite
    [sprtBurst runAction:[CCRepeatForever actionWithAction:[CCRotateBy actionWithDuration:5.0f angle:360]]];
}
 
// This method is set as an attribute to the CCMenuItemImage in
// CocosBuilder, and automatically set up to be called when the
// button is pressed.
- (void) pressedButton:(id)sender
{    
    // Stop all runnint actions for the icon sprite
    [sprtIcon stopAllActions];
 
    // Reset the rotation of the icon
    sprtIcon.rotation = 0;
 
    // Rotate the sprtIcon 360 degrees
    [sprtIcon runAction:[CCRotateBy actionWithDuration:1.0f angle:360]];
}
 
@end

There’s also work on adding an Action/Animation editor to CocosBuilder http://www.cocos2d-iphone.org/forum/topic/32775

Animation

Spriter

Coming soon – Spriter is a Kickstarter project that the Cocos2d community got wind of and pushed for cocos2d support and a Mac version.

From the Kickstarter site
Spriter is a powerful animation tool for creating highly detailed 2d real-time game characters and effects in an intuitive, visual editor. The characters are saved to a format that allows game engines to produce higher quality visuals, while also using less video ram, and requiring less disk space per frame than traditional 2d sprite animation.

Spriter also provides several game specific features like collision boxes, and sound effect triggering, and saves to an open format that will be useable across many different game engines and platforms.

Feature list
features

@TacoGraveyard put a Cocos2d test project together that implemented the original rough file structure. You can see the results here.

Flash

Paid app available from the Adobe site. A great animation and prototyping tool, I also use it to walk through animations sequences that I need to convert over to code.

For a short time there was a working library – MonkSwf that enabled you to load animated swf’s into Cocos2d, unfortunately it was removed after a legal threat from somewhere

On the plus side, TexturePacker (see Graphics tools) has a great swf import feature

Dog animation - fla and swf file
Dog animation - png and plist from TexturePacker

It converts each animated frame to an image and it also appears to only import the image data for those frames that change.

Animating example

  // Cache the animation frames. i.e for each 'filename' where
  // is the image data located in the texture. Has it been rotated
  // or trimmed as it was placed into the texture atlas (spritesheet)
  // we'll need this information to restore it to its original form.
  [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"dog.plist"];
 
  // create a batchnode to hold the dog animation texture, we'll add our 
  // animated dog sprites into this node.
  CCSpriteBatchNode *dogSheet = [CCSpriteBatchNode batchNodeWithFile:@"dog.png"];
 
  // add the dogSheet :p to the layer
 [self addChild:dogSheet];
 
  // loop through the animation frames and add each frame to an array.
  NSMutableArray *dogAnimFrames = [NSMutableArray array];
  for(int i = 0; i <= 35; ++i)  
  {
    // [NSString stringWithFormat:@"dog.swf/00%02d", i] builds the key 
    // for each frame in the .plist
    [dogAnimFrames addObject: [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:
                               [NSString stringWithFormat:@"dog.swf/00%02d", i]]];
  }        
 
  // create the animation object
  CCAnimation *dogAnim = [CCAnimation animationWithFrames:dogAnimFrames delay:0.05f];
 
  // Do we use directly ------>
 
  // a) We could create a looped animation using CCRepeatForever, this can then be
  // run on the sprite.
  id dogAction = [CCRepeatForever actionWithAction:
                   [CCAnimate actionWithAnimation:dogAnim restoreOriginalFrame:NO]];
 
  // <-- OR use cached version ------>
 
  // b) we could set up all of this in advance and add the animation to 
  // a CCAnimationCache. When we need a copy of the animation to use on 
  // a sprite we call animationByName on the Animation cache singleton
  // As the animation cache is a singleton, these animation are available 
  // to all scenes
  [[CCAnimationCache sharedAnimationCache] addAnimation:dogAnim name:@"dogAnimation"]; 
  id cachedAnim = [[CCAnimationCache sharedAnimationCache] animationByName:@"dogAnimation"];
 
  id dogAction = [CCRepeatForever actionWithAction:
                [CCAnimate actionWithAnimation:cachedAnim restoreOriginalFrame:NO]];
 
  // <------ end cached version
 
  // Either way we now have a dogAction animation that can be run on
  // a sprite.
 
  // create the dog sprite that we'll animate
  CCSprite *dog = [CCSprite spriteWithSpriteFrameName:@"dog.swf/0000"];        
  [dog setPosition: ccp(size.width/2, size.height/2)];
  [dogSheet addChild:dog];              
 
  // run the looping animation 'dogAction' on our sprite
  [dog runAction:dogAction];

Utilities

Hue Go Lite

Paid and lite version available from the Mac app store. Useful utility that gives you a color picker to use anywhere across your desktop, I use the lite version to grab colours without having to fire up Photoshop.

  // select the color in Hue Go and use the copy as RGB 
  // option
  mysprite.color = ccc3(180,104,0);

Icons

Paid app available from the app store. Not really a Cocos2d specific tool but given the time this saves me I thought it deserved a mention.
Simply drag your 512×512 icon onto the app, preview it in all sizes and when happy export all for immediate use. Simples

TotalTerminal

Free TotalTerminal – a system-wide terminal available on a hot-key.
Press Control + ` and a terminal appears, Lovely!

Some useful shortcuts;
Command + T -> Create a new tab in the terminal
Command + Shift + ] -> Go to next tab on the right
Command + Shift + [ -> Go to next tab on the left
Tab -> path completion
Drag a folder from finder to a terminal to get the path
In the terminal type Control + r to bring up a reverse-i-search

    # close the current tab 
   
 >exit 
    
 # go to users home directory
 >cd ~
 # go to simulator directory
 cd ~/Library/Application\ Support/iPhone\ Simulator/
 # open a finder window to the current terminal directory location
 >open .

Dash

Paid Dash – Snippet manager, Documentation browser is available from the Mac app store. Further information available at the Dash site.

I Previously mentioned this in the Cocos2d getting started post when it was a free app, it has since adopted the nagware approach. Still very useful but one app where it didn’t pay to be an early adopter/promoter

Development

XCode

XCode available from the Mac App store.
Grabbing screenshots while playing a game can be a lot harder than the UIKit equivalent, having someone play the game while someone else uses Organizer (Command + Shift + 2) to grab screenshots, will probably get better results than trying to play the game and press both buttons at the same time.

Cocos2d

Installing the developer tools and Cocos2d

Categories: Cocos2d, Tools | Tags: audacity, cfxr, cocos2d, cocos2dx, cocosbuilder, dash, designer, editor, flash,gimp, glyph, hue go, icons, inkscape, levelhelper, particle desigenr, photoshop, physics, shipit, spritehelper, spriter,texturepacker, tiled, tools, totalterminal, xcode, zwoptex | Permalink

love_hot_girl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Cocos2d – useful tools

Cocos2d – useful toolsJuly 5, 2012 by ChrisThree years ago there was a dearth of tools for cocos2d development. It’s a lot better now. This is not a comprehensive list of all the tools out
复制链接

扫一扫