Jump to content

How to use spritesheet in Panda


angelkom
 Share

Recommended Posts

Here is example of using spritesheet made with TexturePacker:

game.module(    'game.main').require(    'engine.core').body(function(){// Load spritesheet jsongame.addAsset('media/spritesheet.json');SceneGame = game.Scene.extend({    init: function() {        // Load sprite from spritesheet        var sprite = new game.Sprite(0, 0, 'logo1.png');        this.stage.addChild(sprite);    }});game.start();});

Use data format JSON (Hash) in TexturePacker.

 

Does that help you?

Link to comment
Share on other sites

I fix it

 

game.module(      'game.main'  )  .require(      'engine.core'  )  .body(function(){    // Load images for animation (you can also use sprite sheets)  game.addAsset('src/assets/player1.png');  game.addAsset('src/assets/player2.png');  game.addAsset('src/assets/player3.png');  SceneGame = game.Scene.extend({      init: function() {        var sprite = new game.Sprite(100, 100, "src/assets/player1.png");        // Create new sprite animation          sprite = new game.MovieClip([              game.Texture.fromImage('src/assets/player1.png'),              game.Texture.fromImage('src/assets/player2.png'),              game.Texture.fromImage('src/assets/player3.png')        ]);         sprite.animationSpeed = 0.1;        sprite.play();        this.stage.addChild(sprite);      }  });  game.start();    }); 
Link to comment
Share on other sites

For example in echant.js its very simple you can  use the core scene or add new one on top of the core or you can remove the scene and you only need to add the sprite to the scene. I know that is same here but this type of structure I've never seen before Can you explain me a little thanks

Link to comment
Share on other sites

You create new scenes by extending game.Scene class.

 

You can add new sprites inside scene class (or wherever you want) or create own class for them.

 

Here is example:

// Create new sceneSceneGame = game.Scene.extend({    init: function() {        // Add new sprite inside scene class        var sprite = new game.Sprite(100, 100, 'media/player1.png');        // Add sprite to stage        this.stage.addChild(sprite);        // Change to another scene        game.system.setScene(SceneEnd);    }});// Create class for spritePlayer = game.Class.extend({    init: function(x, y) {        this.sprite = new game.Sprite(x, y, 'media/player1.png');    }});// Create another sceneSceneEnd = game.Scene.extend({    init: function() {        // Create new instance of Player        var player = new Player(100, 100);        // Add it's sprite to stage        this.stage.addChild(player.sprite);    }});// Start engine with scene SceneGamegame.start(SceneGame);

Does that make sense to you?

Link to comment
Share on other sites

You can se the game size with game.start() function, like this:

game.start(SceneGame, 640, 480);

The game will be automatically resized if the window is smaller than your game. You can turn off the resizing by adding this line before the start function:

game.System.resize = false;

Panda.js uses Pixi.js renderer, so there is both Canvas and WebGL available. By default it uses canvas, if you want to enable WebGL, add this line before starting the engine:

game.System.canvas = false;

For CocoonJS, you can also set the resizing method to use:

game.System.idtkScale = 'ScaleAspectFit';

Choices are ScaleToFill, ScaleAspectFit and ScaleAspectFill.

Link to comment
Share on other sites

I used the json with the sprites but the sprites still showing all three here is the json:

 

{
  "TextureAtlas": {
    "-imagePath": "sheet.png",
    "SubTexture": [
      {
        "-name": "grassLeft.png",
        "-x": "0",
        "-y": "0",
        "-width": "70",
        "-height": "70"
      },
      {
        "-name": "grassMid.png",
        "-x": "0",
        "-y": "144",
        "-width": "70",
        "-height": "70"
      },
      {
        "-name": "grassRight.png",
        "-x": "0",
        "-y": "72",
        "-width": "70",
        "-height": "70"
      }
    ]
  }
}
Link to comment
Share on other sites

Spritesheet json should look like this:

{"frames": {"particle.png":{	"frame": {"x":6,"y":0,"w":12,"h":12},	"rotated": false,	"trimmed": false,	"spriteSourceSize": {"x":0,"y":0,"w":12,"h":12},	"sourceSize": {"w":12,"h":12}},"particle2.png":{	"frame": {"x":0,"y":0,"w":4,"h":4},	"rotated": false,	"trimmed": false,	"spriteSourceSize": {"x":0,"y":0,"w":4,"h":4},	"sourceSize": {"w":4,"h":4}},"player1.png":{	"frame": {"x":98,"y":0,"w":136,"h":84},	"rotated": false,	"trimmed": false,	"spriteSourceSize": {"x":0,"y":0,"w":136,"h":84},	"sourceSize": {"w":136,"h":84}},"meta": {	"app": "http://www.codeandweb.com/texturepacker ",	"version": "1.0",	"image": "sheet.png",	"format": "RGBA8888",	"size": {"w":770,"h":1010},	"scale": "1",	"smartupdate": "$TexturePacker:SmartUpdate:03697672b29ba7854f42c57589cd26e3:1/1$"}}

On TexturePacker, use JSON (Hash) format.

Link to comment
Share on other sites

  • 1 year later...

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...