[Solved] Black screen when using TMXTiledMap background

cocos2d-x JavaScript
#1

Hello,

Like others, I am new to Cocos2d and I am following the Parkour Tutorial. I am using:
Cocos2d-x v3.7 (JavaScript)
Mac OS X
NDK r10e

When I run my game on web (using Chrome debugging) everything runs fine, all the resources load and run smoothly but when I run it on my iOS simulator or android device I keep getting a black screen when I run the code. This happens when I switch from using an image (sprite) as my background to a .tmx file as my tiledmap background.

Here are snippets of my code:
resource.js

var res = {
    roadBG_png: "res/backgrounds/roadBG.png",
    playScene_plist: "res/playScene.plist",
    playScene_png: "res/playScene.png",
    road_color_BG_png: "res/backgrounds/road_color_BG.png",
    road_line_png: "res/backgrounds/road_line.png",
    road00_tmx: "res/backgrounds/road00.tmx",
    road01_tmx: "res/backgrounds/road01.tmx"
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

background.js

 init: function () {
    this._super();

    //create the background image and position it at the center of the screen
    var centerPos = cc.p(winSize.width / 2, winSize.height / 2);
    var spriteBG = new cc.Sprite(res.roadBG_png);
    spriteBG.setPosition(centerPos);
    this.addChild(spriteBG);
    
    /* Above code works fine
     * when below code is uncommented and
     * above code is commented, it causes black screen.

    // Load road background using road.tmx files
    this.road00 = new cc.TMXTiledMap(res.road00_tmx);
    this.road00.setAnchorPoint(0, 0.5);
    this.road00.setPosition(roadCenter);
    this.addChild(this.road00);

    this.mapWidth = this.road00.getContentSize().width;

    this.road01 = new cc.TMXTiledMap(res.road01_tmx);
    this.road01.setAnchorPoint(0, 0.5);
    console.log();
    this.road01.setPosition(cc.p(screenOrigin.x + this.mapWidth, roadCenter.y));
    this.addChild(this.road01);
    */

    // Call scheduleUpdate
    this.scheduleUpdate();
},

From

fab751220dd0baf6.png961×663

To
98c81144ff3055e5.png959×663

Does anyone know what I’m doing wrong or have you encountered this problem before?

#2

I decided to remove tiled map from my game and just use a repeating background image that loops.

#3

If there is no error only “Black” and application runs normally. Should check Tileset png’s location. I did drag-drop from another location while designing the map and got the same black result. Then i put the png into the same location with the tmx file and redesigned with it. That solves my “black” problem.

#4

Ya that was the issues. Thanks!

#5

Likewise had this issue and added my spritesheet into my Resources folder, same as my TMX map and it worked. So glad I found this thread, cheers!!