cocos2d for iPhone

A fast, easy to use, free, and community supported 2D game engine

1. 

   rwenderlich
   Member

   Battle Map for iPad is a tool for pen & paper RPG players where you can create your own maps as easily as dragging your finger. It has some cool features like automatic tile beautification, line of sight detection, and the ability to hook up to an external display.

   As a developer, you might find this interesting for the following reasons:

   • If you're working on a tile-based game: Battle Map uses CCTMXTiledMap for the maps with a bunch of layers, just like described in a tutorial I wrote on How To Make a Tile Based Game with Cocos2D. I had to add some code to get the maps to persist to disk, handle empty layers, and a few other things along the way (unfortunately it's not in a sharable state but I'm glad to answer any questions).
   • If you have to handle a bunch of gestures: I was using my own Cocos2D touch handlers at first, but ran into a lot of problems the more complex the app became, so ended up switching to using the new gesture recognizer system. That worked wonders and the interface feels a lot more smooth and "right" as a result.
   • If you need to integrate UIKit and Cocos2D: This app is kind of a blend of a bunch of UIKit stuff (such as toolbars/popovers) and Cocos2D, since it's really more of a tool than a game. I had a bunch of trouble getting rotation to work right in the beginning, but luckily since then riq has put together a great guide on autorotation in Cocos2D since then.
   • If you want to host a beta for your app/game: I ran a beta test for Battle Map, and wrote an article with some useful advice that may be useful to others doing the same: How to Host a Beta Test for your iOS app

   As a gamer, you might find Battle Map really handy if you want to make awesome looking maps easily but aren't a super artist (like myself), if you don't have a lot of space on your gaming table, if you want to make maps show up on your monitor/projector easily, or if you've ever wanted to handle line of sight calculations properly (a real pain with a physical battlemap!)

   Here's a few images (working on the video, will post that later):

   

   You can read more about BattleMap here: http://www.razeware.com/battle-map/

   You can download BattleMap from iTunes here: http://itunes.apple.com/us/app/battle-map-for-ipad/id384800918?mt=8

   As always, I really appreciate all of you guys in the Cocos2D community especially riq and the other awesome contributors for creating such a useful framework! I have a couple promo codes to give out, if you want one (and are a pen&paper RPG player), please PM me - they'll go first come, first serve.

   Thanks guys and let me know if you have any questions or feedback about the app!

   Posted 1 year ago #
2. 

   riq
   Key Master

   Interesting idea. I've just bought it.

   How easy/hard was to skin the UIKit objects (toolbar, buttons, etc) ?
   Did you notice any performance penalty by integrating them with cocos2d ? Beside setting them as opaque, are you using using any other trick to gain performance ? Thanks!

   Posted 1 year ago #
3. 

   rwenderlich
   Member

   Wow hey riq, wasn't expecting that, thanks! The UIKit objects were pretty easy to skin. For buttons, you can just make the button a custom button and set your own image so that was easy. For toolbars and table view cells, I subclassed UIToolbar/UITableViewCell/etc. and overrode drawRect to get the look I was going for. The only tricky one was the UISegmentedControl - I couldn't find a good way to customize that, so ended up making my own view that mimicked how a UISegmentedControl works with a set of UIImages. The UIPopovers worked great with cocos2d without any particular tweaks necessary.

   By the way, is there any way to edit a post? I somehow messed up the image links and formatting in the post above but don't see a button to edit it.

   Posted 1 year ago #
4. 

   trans416
   Member

   i saw that your game came out when i got the email. i'll probably get it sometime later this week or next week.

   Posted 1 year ago #
5. 

   asinesio
   Member

   Love the concept. I'm no longer a DM or I would be all over this.

   I had a similar idea earlier, but it looks like you've written the perfect app for a DM.

   Thanks for the blog posts too!

   Posted 1 year ago #
6. 

   riq
   Key Master

   @rwenderlich Thanks for the info.

   There is a window of 2 hours to edit the post. If you want, just post here the fixed version and I'll replace your original message with the fixed one. Also, bbPress thought that this message was a spam so, probably you weren't able to edit it during the first 2 hours.

   Posted 1 year ago #
7. 

   Mic Pringle
   Member

   @rwenderlich

   Fantastic looking app and such a wicked idea - I did see the announcment on Facebook and Twitter but didn't realise it was Cocos2D based. I don't yet have an iPad, hangs head in shame, will you be doing an iPhone version ?

   I'd be interested to hear how you handled dynamic map creation and how you persisted them to disk. I'm currently writing a roguelike hybrid app where all dungeons start off utilising a base map (created in Tiled), but then grow dynamically depending on certain in-game events. I've been putting off the implementation as I haven't been able to get my head around how best to do it.

   Posted 1 year ago #
8. 

   rwenderlich
   Member

   @trans416: Awesome, thanks!! :]

   @asinesio: Yeah this app has been a long-term dream of mine, even before the iPad came out... once I saw that you could hook up an external display to the iPad (and have it be a different view than the current view on the iPad!) I knew I had to make this :]

   @Mic: Yeah cocos2D was great for this as usual. For the dynamic map creation, I simply made calls to setTileGID:at: to set the right tiles based on where the user was drawing. Had to add a bunch of custom code to get the auto-edge beautification working right. I kept the tiles as quads (i.e. I never got them as sprites to scale them etc.) to keep performance nice.

   As for persistence, I wrote some custom code that made an array of the GID for each coordinate of the map, zipped that up, then base64 encoded it (basically the opposite of what Cocos2D currently does to read the tile maps). I didn't actually integrate it into the CCTMXTiledMap class, instead I just read in an "empty" map and then set all the tiles from the persisted data.

   Let me know if that makes sense or if you have any more questions!

   @riq: Ah that explains it, now that I think of it there was an edit button at the beginning, but when I clicked on it it just brought me back to the forum front page, so the spam thing explains that. Thanks for offering to fix the formatting/images, the only thing is closing the UL tag and replacing the image links with the following - thanks so much!

   [ADMIN: fixed. Images are now on the main post]

   Posted 1 year ago #
9. 

   Mic Pringle
   Member

   @rwenderlich

   When making calls to setTileGID:at: did you start out with an empty map? What I mean is did you just create a new map of some predetermined size with a single layer in Tiled, import your tile set and then save it before bringing it across to Cocos2D?

   If not how did you create your empty map?

   Do you have any plans to write a tutorial for your blog on this subject ? Perhaps as a follow-up to the already outstanding Cocos2D tile map tutorials?

   Also, did you miss my iPhone related question?

   Posted 1 year ago #
10. 

    Mic Pringle
    Member

    @rwenderlich

    I'd also like to hear more about how you took advantage of the new UIGestureRecognizers instead of using the traditional Cocos2D touch handling mechanisms.

    Posted 1 year ago #
11. 

    Mic Pringle
    Member

    Bump

    Posted 1 year ago #
12. 

    rwenderlich
    Member

    Hey @Mic, sorry it's taken me a while to get back to you here, was in the process of moving apartments - but finally settled now!

    Yes, I started with an empty map. I made a new map in Tiled, made it the size I wanted, and clicked save basically. Then I edited it by hand to add extra layers I needed, etc. I also had to modify the Cocos2D source to accept empty layers. Note I probably could have just hacked the CCTMXMap classes to create an empty map, but this was easy so just did this :P

    Hm I wasn't really planning on making a tutorial on this, but is there any part that you think would be interesting to a lot of people?

    Whoops I did miss the iPhone question... I actually had it working as a Universal App for a while but decided to make it iPad only because it just works much better on a bigger screen and I wanted to make a high quality experience... but some people have been asking for an iPhone version so if enough people are interested, I'm open to making it Universal.

    Regarding UIGestureRecognizers... I attached the Cococ2D view inside a view controller I created, and then I just registered a bunch of gesture recognizers on the openGL view that I attached the director to (pan, pinch, tap, double tap, etc.). For ease of use, I then forwarded the callbacks down to the Cocos2D layer and dealt with what they did there.

    Posted 1 year ago #
13. 

    Mic Pringle
    Member

    Hey @rwenderlich,

    Thanks for getting back to me, hope you settle in well.

    Could you be a little more specific on what you had to edit to make Cocos2D accept empty layers ?

    In terms of a tutorial, I think there would definitely be some demand for the basic theory and implementation behind dynamic tile maps, its been asked on the forums before and something I've definitely struggled to get my head around :-)

    I would definitely buy Battle Map if it were released for the iPhone - much cheaper than buying an iPad ;-)

    Thanks for the heads up about the UIGestureRecognizers, I had wondered if they'd be compatible with Cocos2D after watching the WWDC session, so it's good to hear they are, as is with no modification required to Cocos2D.

    Posted 1 year ago #
14. 

    rwenderlich
    Member

    Hey again Mic! Yeah here's a few more details on what I had to modify to get Cocos2D to accept empty layers:

    1) Added a new attribute "tileset" to the layer element in the .tmx file by-hand, linking each layer to its corresponding tileset.
    2) Modified CCTMXXMLParser's parser:didStartElement method to read this new attribute and store it as a property on the CCTMXLayerInfo object.
    3) Modified CCTMXTiledMap's tilesetForLayer method to look through the tilesets for a matching tileset by name, if the lookup by Gid fails.

    Good luck with your roguelike! :]

    Posted 1 year ago #
15. 

    rwenderlich
    Member

    Here's the promised video, btw!

    Posted 1 year ago #
16. 

    eJayStudios
    Member

    Wow, looks so cool!

    I'm working on a game which need custom dynamic map creation like yours - e.g user is presented with an empty grid, selects tile, paints, zoom in/out, selects another tile etc.

    Would love to see tutorial on how you did this or even pay for the source code.

    Posted 1 year ago #
17. 

    eJayStudios
    Member

    resurrecting old thread, hope your app does well!

    I have one question if you don't mind, what do you mean by "auto-edge beautification working right"? What does it do exactly and what to you do to make it happen? Would love to hear from you on this.

    Btw, I believe you should make a lite version so more people can try it and potentially buy the app.

    Posted 1 year ago #
18. 

    eJayStudios
    Member

    I kept the tiles as quads (i.e. I never got them as sprites to scale them etc.) to keep performance nice.

    Not sure if Ray is still visiting this forum, maybe someone else can explain what he meant by saying "I kept the tiles as quads"?

    So in other words in cocos2D, what is a difference between quad and sprite?

    Posted 1 year ago #
19. 

    araker
    Moderator

    You should really look into the source code of the CCTMXTiledLayer, look up the relevant methods and step through the code.

    A quad is the OpenGL representation of a sprite (consisting of position coords, texture coords and color). The quads are stored in the textureAtlas property of the layer.

    You'll see that with setTileForGID a CCSprite is initialized with the properties of that tile. This is convenient, since scaling, rotation and translation are handled in the updateTransform, which also fills the quad with the relevant data. Initializing and updateTransform are a relatively expensive operations, to avoid using those Ray manipulates the quad directly.

    Posted 1 year ago #
20. 

    eoin
    Member

    I would pay for the source for this, as it would help with a project I am working on. You can do that in PM if you want.

    Posted 1 year ago #
21. 

    abitofcode
    Moderator

    I was using my own Cocos2D touch handlers at first, but ran into a lot of problems the more complex the app became, so ended up switching to using the new gesture recognizer system

    That would make a nice section in a book....

    :)

    Posted 1 year ago #
22. 

    dany
    Member

    if you need UIGestureRecognizer on cocos2d, follow this usefull thread
    http://www.cocos2d-iphone.org/forum/topic/8929

    Posted 1 year ago #
23. 

    rwenderlich
    Member

    Regarding gesture recognizers + Cocos2D, I have a blog post coming up on the subject (and related matters) soon, since several people have requested it in the past :]

    Posted 1 year ago #
24. 

    abitofcode
    Moderator

    Magic :)

    I've been playing with a UIView as an interface added as a subview to the GLView and its been working fine up until I started using gestures. The gestures (2 finger UISwipeGestureRecognizer's in this case) work as they should but the cocos2d layer is briefly handling each touch before the Gesture kicks in (My cocos2d layer has some touch handling of its own).

    Still it gives me something to do tomorrow.

    Posted 1 year ago #
25. 

    jonny2027
    Member

    Looks a great app and i am a big fan of your website and the tutorials you did on tilesheets have come in very useful recently. However i am just wondering what size tiles you are using, i started working on my own tiles last night and cant seems to find the right size. Is the simulator missleading, should i try debugging the tilemap on a device to check the sizes or tiles?

    Thanks for any insight and thanks for the tutorials

    Regards

    Jonathan

    Posted 1 year ago #
26. 

    rwenderlich
    Member

    I personally used 128x128px for the tiles in Battle Map to get a nice level of detail in the tiles.

    Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.