19 May 2013

How To Create A Game Like Tiny Wings with Cocos2D 2.X Part 2

Make a game like Tiny Wings!

Make a game like Tiny Wings!

Update 5/19/2013 Fully updated for Cocos2D 2.X. (original post by Ray Wenderlich, update by Ali Hafizji).

This is the second part of a tutorial series that shows you how to make a game like the popular Tiny Wings game by Andreas Illiger!

In the prerequisite for this tutorial series, I first covered how to create dynamic background textures for the game.

In the first part of the tutorial series, I covered how to create the dynamic hills that you need in the game.

In this second and final part of the series, you’ll finally get to the fun stuff – how to add the main character to the game, and use Box2D to simulate his movement!

As a reminder, this tutorial is based on a great demo project written by Sergey Tikhonov – so special thanks again to Sergey!

This tutorial assumes you are familiar with Cocos2D and Box2D. If you are new to Cocos2D or Box2D, you should check out some of the other Cocos2D and Box2D tutorials on this site first.

Keep reading!

Tags: , , , , ,

18 May 2013

How To Create A Game Like Tiny Wings with Cocos2D 2.X Part 1

Learn how to create a game like Tiny Wings!

Learn how to create a game like Tiny Wings!

Update 5/18/2013 Fully updated for Cocos2D 2.X. (original post by Ray Wenderlich, update by Ali Hafizji).

Tiny Wings is an extremely popular game by Andreas Illiger involving a bird who tries to fly by catching a ride on hills.

At first glance, the gameplay of Tiny Wings looks very simple, but there are a lot of tricks going on under the hood. The hills and their textures are dynamically generated, and the game uses Box2D physics to simulate the movement of the bird.

Due to the popularity of the game and the cool technical tricks within, a lot of developers have been curious about how things are implemented.

Including you guys! You guys said you wanted this tutorial updated – well you want it, you got it! :]

This tutorial series is based on an excellent demo project written by Sergey Tikhonov that demonstrates how to implement some of the trickiest features of Tiny Wings. Thanks Sergey!

This tutorial series is split into three parts:

  1. Prerequisite: First review the How To Create Dynamic Textures with CCRenderTexture in Cocos2D 2.X tutorial, which shows you how to create the hill and background textures you’ll be using in this tutorial.
  2. Part 1: You are here! This part will show you how to create the dynamic hills that you’ll need for a game like Tiny Wings.
  3. Part 2: The second part will show you how to add the Box2D gameplay that you’ll need for a game like Tiny Wings.

This tutorial assumes you are familiar with Cocos2D. If you are new to Cocos2D, you should check out some of the other Cocos2D tutorials on this site first.

Keep reading!

Tags: , , , ,

17 May 2013

How To Create Dynamic Textures with CCRenderTexture in Cocos2D 2.X

Create textures on the fly (such as these stripes) with CCRenderTexture!

Create textures on the fly (such as these stripes) with CCRenderTexture!

Update 5/17/2013 Fully updated for Cocos2D 2.X. (original post by Ray Wenderlich, update by Ali Hafizji).

You’re probably familiar with adding premade backgrounds into your games. But what if you could dynamically create backgrounds and modify their colors, gradients, and effects on the fly?

If you’ve seen the game Tiny Wings by Andreas Illiger on the App Store, you’ve seen an example of this in action.

In this tutorial series, you’ll get hands-on experience doing this yourself! You’ll learn:

  • How to create textures on the fly
  • How to create seamless textures with Gimp
  • How to blend shadows and highlights onto textures for realistic effects
  • How to create striped textures
  • How to set up textures to repeat
  • And much more!

This tutorial is based on a great sample project by Sergey Tikhonov that was created as part of an investigation of Tiny Wings on the Cocos2D forums.

Sergey did an excellent job on the demo project, so rather than reinvent the wheel, I’m going to convert his demo code into a tutorial series, along with some extra cool features!

This tutorial assumes you are familiar with Cocos2D. If you are new to either of these, check out some of the other Cocos2D tutorials on this site.

Keep reading!

Tags: , , , ,

15 May 2013

NSRegularExpression Tutorial and Cheat Sheet

NSRegularExpression tutorial and cheat sheet!

NSRegularExpression tutorial and cheat sheet!

This is a blog post by Soheil Moayedi Azarpour, an independent iOS developer. You can also find him on .

A regular expression (commonly known as a “regex”) is a string or a sequence of characters that specifies a pattern. Think of it as a search string — but with super powers!

A plain old search in a text editor or word processor will allow you to find simple matches. A regular expression can also perform these simple searches, but it takes things a step further and lets you search for patterns, such as two digits followed by letter, or three letters followed by a hyphen.

This pattern matching allows you to do useful things like validate fields (phone numbers, email addresses), check user input, perform advanced text manipulation and much much more.

If you have been eager to know more about using regular expressions in iOS, look no further than this tutorial — no previous experience required!

By the end of this NSRegularExpression tutorial you will have implemented code to search for patterns in text, replace those matches with whatever you wish, validate user input information and find and highlight some complex strings in a block of text.

In addition, I’ll give you a handy NSRegularExpression Cheat Sheet PDF that you can print out and use as reference as you’re developing!

Without further ado, it’s time to start crunching some regular expressions. Keep reading!

Tags: , , , , , , ,

14 May 2013

Cocos2D-X Tutorial for iOS and Android: Space Game

Learn how to make a cross-platform space game!

Learn how to make a cross-platform space game!

Update 5/14/2013 Fully updated for Cocos2D-X 2.1 and iOS 6. (original post by Jean-Yves Mengant, update by Jorge Jordán).

In this Cocos2D-X tutorial, I will show you how to build a space game similar to the one was built in the How to Make a Space Shooter iPhone Game.

There will be one major difference – this will be written in beautiful cross-platform C++, using Cocos2D-X!

This means you’ll be able to run this game on both your iPhone and Android by the end of this Cocos2D-X tutorial. And with a little more work, you could get it running on other platforms as well – from Windows to Linux to the Mac!

This Cocos2D-X tutorial picks up where the Cocos2D-X Tutorial for iOS and Android: Getting Started left off. So if you haven’t already, read that project first and get your project set up the way described there.

So put on your Star Wars CD to set the mood, and let’s get started! Keep reading!

Tags: , , , , ,

13 May 2013

Cocos2D-X Tutorial for iOS and Android: Getting Started

Learn to create a simple iPhone and Android game with Cocos2D-X!

Learn to create a simple iPhone and Android game with Cocos2D-X!

Update 5/13/2013 Fully updated for Cocos2D-X 2.1 and iOS 6. (original post by Jean-Yves Mengant, update by Jorge Jordán).

Cocos2D is an amazing and easy to use framework, but since it’s written in Objective-C you can only write games with it for iOS and the Mac.

Wouldn’t it be great if you could use the same easy to use Cocos2D API, but have it run on Android as well? This way you could greatly extend the market for your app, without adding a lot of extra work!

Well, this is possible with the Cocos2D-X game framework! Cocos2D-X is a C++ port of the Cocos2D API, so you can use the API you know and love. And since it’s in C++, it works on many platforms – from iOS to Android to Windows to Linux and more!

In this Cocos2D-X tutorial, you’ll learn how to use Cocos2D-X and C++ to produce a cross-platform “Hello World” app that will run under both iOS and Android.

And in a few days, I’ll post a follow-up Cocos2D-X tutorial that will show you a practical game example – a cross platform space shooter!

So grab your iPhone and/or Android device, and let’s get started! Keep reading!

10 May 2013

Texture Packer Tutorial: How to Create and Optimize Sprite Sheets

Optimize texture usage with Texture Packer and Pixel Formats!

Optimize texture usage with Texture Packer and Pixel Formats!

Update 5/10/2013: Fully updated for Cocos2D 2.1-rc0a, Texture Packer 3.07, and Modern Objective-C style (original post by Ray Wenderlich, update by Tony Dahbura).

When making 2D games, it’s important to combine your sprites into large images called sprite sheets, in order to get the best performance for your games.

And Texture Packer is a great tool that makes it extremely easy to generate these sprite sheets – with the click of a button.

This Texture Packer tutorial will show you how to use Texture Packer to create and optimize sprite sheets in your games, using a Cocos2D 2.X game as an example.

Along the way, you’ll learn how to use pixel formats and Texture Packer wisely to make sure your games launch quickly, run smoothly, and use as little memory as possible – while still looking good!

If you are new to Cocos2D, you can still follow along with this Texture Packer tutorial, but there may be some missing gaps in your knowledge about Cocos2D itself as the focus will be on TexturePacker. If you’re curious to learn more about Cocos2D, check out some of our other Cocos2D tutorials. Keep reading!

Tags: , , , ,

8 May 2013

Create Your Own Level Editor: Part 3/3

Finish your level editor by giving it the ability to save the levels

Finish your level editor by giving it the ability to save the levels

This is a blog post by iOS Tutorial Team member Barbara Reichart who is currently doing her PhD at TUM, where she teaches software engineering and iOS development. In her free time she develops games (Treeo Games). Her first published game is Tw!nkle. You can also follow her on Google+.

Welcome to the third part of a tutorial series that shows you how to make a level editor for the Cut the Verlet game that was previously covered on this site.

In the first part of this three-part tutorial, you designed the XML storage mechanism of your level files, implemented some model classes to hold your rope and pineapple data, and finished off by creating the load file functionality of your level editor.

In the second part, you added a popup menu along with a state machine to control the flow of the editor and provide a visual indicator of the current mode of the editor. Then you finished off by adding the ability to create new objects and place them on the screen.

In this last portion of the tutorial, you’ll add the ability to delete objects, move them around, complete the level save and reset mechanism, and implement multiple level handling to round out your level editor!

Ready to get started?

This project starts where you left off in the last tutorial, so make sure you have a copy of the project from part 2.

Keep reading!

7 May 2013

Create Your Own Level Editor: Part 2/3

Add an interactive level editor to your games!

Add an interactive level editor to your games!

This is a blog post by iOS Tutorial Team member Barbara Reichart who is currently doing her PhD at TUM, where she teaches software engineering and iOS development. In her free time she develops games (Treeo Games). Her first published game is Tw!nkle. You can also follow her on Google+.

This is the second part of a tutorial series that shows you how to make a level editor for the Cut the Verlet game that was previously covered on this site.

In the previous tutorial, you designed the XML storage mechanism of your level files, implemented some model classes to hold your rope and pineapple data, and finished off by creating the load file functionality of your level editor.

At this point, your project is still just a level “loader”, as opposed to a level “editor”. (No, editing XML files by hand does not count as a level editor — just in case you were wondering!)

Rest assured that you’ll not have to manually edit those level files any longer. In this second part of the tutorial, you will implement a portion of the editing capabilities of your level editor. You’ll work through adding popup menus, dynamically positioning and sizing your objects on screen, and much more.

If you don’t have it already, download a copy of the sample project where you left it off in the previous tutorial. Keep reading!

6 May 2013

Create Your Own Level Editor: Part 1/3

Hungry Crocodile waiting for food

Don’t keep your crocodile waiting — start designing some levels to feed him!

This is a blog post by iOS Tutorial Team member Barbara Reichart who is currently doing her PhD at TUM, where she teaches software engineering and iOS development. In her free time she develops games (Treeo Games). Her first published game is Tw!nkle. You can also follow her on Google+.

In this tutorial, you’ll learn how to make a level editor for the Cut the Rope clone that was previously covered on this site.

Using the level editor you can easily make new levels. All you have to do is drag and drop the ropes and pineapples to where you like them.

What is cool about this level editor is that it is build into the game, so players can create their own levels directly on their device.

Although a level editor can be incredibly fun for the end-user, it’s also pretty handy for the game developer to quickly assemble levels instead of hand-coding them.

An added benefit is that a level editor allows you to test-drive your game concepts. This can be especially important for physics games like Cut the Rope, as sometimes it can be hard to predict the behavior of the physics engine, but very easy to test those behaviors in real-time.

A level editor is a great way to increase the longevity and utility of your game by providing your players with the power to create their own levels — and even share their creations with other game fanatics.

In this tutorial, you will create a level editor for the Cut the Verlet game that was previously covered on this site. Didn’t catch the game creation tutorial the first time around? You can read about the game implementation in the tutorials below:

Keep reading!

3 May 2013

AVFoundation Tutorial: Adding Overlays and Animations to Videos

How to Add Borders,Overlays and Animations To Videos in iOS<br />

How to Add Borders,Overlays and Animations To Videos in iOS

This is a blog post by iOS Tutorial Team member Abdul Azeem, senior software architect and co-founder at Datainvent Systems, a software development and IT services company.

The preceding AVFoundation tutorial in this series, How to Play, Record, and Edit Videos in iOS received some great response from readers. In fact, most readers wanted even more tips on advanced editing features that could add that extra touch of polish to their videos.

This follow-up AVFoundation tutorial is full of fresh new tricks to add some cool and professional effects to your videos.

The first AVFoundation tutorial showed you how to:

  • Select and play a video from the media library.
  • Record and save a video to the media library.
  • Merge multiple videos together into a combined video, complete with a custom soundtrack!

This new AVFoundation tutorial will build upon that by teaching all you budding video editors how to add the following effects to your videos:

  • Colored borders with custom sizes.
  • Multiple overlays.
  • Text for subtitles or captions.
  • Tilt effects.
  • Twinkle, rotate, and fade animation effects!

To get the most out of this tutorial, you will need to have some knowledge of the AVFoundation video rendering concepts described in the previous tutorial such as AVAsset and AVComposition. If you need to brush up on these topics, check out the previous tutorial before continuing. You could also refer to the Apple documentation for even more detailed information on the subject.

Ready? Lights, Camera… Action! :] Keep reading!

2 May 2013

Background Modes in iOS Tutorial

Learn how to make your app do stuff even when it is no longer active

Learn how to make your app do stuff even when it is no longer active

This is a blog post by iOS Tutorial Team member Gustavo Ambrozio, a software engineer with over 20 years experience, including over three years of iOS experience. He is now a happy senior software engineer for PocketGems coding mobile games. You can also find him on .

Beginning with iOS 4, you can design your apps to stay suspended in memory when users push the home button. Even though the app is in memory, its operations are paused until the user starts it again. Or are they?

Of course there are exceptions to this rule! In certain situations, the app can still run some operations in the background. This tutorial will teach you how and when to use (almost) all of these background operations.

There are important restrictions on the use of background operations. This is not a magic solution for getting “real” multitasking on iOS. Most apps will still get completely suspended when the user switches to another app. Your app is only allowed to keep running in the background in very specific cases — playing audio, getting location updates, downloading new issues for Newsstand apps, and handling VoIP calls.

If your app does not need to do any of these things, then you’re out of luck… with one exception: all apps get up to 10 minutes to finish whatever they were doing before the app is truly suspended.

So backgrounding may not be for you. But if it is, keep reading!

As you’ll soon learn, there are five basic background modes available to you in iOS. The project you’ll build in this tutorial is a simple tabbed application where each tab demonstrates the backgrounding abilities of one of the modes – from continuously playing audio to listening for incoming voice-over-IP connections.

Let’s get started!

Keep reading!

1 May 2013

Objectively Speaking 2: A Crash Course in Objective-C for iOS 6

This is the 2nd post by iOS Tutorial Team Member Linda Burke, an indie iOS developer and the founder of canApps.

Driving test

If you are a software developer skilled in another platform, but want to start learning iPhone development (and hence Objective-C) – this is the tutorial series for you!

This tutorial picks up where the first Objective-C tutorial left off. Now that you’re feeling the need for speed, it’s time to head out on a road trip and test your new-found skills!

This tutorial will take you on an Objective-C excursion to see some new sights, travel down some winding roads, and put the pedal to the metal while learning some great new concepts.

In this Objective-C tutorial, you will create a simple movie quotes quiz app. Along the way, you’ll become acquainted with a number of aspects of Objective-C, including:

  • mutable arrays
  • property lists
  • classes
  • methods
  • @property
  • protocols and delegates
  • additional string functions
  • and much more!

Warning: iPhone development with Objective-C can be highly addictive! Don’t be surprised to find yourself burning the midnight oil while a nice stack of dishes piles up in the kitchen! :] Keep reading!

Tags: , , ,

25 April 2013

Trigonometry for Game Programming: Part 2/2

Learn Trigonometry for Game Programming!

This is a post by iOS Tutorial Team member Matthijs Hollemans, an experienced iOS developer and designer. You can find him on and Twitter.

Welcome back to the Trigonometry for Game Programming series!

In the first part of the series, you learned the basics of trigonometry and experienced for yourself how useful it is for making games. You saw that math doesn’t have to be boring – as long as you have a fun project to apply it to, such as making your own games.

Oh yes, and you built the foundation for a solid little space shooter game!

In this second and final part of the series, you will add missiles, an orbiting asteroid shield and an animated “game over” screen to your game. Along the way, you’ll learn more about sine and cosine and see some other useful ways to put the power of trig to work in your games.

Get ready to ride the sine wave back into space! Keep reading!

Tags: , , , , ,