Comments (6)
FYI currently react-pixi-fiber
is using legacy context API, not the new one.
from react-pixi-fiber.
Hi @Eldow, you have at least two options, that are documented in README:
- Render with
<Stage />
component and access renderer throughapp
context. - Create your own PixiJS Application and render your own stage.
from react-pixi-fiber.
Ok I wasn't so sure as I'm still not very familiar with the new context api. Thank you for your quick reply :)
from react-pixi-fiber.
I tried to modify the renderer within a <Container />
component but it didn't triggered any changes.
Here is my main component :
<Stage
width={window.innerWidth}
height={window.innerHeight}
>
<Viewport
screenWidth={window.innerWidth}
screenHeight={window.innerHeight}
worldWidth={3000}
worldHeight={3000}
objectToFollow={currentPlayer}
>
<Map />
<Container zIndex={10}>
{ Object.values(players).map(player => (
<Player
key={player.id}
player={player}
/>
)) }
</Container>
</Viewport>
</Stage>`
And here is the beginning of my <Map>
component, where i'm reading eventual user interactions.
render() {
const { app } = this.context;
const { rotatePlayer, attack, stopAttack } = this.props;
app.renderer.plugins.interaction.interactionFrequency = 1000;
return (
<Container
zIndex={5}
mousemove={rotatePlayer}
mousedown={attack}
mouseup={stopAttack}
interactive
hitArea={this.hitRectangle()}
>
// ...
Modifying the context within the component only modifies a copy of it and therefore won't work.
Is there any way to update the context given by react pixi fiber's Stage component without setting another Stage app state in the library directly ?
It may come from an incomprehension of the context API from myself but I can't find any proper example of updating the parent context within a child with the old API, except by giving a handler from the parent such as
const childContextTypes = {
app: PropTypes.object,
mutateApp: PropTypes.func,
};
I would really like to stick with JSX.
Regards,
Eld0w
from react-pixi-fiber.
Modifying the context within the component only modifies a copy of it and therefore won't work.
@Eldow why do you think it modifies a copy? The internal Pixi Application that is created by Stage component is passed directly via context, not a copy of it.
What is it exactly that you're trying to achieve by changing interactionFrequency
?
Also, you shouldn't be mutating it every time you render in render
, but rather in componentDidMount
lifecycle.
from react-pixi-fiber.
Yes, I placed it there for the example sake.
I was trying to reduce the amount of times the mousemove event gets triggered but unfortunately it didn't seem to work that way. Even when setting it to 1000ms it kept firing the mousemove event every 10ms which is the default value.
PIXI documentation regarding interaction frequency
I don't get why, it may have nothing to do with react-pixi-fiber itself.
from react-pixi-fiber.
Related Issues (20)
- Performance comparison with react-pixi? HOT 1
- TypeError: Cannot read properties of null (reading 'stencil') at ContextSystem.push../node_modules/@pixi/core/dist/esm/core.js.ContextSystem.validateContext (core.js:5206) HOT 4
- NPM installation of library react-pixi-fiber@[email protected] throws error HOT 4
- 1.0.0-beta.13 missing index.es.js HOT 12
- Error: Vite(esbuild) unable to find matching export in PIXI.js HOT 14
- Attempting to compile an app with PixiJS 5.3.11 or 6.2.2 and the latest beta 15 result in an error. HOT 1
- Is this project dead? HOT 2
- Webpack complains about missing exports in pixi.js HOT 3
- Could not resolve dependency: peer react@"^17.0.2" from [email protected] HOT 3
- Stage is not compatible with the React's StrictMode HOT 5
- Pointer Events don't fire at all HOT 2
- Upgrade reconciler
- Text components style property is not correctly typed HOT 2
- Issue on running demo HOT 1
- rightupoutside event may not be supported? HOT 2
- Can't use with new versions of PixiJS HOT 6
- export 'extras' (imported as 'PIXI') was not found in 'pixi.js' HOT 3
- Explicit "createStageClass" usage causes crash HOT 1
- Breaking changes in React experimental branch
- TypeError dispatcher.useSyncExternalStore is not a function HOT 1
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 react-pixi-fiber.