Panda 2 development

[enpu]

Ah that's because you are tweening ninja.y property, you should be tweening ninja.position.y property (ninja.y is just a reference to ninja.position.y and i have not yet added those, will do that asap)

 

edit: Just pushed changes, container.x property should be now same as container.position.x

[Ninjadoodle]

Hi @enpu

 

That makes sense, thank you for that!

[grumpygamer]

Is z-indexing going to remain the same as Phaser?

[enpu]

Same as Pixi, so probably same as Phaser.

[Pattentrick]

Hey @enpu,

 

the stuff on the panda engine playground looks amazing! Can't wait to get my hands on the upcoming release. The develop branch of the panda engine (https://github.com/ekelokorpi/panda.js-engine/tree/develop) is the current state of the panda engine 2.0.0? Is that correct? 

[enpu]

Yes that's correct!

[Pattentrick]

Awesome! Looks very promising at first glance. Thanks for your hard work on this version.

[LinkTree]

What do you exactly mean by overriding default hires functionality?

nevermind it was a pointless thought. Since you said objects will be automatically scaled by game.scale I was asking myself if for any reason I didn't want to scale a specific object by game.scale but then you would just divide by game.scale so it doesn't really matter. it's certainly better this way.

[enpu]

Yeah actually it does not scale any objects, just place them on correct positions.

[SkyzohKey]

Wow, very nice work @enpu !

What about Bamboo ? Some news about it or it's a dead-project ?

[enpu]

Unfortunately it is currently on hold, but i'm hoping to have time for it after Panda Engine v2 and Panda Editor.

Would be great if i could integrate it into Panda Editor.

[SkyzohKey]

Yes, Panda Editor + Bamboo = Best HTML5 Engine of the web

Hope you'll find time in the future

[enpu]

Few major things still in progress:

 

- TilingSprite

- Graphics rendering on WebGL

- Masking

[Ninjadoodle]

Hi @enpu

 

Just tested the dev version and its looking awesome ... retina and hires + scaling work now

 

One problem I have tho, is that when I enable 'resize', the game shows more of the area to the right instead of centrering the content/game window.

 

Is this how it's supposed to work?

 

I realize that I can centre a container horisontaly, this way ...

 

bg.position.set(game.system.width/game.scale/2 - game.system.originalWidth/2, 0);

 

The problem is that, if you resize the browser window, the position does not update and it's no longer centred.

 

Thank you!!!

 

PS. How do you set the background colour in this new version? (Thanks again!)

[SkyzohKey]

PS. How do you set the background colour in this new version? (Thanks again!)

 

I assume that this should work :

game.createScene('Main',{    backgroundColor: 0xffffff,    init: function() {        // Your awesome stuff ! :3    }}

--------------

 

I'm glad to see how this project is going faster each day ! Very nice work enpu !

[Ninjadoodle]

Hi @ThanosS - Thanks for the reply. I've tried that but it doesn't seem to work anymore (it did for Panda 1.XX)

 

@enpu - I found that this works ...

var centerContainers = function() {   bg.position.set(game.system.width/game.scale/2 - game.system.originalWidth/2, game.system.height/game.scale/2 - game.system.originalHeight/2);   mg.position.set(game.system.width/game.scale/2 - game.system.originalWidth/2, game.system.height/game.scale/2 - game.system.originalHeight/2);   fg.position.set(game.system.width/game.scale/2 - game.system.originalWidth/2, game.system.height/game.scale/2 - game.system.originalHeight/2);   ui.position.set(game.system.width/game.scale/2 - game.system.originalWidth/2, game.system.height/game.scale/2 - game.system.originalHeight/2);}centerContainers();window.addEventListener('resize', centerContainers);

Is there a way for the engine to do this automatically?

 

Thank you heaps for your help guys!

[enpu]

There is no backgroundColor property on Scene anymore, i find it to be used very rarely, usually i have background images on games.

But if you need background color you can always do this:

var bg = new game.Graphics();bg.beginFill('#ffffff');bg.drawRect(0, 0, game.system.width, game.system.height);bg.addTo(this.stage);

About resize, it does not center anything automatically, position 0,0 is always left top corner.

I usually use resize only on mobile, to make my games work fullscreen on every aspect ratio.

 

And do you really want to use resize on full desktop browser window?

I don't think that is a good idea, but if you really need that, and want to center everything on resize, there is onResize method on Scene.

Also you should not need to use game.scale or originalWidth / originalHeight on positioning anymore.

 

Example:

game.createScene('Main', {    init: function() {        this.sprite = new game.Sprite('panda.png');        this.sprite.anchorCenter();        this.sprite.position.set(game.system.width / 2, game.system.height / 2);        this.sprite.addTo(this.stage);    },    onResize: function() {        this.sprite.position.set(game.system.width / 2, game.system.height / 2);    }});

[Ninjadoodle]

Hi @enpu

 

Thanks for the explanation!

 

What you said makes sense! I want to use 'resize' (on desktop), because I design my backgrounds wider then they need to be and I find it gives it it nice 'full screen effect'.

 

I always put the important stuff inside the game dimensions, and only unimportant visual stuff gets shown on the left and right if the screen is wider then the base game width (for example extra trees or buildings).

 

This is mainly for games where each level is different and there are a lot of cartoon visuals + backgrounds (e.g. Clickplaytime)

 

I find that this is a lot nicer then having bars on either side of the screen

 

Thank you again for your suggestions!

 

PS. Any major reason why you don't think it's a good idea?

 

I also found that ...

 

mg.anchorCenter();

mg.position.set(game.system.width / 2, game.system.height / 2);

 

doesn't seem to work and It appears off screen.

 

I have a feeling that mg.position.set is trying to multiply it by game.scale (unless I'm wrong and containers don't have anchors ... but I was pretty sure that in 2.0, they do).

[SkyzohKey]

I have a feeling that mg.position.set is trying to multiply it by game.scale (unless I'm wrong and containers don't have anchors ... but I was pretty sure that in 2.0, they do).

Enpu said that every object in the Panda Engin 2.0 should have anchor

[enpu]

Sorry i might have been a bit unclear, what i meant, was that i would not use 'resize' on desktop without 'scale' enabled.

That would make the canvas really big on users with high resolution monitors. But with 'scale' enabled it is a good idea,

because 'scale' first scales the canvas as big as possible with CSS, and then 'resize' fills the empty space to make the game fill the whole window.

 

And yes, every object should have anchor.

 

@Ninjadoodle that code looks fine to me, and it should work, can you make me a test case so i can take a closer look and see if it is a bug or not?

[Ninjadoodle]

Hi @enpu

 

I've just emailed you a file, where I commented out the code you suggested (which doesn't seem to work).

 

The code above it using game.scale does.

 

Let me know if you need anything else

[enpu]

Thanks for the file, there seems to be still some issues with 'resize' and 'hires' combination, will fix that asap.

[Ninjadoodle]

No problem, happy to help

[Ninjadoodle]

Hi @enpu

 

Does  ...

 

sprite.gotoAndStop(1);

 

still work ?

 

I seem to be getting an error.

 

Thank you for your help!

 

PS. I just found the (new?) gotoFrame(); function in animation.js. I still doesn't seem to be working tho

[enpu]

@Ninjadoodle

 

Animation has changed to new multi-animation format:

var anim = new game.Animation([	'player1.png',	'player2.png',	'player3.png']);anim.addAnim('jump', [0, 1, 2, 1]);anim.addTo(this.stage);anim.play('jump');

But i have just pushed changes, so that it automatically creates new animation named 'default' (and sets it as current animation) that is from the first frame to the last frame, so this should work now:

var anim = new game.Animation([	'player1.png',	'player2.png',	'player3.png']);anim.addTo(this.stage);anim.play();

If you then want to add new animation, and switch back to 'default', do it like this:

var anim = new game.Animation([	'player1.png',	'player2.png',	'player3.png']);anim.addAnim('jump', [0, 1, 0, 2, 1]);anim.addTo(this.stage);anim.play('jump');...anim.play('default'); // Play default animation

Does that sound clear?