Yddron Posted July 9, 2017 Share Posted July 9, 2017 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. Quote Link to comment Share on other sites More sharing options...
coder2012 Posted July 11, 2017 Share Posted July 11, 2017 I have a prototype of a space shooter that I have been working on, just to play with pixijs and matterjs. https://github.com/Coder2012/pixi/tree/master/spaceshooter It's not perfect but you can see how i'm using matterjs engine to get the coords and then positioning sprites from that. I'm using ES2015 classes to abstract common stuff like a physicsSprite, so I'd start with app.js and physicsSprite.js to get the feel for what i'm doing. Hope it's useful ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
Yddron Posted July 12, 2017 Author Share Posted July 12, 2017 Thank you, that does help quite a lot! ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
celsowhite Posted March 13, 2020 Share Posted March 13, 2020 Created a basic demo in codepen that does exactly this. https://codepen.io/celsowhite/pen/XWbEzpx Hope that helps someone as a base to get started! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted March 13, 2020 Share Posted March 13, 2020 12 minutes ago, celsowhite said: Created a basic demo in codepen that does exactly this. https://codepen.io/celsowhite/pen/XWbEzpx Hope that helps someone as a base to get started! Welcome to the forums! btw, here's my demo with p2 and architecture: https://codesandbox.io/s/app-architecture-3-j0di5 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted March 13, 2020 Share Posted March 13, 2020 (edited) @celsowhite If you put it in github and write small article in README, I can add a reference in https://github.com/pixijs/pixi.js/wiki/v5-Resources Edited March 13, 2020 by ivan.popelyshev Quote Link to comment Share on other sites More sharing options...
celsowhite Posted August 12, 2021 Share Posted August 12, 2021 (edited) Hi @ivan.popelyshev I'm super late on this (didn't get a notification) but finally created the Github repo with an article. See here https://github.com/celsowhite/matter-pixi. Also enhanced the original codepen by adding some window resize logic. Thanks for including it as a reference! Celso Edited August 12, 2021 by celsowhite Additional info about resizing. ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 12, 2021 Share Posted August 12, 2021 added it here: https://github.com/pixijs/pixijs/wiki/v6-Resources#tutorials celsowhite 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.