How to use Tiled Map?

Hi Guys, how i use the tiledmap in cocos2dx 3.10? i try to use this guide but isn’t work : https://www.raywenderlich.com/39113/cocos2d-x-tile-map-tutorial-part-1

Start with this Tile Guide
And also look into cpp-test comes with cocos2d-x for more details.

Thanks for your help :slight_smile: i learned how to add my tiledmap to my project, but how i interact with my objects? for example in my code i add the tmx file:

auto tileMap = TMXTiledMap::create(“TileGameResources/TileMap.tmx”);
auto background = tileMap->layerNamed(“Background”);
this->addChild(tileMap);

If i have a “SpawnPoint” object, how can i set the start point in the coordinates of my spawn point object? i want to see my spawn point coordinates when i start the game, and how i interact with him?

In Tiled editor you have to first Add object layer, after that Select that Layer and click Insert Tile(T)
In code do something like this,

auto group = map->getObjectGroup("Object Layer 1");
auto& objects = group->getObjects();
for (auto& obj : objects)
{
    ValueMap& dict = obj.asValueMap();
    
    float x = dict["x"].asFloat();
    float y = dict["y"].asFloat();
}

You will find detail code in TileMapTest of cpp-test.
You can search this forum too.

Can you recomend me a link of one TileMapTest?

It comes with cocos2dx zip
Goto cocos2d-x-3.10\tests\cpp-tests\Classes\TileMapTest
To run cpp-test cocos2d-x-3.10\build open cocos2d_tests.xcodeproj or cocos2d-win32.sln
If you are on windows use Everything Search Engine. You can find any files easily within seconds.

Hi Guys, sorry to jump in but I do have a related problem to the ObjectGroup.

With my game, I have a feature where it generates a virtual grid (for a tile based map) and stores in each grid node a boolean identifying if it has an exit on any of its four sides.

I’ve got the code working as you have demonstrated (using the value map), but I have two very strange problems:

if I use the .asFloat() or asInt() modifiers on the valueMap object, it returns garbage or 0.
if I use the asString() modifier, for everything but the ‘Y’ value I can see it logs the correct value - but for the Y value I get some random, unrelated number.

I’ve used the Value(dict); methodology in the examples with CCLOG to see that it’s bringing in the ValueMap data.

Are there any known issues with converting ValueMap values to integers or floats? It seems like an extremely weird problem to be having. Is it possible I’ve missed something? Here is the code I’m using at the moment trying to figure out what’s going on. I started off with using the tileMap within this function but I’m now just passing the objects in an attempt to make the function as efficient as possible.

bool CollisionMap::checkCollision(const cocos2d::CCRect &rect, const cocos2d::ValueVector &objects) {
    cocos2d::CCRect r;
    cocos2d::ValueMap dict;
    float x, y, width, height;
    CCLOG("--------------------------------------------------------------");
    for (auto &object: objects) {
        dict = object.asValueMap();
        cocos2d::Value objectsVal = cocos2d::Value(dict);
        CCLOG("%s", objectsVal.getDescription().c_str());
        x = dict["x"].asFloat();
        y = dict["y"].asFloat();
        width = dict["width"].asFloat();
        height = dict["height"].asFloat();
        r.setRect(x, y, width, height);
        CCLOG((dict["x"].asString() + " " + dict["y"].asString()).c_str());

        if (r.intersectsRect(rect)) {
            return true;
        }
    }
    return false;
}

Here is an example of the Value(dict) that gets logged. For this particular node, the Y value should actually be 33, not 1121.

{
    name: 
    type: 
    width: 1.0000000
    x: 1184.0000000
    height: 126.0000000
    gid: 
    y: 1121.0000000
}

Does anyone have any ideas about this problem?

I have not gone through your last post properly but if you have problem with ‘Y’ value, just keep in mind that cocos treat bottom-left corner as (0, 0) and Tiled editor has Top-left as (0, 0) so cocos class TiledMap will automatic change value for you.

That means if you have Object at Pos (200, 300) and your viewsize’s height is 640 then you will get that object’s pos in code as (200, 340) => 640 - 300 = 340
So you will get object at same place as you can see in Tiled editor.
I hope this will clear your concept.

1 Like

Thanks for the reply. Unfortunately, it doesn’t help as I made a copy of my map with only two objects in there, both with y="33’, and the ValueMap for one shows y: 1246, with the other showing y: 1121

As my height is set to 720, it doesn’t make any sense and there’s no correlation assuming the y range is being inverted automatically.

There’s still the problem of asFloat() and asInt() producing garbage values…

Can you share your dummy copy of your tmx? with png
I will take a look, i have one live game with 40 levels of tile map and i dont have any problem at all.
and ofcourse i have lots of objects as well as polygons too in each levels.

Thanks. Here is the code for the TMX file (dumbed down to just one layer + collision object layer). This one only uses a single tile from a tileset that is 64 width 32 height, so feel free to just make an image that size and call it “floors.png” - probably just as easy as me trying to find somewhere to upload mine!

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" renderorder="right-down" width="40" height="40" tilewidth="32" tileheight="32" nextobjectid="65">
 <tileset firstgid="1" name="floors" tilewidth="32" tileheight="32" tilecount="2" columns="2">
  <image source="floors.png" width="64" height="32"/>
 </tileset>
 <layer name="Floor" width="40" height="40">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAC+3DAQkAAAwEoeP7h16PoeCqqaqqqqqqPnohIG7EABkAAA==
  </data>
 </layer>
 <objectgroup name="Collisions">
  <object id="27" x="898" y="33" width="287" height="1"/>
  <object id="28" x="1184" y="33" width="1" height="126"/>
  <object id="29" x="1214" y="3" width="2" height="158"/>
  <object id="30" x="1215" y="158" width="31" height="2"/>
  <object id="31" x="1214" y="192" width="2" height="126"/>
  <object id="34" x="1217" y="318" width="61" height="1"/>
  <object id="37" x="897" y="64" width="253" height="1"/>
  <object id="38" x="895" y="63" width="1" height="256"/>
  <object id="39" x="896" y="319" width="221" height="1"/>
  <object id="40" x="1152" y="64" width="1" height="256"/>
  <object id="41" x="673" y="352" width="477" height="1"/>
  <object id="42" x="1183" y="193" width="1" height="126"/>
</objectgroup>
</map>

How to make infinite scrolling background using tiled map.
Please share code in cpp if it can.

hello smit i m making a game on cocos2d js im trying to implement a adventure map just as candy crush,
i have used UIScrollView and UIListView which is basically the same i guess. This map will contain around 1000 levels so we cant render everything at the beginning itself. This has to be done dynamically.

In this particular scenario, UIListView is very helpful as we can insert maps top and above with the insertCustomItem(item, index).
(UIScrollView only adds maps below with the addChild function.)

With some logic we were able to add maps above and below but as we add it, the setInnerContainerSize function is called and it shoots upwards to the top of the scrollview. We avoided this by commenting out some lines in the setInnerContainerSize function where they reset the position of the innercontainer.

But even still, adding new maps below the scrollview, shifts the innercontainer by an offset equal to the height of the item just added to the ListView

So i guess my approach is completely wrong

Any idea how you would go about it?