Introdction
Cocos2D is awesome, and it even comes with some amazing templates to create 3 different kinds of projects. Vanilla version, one that combines Box2d(physics engine), and one that combines it with Chipmunk (physics engine).
I see a lot of games that use Cocos2D exclusively from beginning to end, and by default that’s more or less how these templates will set you up. It can lead to problems down the line, but also it’s a mistake to think you should re-invent the wheel when it comes to UIDesign as apple has done a great job and users are comfortable and like their system.
Another feeling of mine, and I can’t fault Cocos2D for this, only myself is that for a while I was really getting good knowing the ins and outs of objective-c, but I was more or less stuck on HelloWorld when it came to UIKit. I ended up seeing my use of Cocos2D as a crutch, i fell back on doing everything via Cocos2D much too quickly.
In this post I am going to try to create a new View Based application, and add Cocos2D to my standard UIKIt app “from scratch”.
Let’s Begin
…
If something goes wrong in the steps, i’m very sorry.
I don’t write tutorials for a living, and I don’t have ads on my site. I’m writing this in hopes this helps others.
Please ask whatever questions you like, in the comments, but I will not be postin teh codez’
There will be no final-code/xcode-project posted for download so please follow along.
Creating The “Cocos2D Library” Target
Create a new Application, select View Based application from the iOS templates.
Firstly select Project > Create New Target
Create a new target named “Cocos2D Library” and add it to your project.
Let’s setup some preliminary stuff here…
We’ll be taking build settings for Cocos2D, so here we’ll have to set some flags for the compiler.
I’m basically referencing the Cocos2D template and copying it’s library settings – so lets hope i don’t miss something.
Go to the build window, and add a new user defined setting (bottom left):
GCC_COMPILE_FOR_THUMB
Set it to NO
We need to add the libraries Cocos2D itself need in order to compile correctly.
Go to the general tab, and link against the following frameworks:
Compile (ctrl+b), to make sure you didn’t blow anything up.
Incorporating The Cocos2D Source Code into “Cocos2D Library” Target
Ok so we have our “Cocos2D Library” target, that’s great!
However it doesn’t have anything inside, not a single class.
In your project where your classes are right-click “other sources”
Make a new group, lets call it call it “Cocos2D Sources”
Right click that newly created group, and select “Add existing files”
Browse to where you downloaded Cocos2D
We’re going to be adding the following folders from that downloaded directory, to our “Cocos2D Library” target.
** Slow down on this part it is important and can be tricky! **
* Make sure you add them to your “Cocos2D Library” target *
* Make sure you select, “Copy Items into destination group’s folder (if needed)” *
Compile (ctrl+b), to make sure you didn’t blow anything up.
Getting our Application’s Target Ready For “Cocos2D Library” Target
Now the interesting part, where things may go wrong (I’m actually doing this as I wrote this tutorial)
Select Targets
Press the > next to the “ViewBasedCocos” Target.
Drag the “Cocos2D Library” target it into “ViewBasedCocos” target.
You should end up with this:
We need to make sure we have what “Cocos2D Library” library needs in order for to do it’s thing.
To make sure it has the proper libraries do the following
Right-Click “ViewBasedCocos” target
Select, “Add existing frameworks”, and make sure add all of these frameworks:
Adding “Cocos2D Library” Target To Our Application Target
Now right click again and select add existing frameworks, and select “libCocos2D library”
Cocos is part of our target, meaning we can import it into our own classes and use it now!
Your ‘ViewBasedCocos Target” should look like this:
Time to compile and see what exploded
Wrapping Up
If nothing exploded, then that’s amazing!
If something messed up, double check all your steps, I recreated this project twice after posting to double check my steps so it works fine.
We’re done for now…
Final Step
One last thing, Cocos2D seems to NEED “fps_images.png” to be part of your project even if you choose not to display it.
So add that file to your project, and make it part of your target
Now we can compile and combine Cocos2D with our project like the pros that we are!
Next Steps…
Part Two will be sometime this week.
I will show you how to get something showing on the screen which will look like this:
Tags: iOS
This is a great article Mario — can’t wait for you to finish the post so I can get it working as this is what I’m missing most about Cocos2D.
If anyone is wondering about the first step of turning OFF thumb support (as I was), here’s a good link to explain why that’s done: http://gamesfromwithin.com/break-that-thumb-for-best-iphone-performance
cheers.
Great! Thank you! Could we expect that to see application where one screen is UIKit (Button, Slider and Number picker) one is Cocos2d and one is mixed (Half/half)?
I cant wait for the next part!
Yeah definitely – im gonna do that – sorry for the delay.
Ah right – i forgot to mention why you want to do that.
Also thanks,
i just implemented it into my own project (an iPad app)
but when i try to link the right side of a splitview to a Cocos2d scene, then i dont see the class into my classes collection
how come ?
i did try it with a regular viewcontroller to but with the same result
i imported the file into my appdelegate to
Hi could you explain a little more what you mean?
You don’t see the “class into your my classes collection?”
Very nice. Can’t wait for the next part!
PLEASE COME BACK AND FINISH THIS POST !!! PLEASEEEEE !!!!
Lol alright, i will..
It’s been a month, do you have any pointers on where you got stuck?
Hi!
First of all, this is a great article! I’m pretty much completely new to iOS programming and only just starting to get a feel for the language. I’m using it to attempt to make an automata simulator for my university project.
I searched all over to find out how to get UIKit and cocos2D to work together and this works brilliantly!
Please, please, please could you post the second part though, so I can move my application forward. I’m having real trouble stitching the bits together, despite having the framework in place.
It’d be really appreciated!
Thanks,
Josh
Hi!
please finish the post!! I am searching everywhere how to make cocos2d show up from a UIViewController.
I have some UIViews around the position where I want to show the cocos2d scene…
Hi there, How far along did you get?
Were you able to follow this step by step guide itself?
I need to know where people are getting stuck so i can what approach to take revisit this again
I look forward to part 2
Great tutorial!, but what happened with the second part? T_T
I would say part 2 is this:
http://www.learningiphone.com/2011/03/combining-cocos2d-with-uikit-and-uitoolbar/
It’s not as detailed, but im just not good at noting every tiny step cus im fumbling myself as i go along!
This one is presented more as a ready made project that can be downloaded and used as a base
Thank you!. and I have one question if you don’t mind.
I need to run a mini game inside of a UIKit app that is already done. That means:
1.- Open the application
2.- Navigate
3.- Tap the button for the minigame
4.- Launch the minigame
5.- Return
6.- navigate
In more detailed words:
I have two separated projects, one is a UiKit based app with TabBarView (programmed without cocos2D) and the other is a game in cocos2d. I want to make a UIButton to push the game but I don’t know the steps to follow to join them.
I’ve read many times about creating an EAGLView and adding it as a subview, but I have no idea how to do that if my main app doesn’t have any cocos2D code.
I guess the first step will be adding the libraries to the main app, and then copying the classes of the game into the main project. What are the next steps? What should I add/change in order to do that?
Do you think is possible? that’s what I though by seeing the image above.