Hello everyone 馃憢
I am trying to rotate one of my elements on the screen and I do this with Matter.js and react-native-game-engine all together.
I have the following logic:
Count angle for rotation manually => set this angle to the Matter.js body => achieve this newly set angle inside my render via props => trying to rotate my View with transform.
So everything works well until the last step when I am trying to rotate my View. It is not rotating at all, but Matter.js body has newly set angle. I think the issue can be inside rendering logic, but still not sure. Tried a lot of solutions already. Any help is appreciated.
This is my code:
This is my renderer component
const Dolphin = props => {
const width = props.size[0];
const height = props.size[1];
const x = props.body.position.x - width / 2;
const y = props.body.position.y - height / 2;
return (
<View
style={[
{
position: 'absolute',
width,
height,
backgroundColor: props.color,
transform: [{ rotate: `${parseInt(props.body.angle)}deg` }],
},
{ left: x, top: y },
]}
>
<Text color="white">{props.title}</Text>
</View>
);
};
This is how I set angle with Matter.js:
onPress={event => {
event.persist();
const dolphin = gameEngineRef.current.state.entities.dolphin;
const pressEventX = event.nativeEvent.locationX;
const pressEventY = event.nativeEvent.locationY;
const angle = countAngle(40, 40, pressEventX, pressEventY);
Matter.Body.setAngle(dolphin.body, angle);
}}
Hello everyone 馃憢
I am trying to rotate one of my elements on the screen and I do this with
Matter.jsandreact-native-game-engineall together.I have the following logic:
Count angle for rotation manually => set this angle to the
Matter.jsbody => achieve this newly set angle inside my render via props => trying to rotate myViewwithtransform.So everything works well until the last step when I am trying to rotate my
View. It is not rotating at all, butMatter.jsbody has newly set angle. I think the issue can be inside rendering logic, but still not sure. Tried a lot of solutions already. Any help is appreciated.This is my code:
This is my renderer component
This is how I set angle with
Matter.js: