Search the Community

I posted a question a month ago about licenses for the example games (both here and on github), and I got no response. It appears enpu has not been active on either github or this forum since February. It looks like the Panda.js project is dead?

I made a canvas class for a drawing app and set a white rectangle made with Graphics.drawRect() as its sprite, but I need to change its fill color when I click it. It seems that's not possible according to the few info I've found, so I want to draw another rectangle and change the container sprite but that's not working. Am I doing something wrong? How should I replace the sprite? game.createClass('Canvas', { init: function() { this.drawContainer = new game.Container(); var board = new game.Graphics(); board.visible = false; board.beginFill(0xFFFFFF); board.lineStyle(0); board.drawRect(0, game.system.height /3, game.system.width, 2 * game.system.height / 3 ); board.endFill(); this.sprite = fill; this.sprite = board; this.sprite.interactive = true; this.sprite.click = this.click.bind(this); this.drawContainer.addChild(this.sprite); game.scene.stage.addChild(this.notebookContainer); }, click: function(event) { var board = new game.Graphics(); board.visible = false; board.beginFill(0xFF0000); board.lineStyle(0); board.drawRect(0, game.system.height /3, game.system.width, 2 * game.system.height / 3 ); board.endFill(); this.sprite = board; } });

I'm just starting to learn PandaJS and I need to make a drawing game, where the top section has some controls to choose the type of figure, color, etc, and the bottom section is the drawing area (I attached a quick mockup) I've implemented some interaction with Pixi Graphics to draw the figures but in this moment everything is mixed into a single section, and the drawing starts just where I click the button to choose a figure. I want to be able to click any control from the top section and then start drawing when I click the bottom section. I've tried with containers but I don't really understand them. Which is the best approach for this? I'm currently using Panda 1.13. I will provide code if necessary.

Hi all, I am pleased to announce that one of my biggest html5 projects was released this weekend. The project 'Taalblobs' is a commercial website with many educational games that is designed to practise Dutch spelling. It contains 25 games (all written in panda.js), approximately 5000 Dutch words, a reward system for pupils, an adaptive algorithm as well as the option for a manual override, an extensive monitoring system for teachers and many many more cool features, all designed to facilitate educational professionals. Currently Taalblobs will be available in Dutch only but I am thinking about porting the concept to other languages as well. (So if you are dyslexia expert and interested in participating, don't hesitate to contact me !) If you are interested in the project, feel free to have a look and give a few games a quick try on the website https://www.taalblobs.nl/demo. You can have a look at some screenshots below or a full overview online at: https://www.taalblobs.nl/spellen.html @Enpu: Once again thank you so much for your work on the Panda.js game engine and especially for making it publically available as an open source project. Stephan

Hi all, Recently it has been a bit quiet on the forum so I thought it would be a good idea to post the announcement here as well as in the showcase forum. I am pleased to announce that one of my biggest html5 projects was released this weekend. The project 'Taalblobs' is a commercial website with many educational games that is designed to practise Dutch spelling. It contains 25 games (all written in panda.js), approximately 5000 Dutch words, a reward system for pupils, an adaptive algorithm as well as the option for a manual override, an extensive monitoring system for teachers and many many more cool features, all designed to facilitate educational professionals. Currently Taalblobs will be available in Dutch only but I am thinking about porting the concept to other languages as well. (So if you are dyslexia expert and interested in participating, don't hesitate to contact me !) If you are interested in the project, feel free to have a look and give a few games a quick try on the website https://www.taalblobs.nl/demo. You can have a look at some screenshots over here: https://www.taalblobs.nl/spellen.html @Enpu: Once again thank you so much for your work on the Panda.js game engine and especially for making it publically available as an open source project. Stephan

Hi, Is good idea today use panda.js?, so I understand that panda isn`t updated and in the repo las commits are of three years ago, and I am studying Pixi.js and I have many questions and dicumentations isn't enought, so for example I want to use scenes, make good animations but with pixi has been complicated for me. Thanks.

I've been playing around with Panda.js using the example endless runner game avaialble here: https://github.com/ekelokorpi/panda.js-engine-games/tree/master/endlessrunner I've been having several issues trying to attempt to get the default scroll event working on mobile. I've modified the game in such a way as the user interacts with the game via DOM elements. As an example, I have a modal popup which they can click or tap to start the game, then when the game is over, enter their details via a similar modal with input fields etc. These modal boxes are rendered on top of the canvas element. The main issue comes as mentioned when I attempt to scroll on mobile, it seems I can't make any default browser action. Edit: I have the canvas rendered inside a div content container. I think this is primarily to do with pixi.js, and from doing some research into the issue have found some leads such as setting the autoPreventDefault attribute to false ( https://github.com/pixijs/pixi.js/issues/2410 ) but this has not helped, and the issue has remained. Has anyone come across a similar problem, and might have a solution?

Hi Enpu. I really like Panda.js and the example games. Thank you very much for creating it! I wanted to confirm that the code for the example games in https://github.com/ekelokorpi/panda.js-engine-games is also MIT licensed? The examples are a great starting point for new games.. I understand that the graphics and sound assets probably have different terms, and can be replaced. So I am only asking about the license for the code, not the license for the assets. Keep up the good work!

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/ Requirements: Panda.js frameworkP2 plugin for panda.jsA working version of PhysicsEditor (https://www.codeandweb.com/physicseditor). Instructions: 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); }); });Enjoy!

Hello guys I am a flash game developer and want to make some html 5 games for web and mobile for fun While searching for html 5 game engines I found panda.js I think this is a perfect game engine for me but I don't seem to find any tutorial aimed towards complete beginner which tells how to set up the project and how to start things. I know javascript but I don't know how to use it with this engine. Please anyone if you know about any beginner tutorial please tell me ! Please! I really like this engine ( I love pandas ) Cheers, crayonHero

Hello, I come from an AS3 Background and have started working with panda.js. So far I am getting used to it, but i do have a question for understanding. What is the difference between: Game.Scene.Container vs Game.Scene.Stage vs Game.Scene.World? I have worked with nape before, so the world is for physics i take it. But where does scene.container and scene.stage differ from eachother? Thanks, N3RD_L1F3

The problem is as described in the following video. https://db.tt/NAvsrdVD I have two timers, one to generate a new enemy. and the other to generate the shot. this.addTimer(3000, this.addEnemy.bind(this), true); //Call method for generate enemysthis.agregarEnemigo(); //update rotation angle for enemythis.addTimer(400, this.eBullets.bind(this), true);addEnemy: function(){ this.enemigo = new game.Enemigo(game.width.random(), game.height.random()); //call class enemy}eBullets: function(){ if(this.enemigo.life === true){ this.enemigo.Shoot(); } }This is my code to work as this in the video. The goal is to generate enemies and shoot them my hero. So far the problem that I have is that when you build the next enemy. the former enemy stops shooting. And I want to shoot the enemies simultaneously.

A question. I need to rotate an animation, in the direction of another object. Create a method that allows me to do this. but for a sprite, but when I try to type an object animation, but does not rotate. watch the video, which have two methods, which are angles to me to turn my animation, you work to perfection and the other not. Video: https://db.tt/f01HXSmj Look how the sprite with the same angle, pointing to my hero. and when I use the animation with the same angle and not pointing to it. and when I change the method by spinning according to the pointer, rotating smoothly. the animation changes its angle to the method I use for the angle of the pointer, but the method if it works, to change the angle for the sprite. but to change the angle of the animation is not working. why?

Hi guys, I've two questions about PandaJS and vertical scroll system. 1) can someone explain how to make a sprite that going up is followed by the camera? A typical vertical scroll system. I saw this page: http://www.pandajs.net/docs/classes/game.Camera.html but I don't understand how to use these methods. 2) how to make a sprite jump through a platform while he's going from down to top, but stop when he touch the platform during the fall ? Reading the documentation and looking at demos' sources, I saw that I need to use this code to set the gravity (so my sprite fall down after the jump): this.world = new game.World({gravity: [0, 9]});I'm really confused, any help will be appreciated, thank you in advance

I need to rotate a sprite, according to the pointer. Phaser has the following code to do this. angleToPointer: function (displayObject, pointer) { pointer = pointer || this.game.input.activePointer; var dx = pointer.worldX - displayObject.x; var dy = pointer.worldY - displayObject.y; return Math.atan2(dy, dx);}Given this code, and reviewing the Class Vector in panda.js 2.0. In documentacionhe it is seen that has two methods which are: angle and angleFromOrigin. angleFromOrigin: function(vector) { return Math.atan2(vector.y, vector.x) - Math.atan2(this.y, this.x);} //This method is very similar to Phaser.which try to access them and have failed. in the following way game.vector.angleFromOrigin()I could not access because this method. the easiest way to recreate the phaser method.It is on the scene in the mousemove add the following method. mousemove: function(x,y,id,e){ var dx = e.x - this.sprite.position.x; //Took the pointer value in x, and rest with the last posision x, just like the method is doing phaser. var dy = e.y - this.sprite.position.y; this.giro = Math.atan2(dy,dx); this.sprite.rotation = this.giro;},Ok, the sprite makes its rotation. but not rotate with the movement of the pointer.

Hi, I'm a bit a new to Panda.JS. is there a way to load up image assets stored on a CDN? e.g Amazon In Phaser it's something like this: Remove the next 2 lines if running locally this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue008/'; this.load.crossOrigin = 'anonymous'; this.load.image('alien', 'assets/ufo.png');Is there a similar way to achieve this with Panda.js? Thanks

Not if the following is an error. I'm learning this empirically Panda 2.0 game engine, I'm practicing what they learned. and at the moment I am working with graphics. So I'm developing a mini platform game for so implement everything learned. I do not have as sprites, then my hero will be a rectangle. The next thing is that in my class hero who I have called "Cat", I created the body of my hero, the rectangle will be red in the graphic class, adding a rectangle to this rectangle so add to the body of the hero , and finally adding it to the world as we will see in the code. game.createClass('Gato',{ init: function(x,y){ this.cuerpo = new game.Body(); this.cuerpo.collisionGroup = 1; this.cuerpo.collideAgainst = [0]; this.cuerpo.position.set(x,y); this.cuerpo.collide = this.colisiones.bind(this); //Class Graphics this.catGrap = new game.Graphics(); this.catGrap.anchorCenter(); this.catGrap.fillColor = '#f00'; this.catGrap.drawRect(this.cuerpo.position.x,this.cuerpo.position.y,50,50); this.catGrap.addTo(game.scene.stage); //Rectangle(50,50) var catShape = new game.Rectangle(this.catGrap.width, this.catGrap.height); //change this.cuerpo.addShape(catShape); this.cuerpo.addTo(game.scene.world); }, colisiones: function(colision){ if(colision.collisionGroup === 0){ this.cuerpo.velocity.y *= -.5; //Work } return true; }, update: function(){ this.catGrap.position.copy(this.cuerpo.position); } });The problem is this, the width and height of my body will be 50. and when I run the code, it is as follows. so that we can give a wide and long rectangle that resembles the hero, I have to double the value of the rectangle that will add to the body, or it has to value 100, and is as follows. var catShape = new game.Rectangle(100, 100); My question is, and look at the documentation, and I know, as equip the red rectangle is even with the box body. since it is not working properly. and as seen in the last image, the high is unbalanced. Thanks.

Hi guys, I just released the beta version of my first panda.js plugin. Download: https://github.com/stephan0v/Panda.js-physics-extention-plugin. Live demo: http://vermeire.home.xs4all.nl/panda/ Panda.js physics extention plugin. This plugin adds several features to the built in basic physics engine of Panda.js. Features: Collision between squares and circles is now far more realisic and follows the laws of physics.Gravity is no longer affected by the mass of the object.The effect of the gravity on individual bodies can be regulated now with the body.gravityFactor propertyYou can add squares that act like a wall with the body.fixed property.The bounciness of individual bodies can be regulated with the restitution propertyLimitations: Polygons/lines/triangles are not supportedBodies won't rotate on collision

Hey everyone, I'm recently working on a new arcade game called "Deadly Race Droid", using Panda.js. You'll play as a robot racing with others and fighting the evil snake It's more like a "RogueLite" game, you'll lose if "Life" is empty but you can purchase with rads you get after finishing each level. The game itself is almost done, next thing is the final boss battle then the extra bonus mode and character/level balancing. Seems like there're still lots of things to do, I'll try my best. You can play the demo here: http://ionicrabbit.com/games/DeadlyRaceDroid/ Feedbacks are welcome

I am learning to use this engine, but compared to some methods I've seen online, for example Phaser.js. not managed to create a method that can make my player shoot. This is my class and my method. game.createClass('Shoot', { init: function(x, y){ this.disparo = new game.Sprite('shoot.png'); this.bodyDisparo = new game.Body({ position:{ x: x + this.disparo.width, y:y } }); var circulo = new game.Rectangle(this.disparo.width, this.disparo.height); this.bodyDisparo.addShape(circulo); game.scene.objectContainer.addChild(this.disparo); game.scene.world.addBody(this.bodyDisparo); game.scene.addObject(this); }, shot: function(){ this.bodyDisparo.velocity.x = 260; }, update: function() { this.disparo.position.x = this.bodyDisparo.position.x; this.disparo.position.y = this.bodyDisparo.position.y; } }); Not if well implemented this code I wrote. I'm learning to program games in html5.

I tried to apply this plugin on my existing project and I can confirm that FPS are always at 60 and there's a lesser CPU usage. This is only a workaround at the moment, so I can't reccomend to use it but could be a huge start point for high performance iOS games. iOS8 is installed on 56% of devices at the moment (https://developer.apple.com/support/appstore/) in my humble opinion, due to a jailbreak not available. But now, a JB was released so I think that this 56% will increase early.

Hi, I've a little problem to using tween. I use this folowing twin to make move a sprite when I click on a button game.scene.addTween(this.object.sprite.position, { y: this.object.sprite.position.y-35}, 500, { easing: game.Tween.Easing.Quadratic.In, repeat: 1, yoyo: true}).start();but if i click on the button during the animation, he restart one at the end with the object position when the second click happened. And its create an unwanted gap.

Hi, i tried to make a game with a pause menu but, i only success to supress resume button (not the restart or the menu button) when i click on it. I've tried with remove child and remove but it's don't work. RestartButton =game.Class.extend({ init:function(){ this.sprite = new game.Sprite('run'); this.sprite.interactive = true; this.sprite.mousedown= this.sprite.tap = function() { game.scene.stage.pausedGame=false; this.remove(); //Need Help here }; this.restartChoice = new game.Text("Restart", {font: '40px wallfont',fill: "#ffffff",align: "center"}); this.restartChoice.position = {x: 30, y:120}; this.restartChoice.interactive = true; this.restartChoice.click = this.restartChoice.tap = function () { game.system.setScene(TestGame, true); }; this.menu = new game.Text("Menu", {font: '40px wallfont', fill: "#ffffff", align: "center"}); this.menu.position = {x: 30, y: 160}; this.menu.interactive = true; this.menu.click = this.menu.tap = function () { game.system.setScene(MenuGame, true); }; }, displayButton:function() { this.sprite.position.x=5; this.sprite.position.y=50; game.scene.stage.addChild(this.sprite); game.scene.addObject(this.sprite); game.scene.stage.addChild(this.restartChoice); game.scene.addObject(this.sprite); game.scene.stage.addChild(this.menu); game.scene.addObject(this.sprite); }});

Hello guys, is it possible to color a body shape with a repeatable texture? Something like: var floorBody = new game.Body({ position: { x: game.system.width / 2, y: game.system.height - 35 }, collisionGroup: 1 }); /* GAME STANDARD SHAPES & BODIES */ var floorShape = new game.Rectangle(game.system.width, 70); floorShape.TEXTURE = new game.sprite('env/black.jpg'); //something like this floorBody.addShape(floorShape); this.world.addBody(floorBody);

Hello guys, I want to move my sprite to left/right using the gyroscope/accelerometer. Is there something on panda to do this? Edit: Unfortunately the link here: http://www.html5gamedevs.com/topic/7064-how-to-use-accelerometer/?hl=accelerometer is offline.