search

evilfer / react-phaser

Other
101 stars 16 forks source link

Thoughts on binding body velocity? #5

Open pradeeproark opened 7 years ago

pradeeproark commented 7 years ago

@evilfer I was wondering whether it was possible to expose velocity property in sprite body for binding. So you can bind it to state values instead of directly setting it on context nodes.

I noticed that you have exposed body properties as prefixed properties https://github.com/evilfer/react-phaser/blob/master/src/impl/properties/custom/body.js#L9-L10

How do you extend this to support velocity which it itself a object with x/y properties.?

Also is it possible to have body as a nested property of sprite with all attributes of physics body exposed on it instead of using prefixed approach.

<sprite>
<body>
   <velocity x={this.state.playerXVelocity}/>
</body>
</sprite>
evilfer commented 7 years ago

I think "prefixed properties" do exactly the opposite to what you want: they are props of a node that affect Phaser attributes of children objects.

You can create a new "velocity" tag, which wouldn't really have any own Phaser object (in contrast with the "body" tag). Your velocity tag can do whatever it wants with its properties, including getting the parent node, and making changes to it.

None of the helpers in https://github.com/evilfer/react-phaser/blob/master/src/impl/properties/utils.js does this currently automatically, but you can use "generateCustomPropMap", and create functions that modify the parent body velocity.

evilfer commented 7 years ago

Here's one (slightly convoluted) example:

https://github.com/evilfer/react-phaser/blob/master/src/impl/types/graphics/create-graphics-item.js#L7

create-graphics-item.js implements a tag generator. It's used to create all the children tags that can be added to a <graphics>, e.g. <rect>. These children tags, like your <velocity>, do not have their own Phaser object. Instead, they grab their (<graphics>) parent's Phaser object and make changes on it.

pradeeproark commented 7 years ago

Understood, Velocity as a tag appears to be excessive. However having a body as a nested component might be syntactically better as they body properties would live on it, instead of prefixed properties on sprite.

For now I added velocity to the list at https://github.com/evilfer/react-phaser/blob/master/src/impl/properties/custom/body.js#L10 and able to bind velocity as a point object from state values which solves my original goal.