Jump to content

can't get frameName setter to work


mattlangr
 Share

Recommended Posts

Sorry - accidentally posted this to Phaser 2 forum at first. Reposting here... I expect admin will delete the first one.

I am very new to Phaser (one day of coding) and am jumping in with v3. I am trying to create a simple matching game and using an atlas for the tiles, no I am not using the tilemap at this point.

this.load.atlas('match_tiles', 'assets/img/MatchingGameJ.png', 'assets/img/MatchingGameJ.json');

I have a simple card class tracking card data and when a card is clicked, to start, I want to change the card face. I will add the animation next, first I just want to get frameName to work. For now I am also keeping the added sprite object in an array indexed with a card's tileNum as shown below.

A click is calling this method:

clickCard(cardObj) {
    console.log(cardObj);
    console.log(_tileArray[cardObj.getTileNum()]);
    console.log(cardObj.getCardFace().toString());
    console.log("frameName", _tileArray[cardObj.getTileNum()].frameName);
    _tileArray[cardObj.getTileNum()].frameName = cardObj.getCardFace().toString();
}

Using the getter, I see frameName as undefined but then becomes defined with the string after clicking the tile the first time - js creating a property that didn't exist. I can see in the  filename in the sprite object's frame.customData.filename property but changing that has no effect.

I was able to get this to work using the setFrame() method which is documented as exposed for plugins and custom classes, but that's based on an index, not the filename string. frameName seems to be what should be used.
My JSON looks like this - came from Adobe Animate and I hand modified it adding pivots to match what I thought would come out of texture packer:
 

{
   "frames": [
      {
         "filename": "1",
         "frame": {"x": 0,"y": 0,"w": 50,"h": 50},
         "rotated": false,
         "trimmed": false,
         "spriteSourceSize": {"x": 0,"y": 0,"w": 50,"h": 50},
         "sourceSize": {"w": 50,"h": 50},
         "pivot": {"x": 0.5,"y": 0.5}
      }, ...

I even tried adding fileFrame and filename keys into the JSON based on a comment in another tread. That I can get setFrame() had me thinking about the JSON though this JSON works to put the frames up when first adding the sprites.
What am I missing? Thanks in advance.

Link to comment
Share on other sites

For anyone else wondering, the setFrame() method will take a string or an integer. A string if you've loaded a texture atlas (like in the code above), or an integer if you've loaded a sprite sheet. In the JSON block above you'll see the "filename" property - that is what you need to pass to setFrame. Only be careful - in this case the filename is "1" which is a string, not a number. If you omit the quotes it'll think you're trying to get an index from a sprite sheet, which will fail.

Link to comment
Share on other sites

Thanks Rich! It didn't seem to like it when I used an integer on a frame with a filename of "tile_back". In that case I was getting an error telling me it was looking for name which sent me in the right direction. Yes in this case I am playing it fast and loose and using strings that can easily convert from numbers, maybe better to concatenate a prefix...    Is there something I was doing wrong with frameName? no matter, great to have setFrame() exposed. Thanks again.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...