Book Image

Mastering Cocos2d Game Development

By : Alex Ogorek
Book Image

Mastering Cocos2d Game Development

By: Alex Ogorek

Overview of this book

Table of Contents (15 chapters)
Mastering Cocos2d Game Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Choosing tools and getting started


Knowing which tools your project is going to need before you start working is a good place to start. In this way, when the time comes to implement a given feature, you can easily open the program and use the tool you've gotten beforehand. It's not too bad to get the tools halfway through the project, but from experience, it's better to think of it before you start to work on a project.

There are a few third-party programs out there that make development of games using Cocos2d go a lot faster. Listed here are such products, information on how to download and install them, along with their cost (if any) and other things you need to know about them.

Tip

Note that just because a product is listed here does not mean it is required when creating a game using Cocos2d. This section is merely a "just in case you were wondering" guide for things to consider when trying to develop better, more polished games.

This section also assumes that you either have a dedicated person creating the artwork for your game, or you will be doing it yourself in any image editing software, such as Photoshop. This is assumed because there are no listed image editors here due to the large volume of editors. Any of them can be used when making games. However, the programs listed here are the best at what they strive to do, although there may be others similar to them.

  • Texture Packer: This is an image condenser used to place all your images on one sprite sheet. This helps draw optimization (increases your game's frames per second) as well as reduces the space in your game's overall size (which could mean the difference between the users having to download over Wi-Fi, or not).

  • Particle Designer: This is a visual particle editor that allows quick creation of particle effects, ranging from lasers and smoke effects to explosions and candle effects.

  • Glyph Designer: This is a custom font creator that allows you to create nice-looking fonts instead of using pre-rendered images with text or plain fonts with just a fill color.

  • VertexHelper Pro: This is a visual vertex calculator meant for use with physics engines. It can be used for other purposes, but it's mostly used in conjunction with a physics engine to determine the exact coordinates of collision, instead of using a standard box or circle to calculate the collision boundaries of an object.

  • GAF: This is a way to store Flash animation in an open cross-platform format for further playback in a multitude of game development frameworks and devices. GAF enables artists and animators to use Flash CS to create complex animations and seamlessly use them with various game development frameworks such as Cocos2d, Cocos2d-x, Unity3D, and Starling, to name a few.

  • Git and GitHub/Bitbucket: There are many ways to make use of source control when working on a project. The best solution out there, as well as the one that many developers use, is Git. You can manage your code changes over time, and if a bug ever shows up, you can always revert to your latest version of your code without losing precious development time trying to figure out what was changed. It's also a nice way to back up your project in case of computer failure.

TexturePacker

TexturePacker allows you to easily create sprite sheets for your games. It compresses your individual images into one giant image so that you can effectively increase the optimization of your game without sacrificing quality.

The final sheets can be used in a variety of game engines such as Cocos2d, Unity, Corona SDK, SpriteKit, and many more. The following screenshot shows the UI of TexturePacker:

The cost is $39.95 for the Pro version (free trial available).

To download TexturePacker, go to http://www.codeandweb.com/texturepacker/download. There, you can click on the name of the OS you are using, and you're on your way!

TexturePacker is offered on Mac 10.7/8/9, Linux (Ubuntu 64-bit), and Windows 32-bit and 64-bit (XP/Vista/7/8).

Particle Designer

If you want that beautiful explosion, that awesome smoke effect, or that shiny laser beam generated in real time, then Particle Designer is what you need. Import your own custom "particle," change a ton of parameters to get the effect you want, and export the file to your game project. The following screenshot shows the UI of Particle Designer:

The cost is $74.99 (free trial available)

To download Particle Designer, go to https://71squared.com/particledesigner. There, you will see a link to buy it. You can, however, get a trial version by clicking on the Try button on their website and entering your e-mail address.

Particle Designer is offered on Mac 10.8, 9, and 10.

Technically, you can manually create each particle in the code, but that's horribly inefficient. Plus, being able to see the particle in real time as you're designing it makes the entire process smoother, as importing the particle effect to Cocos2d is extremely easy.

If you have Particle Designer but haven't used it before, you're advised to just open it up and start messing around with some of the settings. You can get some seriously cool effects just by dragging some sliders around.

Glyph Designer

If you want fancy fonts instead of the normal TrueType fonts available, or a pre-rendered image of text in Photoshop for example, you can use Glyph Designer. It basically allows you to get a nicely styled character set that can be used with the BMFont labels (bitmap fonts). This essentially means that you can generate custom text labels while still maintaining the colorful, styled font you've created using Glyph Designer.

Its cost is $39.99 (free trial available).

To download Glyph Designer go to https://71squared.com/en/glyphdesigner. There, you will see a link to buy it. You can, however, get a trial version by clicking on the Try button on their website and entering your e-mail address.

Glyph Designer is offered on Mac 10.8, 9, and 10.

If you want fonts like those used in some of the games whose screenshots you saw earlier (Clash of Clans, Angry Birds, Crescent Ridge Mini Golf, and Bina Blocks), instead of just plain, solid-colored fonts as shown in the other games, you'll need a good bitmap font creation tool. Just as with particles, if you want to get nice-looking fonts, there are only a few programs out there. One of them is Glyph Designer, which was made by the same people who created Particle Designer.

If you have Glyph Designer installed but haven't begun using it yet, open it and begin testing some different styles on various fonts just to get a feel for how the program works and some of the things you can create with Glyph Designer.

One thing to consider when designing your aesthetics (and especially when it comes to choosing custom fonts) is, does this font/style work within the overall aesthetics of the entire project? If it feels jarring or feels like two different styles clashing, then it might be in your best interest to choose a more suitable font for your game. Don't worry; it might not come to you right away, but if you find the right font, it adds that extra layer of polishing that's crucial to making your game a success (we'll talk more about polishing in Chapter 6, Tidying Up and Polishing).

VertexHelper

Are you using physics in the game? Do you need a shape better than a box or a circle to represent a complex object? VertexHelper can help you find the coordinates that make up the shape of a complex object by importing an image and allowing you to click where you want the vertices to be. You can manually guess and test the coordinates programmatically if you really want, but VertexHelper makes this process a lot faster and keeps the coordinates accurate (assuming that the physics is implemented properly in the code).

If you're going to make use of physics (or collisions in general), you should be aware that vertex collisions can be incredibly expensive. If possible, it's best to stick to primitives (for example, circles or squares), And if that's the case, it may be that you don't even need a physics engine. Hence, consider your options carefully.

Its cost is $7.99.

To download go to https://itunes.apple.com/us/app/vertexhelper-pro/id411684411, or search for VertexHelper Pro and you should be able to find the link to the Mac App Store on the first page of results.

Like any other Mac app, you can run this once it is fully installed.

There are two ways to go about generating your boundaries for any physics object:

  • Manually code the values using b2Vec2 arrays and hope that it's correct

  • Use a program such as VertexHelper to quickly create boundaries for each object

It's good to know about this program and have it ready when using a physics engine in your game because every object pretty much needs to collide with another object (except a few background images, most likely). With that said, every object probably isn't a square or a circle so being able to create custom-shaped physics boundaries very quickly is good.

If you do have VertexHelper installed on your computer, go ahead; open it and import an image. Then start clicking around and get a feel for how the program works. This will help a lot later on as you start to implement the physics of each object.

GAF

If you have any Flash animation that you want to convert for use in your games made with Cocos2d, you can do so with GAF, which is essentially a single format that gets converted into the individual framework's and device's requirements.

Its cost is as follows: for the Free version, $0; for Studio, $995; and for Enterprise, $2,995. Free use is limited to $50,000 annually, and you can develop only your own games, not contract work. You can read more about their pricing options at http://gafmedia.com/pricing.

To download GAF go to http://gafmedia.com/downloads and choose the OS. Then follow the instructions to install.

GAF is available on both Windows and OSX.

GAF can be helpful if you have an art developer who is comfortable with animating in SWF files, and can then convert them into a platform-agnostic format for use with multiple game engines. It can also be helpful if you're porting a game that already makes use of SWF files (such as an online Flash game that you wish to implement on mobiles).

Git and GitHub/Bitbucket

If you're ever working with code, chances are that something's going to get messed up. Luckily, there is source control software that exists to manage your code's versioning and ensuring that in case anything goes wrong, you have copies of previous versions to revert to.

This is a screenshot of the Cocos2d-Swift GitHub repository (or repo for short) at https://github.com/cocos2d/cocos2d-swift:

It is free of cost.

To download this, if you have Xcode installed on your Mac, simply go to Xcode | Preferences | Downloads. Then install the command-line tools. With this, you can use Xcode's built-in Source Control menu, or go through Terminal to use your Git commands.

If you wish to install Git manually, simply go to their website and follow the links to download and install, at http://git-scm.com/.

Note that if you've never used any source control before, feel free to read how it works at https://help.github.com/.

You will actually need Git installed only on your Mac, as that's where the code is. However, you can install it on any desktop OS.

Both GitHub and Bitbucket are free to use. However, the key difference is that GitHub offers unlimited public repositories, while Bitbucket offers unlimited private repositories. So if you want to keep your code hidden from others while still making use of the services listed, it's recommended to go with Bitbucket.

Both of these services use Git and make use of the same commands and tools. It's just a preference between whether you want to go with public or private repositories (or the case where someone else you work with has a preference).