I in the use of this method, there was a mistake, I don’t know how to solve
“var imgSource = image.getAttribute(‘source’);”——Cannot call method ‘getAttribut’ of undefined
I used to edit the map software is’ tiled ’
<?xml version="1.0" encoding="UTF-8"?> H4sIAAAAAAAAAO3ZMQqAQAwAwbxE5Qo9LNT/v85aMCAWpnCKaRYS0qdFRAMA+JGVUgMAAAAAAABwMb2cG4tv6Elfbtr8YN+R9D3pW9T/nwEAvnYCtDXZQQAwAAA=Hi there,
Do you mean that you are looking to get the value here:
Or does image refer to an element that you’re trying to retrieve the src attribute of? If the latter, this can be done with:
image.src
or
image.getAttribute('src')
I guess to start, what is image being set to? Because the error makes it seem that image doesn’t yet exist.
Erik Oros wrote:
Hi there,
>
Do you mean that you are looking to get the value here:
[…]
>
Or does image refer to anelement that you’re trying to retrieve the src attribute of? If the latter, this can be done with:
[…]
>
I guess to start, what is image being set to? Because the error makes it seem that image doesn’t yet exist.
Hi there
My pictures and TMX files in the same directory
Error is the place where ‘cocos2d’ source file inside
Hi there,
I’m not sure I’m completely following. The error is indicating that image hasn’t been created yet (i.e. that it is undefined.) Would you be able to share the code where you define image, for example:
var image = something;
As well as the code after that, up to the line that is causing the error:
var imgSource = image.getAttribute('source');
Erik Oros wrote:
Hi there,
>
I’m not sure I’m completely following. The error is indicating that image hasn’t been created yet (i.e. that it is undefined.) Would you be able to share the code where you define image, for example:
[…]
>
As well as the code after that, up to the line that is causing the error:
[…]
Hi there,
@
var CircleSprite = cc.Sprite.extend({
*radians:0,
ctor:function {
this.*super();
},
draw:function () {
cc.renderContext.fillStyle = “rgba(255,255,255,1)”;
cc.renderContext.strokeStyle = “rgba(255,255,255,1)”;
if (this.*radians < 0)
this.*radians = 360;
cc.drawingUtil.drawCircle(cc.PointZero(), 30, cc.DEGREES_TO_RADIANS(this.*radians), 60, true);
},
myUpdate:function {
this.*radians = 6; document.body.clientWidth;
//this.*addDirtyRegionToDirector);
}
});
var Helloworld = cc.Layer.extend {
var selfPointer = this;
this.*super;
var size = cc.Director.getInstance.getWinSize;
this.map = new cc.TMXTiledMap.create;
this.setTouchEnabled;
this.adjustSizeForWindow;
window.addEventListener {
selfPointer.adjustSizeForWindow;
});
return true;
},
adjustSizeForWindow:function {
var margin = document.documentElement.clientWidth
if (document.documentElement.clientWidth < cc.originalCanvasSize.width) {
cc.canvas.width = cc.originalCanvasSize.width;
} else {
cc.canvas.width = document.documentElement.clientWidth - margin;
}
if (document.documentElement.clientHeight < cc.originalCanvasSize.height) {
cc.canvas.height = cc.originalCanvasSize.height;
} else {
cc.canvas.height = document.documentElement.clientHeight - margin;
}
var xScale = cc.canvas.width / cc.originalCanvasSize.width;
var yScale = cc.canvas.height / cc.originalCanvasSize.height;
if (xScale > yScale) {
xScale = yScale;
}
cc.canvas.width = cc.originalCanvasSize.width * xScale;
cc.canvas.height = cc.originalCanvasSize.height * xScale;
var parentDiv = document.getElementById(“Cocos2dGameContainer”);
if (parentDiv) {
parentDiv.style.width = cc.canvas.width + “px”;
parentDiv.style.height = cc.canvas.height + “px”;
}
cc.renderContext.translate(0, cc.canvas.height);
cc.renderContext.scale(xScale, xScale);
cc.Director.getInstance().setContentScaleFactor(xScale);
},
// a selector callback
menuCloseCallback:function (sender) {
cc.Director.getInstance().end();
},
onTouchesBegan:function (touches, event) {
this.isMouseDown = true;
},
onTouchesMoved:function (touches, event) {
if (this.isMouseDown) {
if (touches) {
//this.circle.setPosition(cc.p(touches[0].getLocation().x, touches[0].getLocation().y));
}
}
},
onTouchesEnded:function (touches, event) {
this.isMouseDown = false;
},
onTouchesCancelled:function (touches, event) {
console.log(“onTouchesCancelled”);
}
});
var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new Helloworld();
layer.init();
//layer.charactersService();
//setInterval(layer.charactersService,200);
this.addChild(layer);
}
});
@
Mistakes here:“this.map = new cc.TMXTiledMap.create(”map/bg.tmx“);”
Ah, I think I understand now. In your code, you’re calling:
new cc.TMXTiledMap.create("map/bg.tmx");"
But the error is actually within the Cocos source file for TMXTiledMap as a result.
My first question then is whether you are preloading the TMX file in your main.js file. There should be a code that looks like this:
cc.Loader.getInstance().preload([
{type: 'tmx', src: 'map/bg.tmx'}
]);
Of course, you might have additional resources listed there. But can you confirm that you are preloading the bg.tmx file in this fashion?
If so, can you please confirm what device/platform you are testing on? It’s a bit of an outlier case, but when I was using an emulator for my testing I actually had an issue with that emulator mis-identifying the MIME type of the TMX file. I could have fixed this with some server settings, but a quick workaround was to rename the TMX to XML. This way it was retrieved with an appropriate MIME type and the underlying file matched as well.
That being said, are there any other logs in your Web Inspector console at all (even if they don’t seem related)?
First of all thank you, but I still don’t get right, it seems that I need a example 
Sure thing, I can speak to the sample I posted here (which also loads a TMX file):
https://github.com/blackberry/BB10-WebWorks-Community-Samples/tree/master/BoxQuest
Everything kicks off in index.html:
https://github.com/blackberry/BB10-WebWorks-Community-Samples/blob/master/BoxQuest/index.html
This is more or less a standard index.html that progammatically creates our jsloader.js
and adds that child to the DOM. We kick off this behaviour after the **DOMContentLoaded** event, and after the **webworksready** event; note that **webworksready** is a BlackBerry specific event and should be omitted on other platforms. The key in that file is that we’re setting our configuration variable and providing a list of custom JavaScript files that we also want loaded. In my case, Freewill.js and SceneStart.js. Once **jsloader.js** does its thing, it will automatically load **main.js**: > https://github.com/blackberry/BB10-WebWorks-Community-Samples/blob/master/BoxQuest/main.js Here is where we are extending **cc.Application**. The very last line of **main.js** creates a new **cc.Application** which invokes our custom class’s **ctor** function. In our case, we: \* Call this.\_super(); the first thing we should do any time we’re extending. \* Set our **startScene** \* Initialize our debug settings. \* Call cc.Setup(); \* Set a few custom styles specific to this application. \* Define the **onloading** and **onload** functions. \* Call the **preload** function. The **preload** function is where our initial load of the **TMX** file takes place. This ensure that it is already in memory and accessible if we need to use it down the line. cc.Loader.getInstance().preload([ {type: 'tmx', src: './tmx/0-0.xml'}, {type: 'image', src: './images/0-0.png'}, {type: 'image', src: './images/tiles.png'} ]); /* I am using an XML file, but really that is just a renamed TMX file. I had to do this to workaround a separate issue. */ Once all of the assets are preloaded, **then** the framework begins initializing our **startScene**. In the sample, we set that to **SceneStart**, which is defined in **SceneStart.js**: > https://github.com/blackberry/BB10-WebWorks-Community-Samples/blob/master/BoxQuest/js/SceneStart.js There’s a lot going on in here, but you can see Line 45 where I call: tmx = cc.TMXTiledMap.create('./tmx/0-0.xml'); Note that the **string argument** is exactly the same string as was used in my **preload** array. I also noticed that you were calling **new**, which isn’t necessary; perhaps that’s related to the issue? Please let me know if you have any questions.Thank you very much, I’m glad to meet you, in your body I learned valuable knowledge, thanks again
Hi, im having almost the same issue, let me add almosth
this is the error im getting.
Cocos2d-html5-v2.0.0 CCCommon.js:123
XHR finished loading: "http://localhost/cocos2D/tile01/map/tile.tmx". CCSAXParser.js:178
function webkitRequestAnimationFrame() { [native code] } CCCommon.js:123
cocos2d: Warning: TMX Layer Patron has no tiles CCCommon.js:123
Uncaught TypeError: Cannot read property 'width' of undefined CCTMXLayer.js:449
cc.TMXLayer.cc.SpriteBatchNode.extend.setupTiles CCTMXLayer.js:449
cc.TMXTiledMap.cc.Node.extend._parseLayer CCTMXTiledMap.js:299
cc.TMXTiledMap.cc.Node.extend._buildWithMapInfo CCTMXTiledMap.js:222
cc.TMXTiledMap.cc.Node.extend.initWithTMXFile CCTMXTiledMap.js:202
cc.TMXTiledMap.create CCTMXTiledMap.js:346
cc.LayerColor.extend.init SceneApp.js:9
cc.Class.extend.prototype.(anonymous function) CCClass.js:76
cc.Scene.extend.onEnter SceneApp.js:20
cc.Class.extend.prototype.(anonymous function) CCClass.js:76
cc.Director.cc.Class.extend.setNextScene CCDirector.js:786
cc.Director.cc.Class.extend.drawScene CCDirector.js:337
cc.DisplayLinkDirector.cc.Director.extend.mainLoop CCDirector.js:1165
callback
This is how looks like the tile map
eJztlMEKwCAMQwu7iv//ubvssIWmMhrLhh5yETSvaWszs7b1UF/Y/yu1d0dV/ncdlyIOJSN6ezzog5zK+hmHx6DIAf28/KMM8H7GP8of3x/xvc0/YkB/zCo7B2wGWB/YmXoXvZpHfZklzFuxe5k9qf63o5msyn9lf8ZROQNb/9cJyW0j+w==
Im preloading like you said
cc.Loader.shareLoader().preload([
{type: 'image', src: 'map/texture.png'},
{type: 'tmx', src: 'map/tile.tmx'}
]);
And the code in the init
var SceneClass = cc.LayerColor.extend(
{
tileMap:null,
init:function()
{
this._super();
this.initWithColor(new cc.Color4B(0,0,0,255));
this.tileMap = cc.TMXTiledMap.create('map/tile.tmx');
return this;
}
});
var SceneApp = cc.Scene.extend({
onEnter:function(){
this._super();
var layer = new SceneClass();
layer.init();
this.addChild(layer);
}
});
Two things come to mind.
In Tiled, before you export the TMX file, can you check Edit > Preferences and confirm the value for Store the layer data as field? I found the best results with **Base64 **.
EDIT: Based on your TMX file, looks like you are using zlib. I think/hope that changing to gzip compression will do it.
I had a bit of a special case due to the emulator I was using, but I had to actually rename my TMX file to XML (along with the path references) as I did not have an appropriate MIME type on my web server. This could have been overcome by updating the MIME type, but my quick workaround was just renaming to XML since a TMX file is more or less the same structure.
Erik Oros wrote:
Two things come to mind.
>
In Tiled, before you export the TMX file, can you check Edit > Preferences and confirm the value for Store the layer data as field? I found the best results with **Base64 **.
>
>EDIT: Based on your TMX file, looks like you are using zlib. I think/hope that changing to gzip compression will do it.
>
I had a bit of a special case due to the emulator I was using, but I had to actually rename my TMX file to XML (along with the path references) as I did not have an appropriate MIME type on my web server. This could have been overcome by updating the MIME type, but my quick workaround was just renaming to XML since a TMX file is more or less the same structure.
Yes i figure out that i was to post the solution is to change zlib for gzip.
I hope this works for others in my case.
Hello. I’m having the same problem smill cui had 9 months ago, and I rather ask here than open a new thread.
So, my problem is within the Cocos library. Whenever I do something like “this.tmx = cc.TMXTiledMap.create(level01);” I get this error (in Firefox) “var imgSource = image.getAttribute(‘source’);” I tried debugging it, entering into the cocos files, and image is undefined. I’m really not sure what is causing this.
I did tried everything Erik Oros said, and I’m preloading the .tmx file and the tileset that file uses.
That’s it, thanks in advance.