Panda 2 development

[oranjoose]

@enpu

 

I really respect how much you listen to the developers working with your engine. But you know what's better for the engine than anyone here, so I recommend you go with your intuition. That same intuition has led us to this engine, which I as a teacher have considered more intuitive than any other JS game engine I've reviewed, and I've thoroughly reviewed a ton of them, big and small.

 

I agree that magic steps that obscure what's going on is generally inadvisable. However, there's a line of course, where some of the "what's going on" is just needlessly confusing. For example, with C++, you have to do all the header includes and so on. This is material where I would tell students "now you have to type this and this and this, but don't worry about it for now." I hate doing that. One thing I like about Panda is that the setup is very straightforward. Beginners don't have to micromanage the HTML head and elements, they don't have to worry about all the extra references and game object setup. They can just open up main.js and go. Very clean.

 

The body factory game.Body.fromSprite is definitely more simple, and avoids manual Body and shape instantiation. But I'm on the same page as you with adding unnecessary avenues to the same thing. In fact, this is what I think is the biggest weakness with Phaser. Phaser has too many ways to do the same thing. It begins to get confusing to a beginner when 5 different tutorials explain 5 different ways to accomplish the same task. The beginner becomes overwhelmed by the API documentation, confused about the "right" way to do anything.

 

For accommodating beginners, I'm always an advocate of fewer tools, more steps than more tools fewer steps. For example, I'd rather a bunch of simple blocks to create something complex, than a huge pool of specific blocks. Simple legos instead of super specific legos. Unreal Tournament few weapons that are distinctive than Call of Duty tons of weapons that all do the same thing. I mean, think about game design. We build worlds that initially offer very few choices, and by the end, the gamer has a lot of options. If only a game engine could be built like that! No one expects a beginner to jump into World of Warcraft playing as a super high level character with 100 spells and buttons on the HUD. No matter how many great tutorials there are for Unreal Engine 4, it doesn't make the engine any less intimidating for a beginner trying to make a simple game.

 

That being said, I like the direction Panda is going. The game.Body.fromSprite function is convenient and probably harmless, but it's a slippery slope toward the Phaser problem. I am fine either way. Whatever is chosen, my recommendation would be to go with something clean and simple, that accommodates at least 90% of people needing that functionality, and to then advocate that approach in demos and examples. The fringe developers then have to work harder to do more obscure things with the engine. This is my general recommendation for just about everything in the engine.

 

The whole physics body stuff isn't terribly critical, it was just a thought trying to reinforce "simple and clean," which is clearly something that you value. A much bigger concern of mine for my students, for example, is the ease of designing levels (such as placing obstacles, items, NPCs, and various other objects). I am not bringing that up right now because I understand you're working on something already. So far, the best I have is to have students create levels in a graphics editor (such as Illustrator), and write down coordinates to manually put into their Panda games. Far from ideal, and I'm researching alternatives now.

 

Thanks again for the great work!

[Ninjadoodle]

Hi @oranjoose

 

I've read your post and wanted to say, that I absolutely love Panda JS for all the same reasons. Panda also has features, that other engines don't even think about.

 

As far as 'Physics' setup, I just wanted to mention Corona SDK.

 

The way they setup 'Physics' is brilliant and really straight forward. In fact, probably the easiest 'Physics' setup out of any engine I've used. All you do, is add an object/sprite to the physics world, which automaticaly makes it a 'Physics' object (then you can set/change properties etc.).

 

https://www.youtube.com/watch?v=qEMGcy-mizM

 

Perhaps this sort of setup might be something to consider?

 

Just adding some feedback/ideas.

 

@enpu - Thanks for the amazing work, Panda rocks!

[PixelPicoSean]

@oranjosse

 

Like everyone else here I also choose Panda due to its simple and clean design. I recommend you to teach your student the details about how to setup body. I think they should know how it works, right? It may be a little more complex but still straight forward, sprite has to be sync with body so they will always be the same position of body.

 

There's a tricky I've always been using (where position of body and sprite have the same value):

var sprite = new game.Sprite('Panda');var body = new game.Body({  position: sprite.position // directly pass the reference of sprite's position to the body});

Then you don't need to sync them in the update method, but this may be more confusion, especially for those beginners.

 

Panda is more like a component based engine, the renderer and the physics are completely independent, you can even add more systems and plug them into the updating order of a Scene in v2. I would choose a more component based solution instead of traditional OOP, but I don't know whether it's good for beginners.

 

That might be too MY WAY  . Panda is so free, I just love it.

 

@Ninjadoodle, that looks interesting. I got an idea, if you want to make a sprite have the behavior of body, simply "inject" the definition of body class into it. This looks like the "mixin" JavaScript developers always use, you make an object "have more behaviors" instead of "a child of those classes". But you need to copy those definitions, hmm.

[enpu]

@oranjoose

 

About level design, i have used Tiled with Panda when creating tile-based levels.

http://www.mapeditor.org/

 

There is also Tiled plugin for Panda, though it would need some update to work with 2.0 version, but you will get the idea:

https://github.com/ekelokorpi/panda.js-engine-plugins/blob/master/tiled/tiled.js

[enpu]

Updates on current develop version.

 

I have decided to drop WebGL from Panda Engine core. I think canvas renderer is fast enough for casual games on modern browsers. On mobile it's also fast enough on latest iOS Safari and Chromium (Crosswalk), you can get even better performance with Cocoon Canvas+. WebGL also makes the renderer code a lot more complicated and almost doubles the size. I'm planning to release WebGL support as a plugin in the future.

 

Setting config has changed a bit, instead of pandaConfig, you will now use game.config, so everything is now nicely inside game namespace. That requires a small change in index.html file, because config.js file must be loaded after engine core is loaded. It's not necessary to use separate config.js file, you can set your config also in main.js file if you want.

 

Blend mode is now implemented in Sprite: http://ekelokorpi.github.io/panda.js-site/engine/playground/#sprite_blendmode

You can see all possible blend modes here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing

 

TilingSprite is almos done: http://ekelokorpi.github.io/panda.js-site/engine/playground/#tilingsprite_scroll

 

New class FastContainer. It's special version of Container, that is optimized for speed. There are few restrictions on FastContainer, it can only render sprites, and you will only get better speed when not rotating your sprites. So use it only when needed. Particles are using FastContainer by default.

 

New class PhysicsSprite, it's combination of Sprite and Body, makes everything a bit cleaner and easier on basic physics games. Also few new properties and methods on Body class, like applyImpulse and static property. Check out demos: http://localhost/pandajs/panda.js-engine-playground/#physics_sprite

 

Updated docs:

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

 

Also i have started to write a complete guide book to Panda Engine 2:

https://leanpub.com/thecompleteguidetopandaengine2

Fill the form if you are interested!

 

Thanks.

[PixelPicoSean]

@enpu, surprised that you dropped the WebGL I think many people are going to be disappointed just like me, is the canvas renderer really fast enough now?

 

btw I just signed up for the book, when do you plan to release it?

[Ninjadoodle]

Yeah WebGL is a bit of a surprise, but I think it's important that it's coming back as a plugin. I was worried, it was leaving forever lol.

 

The other features are awesome, like Physics Sprite

 

I'm also very interested in the book and have already signed up. I'd also love to know, whether you have a rough idea when it might be ready?

 

Thank you!

[oranjoose]

Wow, nice updates enpu!

 

As Ninjadoodle said, if it's a plugin, then I don't think anyone should have anything to complain about; it's only a good thing. I'm guessing most developers don't need whatever performance they'd get from WebGL for their games, and we're now saving on resources.

 

For the config, I think you meant "game.config" instead of "game.confg", though I doubt you threw anyone off. I like how you still kept the config.js file in the default project. That keeps main.js cleaner, and generally speaking, I think beginners think of configuration to be in a different place, such as settings in games, preferences in programs such as Microsoft Office and Adobe applications, and so on. This change hardly affects the way people are doing things now, but also makes the engine more well organized and gives more flexibility. Win win.

 

Blend modes, yay! This is great for light effects, such as a better flashlight than a half transparent sprite. Happy to hear that it's integrated.

 

TilingSprite! Very nice. I was actually going to ask about such a feature. Tilemaps are great, but they can be a bit confusing to a beginner. A tilingsprite is a much softer step for beginners (tiled Windows backgrounds, CSS backgrounds repeat by default, and so on). I like it.

 

Container and FastContainer, Sprite, TilingSprite, and PhysicsSprite—I think I'm picking up on your design philosophy here =). I like that you're being consistent with it. Consistency is important for someone to be able to guess where to go in the API when they are looking for something, like a detective getting into the mind of a criminal or something, you know, not to imply you're a criminal =P. The only very slight criticisms I have about it are 

1) none of these related classes line up alphabetically, so it might be easier to overlook them, especially as the API gets larger. It might be worthwhile to strategize how to organize documentation so that people browsing it can find relevant classes easier. Like on Amazon.com or something, "see related items". I mean, that's not a good example, but you what I mean.

2) a pattern I noticed, and I might be wrong about it, is that the classes are distinct from each other in that you can't take a Container and make it a FastContainer, and you can't take a Sprite and make it a TilingSprite. If this is true, then isn't it slightly inconsistent that you can take a Sprite and effectively make it a PhysicsSprite? But I'm torn, because I really like the idea of PhysicsSprite, and I advocate it. I'm just pointing out an observation, and am curious to hear others' input on it too.

 

Updated docs and even a book, great! I've noticed that you have information about the engine all over the place, but it's kind of tucked away. There are the 2.0 docs, but you have to dig in threads to find it. There's also a cheatsheet; there are the demos (really like these); there are even sample projects if you search hard enough. Right now, Panda feels like one of those towns that look barren and uninteresting from the highway, but once you turn off and drive into the heart of the town, you see that it is really wonderful and cozy. I understand you are working on a new site, and you are also not ready to transition 2.0 as the standard version. Once you are ready for these things, an organized "learn" section could go a long way to attract newcomers. 

 

It might even be cool to have a more interconnected documentation system. Nothing super ambitious. What I mean is to have links to demos in the documentation, or maybe comb through the docs and put in an example of usage or give a tip on for each method or property. Or maybe it could be even faster and more powerful to have the docs crowd-souced in some way. For example, each property and method could have a separate page of its own when you click on it, with a comments section of users leaving code snippets and tips. I contend that the documentation is one of the biggest draws to PHP (here's an example page: http://php.net/manual/en/function.sort.php ). Okay, now it sounds like I'm asking for something more ambitious =P. I'm not, you can keep it simple. A solid product is better than a solid user manual in my opinion.

 

And maybe you can just funnel people to your book! Haha.

 

Seriously, just keep up the good work in the direction you're already heading. Great work on all these new features!

[goide]

@enpu

 

In the current version of Engine Panda 2.0, it's possible use to in a Class the method 

onResize

Example:

game.createClass('Mover','Sprite',{    texture : 'panda.png',    speed: 400,    init: function(){        this.addTo(game.scene.stage);      },    update: function(){        if(game.keyboard.down('UP')){            this.position.y -= this.speed * game.system.delta;           }        if(game.keyboard.down('DOWN')){            this.position.y += this.speed * game.system.delta;           }        if(game.keyboard.down('LEFT')){            this.position.x -= this.speed * game.system.delta;           }        if(game.keyboard.down('RIGHT')){            this.position.x += this.speed * game.system.delta;           }    },    onResize: function(){       //Resize sprite    }});

[goide]

@Ninjadoodle Hi, you could continue with the tutorials (http://www.ninjadoodle.com/blog) for novices panda.js, but this time with new engine updates(Engine Panda 2.0).

 

@PixelPicoSean You are one of the forum you are very active, and it shows that you understand very well the new changes. It would be great if you could also post videos or tutorials, of Engine Panda 2.0

 

I ask the help to you two, since they are the most active users, and can give a brief introduction for the book is ending @enpu , it would help a little to the growth of Panda and do a little marketing the book launch of this great engine.

 

This would be a great help, or at least make a video tutorial or tutorial style Emanuele Feronato, as it does with Phaser.

 

Thanks.

[Ninjadoodle]

Hi @goide

 

I am going to be updating the old tutorials and starting a new, regular tutorial series, very soon

 

I've been waiting for Panda 2.0 to be a little further along and it seems like now is a good time to start.

 

I'm learning new stuff all the time + I've got lots of tips and tricks I've picked while making Flash and Panda games. I'm really looking forward to sharing them with you guys and hopefully helping people get started with this awesome engine.

 

I've even been thinking of making some basic templates for people to use etc, but one thing at a time lol.

[goide]

@Ninjadoodle

 

Hey man, thank you and hope that my soon to publish everything you have in mind on these education projects, and in advance thank you very much.

[goide]

@enpu

 

how it works, Tiled Map Editor and Panda Engine 2.0 (dev)?

 

I mean how to load the json file to Panda and that works the editions of collisions edited in Tiled Map Editor.

 

An example this video: https://www.youtube.com/watch?v=pzGK390zL9o

[Ninjadoodle]

Hi @enpu

 

I'm not sure whether Im doing something wrong, or if this is a bug.

 

I can't seem to set a custom property of a class and get it to print out correctly in the console.

 

When I try (console.log(this.odd)) it always reads false.

 

Thanks heaps in advance!

game.module(	'game.stageOddOneOut').body(function() {game.createClass('Ninja', 'Sprite', {    interactive: true,    init: function(texture, x, y, container) {        this.position.set(x, y);        this.anchor.set(this.width/2, this.height)        this.addTo(container);    },});game.createScene('StageOddOneOut', {    init: function() {        // SETUP STAGE        // - SOME STUFF        var ninja1 = new game.Ninja('ninja1.png', 64, 240, this.mg);        ninja1.odd = true;        var ninjaTouch = function() {            console.log(this.odd); // READS FALSE - IT SHOULD BE TRUE? (OR I'M DOING IT WRONG)            console.log(ninja1.odd); // READS TRUE        }                ninja1.mousedown = ninja1.touchstart = ninjaTouch;    }}); });

[goide]

@Ninjadoodle 

 

I would like to help.

 

One question?

 

That is "this.odd"? -> and "this" inside function is value refers to the owner of the function that is invoked or otherwise, as to where the function is a method, Maybe this your mistake here. because "this" refencia makes the object itself.

 

I see you have declared the variable "ninja1". and the attribute "odd"  this variable, you are assigning it a boolean true. and so on the console prints its value.

 

Could see a little more of your code is to study well and a little.

[Ninjadoodle]

Hi @goide

 

Thank you for you reply Yeah, I think I might be doing something wrong.

 

The problem is that if I do ...

var ninjaTouch = function() {    this.alpha = 0.5;}ninja1.mousedown = ninja1.touchstart = ninjaTouch;

... it turns ninja1 50% transparent.

 

So, I don't really understand how it's any different than using 'console.log(this.odd); '

 

If anybody has any answer to how to correctly reference the sprite, without specifically stating it's variable name (I need to use the function on multiple ninjas ), that would be awesome!

 

Thank you!

[goide]

@Ninjadoodle

 

I saw a similar to your code in the Playground of @enpu.

 

Look at this picture, not if you mean something like this. Maybe this is what you're looking to do. 

 

Use a single class, to do what in data structure (Java) is called recursion.

 

[PixelPicoSean]

@Ninjadoodle

Try using "bind" to create function copies bind to different objects:

var ninjaTouch = function() {  this.alpha = 0.5;}ninja1.mousedown = ninja1.touchstart = ninjaTouch.bind(ninja1);ninja2.mousedown = ninja1.touchstart = ninjaTouch.bind(ninja2);ninja3.mousedown = ninja1.touchstart = ninjaTouch.bind(ninja3);

Bind is pretty useful for callbacks like game.Body.collide.

 

You can even bind parameters:

var ninjaTouch = function(idx) {  console.log('Ninja %d is touched');  this.scale.set(0.8, 0.8);}ninja1.mousedown = ninjaTouch.bind(ninja1, 1);ninja2.mousedown = ninjaTouch.bind(ninja1, 2);ninja3.mousedown = ninjaTouch.bind(ninja1, 3);

[Ninjadoodle]

Hi guys

 

Thank you all for your help

 

I found the problem and it was some strange conflict because I was creating another sprite with the ninja sprite class.

 

Which brings me to one more question ...

 

What is the correct way to create a sprite class with an overlay sprite inside it (which I can reference from the games init).

 

I tried this but it's causing problems ...

game.createClass('OddOneOutNinja', 'Sprite', {    texture: 'oddOneOutNinja.png',    interactive: true,    odd: false,    init: function(x, y, container) {        this.position.set(x, y);        this.anchor.set(this.width/2, this.height)        this.addTo(container);        this.overlayWhite = new game.Sprite('oddOneOutNinjaOverlayWhite.png');        this.overlayWhite.position.set(this.width/2, this.height);        this.overlayWhite.anchor.set(32, 64);        this.overlayWhite.alpha = 0;        this.overlayWhite.addTo(this);    },});

Thank you again!!

[enpu]

I would make one empty class that have two separate sprites inside it, to avoid any conflicts.

game.createClass('MyClass', {    init: function() {        this.sprite1 = new game.Sprite('sprite1.png');        this.sprite2 = new game.Sprite('sprite2.png');    }});

[Ninjadoodle]

Hi @enpu

 

Awesome, thank you for the suggestion

[goide]

@enpu

 

Studying some examples of the previous version of panda.js.  (http://vermeire.home.xs4all.nl/panda/fiddler.html)

 

I'm trying to pass this code, the new engine Panda 2.0, and console, I generated the following error.

collide: function(opponent) {	console.dir(arguments);	console.log("Collision!");	opponent.remove(); (//Error        return true;}

Uncaught TypeError: opponent.eliminar is not a function

[OttoRobba]

The way that Panda.js is evolving is really interesting - I like it!

 

Honestly I've been having the same thought with WebGl. I love it and wish it was available everywhere but it is not and when games run on canvas, having WebGL is just bloat.

 

Congratulations on your progress, looking forward to Panda 2.0

[enpu]

@goide can you show more of your code?

[goide]

@enpu

 

This the code.

game.module(    'game.fisicab').body(function(){    game.addAsset('pandas.png');    game.addAsset('coin.png');        game.createClass('Heroe','Sprite',{        texture:'pandas.png',        interactive:true,        raton: {x:100, y:100},                init: function(x,y){            this.anchorCenter();            this.position.set(x,y);                        //cuerpo            this.cuerpo=new game.Body();            this.cuerpo.position.set(x,y);            this.cuerpo.velocityLimit.set(150,150);            this.cuerpo.velocity.set(-100,-50);            this.cuerpo.collisionGroup = 1;            this.cuerpo.collideAgainst.push(0);            this.cuerpo.mass = 0;                    this.cuerpo.collide = this.colision.bind(this);            this.cuerpo.addShape(new game.Rectangle(60,60));            //agregar un sprite en la escena            game.scene.addObject(this);            //agergar cuerpo de este sprite a el objeto del mundo            game.scene.world.addBody(this.cuerpo);            //agregar spite para mostrar en el contenedor            game.scene.stage.addChild(this);        },        colision: function(opponent){            console.dir(arguments);              console.log('Colision!!!');            //opponent.eliminar();            return true;        },        update: function(){            this.position.x = this.cuerpo.position.x;               this.position.y = this.cuerpo.position.y;             this.cuerpo.velocity.x = (this.raton.x - this.cuerpo.position.x);            this.cuerpo.velocity.y = (this.raton.y - this.cuerpo.position.y);        },        eliminar: function(){            this.cuerpo.remove();            game.scene.removeObject(this.cuerpo);            game.scene.stage.removeChild(this);        },        mousemove: function(x,y){            this.raton.x = x;            this.raton.y = y;            //this.position.set(x,y); //x y y pasan como parametros en la funcion        }    });        game.createClass('Coin','Sprite',{        texture:'coin.png',        init: function(x,y){            this.anchorCenter();            this.position.set(x,y);                        //cuerpo moneda            this.moneda = new game.Body();            this.moneda.position.set(x,y);            this.moneda.velocityLimit.set(300, 1000);            this.moneda.velocity.set(0,0);            this.moneda.collisionGroup = 0;            this.moneda.mass = 0;                        this.moneda.remove = this.remove.bind(this);            this.moneda.addShape(new game.Circle(10));            //agrear sprite a la escena            game.scene.addObject(this);            //agregar cuerpo de este sprite para el objecto del mundo            game.scene.world.addBody(this.moneda);            //agrega sprite para mostrar en el contenedor            game.scene.stage.addChild(this);        },                update: function(){            this.position.x = this.moneda.position.x;               this.position.y = this.moneda.position.y;           },                remove: function(){            this.moneda.remove();            game.scene.removeObject(this.moneda);            game.scene.stage.removeChild(this);        }    });});

This is the example code. "Collision Handling" of fiddler.