Comments (7)
I'm closing this issue, again feel free to create a PR with a solution and we'll work on it together and merge it in this codebase. π
from pixi-react.
Hi @EloB,
Using key
is not preferable as it unmounts and mounts a new Stage object each time an update occurs.
Here are my findings:
Scaling the <canvas>
It's better and more performant to scale a complete canvas using css instead of the internal resolution property. The resolution property is nice to have it sharp for retina displays, although you could resize the contents of the PIXI elements at once, perhaps it's a better practise to just simply scale the stage object: app.stage.scale.set(resolution, resolution)
You can also use the autoResize: true
option to allow auto resizing the renderer. However, this doesn't scale the content, here's an example: https://jsfiddle.net/bigtimebuddy/wLg7jezb/
Pass resolution
as context
You can use the <Provider>
for this:
<Stage>
<Provider>
{ app => (
<MyComponent resolution={app.renderer.resolution} />
)}
</Provider>
</Stage>
Handle resolution changes
Right now the Stage
component update the width
and height
props and reflect these changes to the <canvas>
element.
Having the resolution
updates on prop change would be awesome, but I couldn't figure out what to implement on resolution change, as this is subjective. For instance in an app I'm working on I'd like to change the internal resolution and reset the interaction manager:
function onResolutionChange() {
renderer.resolution = resolution
renderer.rootRenderTarget.resolution = resolution
renderer.plugins.interaction.destroy()
renderer.plugins.interaction = new PIXI.interaction.InteractionManager(renderer)
renderer.resize(this.width, this.height)
}
Would love to hear your thoughts on this.
from pixi-react.
Using key is not preferable as it unmounts and mounts a new Stage object each time an update occurs.
That's why I said it was an ugly hack π
It's better and more performant to scale a complete canvas using css instead of the internal resolution property.
That will only scale the bitmap? So it might look blurry? The resolution
solution then Graphics
values also scaled perfectly. π
I seems like Pixi always multiplies with the resolution
anyway. So I don't understand why it should be slower... Had a look at their source code. Searched for resolution
:
https://github.com/pixijs/pixi.js/search?p=1&q=resolution&unscoped_q=resolution
I know that resolution
is used for retina display but Pixi wasn't built for React. So I think this is a best practice if you want to mix these technologies. To be able to optimize for the reconciliation. https://babeljs.io/docs/en/next/babel-plugin-transform-react-constant-elements.html
The first app I built then I passed around a context consumer into each component and multiplied all values myself. The code looked really ugly and can't be any reconciliation optimization at all.
Another idea might be to use scale
but I'm not sure how it scales. Will it make my canvas blurry?
const App = ({ children, resolution }) => (
<Stage width={1920 * resolution} height={1080 * resolution}>
<ResolutionContext.Provider value={resolution}>
<Container scale={resolution}>
{children}
</Container>
</ResolutionContext.Provider>
</Stage>
);
Pass resolution as context
You can use the for this:
That solution doesn't trigger on resolution
change because the app never changes? It's the same instance of app
passed to the React context.
function onResolutionChange() { renderer.resolution = resolution renderer.rootRenderTarget.resolution = resolution renderer.plugins.interaction.destroy() renderer.plugins.interaction = new PIXI.interaction.InteractionManager(renderer) renderer.resize(this.width, this.height) }
Havenβt tried it but looks good to me π
from pixi-react.
That will only scale the bitmap? So it might look blurry? The resolution solution then Graphics values also scaled perfectly. π
Yes you're right, I'm afraid using CSS might blur the canvas if you're scaling it up.
I seems like Pixi always multiplies with the resolution anyway. So I don't understand why it should be slower... Had a look at their source code. Searched for resolution.
Yes it's true that the resolution is internally used to multiply it with the component dimensions, but using the resolution property for scaling things up/down doesn't feel right to me. π
Solution
Ideally the Stage
could listen for prop resolution
change and triggers a render. But killing the interaction manager and resize the canvas accordingly might not be a good solution for common projects.
If you'd like you can create a PR and see if we can come up with a good solution?
from pixi-react.
I can agree that resolution
way of scaling things feels a bit odd but I would say it's the best way of doing React PIXI if you want performance and readability! :)
from pixi-react.
Feel free to create a PR and collaborate on it together π
from pixi-react.
When I have some time I will try todo something :)
from pixi-react.
Related Issues (20)
- Bug: PixiComponent type issue with Container HOT 2
- Bug: Cannot read properties of undefined (reading 'alternate')
- Bug: PixiComponent type issue with Text
- Feature Request: Please include examples about Custom Components using High Order Components
- Bug: React$1.Component is not a constructor HOT 1
- Bug: BitmapText style not changing when `style` prop changes
- Bug: issues with interactivity if you never import pixi.js HOT 1
- Feature Request: Add documentation for event handling
- [Feature Request] Add HTMLText Component
- Bug: Component and child components not being destroyed on unmount by default
- Bug: Peer Dependency of pixi.js breaks any app <7.2 HOT 3
- Bug: `__REACT_PIXI_REQUEST_RENDER__` event is not emitted when expected HOT 1
- Bug: Error message is too long.
- Bug: TypeError: Cannot read properties of null (reading 'stage')
- Bug: unable to see "Hello world" text from readme example? HOT 2
- Bug: ReferenceError: Worker is not defined HOT 5
- Feature Request: PIXI v8 support HOT 6
- Bug: Events don't seem to work at all. HOT 1
- Bug: How to mask sprites with sprites in pixi-react? HOT 1
- Bug: Text color doesn't work
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pixi-react.