Problem with load TMXTiledMap in cocos2d-html5, help me please!

Hi,
I am a newbie with Cocos2d-html5, I have a problem about graphic when I try loading a tmx tiled map, my result is not expected.

I am using cocos2d-js version 3.0, and test on chrome, firefox, ie have same problem.

This is my tmx, I designed by tiled tool.


This is game result. Have border around the tile.

This is my code.

testmap.html

<body style="text-align: center;background: #f2f6f8;">
<canvas id="myGameCanvas" width="600" height="350" tabindex="1" style="outline: none; cursor: default; background-color: black;"></canvas>
<script src="/fw/CCBoot.js"></script>
<script src="/a/main.js"></script>

main.js

cc.game.onStart = function(){
cc.LoaderScene.preload(g_resources, function () {
    cc.director.runScene(new DesertPlayScene());
}, this);}; cc.game.run();

resources.js

var res = {
tmw_desert_spacing_png : "/i/desert/tmw_desert_spacing.png",
player_png : "/i/desert/player.png",
desert_map_tmx : "/i/desert/desert_map.tmx"};
var g_resources = [];
for (var i in res) {
g_resources.push(res[i]);}

DesertPlayScene.js

var DesertPlayScene = cc.Scene.extend({
onEnter:function () {
    var desertLayer = new DesertBackgroundLayer();
    this.addChild(desertLayer);
    this.addChild(new PlayerLayer(desertLayer.map));
}});

DesertBackgroundLayer.js

var DesertBackgroundLayer = cc.Layer.extend({
map : null,
ctor : function(space){
    //1. call super class's ctor function
    this._super();
    
    this.init();
},
init:function(){
    this.map = cc.TMXTiledMap.create(res.desert_map_tmx);
    this.addChild(this.map);
}});

PlayerLayer.js

var PlayerLayer = cc.Layer.extend({
map : null,
ctor : function(map){
    //1. call super class's ctor function
    this._super();
    this.map = map;
    this.init();
},
init:function(){
    //call super class's super function
    this._super();
    
    var objectGroup = this.map.getObjectGroup("Objects");
    var objects = objectGroup.getObjects();
    var playerTile = null;
    for ( var i = 0; i < objects.length; i++) {
        if(objects[i]["name"] == "SpawnPoint"){
            playerTile = objects[i];
            break;
        }
    }
    
    //create sprite
    var player = cc.Sprite.create(res.player_png);
    player.setPosition(cc.p(playerTile.x,playerTile.y));
    this.addChild(player);});

Please help me.

Nobody can help me :frowning:

Hey there, i have the exact same problem. Apparently it’s due to a problem in the webgl rendering engine.

You can solve it by forcing the use of canvas engine, just change “renderMode” : 0 to “renderMode” : 1 in project.json.

Still i would really like a fix for this as Canvas is much slower than openGL :frowning:

1 Like

Thank you @gnomesgames

I need to use tmx map, with cocos2djs V3.5, there is the same bug with webgl render mode.

Do you know how to fix it ? I can’t switch to canvas mode (large project)

Hi. Because the tmx map disign is not right way .