Panda 2 development

[Ninjadoodle]

Hi guys

 

Is there a way to read the x and y of the preset 'game area'?

 

Right now I seem to be getting readings for the entire browser window

 

mousemove: function(x, y) {

    console.log(x);

}

 

Thanks heaps in advance!

[enpu]

Not sure what you mean by game area?

 

On mousemove you should get x and y coordinates of canvas.

 

 

See example 3.2 from playground:

http://ekelokorpi.github.io/panda.js-site/engine/playground/

[Ninjadoodle]

For me it seems to getting the area outside the canvas as well. Basically 0 starts on the left of the browser window no matter how stretched it is.

[enpu]

What browser? Newest pull from develop branch? Can you show more of your code (mousemove part)?

[Ninjadoodle]

Hi @enpu

 

I'm pretty sure this is to do with 'resize'

 

When I have 'resize' disabled and 'centre' enabled ... the coordinates read correctly.

With 'resize' enabled ... the coordinates start on the left of the browser window and run all the way to the right (I assume it should be negative values when you are out of the canvas to the left).

 

This happens on the latest develop and on both Chrome and Safari (Macbook Pro).

 

The only code I have when testing this ...

 

init: function() {

},

 

update: function() {   

},

 

mousemove: function(x, y) {

    console.log(x);

}

[enpu]

I can't see nothing wrong with coordinates when 'resize' enabled.

 

When 'resize' is enabled, canvas is resized to full window size, so position 0,0 is left top corner.

You can't be "out of canvas" because mousemove event is listening to the canvas element,

so it is fired only when moving mouse on top of canvas.

[Ninjadoodle]

Hi @enpu

 

I'm going to try put together a sample file for you.

 

Basically, if i try to drag a sprite with 'resize' disabled, it works fine.

 

When I enable 'resize', the sprite is not aligned with the mouse.

 

The distance from the mouse changes depending on how stretched the browser window is.

[Ninjadoodle]

Hi @enpu

 

I just emailed you a test file, which you can look at if you have time.

 

Currently, 'resize' is disabled and the sprite follows the mouse.

 

If you enable 'resize' however, the sprite is no longer aligned with the mouse and the origin of where the co-ordinates start changes.

 

Thank you!

[enpu]

Ok so the sprite is not aligned with the mouse when using resize, because you are repositioning your containers,

so the sprites parent is not positioned at 0.0 anymore.

 

You see if you create container and position it at 100.100 and add sprite to it at position 50.50, it's

real position in canvas would be 150.150

 

Quick fix would be to calculate the offset:

var offsetX = (game.system.width - game.system.originalWidth) / 2;var offsetY = (game.system.height - game.system.originalHeight) / 2;this.mushroom1.position.set(x - offsetX, y - offsetY);

(Though i personally still would not use 'resize' on desktop, as you see you are just making things a bit more difficult for yourself

[Ninjadoodle]

Hi @enpu

 

Thank you very much for the explanation. It gives me a much better idea of how the canvas positioning works.

 

I'm going to try the offset suggestion, as I'd still really like to use 'resize'. I think it looks really nice, when the game fills up the whole browser window.

 

Thank you again for your help!

 

PS. I've added the offset code and it works nicely with the containers

[enpu]

Great that you got it working!

[goide]

Panda Toolkit 1.12.3.

 

which is the list of commands for this tool.

 

I want to run the server panda and the above command does not run me. "panda server".

[Ninjadoodle]

Hi Guys

 

So I know how to setup a sprite as a class ...

game.createClass('Panda', 'Sprite', {	texture: 'panda.png',	interactive: true,	init: function(x, y) {		this.position.set(x, y);		this.addTo(game.scene.stage);	},

... but I'm not too sure how to setup up an animation as a class (I know how to write it up inside a scene).

 

Any help on how to write this up would be awesome

 

Thank you in advance!

[PixelPicoSean]

Extending Animation is just as simple as Sprite, try this one:

game.createClass('Panda', 'Animation', {  // Add all frames you want to use into this array  textures: ['panda01.png', 'panda02.png'],  init: function(x, y) {    // Add animations here    this.addAnim('smile', [0, 1], {      speed: 6,      loop: false,      onComplete: function() {        console.log('Should I cry now?!');      },    });    // Play    this.play('smile');    // Set whatever else you want    this.position.set(x, y);    this.addTo(game.scene.stage);  }});

[Ninjadoodle]

Hi @PixelPicoSean

 

Awesome, thank you heaps for that!

[Ninjadoodle]

Hi guys

 

I have one more question about classes and sprites ...

 

I know you can pass a texture to a class

game.createClass('MySprite', 'Sprite', {    init: function() {        this.position.set(100, 100);    },});var sprite = new game.MySprite('panda.png');

But how can I also pass coordinates and container at the same time?

 

I'm can't get the following to work ...

game.createClass('MySprite', 'Sprite', {    init: function(x, y, container) {        this.position.set(100, 100);    },});var sprite = new game.MySprite('panda.png', 100, 100, this.mg);

Thank you heaps in advance!

 

[enpu]

game.createClass('MySprite', 'Sprite', {

init: function(texture, x, y, container) {

this.position.set(x, y);

this.addTo(container);

}

});

[SkyzohKey]

game.createClass('MySprite', 'Sprite',

{

init: function(texture, x, y, container)

{

this.setTexture(texture);

this.position.set(x, y);

this.addTo(container);

}

});

[enpu]

That setTexture line is unnecessary, it's already called on staticInit function

[SkyzohKey]

Ah, I'm using something like that in my project :

this.setTexture('ground-' + texture);

So i was believing it's usefull :3

[Ninjadoodle]

Awesome! Thanks heaps guys!

[Ninjadoodle]

Hi Guys

 

I testing my game with the Cocoon JS viewer and I seem to only be able to play one sound at a time.

 

A new sound effect won't play until the old one has finished playing.

 

Is this a limitation or am I doing something wrong?

 

(only seems to be happening with canvas+ - which is the fast one haha)

 

Thank you heaps in advance!

[enpu]

That is because Cocoon Canvas+ does not support Web Audio,

and Panda does not have multichannel support for old HTML5 Audio.

 

Is Cocoon WebView+ too slow for you?

[Ninjadoodle]

Hi @enpu

 

Yup, you can definitely see the difference. The speed is ok, but Canvas+ is definitely a lot smoother.

 

Is there any way I can work around this? For example stopping any current sound effect before playing a new one?

 

Do you have any other suggestions?

 

Thank you heaps

[enpu]

I have now changed HTML5 Audio to rewind the sound, if trying to play it when it's already playing.