2Radon

How can I use Pixi.js as the renderer for Matter.js?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.