search

cocos2d / cocos2d-x

Cocos2d-x is a suite of open-source, cross-platform, game-development tools utilized by millions of developers across the globe. Its core has evolved to serve as the foundation for Cocos Creator 1.x & 2.x.
https://www.cocos.com/en/cocos2d-x
18.21k stars 7.06k forks source link

TileMap Rendering Issue Cocos v3.3 #10318

Open vasumahesh1 opened 9 years ago

vasumahesh1 commented 9 years ago

Hi,

I was trying to render a simple tile map on windows phone. And I got it loaded successfully but my Tile maps are loading quite differently than I had set it up in Tiled.

Here is the screenshot from my phone (wp8.1 preview for developers)

bug

Here is what i expected (Screenshot from Tiled)

real

here is the C++ code I used to in my Scene's init() method

auto tmMap = TMXTiledMap::create("tmx/map.tmx");
auto layer = tmMap->layerNamed("origin_layer");
Size s = layer->getLayerSize();
for (int x = 0; x < s.width; ++x)
{
    for (int y = 0; y < s.height; ++y)
    {
        CCLOG("Logged GID at %d,%d as %d",x,y,layer->getTileGIDAt(Vec2(x, y)));
    }
}
this->addChild(tmMap);

I tired to debug the GID's and found out they are coming exactly as specified in the XML of the .tmx file.

More over I tried various patterns / tmx maps with gzip zlib and base64 uncompressed and got the same issue. Also there was a very unique pattern.

The last tile of my tileset is rendered properly always .. while the others are some sort of stretched version of the water tile or someother(in other map cases I tried), here is the screenshot of the tileset of this map.

tileset_error

Quite strange. In some cases I had the water tile at the last and only that thing loaded perfectly.

here is the full tmx file I used

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" renderorder="right-down" width="19" height="19" tilewidth="32" tileheight="32" nextobjectid="1">
 <tileset firstgid="1" name="origin_map" tilewidth="32" tileheight="32">
  <tile id="0">
   <image width="32" height="32" source="grass.png"/>
  </tile>
  <tile id="1">
   <image width="32" height="32" source="grass-water-bot.png"/>
  </tile>
  <tile id="2">
   <image width="32" height="32" source="grass-water-bot-left.png"/>
  </tile>
  <tile id="3">
   <image width="32" height="32" source="grass-water-bot-right.png"/>
  </tile>
  <tile id="4">
   <image width="32" height="32" source="grass-water-left.png"/>
  </tile>
  <tile id="5">
   <image width="32" height="32" source="grass-water-right.png"/>
  </tile>
  <tile id="6">
   <image width="32" height="32" source="grass-water-top.png"/>
  </tile>
  <tile id="7">
   <image width="32" height="32" source="grass-water-top-left.png"/>
  </tile>
  <tile id="8">
   <image width="32" height="32" source="grass-water-top-right.png"/>
  </tile>
  <tile id="9">
   <image width="32" height="32" source="water.png"/>
  </tile>
  <tile id="10">
   <image width="32" height="32" source="water-grass-bot-left.png"/>
  </tile>
  <tile id="11">
   <image width="32" height="32" source="water-grass-bot-right.png"/>
  </tile>
  <tile id="12">
   <image width="32" height="32" source="water-grass-top-left.png"/>
  </tile>
  <tile id="13">
   <image width="32" height="32" source="water-grass-top-right.png"/>
  </tile>
 </tileset>
 <layer name="origin_layer" width="19" height="19">
  <data>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="12"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="11"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="8"/>
   <tile gid="9"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="14"/>
   <tile gid="9"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="3"/>
   <tile gid="11"/>
   <tile gid="14"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="9"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="3"/>
   <tile gid="11"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="14"/>
   <tile gid="9"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="3"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="2"/>
   <tile gid="11"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="3"/>
   <tile gid="4"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="6"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="1"/>
   <tile gid="5"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="14"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="7"/>
   <tile gid="13"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
   <tile gid="10"/>
  </data>
 </layer>
</map>
stammen commented 9 years ago

Does this happen for Windows Phone 8 or Windows Phone 8.1 (universal app) projects?

vasumahesh1 commented 9 years ago

WP8 Project

vasumahesh1 commented 9 years ago

I just made a fresh new project and loaded the TMX File. Got the same Render Issue.

stammen commented 9 years ago

Do you have the same problem with the Universal App project? It uses a newer version of our Angle (OpenGL -> DirectX) lib.

vasumahesh1 commented 9 years ago

Haven't tried yet .. Will try now .. Can you redirect me to a setup link for Windows 8.1 Universal ? Im having some build issues with it regarding libSpine.Windows

vasumahesh1 commented 9 years ago

I was able to get hold of a Mac , and i got the same iOS render issue (Note this is an older map so it looks different but we see the same issue)....

ios simulator screen shot feb 2 2015 5 08 02 pm

Can anyone inspect my TMX file ... I really don't know if this is correct or not.

vasumahesh1 commented 9 years ago

This was the output of the XCode Ouput Window :

{
    cocos2d.x.version: cocos2d-x 3.3
    cocos2d.x.compiled_with_gl_state_cache: true
    cocos2d.x.build_type: DEBUG
    gl.supports_vertex_array_object: true
    cocos2d.x.compiled_with_profiler: false
    gl.renderer: Apple Software Renderer
    gl.vendor: Apple Inc.
    gl.max_texture_size: 4096
    gl.max_samples_allowed: 4
    gl.version: OpenGL ES 2.0 APPLE-10.1.4
    gl.supports_S3TC: false
    gl.supports_ATITC: false
    gl.supports_ETC1: false
    gl.max_texture_units: 8
    gl.supports_PVRTC: true
    gl.supports_NPOT: true
    gl.supports_discard_framebuffer: true
    gl.supports_BGRA8888: false
}

libpng warning: iCCP: known incorrect sRGB profile
libpng warning: iCCP: known incorrect sRGB profile
cocos2d: SpriteBatchNode: resizing TextureAtlas capacity from [127] to [170].
cocos2d: SpriteBatchNode: resizing TextureAtlas capacity from [170] to [228].
cocos2d: SpriteBatchNode: resizing TextureAtlas capacity from [228] to [305].
cocos2d: SpriteBatchNode: resizing TextureAtlas capacity from [305] to [408].
2015-02-02 17:08:00.973 SampleApp iOS[33503:1334321] cocos2d: surface size: 1136x640
2015-02-02 17:08:00.975 SampleApp iOS[33503:1334321] cocos2d: surface size: 1136x640
vasumahesh1 commented 9 years ago

Update on the situation :

When I Use a "TileSet Image" (Earlier was Individual Image per Tile) it Renders Perfectly on any platform.

But when I have individual Images for each tile it renders it in this manner.

For now it has seemed to fixed the issue.

As per the wiki: http://www.cocos2d-x.org/wiki/TileMap

Tiles: Embedded tiles are NOT supported (i.e., tilesets with embedded images). Only embedded tilesets are supported (i.e., the tileset is embedded, but not its images). supports at most 1 tileset per layer.

As a newbie to cocos and game dev, I have no idea what this means.. and seems misleading for me. As I thought embedded tilesets == Tileset Image. But infact a Tileset Image turned out to be my solution.

suggestion

Probably this image can be used on further to improve the wiki.

stevetranby commented 9 years ago

I don't believe the cocos2d-x TileMap engine and parser supports the collection of individual images yet.

tienthanh1993 commented 8 years ago

how can i make a map with images have different size. i found in test resource have this but i don't know how to make the same. ortho-test1

itsabhiaryan commented 7 years ago

Is there any plan for this issue ??