bensmiley's blog

iPhone Tutorial: Using the iPhone's accelerometer with Cocos2D

In this part of the tutorial I'll explain how to use the iPhone's built in gyroscope to control the tilt of the labyrinth board that we created in the earlier iPhone tutorial. In Cocos2D this is very easy to do but before we start it's worth explaining what kind of information you're going to get from the accelerometer. The accelerometer measures force - direction and strength. The phone will experience forces for two reasons. Firstly, gravity is always applying a downwards force on the phone towards the centre of the earth. The phone will also experience forces if you apply them to it with your hands. By waving the phone around or shaking it. In Cocos2D we access these forces by overriding a method in our HelloWorldLayer. When we do this we gain access to three variables: x-force, y-force and z-force. From the diagram you can see the directions of these components. Using these forces we can gain some idea about what's happening to the phone. If the phone is being held quite still, then the only force acting will be gravity. Knowing this we can find the exact orientation of the phone.

For our labyrinth game we're only going to be using the x and y force components and we're going to wire up these componentes directly to the worlds gravity.

Setting up the project:

Open up the labyrinth project we've been working on. Firstly we need to make a few tweaks. In the AppDelegate file change the shouldAutorotateToInterfaceOrientation to look like this:

Tweet: 

Tutorials

Here's a full list of all the tutorials I've written. They include tutorials for: Cocos2D, iPhone, Box2D, Web Design, CoreAudio, Java and Game Design!

Tweet: 

iPhone Tutorial: Creating a Labryinth game for the using Cocos2D

Creating a Labryinth game for the iPhone:

In this tutorial we're going to design a Labyrinth game for the iPhone using Cocos2d and Box2D. This tutorial will introduce you to the following concepts:

Tweet: 

iPhone Tutorial: Simulating a Gyroscope in Cocos2D and Box2D

I was recently working on a tutorial designing a Labyrinth type game for iPhone. This game has a maze which is seen from above. You have to guide a ball through the maze by tilting the phone avoiding obstacles. You can do this using the CoreMotion library if you can test your game on the phone and are a member of the Apple Developer Program. I wanted a simple way to emulate the effect of tilting using the iPhone simulator. The idea I came up to treat the simulator screen like it was piece of board balanced on a pin. When you click the screen it's like you're applying a force to the board and tilting it. If you were to click in the centre that wouldn't cause any tilting the further you click from the centre the more force is applied. In this example I'll show you how to use this to apply a force to an element depending on where the screen is clicked.

To do this I used the following code. First it's necessary to initialise touch in Cocos2D by putting the following in the init method:

  1. self.isTouchEnabled = YES;

Next it's necessary to override the touches moved method:

Tweet: 

Introduction to physics on the iPhone Part 4: Running the simulation on the iPhone

This is the final part of this tutorial where we're going to run the project we created on the iPhone simulator. In the earlier parts of this tutorial I showed you how to set up your own Box2D enabled Cocos2D project. It's important to know how to do this, but for now I advise that you open the "ShapeWorkshop Base" project which can be downloaded here. In this project I've deleted a whole load of un-necessary code which comes with the Cocos2D template and I've added some utility classes which we'll be using. If you would prefer to add this functionality to an existing project I've included instructions.

XCode manual setup

In the bundle included with ShapeWorkshop there should be six files:

  • BBox2DBuilder.h / BBox2DBuilder.mm:
  • BLevel.h / BLevel.m:
  • BElement.h / BElement.m:

These files are really important for your project because they automate the process of reading the level geometry file and provide a class for setting up Box2D. Right click on the main class group in XCode and create a new group called "Shape Workshop". Next copy the 6 files into your XCode project main directory. Finally right click the "Shape Workshop" directory and add the 6 files.

Importing your level into XCode

Firstly, we need to make the level geometry file and sprite spritesheet available to XCode.

You should have exported your project from Shape Workshop to the "Resources" folder of your XCode project. If you're using the base project you will need to re-do this step. First, you need to add the files to your XCode project. Right click the "Resources" folder and click:"New Group" call the group "table_scene". This group will help to organise the resources if you have more than one level. Next right click the "table_scene" group and click "Add Files to [Project Name]".
Tweet: 

Shape Workshop Beta Download Page

Beta Testing Guidlines:

Please read the following points carefully before agreeing to signup:

  • By signing up as a beta tester you are agreeing to send us feedback on the product and report any bugs that you may find
  • Bugs must be reported using the "Report Bugs" page.
  • Bug reports and feedback must be contain a description of the problem and all the necessary steps to reproduce the problem as well as a description of you system's configuration
  • Any tester who reports at least one valid bug (one which I can reproduce) will receive a 50% discount on the final price of the software - expected to be $15
  • Any tester who reports four or more valid bugs will receive a license for free
  • When the testing finishes you agree to fill out a feedback form about your experience using the application
  • You agree to the following disclaimer:

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

Latest Downloads:


Shape Workshop 1.0 Beta 4 - OSX

Shape Workshop 1.0 Beta 4 - Windows

Old Downloads:

Fixes for Beta 3 (17/06/12):

  • Increased maximum size of sprite sheet to 4096x4096
  • Level bounds are now rendered in front of scene
  • Z-Order of elements in Shape Workshop scene is now preserved when level saved and is included in the level geometry file

Shape Workshop 1.0 Beta 3 - OSX

Tweet: 

Getting started with Shape Workshop

Introduction to physics on the iPhone - Creating a scene in ShapeWorkshop

Now we have Cocos2D setup it's time to create our scene. For simple objects (squares and circles) it's just about possible to create a Box2D scene programatically. For anything more complex, you need to use a scene editor. I've written a scene editor called ShapeWorkshop and in this part of the tutorial I'll explain how it can be used to create your level. First you need to visit this page and download the Beta version of ShapeWorkshop. If, while working through this tutorial, you find any bugs you can report them on this page anyone who reports one bug will get a half price on a pro license of Shape Workshop when the stable version is released. Anyone who reports 4 or more bugs will get a free license.

After you've downloaded ShapeWorkshop fire it up and you should see two windows. One is the canvas and the other is the control panel.

The canvas gives you a space to work on your scene. Here are the main Canvas controls:

  • Left click element: selects the element
  • Left click canvas: deselect all the elements
  • Left click drag canvas: pan the canvas
  • Left click one or many elements: move the elements around
  • Right click drag: create a selection box to select multiple elements
  • Right click on element: incrementally select elements

In the canvas tool bar you can use the zoom to fit control to zoom in on all the objects in the scene or a group of objects. The X and Y position and rotation boxes can be used to fine tune the position and rotation of nodes. You can also lock nodes using the "Lock" check box. This is very useful when you want to display a background image and you don't want it to be clickable. Once a node is locked, use the object list in the control panel to select it again if you want to unlock it.

Tweet: 

Introduction to physics on the iPhone Part 2: Create a Cocos2D project

Figure 1: Creating a new project in XCode












Now that we have Cocos2D installed we need to create a new project. To do this open XCode and choose "Create New Project". Next navigate to "iOS" -> "cocos2d v2.x" and choose "cocos2D iOS with Box2d". Call the project Introduction to Physics and set the company identifier to "co.deluge" (this can be anything but it's standard practice to use a web domain that you own i.e. if the domain is bread.com use com.bread as the company identifier). Choose a location for the and click "Create".

Figure 2: Installing Cocos2D using the Terminal
Figure 3: Cocos2D example Box2D scene

Run the project

Click "Run" in the top left hand corner and wait for the project to build. The iPhone simulator should popup with a Cocos2D demo scene as shown in figure 3.

Right click on the screen to create boxes which will fall with gravity. This shows that Box2D and Cocos2D are correctly configured.

Now I'll give a brief overview of the files in your project and what they do.

AppDelegate.mm

The app delegate manages the life cycle of the application. It contains methods like:

Tweet: 

Introduction to physics on the iPhone Part 1: Install Cocos2D with XCode

The first thing we need to do is set up Cocos2D with our version of XCode. If you already have Cocos2D setup you can skip to the next section Part 2: Creating a Cocos2D enabled project.

Download Cocos2D

Cocos2D is the most popular Game Engine available for the iPhone. It's free, powerful and easy to use. The first thing we need to do is download the latest version of Cocos2D here. I'll be using the latest version: 2.0-rc1.

Figure 1: Installing Cocos2D using the Terminal

Setup Cocos2D with XCode

Cocos2D comes with an install script which we need to run. The script will automatically setup some XCode profiles for us. The profiles allow you to create a new Cocos2D project in XCode which will automatically setup all the necessary libraries for you. Unzip the folder you downloaded and locate the install-templates.sh file. Next open up a terminal window (Applications/Utilities/Terminal) and drag the install-templates.sh file into the terminal window. Finally, add the following commands "-f".

And that's it. The next step is to create a new XCode project with Cocos2D and Box2D enabled: Part 2: Creating a Cocos2D enabled project.

Tweet: 

Introduction to physics on the iPhone using Box2d and Cocos2D

What we're going to cover in this tutorial




In this tutorial I'm going to demonstrate how to set up the physics demo shown above using Cocos2D, Box2D and Shape Workshop. You'll learn how to install Cocos2D for XCode, how to create a new Box2D enabled project, how to trace and triangulate images using Shape Workshop and finally how to export the images into your scene. So let's get started with: Part 1: Setting up Cocos2D for XCode.

Tweet: 

Pages

Subscribe to RSS - bensmiley's blog