How to use spritesheet in Panda

[angelkom]

How can I use spritesheet in panda and the switch between frames?

[enpu]

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?

[angelkom]

it says: Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions [object Object]

 

I did what you said I opened the png with the spritesheet and exported the json hash

[enpu]

You exported .png and .json files from TexturePacker and put them in your media/ folder?

[angelkom]

Yes...It doens't matter that much now I extracted the spritesheet and used the animation example

[enpu]

So it is working now?

[angelkom]

yes its flying I created player and then it asked me for the scene I entered the scene but I'm getting this error Uncaught RangeError: Maximum call stack size exceeded

[enpu]

Can you show me your code?

[angelkom]

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();    }); 

[angelkom]

Explain me something about the classes because I never seen this structure before

[angelkom]

if I want to add sprite or sceen or sound I need to extend the Scene class? How to use the core scene the default

[enpu]

Take a look at here: http://www.pandajs.net/tutorials/getting-started-2/

[angelkom]

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

[angelkom]

What if I only want to add sprite or scene or remove them do I need to extend the class for that

[enpu]

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?

[angelkom]

Yes it does. Sorry for bother but I see this type of structure for the first time. Now its very clear. Thanks for the fast respond 

[enpu]

That's great!

[angelkom]

Awww yes sorry one more thing how to set the size of the game and does your framework automatically scales the game when using with cocoonjs to fit all screens

Update: I found it nevermind here, only how to switch the render?!

[angelkom]

And which render does the framework use

[enpu]

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.

[yzigames]

When game objects are added with game.scene.addObject(this), are they removed automatically from scene/stage when scene changes?

 

How to to enable debug to show FPS?

 

game.debug = true; throws Uncaught TypeError: Cannot call method 'begin' of undefined system.js:187

 

Thanks.

[enpu]

Objects are not removed, but the old scene instance is not used anymore, so it doesn't matter.

 

You can enable debug by adding ?debug to your URL, or with parameter:

game.Debug.enabled = true;

[angelkom]

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"

      }

    ]

  }

}

[enpu]

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.

[AndreasLoew]

Just wanted to let you know that we've now added Panda exporter to TexturePacker - It's available from the framework selector in the start menu ;-)