cocos2d for iPhone

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

1. 

   rolando
   Moderator

   Reading the chipmunk forums, I found about this game:

   <http://xmoto.tuxfamily.org/>

   nothing to do with iphone dev, but what I found really interesting, is
   that they use Inkscape[1] (a gnu svg editor) to create the levels!
   Pretty good idea... Since Inkscape lets you modify raw xml properties/
   nodes, you can add any kind of info, including physics. They even went
   so far as releasing a branch of inkscape aimed to create xmoto levels...
   That's a very good idea to keep in mind. Now, mixing inkscape with
   some kind of tilemap support, you can have the ultimate game-level
   editor :-)
   Now, I've been doing something similar with Tiled: I used the xml-
   properties of the layer/tiles to add physics properties, for instance:
   I can specify the parallax ratio of a given layer from Tiled, and even
   the mass/elasticity/friction factor of a given tile. But for more
   complex things, that would be hard to do, though this idea of using
   Inkscape to create levels is just great...

   [1]: http://www.inkscape.org/

   Cheers,
   --
   Rolando Abarca M.

   Posted 2 years ago #
2. 

   patrickC
   Member

   Looks sweet, it would be very useful.
   I wrote a little program in QT to create connected nodes that represent ai follow paths, also could be used to draw edges for chipmunk shapes and in general sprite placement and "dressing" as it's called. (a very very rough "level editor").
   Everything just gets exported in xml, I tried using tiled for that but it wouldn't give me enough flexibility.
   If anyone's interested give me a shout but it would need lots of work to become usable, the code is just plain dirty.

   Posted 2 years ago #
3. 

   allenfjordan
   Member

   I've played xmoto for years. It's a fun little game... I think it uses the SDL graphics library (great for cross platform games). I made a level for it a long time ago, but I can't remember the details of how the editor works.

   Posted 2 years ago #
4. 

   pabloruiz55
   Member

   Hi!

   I was bored at work and started checking older posts :P

   I was recently looking for this to make maps for box2d.

   There is an existing svg parser but for the actionscript version.

   http://www.ezqueststudios.com/blog/box2d-svg-parser-curves/

   Maybe someone with a little more experience than me could write it for us to use it :D

   I would like to do it, but i am not sure that i can do it on my own :)

   For starters, for making the lines, it uses EdgeChain, is it available in the version we use?

   For making rectangles and circles it gets easier, i think.

   Posted 2 years ago #
5. 

   riq
   Key Master

   @pablo: nice finding. It's very useful to have a "world editor".

   Posted 2 years ago #
6. 

   pabloruiz55
   Member

   Thanks Riq.
   Maybe we could use this method to have a "tileless map" support.

   these links provide info about svg paths and shapes:
   http://www.w3.org/TR/SVG11/paths.html#PathData
   http://www.w3.org/TR/SVG11/shapes.html#RectElement

   For example, a rectangle like this:
   http://www.w3.org/TR/SVG11/images/shapes/rect01.svg

   generates the following:

   <?xml version="1.0" standalone="no"?>
   <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
   <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
        xmlns="http://www.w3.org/2000/svg" version="1.1">
     <desc>Example rect01 - rectangle with sharp corners</desc>
     <!-- Show outline of canvas using 'rect' element -->
     <rect x="1" y="1" width="1198" height="398"
           fill="none" stroke="blue" stroke-width="2"/>
     <rect x="400" y="100" width="400" height="200"
           fill="yellow" stroke="navy" stroke-width="10"  />
   </svg>

   With a simple parser we could create a box2d/chipmunk shape or even an sprite, simply by retrieving the attributes of the "rect" tag.

   It is a little more tricky for paths, but i think it is doable.

   Posted 2 years ago #
7. 

   Joao Caxaria
   Member

   It looks really interesting.. If somehow we got it to work with sprite sheets, it would be quite good, half the work to get something like torque would be done.

   Posted 2 years ago #
8. 

   pabloruiz55
   Member

   Well i think it could be done:

   for example inserting an image in the canvas gives the following tag:

   <image
   y="119.21932"
   x="190.42857"
   id="aaaa"
   height="32"
   width="32"
   sodipodi:absref="C:\Documents and Settings\Pablo\images\anotador.gif"
   xlink:href="Pablo\images\anotador.gif"
   inkscape:label="bbb" />

   So, depedending the image you insert (taking it from the xlink attribute) you could initialize an enemy sprite with the corresponding properties.

   ALSO there is an attribute "id" and another one "inkscape:label" which can be set to anything from inkscape editor, those could be used for setting properties for particular objects, like its z-depth, visibility,starting states, whatever we want!

   These 2 attributes can be set to ANY object(paths, rectangles, circles, polyshapes)

   Posted 2 years ago #
9. 

   rolando
   Moderator

   Also, inkscape lets you edit the xml tree, so you can easily add/change nodes/attributes on each node.

   Posted 2 years ago #
10. 

    pabloruiz55
    Member

    Ohh you are right i hadn't noticed that :D

    Another thing that could be easily done is parsing texts and creating and positioning labelAtlases from that.

    `<text
    xml:space="preserve"
    style="font-size:40px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
    x="200"
    y="635.21936"
    id="text3176"><tspan
    sodipodi:role="line"
    id="tspan3178"
    x="200"
    y="635.21936">asasas</tspan></text>'

    Posted 2 years ago #
11. 

    PhilM
    Member

    This sounds like a very nice way of adding a gui for setting up cocos2d levels.

    I've just been hacking together a Flash extension to help setup objects in a side cocos project. After going through hoop after hoop to fit in with Adobe's way of thinking, it would be soooo much easier working with a flexible open source project, instead of a proprietary one! Shame for me inkscape doesn't handle animation, but for layout it sounds ideal!

    Posted 2 years ago #
12. 

    rolando
    Moderator

    For that we would need to: either use libxml to parse the SVG, or use
    NSXMLParser. I played a few weeks ago with NSXMParser and it might not
    be that hard to do something like that.
    Anyway... maybe a two-stages level creation could result in a better
    approach: create the level in inkscape (using specific guidelines),
    parse the svg with a "tool" and create an output world file that's
    easier to parse in cocos2d, maybe a JSON file.
    The XML of the SVG is not hard, but the JSON will always be easier/faster...

    --
    Rolando Abarca
    http://rolando.cl

    Posted 2 years ago #
13. 

    pabloruiz55
    Member

    For parsing xml in objective-c there are also 2 libraries that are easier to use (supposedly) they are: XMLtouch and kissXml. But i don't know if there would be a license issue...

    But if we could do as rolando says, we could parse the inkscape svg with another tool and generate a file in JSON (i don't have any experience doing this, but it shouldn't be difficult)

    What do you think?

    Also, riq say a tileless map support was coming in 0.81, do you have any idea how is that coming along? how it is done, etc? Maybe we can integrate this idea to that...

    Posted 2 years ago #
14. 

    pabloruiz55
    Member

    Anybody knows/has a good xml to json converter script?

    Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.