Should basic shapes be included in the library?

[Zamiell]

Hello, and thanks for react-pixi. My question is as follows:

• PixiJS offers Rectangle and Circle, which are obvious building blocks for most people's applications.
• However, react-pixi does not provide these, and expects end-users to manually create them in their own components.
• Vojtech Rinik describes creating these kinds of components in his excellent blog Writing high performance React-Pixi code.

It turns out that writing these kinds of components is not so simple. There are many performance concerns, and Vojtech suggests that all react-pixi end-users type out boilerplate-style checks like this one:

if (x !== oldProps.x || y !== oldProps.y || width !== oldProps.width || height !== oldProps.height || fill !== oldProps.fill) {
  instance.clear();
  instance.beginFill(fill);
  instance.drawRect(x, y, width, height);
  instance.endFill();
}

if (alpha !== oldProps.alpha) {
  instance.alpha = alpha;
}

Unfortunately, this is exactly the kind of low-level drudgery that I would expect a nice library like react-pixi to abstract away. =p In my mind, it seems like the whole point of using React+Redux is that we don't have to type out these kinds of comparison engines by hand.

1) Is there a particular reason why react-pixi doesn't provide usable Rectangle and Circle components for end-users out-of-the-box? 2) Are there any other resources out there that you would recommend for programming performant components? 3) Do you know if there are any production applications using this library that I could study?

[inlet]

Hi James,

PixiJS offers Rectangle and Circle, which are obvious building blocks for most people's applications. However, react-pixi does not provide these, and expects end-users to manually create them in their own components.

In PIXI they are not renderable components, but code utils describing a space/area. So in native PIXI you have to draw them yourself as well.

Vojtech Rinik describes creating these kinds of components in his excellent blog Writing high performance React-Pixi code.

Yes great resource, but also outdated as we've progressed on this library for more than a year now. ReactPixi now provides props helpers which helps you reduce boilerplate but still give you all control if you need to go ninja style.

NOTE: text render implementation is not correct, text is only updated when props are changed.

Are there any other resources out there that you would recommend for programming performant components?

I would highly recommend reading the PIXI docs and tuts as they give you a solid foundation of how PIXI works. And of course learn React :smile: The rest is super simple and documented in the ReactPixi docs

Do you know if there are any production applications using this library that I could study?

There are so many apps using it really, look at the codepen collection I created that will definitely help you getting familiar with writing ReactPixi components

I hope this answers your questions, feel free to join our Slack channel if you want to get in touch with fellow devs.

[inlet]

Here's a demo of how to draw Rectangles in ReactPixi: https://codepen.io/inlet/pen/c96945b105130375372b927c12b61243

Although you could use PixiComponent it's actually easier to use a simple Sprite like this:

<Sprite width={100} height={100} texture={PIXI.Texture.WHITE} tint={0xff0ffe} />

[Zamiell]

Thanks for the quick response, I will take a look.