Panda 2 development

[Ninjadoodle]

Hi @enpu

 

Regarding the iPad Air issue above - It looks like its caused by 'hires'.

 

Disabling it, or setting it to one, makes the game appear correctly. Anything higher than 1, just show a bunch of glitchy shapes (looks like it's not reading the sprite sheets correctly).

 

Hope this helps

 

Thank you!

[enpu]

@Ninjadoodle

 

Thanks for the info! Can you provide me a simple test case, so i can take a look on the issue?

[Ninjadoodle]

Hi @enpu

 

Just sent you an e-mail with a link

[LinkTree]

Hi @enpu

 

I wanted to ask if there's a plan to add a mousemoveoutside event handler to input.js?

currently when trying to work with draggable elements if I move the mouse too fast(isn't necessarily very fast.) the event loses track of the element and stops dragging it. The ways I had in mind for solving this are

 

1. To set the mousemove event handler on the game.scene.stage but that would require something like a target property on the event handler to discern which element was interacted with.

2. add a mousemoveoutside event handler.

 

Edit:

The way I ended up solving this is by increasing the hitArea of the dragged element by a large value.

[sandy758]

I am trying to add collision to two objects and it doesn't happen, Kindly refer to the below code and help me ! 

 

 

object.js

game.module(

    'game.objects'

)

.body(function() {

 

//Base Entity for  sprite and body  

game.createClass('Entity', {

collideAgainst: [],

 

init: function(x, y) {

this.initSprite(x, y);

this.initBody();

this.ready();

       // game.scene.world.addBody(this.body);

        game.scene.addObject(this);

},

 

ready: function() {},

 

remove: function() {

this.sprite.remove();

this.body.remove();

},

 

initSprite: function() {},

 

initBody: function() {

this.body = new game.Body({

position: {

x: this.sprite.position.x * 4,

y: this.sprite.position.y * 4

},

collisionGroup: this.collisionGroup,

collideAgainst: this.collideAgainst

});

this.body.addShape(new game.Rectangle(this.sprite.width * 4, this.sprite.height * 4));

this.body.addTo(game.scene.world);

this.body.parent = this;

},

 

update: function() {

this.onUpdate();

this.sprite.position.x = this.body.position.x / 4;

this.sprite.position.y = this.body.position.y / 4;

},

 

onUpdate: function() {}

});

 

 

game.createClass('Player', 'Entity',{

    onGround: false,

 

    initSprite: function() {

        var x = game.system.width / 4 / 2;

        var y = game.system.height / 4 - 24;

 

        this.sprite = new game.Sprite('ship.png');

        this.sprite.anchor.set(0.5, 0.5);

        this.sprite.position.set(x, y);

        this.sprite.addTo(game.scene.objectContainer);

 

        var fire = new game.SpriteSheet('fire.png', 10, 9).anim();

        fire.animationSpeed = game.scene.animationSpeed;

        fire.play();

        fire.anchor.set(0.5, 0);

        fire.position.y = this.sprite.height / 2;

        fire.addTo(this.sprite);

    },

   

    jump: function() {

        var bullet = new game.Bullet(this.sprite.position.x, this.sprite.position.y);

    },

 

    update: function() {

        // Update sprite position

        this.sprite.position.x = this.body.position.x;

        this.sprite.position.y = this.body.position.y;

 

        if (this.killed) return;

 

        if (this.body.velocity.y > 0) this.onGround = false;

 

        // Update sprite textures

        if (!this.onGround && this.body.velocity.y > 0 && this.sprite.textures !== this.jumpDownTextures) {

            this.sprite.textures = this.jumpDownTextures;

        }

        if (this.onGround && this.sprite.textures !== this.runTextures) {

            this.sprite.textures = this.runTextures;

        }

    }

});

 

game.createClass('Bullet', 'Entity',{

    collisionGroup:0,

    collideAgainst:1,

    initSprite: function(x, y) {

        this.sprite = new game.SpriteSheet('laser-bolts.png', 10, 13).anim();

        this.sprite.anchor.set(0.5, 0.5);

        this.sprite.animationSpeed = game.scene.animationSpeed;

        this.sprite.position.set(x, y);

        this.sprite.play();

        this.sprite.addTo(game.scene.objectContainer);

        //game.scene.objectContainer.addChild(this.sprite);

    },

 

    ready: function() {

        this.body.velocity.y = -1000;

        this.body.collide = this.collide.bind(this);

    },

 

    collide: function(other) {

        alert('Collided');

        if(other.collisionGroup == 1) {

        this.remove();

        // Kill Enemy when colliding with it

        body.parent.kill();

       }

    },

 

    onUpdate: function() {

        // Remove when out of screen

        if (this.sprite.position.y + this.sprite.height / 2 < 0) this.remove();

    }

 

});

 

 

game.createClass('target', 'Entity', {

    collisionGroup: 1,

    initSprite: function(x,y) {

        this.sprite = new game.Sprite('tires.png');

        this.sprite.anchor.set(0.5, 0.5);

        //this.sprite.position.set(x, -this.sprite.height / 2);

           

 

       // this.sprite.animationSpeed = 0.1;

        //this.sprite.play();

        var shape = new game.Rectangle(this.sprite.width, this.sprite.height);

        this.body.addShape(shape);

        this.sprite.addTo(game.scene.objectContainer);

       // game.scene.objectContainer.addChild(this.sprite);

       // game.scene.world.addBody(this.body);

       // game.scene.addObject(this);

    },

 

    ready: function() {

        this.body.velocity.x = -1000;

    },

 

    kill: function() {

        var explosion = new game.Explosion(this.sprite.position.x, this.sprite.position.y);

        this.remove();

    },

    onUpdate: function() {

        // Remove when out of screen

        this.sprite.position.x = this.body.position.x;

        this.sprite.position.y = this.body.position.y;

 

        if (this.body.position.x + this.sprite.width / 2 < 0) this.remove();

    }

});

 

 

game.createClass('Oneway',  {

    //collisionGroup: 1,

    collideAgainst:0,

    init: function(x, y) {

        this.sprite = new game.Sprite('tires.png');

       // this.sprite.anchor.set(0, 0.5);

        this.body = new game.Body({

            position: {

                x: x + this.sprite.width,

                y: y - 300

            },

            collisionGroup: 1

        });

                        this.body.velocity.x = -1000;

 

        var shape = new game.Rectangle(this.sprite.width, this.sprite.height);

        this.body.addShape(shape);

        this.sprite.addTo(game.scene.objectContainer);

        this.body.addTo(game.scene.world);

        game.scene.addObject(this);

        

    },

 

    ready: function() {

        //this.body.collide = this.collide.bind(this);

                this.body.velocity.x = -1000;

 

    },

 

    kill: function() {

        var explosion = new game.Explosion(this.sprite.position.x, this.sprite.position.y);

        this.remove();

    },

    

 

    remove: function() {

        game.scene.world.removeBody(this.body);

        game.scene.objectContainer.removeChild(this.sprite);

        game.scene.removeObject(this);

    },

 

    update: function() {

        this.sprite.position.x = this.body.position.x;

        this.sprite.position.y = this.body.position.y;

 

        if (this.body.position.x + this.sprite.width / 2 < 0) this.remove();

    }

});

 

game.createClass('Explosion', {

    init: function(x, y) {

        this.sprite = new game.SpriteSheet('explosion.png', 16, 16).anim();

        this.sprite.animationSpeed = game.scene.animationSpeed * 2;

        this.sprite.anchor.set(0.5, 0.5);

        this.sprite.position.set(x, y),

        this.sprite.addTo(game.scene.mainContainer);

        this.sprite.loop = false;

        this.sprite.onComplete = this.remove.bind(this);

        this.sprite.play();

    },

 

    remove: function() {

        this.sprite.visible = false;

 

        // Fix: Remove sprite on next frame

        game.scene.addTimer(1, function() {

            this.sprite.remove();

        }.bind(this));

    }

});

 

});

 

 

main.js

game.module(

    'game.main'

)

.require(

    'game.assets',

    'game.objects'

)

.body(function() {

 

game.createScene('Main', {

animationSpeed: 0.1,

    init: function() {

        this.world = new game.World(0, 0);

        var floorBody = new game.Body({

            position: {

                x: game.system.width / 2,

                y: game.system.height - 40

            },

            collisionGroup: 1

        });

        var floorShape = new game.Rectangle(game.system.width, 50);

        floorBody.addShape(floorShape);

        this.world.addBody(floorBody);

 

        var bg = new game.Sprite('01_sky_moon.png').addTo(this.stage);

        this.objectContainer = new game.Container().addTo(this.stage);

        this.player = new game.Player();

        this.addTimer(1000, this.spawnRandomObject.bind(this), true);

        this.spawnRandomObject();

    },

 

    spawnRandomObject: function() {

            var rand = Math.random();

            var oneway = new game.Oneway(game.system.width, 700);

            //var target = new game.target(game.system.width, 700);

        if (rand < 0.5) {

            //var coin = new game.Coin(game.system.width, 400 + Math.random() * 400);

        }

        else if (rand < 0.8) {

           // var oneway = new game.Oneway(game.system.width, 700);

        }

        else {

            //var tires = new game.Tires(game.system.width, 850);

        }

    },

 

    mousedown: function() {

        this.player.jump();

    },

 

    keydown: function(key) {

        if (key === 'SPACE') this.player.jump();

    }

});

 

});

[Ninjadoodle]

Hi Guys

 

In 1.x you could kill all tweens for an object by doing this ...

 

game.tweenEngine.stopTweensForObject(hero);

 

Is there a way to do this in 2.0?

 

Thank you in advance!

[LinkTree]

Hi Guys

 

In 1.x you could kill all tweens for an object by doing this ...

 

game.tweenEngine.stopTweensForObject(hero);

 

Is there a way to do this in 2.0?

 

Thank you in advance!

 

I think it was removed in 2.0. you can add it yourself though. Here's the function from 1.3:

stopTweensForObject: function(object) {for (var i = this.tweens.length - 1; i >= 0; i--) {if (this.tweens[i].object === object) this.tweens[i].stop();}}

you can do something like

game.stopTweensForObject = function(object) {for (var i = object.tweens.length - 1; i >= 0; i--) {if (object.tweens[i].object === object) object.tweens[i].stop();}}

Pretty sure this should work.

[Ninjadoodle]

Hi @LinkTree

 

Thanks for the suggestion, I tried and even had a dig around the tween.js file, but can't get it working (way over my head haha).

 

Might just have to wait for @enpu to have a look at it

 

Thanks again!

 

PS. I can't find any way of taking tweens that are currently playing and restarting them.

[LinkTree]

Hi @LinkTree

 

Thanks for the suggestion, I tried and even had a dig around the tween.js file, but can't get it working (way over my head haha).

 

Might just have to wait for @enpu to have a look at it

 

Thanks again!

 

PS. I can't find any way of taking tweens that are currently playing and restarting them.

 

I apologize for my previous wrong suggestion. I dug deeper and researched how the tweening is done now and how it used to be done in 1.3. This took longer than I thought it would because from your previous message I was under the impression stopTweensForObject used to take any object(hero) and stop all the tweens on it but after I read the code and experimented with the 1.3 version I realized this was not the case and you had to specify the attribute you want to cancel tweening for. So instead of stopTweensForObject(hero) it would be stopTweensForObject(hero.scale).

 

here's the code that worked for me in v2.0

game.stopTweensForObject = function(object) {    for (var i = game.scene.tweens.length - 1; i >= 0; i--) {        if (game.scene.tweens[i].object === object) game.scene.tweens[i].stop();    }}var sprite = new game.Sprite('eye.png');sprite.anchorCenter();sprite.position.set(100, 100);sprite.addTo(this.stage);var tween = new game.Tween(sprite.scale);tween.to({x:0.5,y:0.5},2000).repeat().yoyo().start();game.stopTweensForObject(sprite.scale);

To restart a tween I assume you just stop() it and start() it right after. You can even chain them together.

[Ninjadoodle]

Dude you're awesome! I'm gonna give it a go soon

 

I'm getting pretty productive with Panda, but digging inside the engine files goes way over my head!

 

Thanks heaps!

[Ninjadoodle]

Hi Guys

 

Anyone got any idea, how to disable multitouch?

 

Thank you in advance for any help

[LinkTree]

Hi Guys

 

Anyone got any idea, how to disable multitouch?

 

Thank you in advance for any help

What is it that you are trying to do? My first idea would be to set a boolean variable within the scope to true whenever an object is being touched and to false whenever it's not. and on the object's mousedown function check whether this variable is set to false before you execute the handler's code. 

[Ninjadoodle]

Hi @LinkTree

 

Thanks for the suggestion - I'm already doing something similar.

 

The problem is touch screen devices. On the desktop (using a mouse), you can only ever have 'One Click' at a time.

 

On devices however, you can technically click two or more things at the same time.

 

Let's say I'm dragging a sprite ...

 

I set sprite.dragging = true, then update its position on a mouse move event only if it's being dragged. On mouse release, sprite.dragging becomes false again.

 

The problem is that on devices you can make the object magically teleport by putting another finger on screen, then removing the first finger (if you know what I mean).

 

Disabling the possibility of multi touch would solve this, as I don't currently have any other solutions.

 

Thank again!

 

PS. Your code to kill the sprites tweens, worked perfectly! Thank you very much!!

[enpu]

You can get the list of current touches from game.input.touches

 

That way you can do something like this to disable multitouch:

mousedown: function(x, y) {   if (game.input.touches.length > 1) return;   // Do something}

I think i should add option to disable multitouch completely.

 

edit: I just added game.Input.multitouch attribute, so you can disable multitouch from config like this:

input: {    multitouch: false}

Let me know if that works!

[Ninjadoodle]

Hi @enpu

 

Thanks heaps for that! I will try that asap

 

I'm currently extending Lightbulb with an extra 40 levels and I'd like to release it on iOS and Android.

 

While working on Lightbulb, I've been gathering a list of a few issues/bugs with Panda, which I will post in a couple of days.

 

Also, I've started a new website (for Panda tuts etc.) and I'm in the process of doing a whole set of tutorials for 2.0.

The introductory tutorials should be done by the end of the week. After this I'm hoping to release new content weekly.

[Ninjadoodle]

Hi @enpu

 

When installing panda through the console, I would normally do ...

 

> panda create myPandaGame

 

to update the engine to the 'Develop' version, I enter the 'myPandaGame', folder and do ...

 

> panda update dev

 

My question ...

 

Is there a way to install the dev version straight away (through console) without having to do the update step?

 

if I try ...

 

> panda create myPandaGame dev

 

I get an error ...

 

Error creating temp folder

 

PS. I've also noticed, that the latest dev version is missing the 'media' folder. I'd like to include some instructions on how to install the dev version in a tutorial.

 

Thank you in advance!

[enpu]

panda create myPandaGame dev

 

That should work, try to replace your panda toolkit with 2.0.0 version from here (it is not published to npm yet):

https://github.com/ekelokorpi/panda.js-toolkit

[Ninjadoodle]

Hi guys

 

I'm trying to replace the 1.xx Panda Toolkit with 2.0.

 

I copied the 2.0 files into ...

 

/usr/local/lib/node_modules/pandatool/

 

Now it doesn't seem to work properly tho.

 

When I type panda in console - I get Panda Toolkit 2.0, but using the commands throws errors.

 

I must have missed some files?

 

If anyone has any experience with this, that would be awesome!

 

Thank you!

[enpu]

Just published 2.0.1 version of Panda Toolkit to npm, so you should be able to update it now:

npm install pandatool -g

[Ninjadoodle]

Awesome!! Thanks enpu!

 

By the way, I just updated to iOS9 on one of my iPhones and it seems that resizing doesn't work properly.

 

I have a game at 320x320 so it works in both landscape and portrait.

 

If loading in Portrait, it loads correctly ...

 

 

... but when switching to landscape it fails to stay in fullscreen (works on iOS8)

 

 

When changing from landscape back to portrait, it stays at the landscape size and fails to resize to the correct portrait dimensions.

 

 

There is a game that treats orientation change well and works on (made in Construct 2) - https://td2tl.com/license-html5-games/tower-loot/

 

I especially like the way the game doesn't get scaled (when in landscape mode) and the browser bars are visible.

 

It still however fails to stay in fullscreen (in landscape), so must be an issue with iOS9.

 

Thank you again!!!

[gavvic]

Hey guys.

 

I was wondering if there has been any changes to loading JSON files. I've been updating something I've been developing to the new version 2.0 and while it has gone fine for the most part, I've been having trouble loading in JSON files. The file exists. It would be stuck in the loading screen with no error output in console. 

 

If I can have any suggestions or guidance, that'd be great!

game.module(	'game.main').body(function() {  game.addAsset('parser.json', 'parserLoads');  game.createScene('Main', {    init: function() {      var sampleScript = game.getJSON('parserLoads');      console.log(sampleScript);    }  });});

[LinkTree]

 

Hey guys.

 

I was wondering if there has been any changes to loading JSON files. I've been updating something I've been developing to the new version 2.0 and while it has gone fine for the most part, I've been having trouble loading in JSON files. The file exists. It would be stuck in the loading screen with no error output in console. 

 

If I can have any suggestions or guidance, that'd be great!

game.module(	'game.main').body(function() {  game.addAsset('parser.json', 'parserLoads');  game.createScene('Main', {    init: function() {      var sampleScript = game.getJSON('parserLoads');      console.log(sampleScript);    }  });});

I think it's because you are trying to get the JSON data before it's fully loaded.

Try to add an assets.js module and require it in the main module.

 

Something like this:

 

assets.js

game.module(    'game.assets').body(function() {    game.addAsset('parser.json', 'parserLoads');});

main.js

game.module(    'game.main').require(    'assets.js').body(function() {game.createScene('Main', {init: function() {var sampleScript = game.getJSON('parserLoads');console.log(sampleScript);}});});

[LinkTree]

Awesome!! Thanks enpu!

 

By the way, I just updated to iOS9 on one of my iPhones and it seems that resizing doesn't work properly.

 

I have a game at 320x320 so it works in both landscape and portrait.

 

If loading in Portrait, it loads correctly ...

 

...

 

There is a game that treats orientation change well and works on (made in Construct 2) - https://td2tl.com/license-html5-games/tower-loot/

 

I especially like the way the game doesn't get scaled (when in landscape mode) and the browser bars are visible.

 

It still however fails to stay in fullscreen (in landscape), so must be an issue with iOS9.

 

Thank you again!!!

 

Hmmmm... Interesting. did you find a solution for this yet? I don't have an iphone/ipad currently so I can't test this myself unfortunately. :/

[gavvic]

Hey @LinkTree,

 

Yeah, that was the first attempt I did since it was how my project was originally structured. It was when it didn't work that I went back to the basics with the examples on the site. When that didn't work either, I was wondering if there had been a significant change I wasn't aware of.

 

Loading images and bitmaps were just fine. I'm only having trouble with loading JSON files, for some reason.

[LinkTree]

Hey @LinkTree,

 

Yeah, that was the first attempt I did since it was how my project was originally structured. It was when it didn't work that I went back to the basics with the examples on the site. When that didn't work either, I was wondering if there had been a significant change I wasn't aware of.

 

Loading images and bitmaps were just fine. I'm only having trouble with loading JSON files, for some reason.

I just tested it myself, I am getting the same result as you without any errors in both firefox and chrome. That's definitely an issue. Hopefully Enpu will notice this soon.

from my test it seems like the init function of the main scene doesn't get executed. There's probably some method that holds up on executing it until all the files are loaded but the JSON file loader maybe never reports back that the file loaded successfully and it get's stuck. I don't know... it's just an assumption.