izzimach / react-pixi Goto Github PK

I just forked the react pixi boilerplate (https://github.com/brigand/react-pixi-boilerplate), purged the dependencies and re-installed them to get the latest versions and I get this error.

I also got this error when i tried making my own project from scratch.

Looking at the stack trace it seems "_pixi2.default" is undefined. This likely has to do with using webpack and babel with the latest version of react-pixi or pixi.

Please add build (minified?) file on repo

This is just a question. I'm integrating React with a WebGL engine that has a scene graph, and have things rendering on screen but when using the chrome extension to examine the component tree, all I see displayed under my Surface (Stage-equivalent component) in the tree list is the canvas element. Do you know of any specific properties that need to be added for the chrome extension to pick things up correctly? Thanks

I think we are missing some devDependencies to be able to just run gulp within this repo.

I think the following command needs to be run
npm install envify gulp gulp-concat vinyl-source-stream vinyl-transform gulp-jshint gulp-template gulp-livereload gulp-util gulp-uglify gulp-react browserify browserify-shim jshint-stylish

Also after that my output was:

[13:25:34] Using gulpfile ~/work/react-pixi/gulpfile.js
[13:25:34] Starting 'jsxtransform'...
[13:25:34] Finished 'jsxtransform' after 49 ms
[13:25:34] Starting 'lint'...

src/ReactPIXI.js
  line 36  col 5  'emptyObject' is defined but never used.

  ⚠  1 warning

[13:25:35] Finished 'lint' after 486 ms
[13:25:35] Starting 'browserify'...
[13:25:35] { [Error: Unable to find a browserify-shim config section in the package.json for /Users/parris/work/react-pixi/src/ReactPIXI.js while parsing file: /Users/parris/work/react-pixi/src/ReactPIXI.js]
  filename: '/Users/parris/work/react-pixi/src/ReactPIXI.js',
  stream:
   { _readableState:
      { objectMode: true,
        highWaterMark: 16,
        buffer: [],
        length: 0,
        pipes: [Object],
        pipesCount: 1,
        flowing: true,
        ended: false,
        endEmitted: false,
        reading: true,
        sync: false,
        needReadable: true,
        emittedReadable: false,
        readableListening: false,
        defaultEncoding: 'utf8',
        ranOut: false,
        awaitDrain: 0,
        readingMore: false,
        decoder: null,
        encoding: null,
        resumeScheduled: false },
     readable: true,
     domain: null,
     _events:
      { end: [Object],
        error: [Object],
        data: [Function: ondata],
        _mutate: [Object] },
     _eventsCount: 4,
     _maxListeners: undefined,
     _writableState:
      { objectMode: true,
        highWaterMark: 16,
        needDrain: false,
        ending: true,
        ended: true,
        finished: true,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        corked: 0,
        sync: false,
        bufferProcessing: false,
        onwrite: [Function],
        writecb: null,
        writelen: 0,
        bufferedRequest: null,
        lastBufferedRequest: null,
        pendingcb: 0,
        prefinished: true,
        errorEmitted: false },
     writable: true,
     allowHalfOpen: true,
     _options: { objectMode: true },
     _wrapOptions: { objectMode: true },
     _streams: [ [Object] ],
     length: 1,
     label: 'deps' } }
[13:25:35] Finished 'browserify' after 85 ms
[13:25:35] Starting 'bundle'...
[13:25:35] Starting 'bundle-min'...
[13:25:35] Finished 'bundle' after 51 ms
[13:25:35] Finished 'bundle-min' after 45 ms
[13:25:35] Starting 'default'...
[13:25:35] Finished 'default' after 14 μs

So it looks like it was mostly successful.

Dear Izzimach:
{
... ...
"react": "^15.3.2",
"pixi.js": "^4.0.3",
"react-pixi": "^0.9.0",
... ...
}
When I use react-pixi, I can get a warning:"patching react to work with react-pixi".But the demo I write will run normally, found no problem.
And I build the react pixi boilerplate https://github.com/brigand/react-pixi-boilerplate, still have the warning.
And I read the comment in "es5/react-pixi-commonjs.js", line number 2675 - 2685.But still didn't know how to fixed the warning.
If I ignore this warning, what can be affected?
thanks!!!

I've been attempting to write cljsjs packaging script for react-pixi, in order to make it a bit easier to use in ClojureScript projects. I know you have a Clojars package, but it's a little out of date, and I was thinking that perhaps bringing the package under the cljsjs umbrella would mean that you wouldn't need to keep updating it yourself.

Unfortunately I'm having trouble figuring out just how to automatically generate a suitable file. I'll keep plugging away at the problem regardless, but perhaps you can point me in the right direction? My understanding is that I want a file that contains both ReactPIXI.js and ReactPIXIMonkeyPatch.js, but not Pixi or React as those are already existing packages. Is a new webpack config required?

Thanks in advance for any help you can render.

heya - you mentioned that they're not supported, but can filters be handled manually ?

How can I pass style props to the canvas? I need to scale it down for retina. To get it to work I patched the PIXIStage render function like so

      render: function render() {
        // the PIXI renderer will get applied to this canvas element
        var can = _react2.default.createElement("canvas", {style: this.props.style});
          return can;
      }

was then able to pass a width and height style that was 1/2 that passed to the stage thus getting a nice crisp retina canvas but, there seems to be support for props to be applied to the canvas howevr I was unable to get it to work without the above.

Why not? Is it coming?

A neat solution would be to simply pass on all react properties to all pixi objects, making the interface completely transparent.

Hello,

The examples in the README include a reference to the function assetpath. However, there is no import or declaration of this function within the examples. I've checked the pixi.js website and npm, but could not find any documentation or a reference to a function of that name.

It would be great to see some elaboration or indication of what this is in the examples.

Thanks!

Are there any plans to upgrade?

I'm trying to use contexts in my application, and I'm finding that it is not working as expected.

The contexts come through just fine with the normal react classes that I'm creating, however as soon as I cross in to the react-pixi classes i lose the parent context, I've tried to make sense of the ReactContext stuff, but thought I would ask here if anyone else has run into the issue. I basically just want to make sure that the warning I'm getting is ok to ignore and I won't get stuck when react 0.14.0 comes out 😄

<div className="main-view">
  <Stage width={1024} height={768} backgroundcolor={0xFFFFFF} >
    <Background label={this.props.floor} zoom={this.props.zoom}/>
  </Stage>
</div>

Background looses the context some where.

Hi, I’m using react-pixi for a toy project and so far I’ve been loving it! Thanks for making such a lib!

However, I’m having a difficult time scaling my images. In my game, I’ve got bosses that are bigger versions of monsters. I’m trying to scale the sprite, but unfortunately this doesn't seem to be working:

/* Setting the width or height attributes doesn't have any effect */
<Sprite width={150} height={150} asset="/sprites/[email protected]" x={x} y={y} />

I’ve also tried using a texture and setting its width and height properties, to no avail.

Can you throw me a bone here? Am I missing something?

Cheers!

This version with [email protected] or above throws two kind of errors:

• When start the app:

  Warning: patching react to work with react-pixi

• On every requestAnimationFrame:

  Warning: ReactDebugTool: debugID may not be empty.
  Warning: exception thrown by devtool while handling onSetChildren: Expected onMountComponent() to fire for the child before its parent includes it in onSetChildren().

The first happens always before loading react-pixi. The seccond only if has children.

The createClass monkey-patch breaks in react-three: Izzimach/react-three-legacy#12 so it probably is broken here as well.

For use with om-react-pixi

A new version of React is out.

https://facebook.github.io/react/blog/2016/04/08/react-v15.0.1.html

As shown in this issue for om-react-pixi.

The composite component looks like it is holding on to the previous child (stored in _mountImage) which then gets added in again later, causing the parent component to have two children instead of one.

Is there a way to apply a mask for nested components, or a masking implementation in general? A custom react PIXI component example perhaps?

Something like:

<GraphicPrimitive mask={true}>
  <Sprite image="/img/bear.png" />
</GraphicPrimitive>

Native implementation in PIXI examples

It would be nice if the stage component had a renderer option where I could pass my own renderer to it. This would allow me to use the stage renderer in RenderTexture objects.

As mentioned in this issue there are some infrequent bugs that happen if the default version of React.createClass is used to for custom components wrapping react-pixi components. There is currently a special monkey-patched version ReactPIXI.createClass that works on PIXI elements but not DOM elements. Really there should be one function that handles both properly that can be referenced via React.createClass

Been looking ate the subclasssprite on you examples folder. And I noticed the the CreateCustomPIXIComponent does not exist anymore. Been trying to create a MovieClip component and is alittle bit stuck :). thanks again.

There's a fork that upgraded the peerDependency (https://github.com/Prior99/react-pixi) but things are not rendered within a Stage component with Pixi v4.0.0.

See the issue in react-three for more details. In summary:

1. update to React 0.14
2. remove DOM reference where possible
3. figure out how to make react-pixi and react-three target native OpenGL.

Hello! In the README it's mentioned that react-pixi includes both react and pixi.js but I've found this to not be true. Has this changed recently?

I ask because I'm building a React app from the group up using their create-react-app tool. I had to manually install pixi.js by doing:

npm install pixi.js@~4.0.0 --save

which works great, but now webpack is warning that I'm including a minified file. Maybe I just don't know the magic to get webpack to shut up? Thanks for working on this awesome tool!

One of my components needs some code to be running every tick, but only as long as the component is actually mounted. With react this is quite simple to do by implementing componentDidMount and componentWillUnmount respectively.

I'm not entirely sure if I'm doing anything wrong here..

const MyComponent = CustomPIXIComponent({
  customDisplayObject(props) {
    const container = PIXI.Container(props);
    // do whatever here with the container...
    return container;
  },

  // THESE ARE NEVER CALLED:

  componentWillMount() {
    console.log('CWM');
  },

  componentDidMount() {
    console.log('CDM');
  },

  componentWillUnmount() {
    console.log('CWUM');
  },
});

Are these intended to work with custom PIXI components?
If not, I'll dig into adding support for those.. any hints / suggestions are appreciated :)

I'm currently trying to upgrade to 0.7.1 however it appears that the package is not quite right on NPM. I'm not seeing the react-pixi.js file in the node_modules/react-pixi

This is making my imports fail.

import ReactPixi from 'react-pixi';

Was there a change in usage recently?

Been trying out react-pixi for awhile and so far I've been enjoying it alot. This is not an issue but more of an inquiry on how to use spritesheet with jsxtransform. Thanks in advance.

I'm using ReactRouter with Flux and ReactPIXI.
I started by forking the following repo: https://github.com/jaketrent/demo-react-router-flux and I'm trying to display a stage/container inside a route-handler component (file: books/show.js in our case).

I get the following error message, even though the ReactPIXI component is valid:

Is it possible to access to the game loop? With a hook, for example. I want to add movement to a Sprite, but as I learned with https://github.com/kittykatattack/learningPixi#keyboard-movement, I need to add the velocity movement to the loop.

Thank you.

Looking at the package.json file, I see that we have a hard peerDependency on [email protected]. Can this be relaxed to ~0.14.0 ? I was attempting to use a webpack + react yeoman generator which set up 0.14.1 and the react-pixi install complained about it. As a result I had to fork, bump the version myself and build.

Thanks!

As referenced in #53 it would be nice to get better access to the renderer used in order to support rendering to textures. My (not totally fleshed out) possibility:

• PIXIStage dumps the renderer (default or custom) into the context. Unfortunately this doesn't happen until after mounting, since the renderer needs access to the DOM canvas element.
• Relevant child element 'subscribes' to the renderer in context.
• When renderer gets created and dumped into the context this should trigger a re-render of most (or all?) child elements which can then check the context for the renderer and use it.

Kinda clunky, but then pixi was not written to play well with React so a perfect solution is probably impossible.

It seems impossible to use the PIXI react classes with JSX since they are all factories already. Have I missed something? If not, why is this?

Could you please explain how to work with Graphics component. It will be better if you add the simple example.

:~/react-pixi# npm run build

[email protected] build /root/react-pixi
webpack

Hash: 79ca3733e428f90106fa
Version: webpack 1.13.3
Time: 9832ms
Asset Size Chunks Chunk Names
react-pixi.js 1.42 MB 0 [emitted] main
+ 271 hidden modules

WARNING in .//ify-loader!.//pixi.js/bin/pixi.min.js
Critical dependencies:
8:412-419 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ .//ify-loader!.//pixi.js/bin/pixi.min.js 8:412-419

WARNING in .//pixi.js/bin/pixi.min.js
Critical dependencies:
8:412-419 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ .//pixi.js/bin/pixi.min.js 8:412-419

ERROR in ./src/ReactPIXI.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMultiChild' in /root/react-pixi/src
@ ./src/ReactPIXI.js 45:23-59

ERROR in ./src/ReactPIXI.js
Module not found: Error: Cannot resolve module 'react/lib/ReactUpdates' in /root/react-pixi/src
@ ./src/ReactPIXI.js 53:20-53

ERROR in ./src/ReactPIXIMonkeyPatch.js
Module not found: Error: Cannot resolve module 'react/lib/ReactCompositeComponent' in /root/react-pixi/src
@ ./src/ReactPIXIMonkeyPatch.js 35:31-75

ERROR in ./src/ReactPIXIMonkeyPatch.js
Module not found: Error: Cannot resolve module 'react/lib/ReactReconciler' in /root/react-pixi/src
@ ./src/ReactPIXIMonkeyPatch.js 39:23-59

ERROR in ./src/ReactPIXIMonkeyPatch.js
Module not found: Error: Cannot resolve module 'react/lib/shouldUpdateReactComponent' in /root/react-pixi/src
@ ./src/ReactPIXIMonkeyPatch.js 43:34-81

I'm struggling supplying my own renderer to the Stage in other to solve oblems with textures until this is resolved: #55.

The problem I'm facing is that React doesn't mount the canvas element I supply to the renderer (or the one it automatically generates). Setting the view on the renderer after creation itself as well doesn't work.

Did this work at any time? Am I missing doing it properly?

Thank you for your great work on ReactPIXI in the first place.

I'm trying to catch an event triggered on a PIXI Sprite (clicking a tile for example) outside PIXI Stage, in the React component that renders the Stage. By catching this event, I can update the parent component/other React components.

I have the code below for the sprite object,

var home = { ... interactive:true, cursor: 'pointer', click: $.proxy(linkClick,this,i), touchstart: $.proxy(linkClick,this,i), mouseover: $.proxy(linkHover,this,i), key: '5home'+i+refnumber.toString() };

and this for pushing sprites into DisplayObjectContainer. However, I don't know how can I pass a handler to Container, along with the sprites array.

var appSprites = React.createClass({ displayName:"DynamicSprites", propTypes: { sprites: React.PropTypes.arrayOf(React.PropTypes.object) }, render: function() { var args = [{}]; this.props.sprites.forEach(function(spriteprops) { args.push(Text(spriteprops)); }); return Container.apply(null,args); } });

Is there any way I can do this? Thanks!

A naive question I can answer myself, but wondering if you've tested it already.

Consider bunnymark: http://www.goodboydigital.com/pixijs/bunnymark/

If I ported bunnymark to react-pixi, would it bomb on performance?

I'll be experimenting with it soon, but curious if you've messed with it.

Description

Upgrading our application to use React 15.1.0 or 15.2.1 and react-pixi is broken on line 189 of ReactPIXI.js.

We are getting react-pixi-commonjs.js:272 Uncaught TypeError: prevChild.getNativeNode is not a function

Which I believe matches this line: https://github.com/Izzimach/react-pixi/blob/master/src/ReactPIXI.js#L189. (It's the only place in the react-pixi codebase where we do prevChild.getNativeNode).

Which is inside the moveChild function in the DisplayObjectContainerMixin. We aren't calling this function directly in our codebase. But it gets called from the React lifecycle event componentDidUpdate.

Looks like react-pixi is overriding the updateChildren implementation in ReactMultiChild.js.

Which calls _update_children in ReactMultiChild.js, which in turn calls moveChild function, see: https://github.com/facebook/react/blob/v15.2.1/src/renderers/shared/stack/reconciler/ReactMultiChild.js#L368

It does not look like ReactMultiChild code has changed in any way with the newer releases (15.1, 15.2).

Stack trace:

react-pixi-commonjs.js:272 Uncaught TypeError: prevChild.getNativeNode is not a function

moveChild @ react-pixi-commonjs.js:272
_updateChildren @ ReactMultiChild.js?c87d*:334
updateChildren @ react-pixi-commonjs.js:306
receiveComponent @ react-pixi-commonjs.js:473
receiveComponent @ ReactReconciler.js?6bfa*:131
newReceiveComponent @ react-pixi-commonjs.js:2052
updateChildren @ ReactChildReconciler.js?ff46*:95
_reconcilerUpdateChildren @ ReactMultiChild.js?c87d*:219
_updateChildren @ ReactMultiChild.js?c87d*:316
updateChildren @ react-pixi-commonjs.js:306
perform @ Transaction.js?6dff*:139
PIXIStage_componentDidUpdate @ react-pixi-commonjs.js:422
invokeComponentDidUpdateWithTimer @ ReactCompositeComponent.js?cd59*:66
notifyAll @ CallbackQueue.js?bea8*:68
close @ ReactReconcileTransaction.js?9178*:82
closeAll @ Transaction.js?6dff*:205
perform @ Transaction.js?6dff*:152
perform @ Transaction.js?6dff*:139
perform @ ReactUpdates.js?ce09*:91
flushBatchedUpdates @ ReactUpdates.js?ce09*:174
close @ ReactUpdates.js?ce09*:49
closeAll @ Transaction.js?6dff*:205
perform @ Transaction.js?6dff*:152
perform @ ReactUpdates.js?ce09*:91
flushBatchedUpdates @ ReactUpdates.js?ce09*:174
closeAll @ Transaction.js?6dff*:205
perform @ Transaction.js?6dff*:152
batchedUpdates @ ReactDefaultBatchingStrategy.js?ef70*:64
batchedUpdates @ ReactUpdates.js?ce09*:99
dispatchEvent @ ReactEventListener.js?2365*:151

I'm playing with examples right now and noticed this error:

react-pixi.js:48737
Warning: patching react to work with react-pixi

warning @ react-pixi.js:48737
ReactPIXIMonkeyPatch @ react-pixi.js:48948
(anonymous function) @ react-pixi.js:48017
__webpack_require__ @ react-pixi.js:21
(anonymous function) @ react-pixi.js:58
__webpack_require__ @ react-pixi.js:21
(anonymous function) @ react-pixi.js:41
(anonymous function) @ react-pixi.js:44
jsxtransform.html:29
Uncaught ReferenceError: jsxtransformstart is not defined
(anonymous function) @ jsxtransform.html:29

It happens when I'm trying to run JSX transformed code example.
p.s.: all tests are passing on my machine

Hi, @Izzimach, was just curious about what your plans are for releasing a new version? I was considering submitting a similar a patch for the PIXI.Rectangle type as well and hopefully get it in before release?

Using webpack.DefinePlugin as described here

Not sure if bug or doing something wrong, but when i use react-layout with latest react and try to render stage component via:

ReactLayout.render(ExampleStage)

i get an error (only when react-pixi loaded)

Uncaught TypeError: Cannot read property 'firstChild' of undefined

this works fine:

React.render(<ExampleStage />, document.body);

Also get a warning in console beforehand for both cases:

Warning: patching react to work with react-pixi

does the patching break compatibility with other versions?

In all the examples the image property of a sprite is set via a path to a png. Is there a way to set it to a PIXI.Texture?

Do you know if react-pixi makes use of React's Shadow Dom?

More of a question - you say the events don't feed into React's event system but isn't that system just for DOM events and the nature of them, React wants to autodelegate to the root and let them all bubble there? Do PIXI events bubble? I'm wondering what the benefit of putting them in that system would be. Custom events in React are just use single listener "callbacks" like you said.

I've found that I can create a new PIXI.Point and set it as the tilePosition of a TilingSprite but was wondering if you've thought about maybe making tilePositionX/tilePositionY properties to allow passing in simple integers as props?

I'm definitely available to work on a PR if this is something you would be into.