Search the Community

I'm just starting with libraries for JS 2D game development and I want to pair these two and I've spent several hours trying everything I can and all the examples I could find on how to use Pixi.js sprites and shapes but I feel like I can't get it right. If I get anything to work at all, it is always either really clunky code that I think will affect some functionality or performance later. Here's an example on how to use a JS canvas with Matter.js, and I even tried using PIXI.Graphics to replicate this: https://github.com/liabru/matter-js/wiki/Rendering I really want to be able to draw shapes like rectangles and circles and have them work as PIXI.Sprite, while also as a Matter.Body. I want shapes first so that I don't have to look for and load images when I simply want to try out an idea. I found an example here that I tried replicating, but making general functions that create an object that contains the sprite and the body objects. https://codepen.io/BakerCo/pen/ojKJJb?editors=0010 Instead of loading an image, I created a PIXI.Graphics shape, generated a canvas from it with Pixi and created a PIXI.Sprite. Loading an image and making a Sprite is so much more simple, but for later. I'm just starting with libraries for JS 2D game development and I want to pair these two and I've spent several hours trying everything I can and all the examples I could find on how to use Pixi.js sprites and shapes but I feel like I can't get it right. If I get anything to work at all, it is always either really clunky code that I think will affect some functionality or performance later. Here's an example on how to use a JS canvas with Matter.js, and I even tried using PIXI.Graphics to replicate this: https://github.com/liabru/matter-js/wiki/Rendering I really want to be able to draw shapes like rectangles and circles and have them work as PIXI.Sprite, while also as a Matter.Body. I want shapes first so that I don't have to look for and load images when I simply want to try out an idea. I found an example here that I tried replicating, but making general functions that create an object that contains the sprite and the body objects. https://codepen.io/BakerCo/pen/ojKJJb?editors=0010 Instead of loading an image, I created a PIXI.Graphics shape, generated a canvas from it with Pixi and created a PIXI.Sprite. Loading an image and making a Sprite is so much more simple, but for later. The whole result was a jaggy, low quality version of the Matter.js Getting Started example. There has to be a good way to pair any renderer with Matter.js, right? Please can you show me how to do this properly? The whole result was a jaggy, low quality version of the Matter.js Getting Started example. There has to be a good way to pair any renderer with Matter.js, right? Please can you show me how to do this properly? P.S. I know there is a Matter.RenderPixi module, but it is deprecated and I want to learn how to actually combine a renderer with a physics engine for the freedom and understanding.

I'm looking to make a simple game using Pixi.js as a renderer and Matter.js for the physics. But I'm having a hard time wrapping my head around how to do that. Does anybody have some code or projects, using both pixi and matter, that I could take a look at? Any documentation/articles/videos are also welcome. Much appreciated.

I am starting out with Phaser/ Phaser 3, so bear with me. I am trying to make a mobile game with viking ship going up a river. the ship will always be moving forward, I wish to have a virtual tiller which the user will touch and drag to angle the ship left and right. I.e Changing the angle which the tiller is displayed on the screen, the more severe the angle the faster the boat will turn. Currently I change direction with the arrow keys on the keyboard. I tried adding it as a button, but got the error message add.button is not a function. Can anyone suggest where to begin this process? i.e add the tiller and allow it to tilt (I will be recording it's angle to determine how much to turn the boat). Attached is a image of the what I mean by tilting.

I'm not understanding how to incorporate plugins... especially for matter-attractors. my config file looks like this, I'm bringing in another plugin that worked well, and had good instructions. type: Phaser.AUTO, parent: "my game", canvas: document.getElementById("game"), width: 1500, // window.innerWidth height: 1500, // window.innerHeight pixelArt: true, roundPixels: true, physics: { default: "matter", matter: { gravity: { scale: 0 }, debug: true, }, }, plugins: { scene: [ { plugin: PhaserMatterCollisionPlugin, // The plugin class key: "matterCollision", // Where to store in Scene.Systems, e.g. scene.sys.matterCollision mapping: "matterCollision", // Where to store in the Scene, e.g. scene.matterCollision }, { plugin: MatterAttractors, key: "matterAttractors", mapping: "matterAttractors", }, ], }, }; You can see I'm trying to use it there at the bottom... I'm not having any luck. I'm expecting to see them in the console when they get in by using this: this.plugins.scenePlugins I'm hoping someone call show me what needs to change. here is matter-atractor's github link

in my scene's create method I'm using this line of code to set bounds. this.matter.world.setBounds(0, 0, 1800, 1800, 15); here, the thickness, is set to 15 as I understand it. But I fly through the walls sometimes and need a more solid barrier. any ideas on how to shore up the world bounds? Alternatively if you know of a way of setting tiles along the world bounds, I'd be fine with that kind of solution...

Hi, I would like to have two cards that when they collide with each other they would rotate in an analog way of the ones you can see in the attached video. This is the first part of the code: var config = { type: Phaser.AUTO, width: 800, height: 600, backgroundColor: '#1b1464', parent: 'phaser-example', physics: { default: "matter", matter: { gravity: { y: 0}, debug: true } }; scene: { preload: preload, create: create } }; var game = new Phaser.Game(config); function preload () { this.load.spritesheet("controllers", "assets/sprites/controllersSheet.png", { frameWidth: 100, frameHeight: 100 }); } var controller = []; function create () { this.matter.world.setBounds(); controller[1] = this.matter.add.sprite( 400, 100, 'controllers', 0, null, { restitution: 0, friction: 1}); controller[2] = this.matter.add.sprite( 400, 400, 'controllers', 1, null, { restitution: 0, friction: 1}); Then I am having some issues because with this next code they move as I'd like, but they don't rotate: controller[1].setInteractive(); controller[2].setInteractive(); this.input.setDraggable(controller[1]); this.input.setDraggable(controller[2]); this.input.on("drag", (pointer, gameObject, x, y) => {gameObject.setPosition(x, y); checkPosition();} ); this.input.on("dragstart", (pointer, gameObject) => { } ); this.input.on("dragend", (pointer, gameObject) => { } ); And with this other next code, they bounce all around and I can't find a way to make them stay fixed. this.matter.add.mouseSpring({ length: 0, stiffness: 0 }); If someone knows how to help me, I would be very thankful. mm.mp4

Hi Everyone, I've decided to open source the Mars Explorer game I've been working on in the hopes that some might learn from it or even contribute to its development. the source code is available here on github. I'd love to hear some constructive feedback from the community and contributions to the project would be more than welcome. This is my first attempt at a game using phaser so go easy on me if I've made any rookie mistakes ? Its loosely based on the Phaser 2 tanks demo but instead using Phaser 3 and matter.js physics.

Hi All, The body.gameObject is null during collisionstart event when using TexturePacker and PhysicsEditor json files Cannot read property 'setTint' of null The setTint call works (and gameObject is valid) when I load the two images directly like this.load.image('ship', 'images/ship.png'); Do I need to modify this code in some way so I can use TexturePacker and PhysicsEditor? var config = { type: Phaser.AUTO, width: 800, height: 600, parent: 'phaser-game', physics: { default: 'matter', matter: { debug: true, gravity: { y: 0 } } }, scene: { preload: preload, create: create } }; var game = new Phaser.Game(config); var ship; var ball; function preload() { // Load sprite sheet generated with TexturePacker this.load.atlas('sheet', 'images/sprite-sheet.png', 'images/sprite-sheet.json'); // Load body shapes from JSON file generated using PhysicsEditor this.load.json('shapes', 'images/sprite-shapes.json'); } function create() { this.matter.world.setBounds(0, 0, game.config.width, game.config.height, 0, false, false, false, false); var shapes = this.cache.json.get('shapes'); ship = this.matter.add.sprite(0, 300, 'sheet', 'ship', { shape: shapes.ship }); ball = this.matter.add.sprite(600, 300, 'sheet', 'ball', { shape: shapes.ball }); ship.setVelocityX(10); this.matter.world.on('collisionstart', function (event) { console.log("collisionstart"); console.log(event.pairs.length); console.log(event.pairs[0].bodyA); console.log(event.pairs[0].bodyB); event.pairs[0].bodyA.gameObject.setTint(0xff0000); // gameObject is null here (Cannot read property 'setTint' of null) event.pairs[0].bodyB.gameObject.setTint(0x00ff00); // gameObject is null here (Cannot read property 'setTint' of null) }); } sprite-shapes.json sprite-sheet.json

I'm using Matter.js as my physics engine and Pixi as my renderer and under normal circumstances I've been able to get them to work smoothly. However, I'm trying to do something where all of the objects *except* the player character are scaled down to look like the character is now above them. The scaling works visually in Pixi, but I can't get the bodies from Matter.js to go with it, so there are these "ghost objects" that I can't see but if collide with them then the scaled down objects will be moved. Does anyone have any tips for how to resolve this? Let me know if I need to post a gif if that would help explain the problem.

Hello. I am trying to make a 2d platform desctructible map. I am using matter.js for the physics ( I am working with soft bodies) and phaser for the rest of the game components. I have no idea on how desctructible 2d worlds are made... If you have a ground that is a rect how can you remove part of it due to user interaction? Thanks EDIT: I found this link: http://phaser.io/tutorials/coding-tips-002 Well, my dought now is if it is possible to collide a matter.js physics body with a map created with phaser

http://toium.com/game-pushes/ It is a dead simple game.

I am just wondering if anyone has used Matter.js with Createjs? I just wanted to know because I am much more comfortable with Createjs then Pixi. If it isn't compatible then i'll just use Pixi. Thanks for the advice.