I’m trying to create a game using Cocos2D-X in HTML5 and a tilemap.
I also activated the capability to move my map with with the mouse and the onTouchMove event.
However, when I move my map, it appears that there is only a small rectangle of the entire map which is rendered.
If you don’t understand, my map is around 4000x4000 px (64 x 64 hexagons) and my cocos2dx frame is 1920*1080. The fact is that the rendered map is not 64 hexagons width but 32 hexagons.
And when I move the map, the map doesn’t refresh and I got my background.
By the way, to test I added some code to go to the center of the map (at x = 32 and y = 32 - hexagons) but this time again, there’s no map which is displayed, just the background. And when I grab the map to go to left bottom corner, the small rectangle of 32 hexagons width appear.
How can I fix this ?
Here is my code :
// Map code
this.map = cc.TMXTiledMap.create(“res/azeroth.tmx”);
this.addChild(this.map, 1, TAG_MAP);
var s = this.map.getContentSize();
console.log(s); // display map width / height in px : about 4000px width and height
// move map to the center of the screen
//var ms = this.map.getMapSize();
//var ts = this.map.getTileSize();
//map.runAction(cc.MoveTo.create(1.0, cc.p(~~ms.width * ts.width / 2,~~ms.height * ts.height / 2)));
Thanks a lot if you can help me.