Issues with Tiled Loader

[pleduc]

In the examples provided, the Mookie game and Breakout game both have tiled-loader components in their action-layer entity. Both tiled loaders take in a single external spritesheet. I am having an issue when I don't pass an external spritesheet into the tiled-loader (the "images" array is marked as optional), none of the assets from the Tiled level json are loaded. Any ideas what might cause this?

[probityrules]

This had happened to me once as well, but I wasn't able to replicate it after the fact. Out of curiosity, did you add a path to the spritesheet you're using in Tiled to the list of game assets to load in config.json?

[pleduc]

Yes, I have the path to the spritesheet included in the assets array. I think I tried removing it once to see what would happen and when I ran a build I just got an error that the image couldn't be found. So it seems as though it's loading the spritesheet, but just not linking it to the Tiled json.

[pleduc]

Do you have any idea what might cause this issue? The reason I ask is because I'm trying to use a background image that is NOT composed of tiles to sits behind the tiles of a platformer game. Therefore, a master spritesheet composed of tiles (like the ones in the examples) is not the ideal way to supply this image. I've also tried passing in the individual images (not a master spritesheet) used by Tiled into the "images" array, but had no success. Any insight would be greatly appreciated! Thank you.

[probityrules]

I'm not sure what's causing the problem. I'm planning to set some time aside on Friday to see if I can determine what's going on. Could you post the "tilesets" section from your Tiled JSON export for me to check out?

[pleduc]

{ "height":16,
 "layers":[
        {
         "height":16,
         "image":"..\/images\/backgrounds_1.png",
         "name":"background",
         "opacity":1,
         "type":"imagelayer",
         "visible":true,
         "width":22,
         "x":0,
         "y":0
        }, 
        {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
         "height":16,
         "name":"collision",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":22,
         "x":0,
         "y":0
        }, 
        {
         "height":16,
         "name":"entities",
         "objects":[],
         "opacity":1,
         "type":"objectgroup",
         "visible":true,
         "width":22,
         "x":0,
         "y":0
        }],
 "orientation":"orthogonal",
 "properties":
    {

    },
 "tileheight":48,
 "tilesets":[
        {
         "firstgid":1,
         "image":"..\/images\/collision-tile.png",
         "imageheight":48,
         "imagewidth":48,
         "margin":0,
         "name":"collision",
         "properties":
            {

            },
         "spacing":0,
         "tileheight":48,
         "tilewidth":48
        }],
 "tilewidth":48,
 "version":1,
 "width":22
}

I have a provided a short example that exhibits the same symptoms so you can see the entire json. I'm simply trying to overlay a layer of surrogate tiles over top of an image layer background. The eventual goal is to not render the collision tiles, but rather have them serve as an invisible collision layer over top of the background graphic.

Thanks again for your help, Patrick

[probityrules]

Ah! I see. There are actually two things going on:

The Tiled-Loader component doesn't currently support imagelayers. Tiled-Loader was initially created when there were only objectgroups and tilelayers, so I'll add this as a feature request. You can workaround this in the meantime relatively easily in Tiled by adding your background image as an additional tileset and then copy/pasting the entire background tileset into your background layer (as a tilelayer instead of an imagelayer).

The collision layer is named "collision". The current behavior of Tiled-Loader is to make this layer invisible and use it strictly for collision. In our creation process, we create the collision layer in tandem with another layer where we place visible tiles, so we've never needed to see them, but I imagine needing these to be visible for testing makes perfect sense. You can get around this by naming the layer "action" until we can make this a bit more intuitive. (see https://github.com/PBS-KIDS/Platypus/wiki/Use-Tiled#tile-layers for more info about this)

[pleduc]

Hey, I didn't get a chance to test this today, but I'll be working over the weekend. Just wondering, will you be available this weekend? I'm just curious in case I run into any other problems.

Thanks again, Patrick

[pleduc]

I tried your suggestion and thought it hadn't fixed the problem until I messed around with unitsPerPixel and imagesScale which brought things into focus. I'm getting my levels drawing finally, thank you! I think it would be useful to have a more specific description of the interaction between the two in the documentation because it's still a bit of a game of guess and check as I work through it. Thanks, Patrick

[probityrules]

Yeah, those two properties are generally unnecessary. They're only useful if the game world units are different from the Tiled map world units (unitePerPixel) or the game tile spritesheet is of a different scale from the Tiled tile spritesheet (imagesScale), which generally is probably not the case. Did you include these two properties because of the example game? I'm considering removing them from the example altogether just to make browsing and building from the example a bit smoother.

[pleduc]

Mine are currently set a units:5 and scale:5. I included them originally because the example game had them and thought that the issues I was experiencing was because of some weird Tiled issue. I think it might be less confusing for the example's purposes if they weren't included.

I have a question about dom-elements. I want to have a dom element whose background image changes based on certain events in the game. Right now, my attempted solution involves having an entity with both a dom-element component and my own component which should trigger certain events in the dom-element. The only thing is, I can't figure out how to get to the dom-element's properties from the other component. Should I just be writing my own custom version of the dom-element component instead?

Thanks, Patrick

[probityrules]

If you will only have a single dom-element component on the entity, you can reference it from the other component by this.owner.element. For your example, you could alternatively trigger "set-style" on the owner and passing along the new background image value (ref: https://github.com/PBS-KIDS/Platypus/wiki/DOM-Element#listens-for)

this.owner.trigger('set-style', {backgroundImage: "url(imagepath.png)"});

[pleduc]

I got it working, thank you!

Another point of clarification: I'm trying to get shape working in a collision-basic component, but the "points" argument of the json in the example seems malformed and I can't figure out what I need to pass. I tried passing it as a double array and as a string, but I can't figure out what exactly it wants.

Here's the page: https://github.com/PBS-KIDS/Platypus/wiki/Collision-basic

Thank you, Patrick

[pleduc]

I think I figured it out, but in any case, I think there is a typo on that page. Thanks for your help!

Patrick

[GopherwoodTodd]

Hey Patrick,

The documentation for collision-basic is out of date. Sorry about that. You shouldn't really need to use the 'points' argument for collision-basic. While we have plans to support more shapes in the future that 'points' would make more sense for, we currently only support rectangles and circles. And it's easier to use the shape -> type argument.

Derek is updating the documentation now, so hopefully that'll clear things up. https://github.com/PBS-KIDS/Platypus/wiki/Collision-basic

Todd

On Tue, Jan 21, 2014 at 4:34 PM, pleduc notifications@github.com wrote:

I got it working, thank you!

Another point of clarification: I'm trying to get shape working in a collision-basic component, but the "points" argument of the json in the example seems malformed and I can't figure out what I need to pass. I tried passing it as a double array and as a string, but I can't figure out what exactly it wants.

Here's the page: https://github.com/PBS-KIDS/Platypus/wiki/Collision-basic

Thank you, Patrick

— Reply to this email directly or view it on GitHubhttps://github.com/PBS-KIDS/Platypus/issues/8#issuecomment-32966098 .

[pleduc]

Thank you two so much for your help and quick responses. I really appreciate it.

Patrick

[probityrules]

Glad we could help! I'm going to go ahead and close this one out, but feel free to open a new issue if you experience any additional problems.