Jump to content

PhysicsEditor loader for P2 physics engine.


Recommended Posts

Hi guys,


I just wrote a small plugin that enables loading a JSON file generated with PhysicsEditor directly in Panda.js+P2 physics engine. The main goal of this project is to facilitate the process and to provide an efficient the workflow to make great games in Panda.js:



You can find the download on Github here: https://github.com/stephan0v/PhysicsEditor-plugin

Have a look at the live demo in Panda fiddler here: http://vermeire.home.xs4all.nl/panda/

  • Firstly you have to import the custom exporter into PhysicsEditor. This enables the program to export the physics settings of your choice in a workable JSON notation. Copy the exporter folder in this repository to your local harddrive and link the program to it (see: https://www.codeandweb.com/physicseditor/documentation, at the bottom of the page).
  • Import your personal images in PhysicsEditor and create all the settings you need in second. (Have a look at some of the great tutorials here: https://www.codeandweb.com/physicseditor/tutorials).
  • Export the settings you just generated with the custom exporter Panda-p2 (JSON).
  • Import the JSON in Panda like so:
game.module(	'game.main').require(	'plugins.p2',	'plugins.pe_loader').body(function() {		game.addAsset('banana.png'); 	game.addAsset('physics.json'); 	/* this file is a JSON that looks like this: 	{ 		"banana": {			"mass": 2, 			"gravityScale": 1, 			"damping": 0, 			"angularDamping": 0, 	    	"shapes": [				{					"type": "POLYGON", 					"collisionGroup": 1, 					"collisionMask": 65535,					"polygon": [   [98, -0.5]  ,  [106, 0.5]  ,  ......  ]				}			]		}		,		... 	}	*/ 	game.createScene('Main', {		backgroundColor: 0xe1d4a7,				init: function() {		    physics = game.getJSON('physics.json');				            //Create world	            this.world = new game.World({gravity: [0, 5]});	            this.world.ratio = 100;	                            //now add some fruit		    var fruit = new game.P2Sprite('banana.png', physics.banana, game.system.width/2, game.system.height/2); 			    fruit .addTo(this.stage);				 	}); });
Link to comment
Share on other sites

  • 4 months later...


i'm new to panda.js but wanted to try your Plugin. 

I used it for the beginning like so: 

).body(function() {
	game.createScene('Main', {
		backgroundColor: 0xe1d4a7,

But even on this state there is an error in my Browser Console " Uncaught TypeError: game[extend].extend is not a function "!

If i remove the "pe_loader" plugin, there is no error. 

My dev.html looks like this: 

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Panda.js HTML5 game engine</title>

    <script type="text/javascript" src="src/game/config.js"></script>
    <script type="text/javascript" src="src/engine/core.js"></script>
    <script type="text/javascript" src="src/game/main.js"></script>

The plugins are in the right folders. 

Can you help me with this? 



Link to comment
Share on other sites

I just had a quick look and it is a problem that arises after a change of the engine. The Sprite object used to be a panda class with an extend function but not I see that it has been replaced by a PIXI sprite class. If I am correct, the Panda wrapper has been removed and that causes this issue. I could probably fix this but it will take me some time...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...