Comments (17)
Can you show your code? I'm using Matter with React 16.11.0 and RN0.62.2. Gravity is working for me.
from react-native-game-engine.
Physics.js
`import Matter from "matter-js";
const Physics = (entities, { touches, time }) => {
let engine = entities.physics.engine;
console.log(engine);
// Matter.Engine.update(engine, time.delta);
Matter.Body.translate(entities['dinosaur'].body, { x: +1, y: +1 });
Matter.Engine.update(engine, time.delta);
return entities;
};
export default Physics;`
and app here
`export default class App extends PureComponent {
constructor(props) {
super(props);
this.state = {
running: true
};
this.gameEngine = null;
this.entities = this.setupWorld();
}
setupWorld = () => {
// Matter.Common.isElement = () => false;
let engine = Matter.Engine.create({ enableSleeping: false });
let world = engine.world;
world.gravity = { x: 0, y: 2 };
let dinosaur = Matter.Bodies.rectangle(Constants.MAX_WIDTH * 0.22, Constants.MAX_HEIGHT * 0.50, 50, 50, { isStatic: false, isSleeping: false });
// let floor = Matter.Bodies.rectangle(0, Constants.MAX_HEIGHT * 0.72, Constants.MAX_WIDTH, 1, { isStatic: true });
Matter.World.add(world, [dinosaur]);
return {
physics: { engine: engine, world: world },
// floor: { body: floor, size: [Constants.MAX_WIDTH, 1], color: 'blue', renderer: <Floor /> },
dinosaur: { body: dinosaur, size: [50, 50], color: 'green', renderer: Dinosaur },
}
}
render() {
return (
<View style={styles.container}>
<GameEngine
ref={(ref) => { this.gameEngine = ref; }}
style={styles.gameContainer}
running={this.state.running}
systems={[Physics]}
entities={this.entities}
>
<StatusBar hidden={true} />
</GameEngine>
</View>
);
}
}`
from react-native-game-engine.
Have you tried to set just the y-gravity? The x-gravity defaults to 0 so you can skip that.
world.gravity.y = 2;
Also what does this do in Physics.js? Can you try to comment out this line and see if it works?
Matter.Body.translate(entities['dinosaur'].body, { x: +1, y: +1 });
from react-native-game-engine.
from react-native-game-engine.
Hi @sovanminea - can you show us your code for the Dinosaur
component?
from react-native-game-engine.
hi @bberak here it is
`
export default class Dinosaur extends PureComponent {
render() {
const width = this.props.size[0];
const height = this.props.size[1];
const x = this.props.body.position.x - width / 2;
const y = this.props.body.position.y - height / 2;
return (
<View
style={{
position: "absolute",
left: x,
top: y,
width: width,
height: height,
backgroundColor: this.props.color
}} />
);
}
}
`
from react-native-game-engine.
Hmmm that looks okay.. As @yuenlye mentioned - have you tried uncommenting this line:
Matter.Body.translate(entities['dinosaur'].body, { x: +1, y: +1 });
Also, maybe try give the dinosaur body a mass
- some physics engines will consider bodies with a mass of zero as static.
As a last resort, you can try create a snack of your app - that will help us debug (but do this last).
from react-native-game-engine.
Hi @sovanminea,
Could this be a similar issue to: #56 (comment)
A quick way to test this would be to extend Dinosaur from React.Component
rather than React.PureComponent
.
from react-native-game-engine.
hey, i use
react-native-cli: 2.0.1
react-native: 0.60.5
same problem, its indeed rendering problem i think, since i log the body position and its changing, but whatever i've done it seems its to no avail, is there any example to use the setState for this case?, since i automatically move the object from system rather than controlling it with button or something
from react-native-game-engine.
@Solid-Metal Don't really have the exact solution, but you can check out my code skeleton. I used the accelerometer to update the x position of a body.
Or you can try to dispatch an event in system and update the body position in the event handler?
from react-native-game-engine.
Hey @Solid-Metal,
Can you share your renderer code?
from react-native-game-engine.
hey sorry for the late reply, heres my renderer
class Claw extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
const x = this.props.position[0];
const y = this.props.position[1];
return (
<View style={[styles.claw, { left: x * this.props.size, top: y * this.props.size }]}>
<Image source={require('../../assets/images/gamification/crane.png')}/>
</View>
);
}
}
export { Claw };
from react-native-game-engine.
Hmm @Solid-Metal,
That looks fine - you're extending Component
rather than PureComponent
, so Claw should rerender on every frame..
Can you try change Claw to a functional component:
function Claw(props) {
const x = props.position[0];
const y = props.position[1];
return (
<View style={[styles.claw, { left: x * props.size, top: y * props.size }]}>
<Image source={require('../../assets/images/gamification/crane.png')}/>
</View>
);
}
export { Claw };
from react-native-game-engine.
hey @bberak just trying it out, and it didnt work, still same problem, the matterjs physics body itself is moving, but not the image, even if i forcefully to moving it out using the position it just updating that renderer but not the physics
is there any chance it cause by the styling here [styles.claw, { left: x * props.size, top: y * props.size }]
?
from react-native-game-engine.
Hmmm @Solid-Metal,
How come you are multiplying x and y by props.size?
Can you try and add this to your function/render method to see the values:
console.log(x * props.size, y * props.size)
Also, I've got a similar example in the handbook project that might be useful to compare with: https://github.com/bberak/react-native-game-engine-handbook/blob/master/app/physics/rigid-bodies/renderers.js
from react-native-game-engine.
sorry for late reply
yeah, i'm an idiot lol, i didn't pay attention to your handbook renderer function, i forgot to put the transform and rotation to the sprite, it now works well !
from react-native-game-engine.
Awesome @Solid-Metal - glad you got it working 👍
from react-native-game-engine.
Related Issues (20)
- Touch array is empty in iOS HOT 1
- Functions not in TypeScript definition files HOT 8
- How can i catch in Entity onPress event and value on System.js HOT 3
- Custom fonts used inside GameEngine not working
- Default timer doesn't stop when calling `.stop()` HOT 3
- Nested entity property change doesn't trigger rerender process HOT 3
- How to use TouchEvent for continious handelrs? HOT 1
- Systems functions
- FPS issues HOT 9
- Add animation for moving HOT 10
- Best Way to handle touch as directional control HOT 3
- Support for Expo SDK 43, 44, 45 HOT 7
- Cant handle multitouch operations and it is really slow HOT 4
- How to change Game Engine's coordinate ?
- Tilemap free pan
- while dragging create line like WordSearch game
- What type of game can i build???
- is there anyone who is maintaining this library yet? HOT 2
- GameEngine re-rendering on entities change HOT 3
- Types not importing; not a real fix, but raising the issue 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-native-game-engine.