search

FormidableLabs / react-game-kit

Component library for making games with React & React Native
http://reactnext.surge.sh
MIT License
4.61k stars 306 forks source link

Return a map of Bodies from an array #49

Open micahkatz opened 6 years ago

micahkatz commented 6 years ago

I am making a sidescrolling game, and I am rendering multiple enemies in random positions. I am working with the onCollide function so I can easily implement player/enemy collision without messing with pixels and all that jazz. The problem is that when I map an array of random points and for each index, return one custom enemy object, I can't change the reference to the body(The "this.body = b" prop) on each index. This results in each body rendering at the same point and collisions not being logged. It has to be a body in order to calculate the collisons. I am considering moving to p2 physics for their bodies and keeping sprites and other parts of this library unless I find an efficient solution for this. Thanks in advance

kjin9174 commented 6 years ago

You are wonderful. I am starting game making with using react-game-kit I've already installed nodejs.exe and executed "npm install react-game-kit --save" in command prompt Then How should i start developing for react game. I am nodejs amateur. so want you explain simply.Thanks

micahkatz commented 6 years ago

@kjin9174 I am using react native (the mobile development version of react) and you are using react(the web version) Our code will be similar, but not exactly the same. I am not going to write you a full-out checklist or anything, because the real triumph is learning how to come up with those steps yourself. To start, know your vocabulary. React is also known as "ReactJS" because it is written in JavaScript, and JavaScript has nothing to do with Java. Node is, from my understanding, is basically the way in which you can install external libraries and other people's addons such as this game kit. In order to make an app or website, you probably will use one or more libraries and will need to read the "Docs." This is essential, because each library has it's own uses and specifications you will need to adhere to. I would advise starting small, maybe making an extremely simple flappy bird game. Work up to making whatever game you are wanting to create. React is a big learning curve, but it is very do-able. A library called MobX is a very helpful library in javascript due to its easily modifiable global variables(state.) Good Luck!

micahkatz commented 6 years ago

I still need help though. If anyone knows a solution to my problem that would be appreciated

ryan-roemer commented 6 years ago

@katzmannn -- Can you give us a code sample of what you're trying to do to help with more specificity for our understanding of the issue? Thanks!

Either code snippets here if apparent, or create a minimal repo with what you're trying to do and getting stuck on (and actually using react web would be preferable for ease of diagnosis, but RN's ok too). Then provide install + running steps + what to look for going wrong.

kjin9174 commented 6 years ago

Thanks for your reply. I tried myself. But it is not working. I gonna make image animation first. I run localhost:3000 I have already created app: okan So i got react static screen by localhost:3000 I wanna use demo and samples of https://github.com/FormidableLabs/react-game-kit by customizing okan/src/app.js my first example code is below import React, { Component } from 'react'; import { Loop, Stage,World, Body, MySprite } from 'react-game-kit'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types';

class Game extends Component { render() { return ( <Body args={[0, 384, 64, 64, { inertia: Infinity }]} ref={(b) => { this.body = b; }}

); } }

export default Game;

but this is error TypeError: Cannot read property 'world' of undefined new Body C:/Program Files/nodejs/node_modules/react-game-kit/lib/components/body.js:48 45 | options = _objectWithoutProperties(props, ['args', 'children', 'shape']); // eslint-disable-line no-unused-vars 46 | 47 | _this.body = _matterJs.Bodies[shape].apply(_matterJs.Bodies, _toConsumableArray(args).concat([options]));

48 | _matterJs.World.addBody(context.engine.world, _this.body); 49 | return _this; 50 | } 51 | View compiled constructClassInstance C:/Program Files/nodejs/okan/node_modules/react-dom/cjs/react-dom.development.js:6355 6352 | var unmaskedContext = getUnmaskedContext(workInProgress); 6353 | var needsContext = isContextConsumer(workInProgress); 6354 | var context = needsContext ? getMaskedContext(workInProgress, unmaskedContext) : emptyObject; 6355 | var instance = new ctor(props, context); 6356 | adoptClassInstance(workInProgress, instance); 6357 | 6358 | // Cache unmasked context so we can avoid recreating masked context unless necessary. View compiled updateClassComponent C:/Program Files/nodejs/okan/node_modules/react-dom/cjs/react-dom.development.js:7839 7836 | if (current === null) { ........................

It seems like that i don't know method that use tags of react-game-kit package If react-game-kit tags is working in my app.js, then i want to build for displaying my hosting webserver. But i don't know well cause i am amateur. Thanks for your advise.

ryan-roemer commented 6 years ago

@kjin9174 is your query related to @katzmannn 's issue with multiple bodies or do you have a separate issue / are you just trying to learn react-game-kit? If the latter, can you either open a new issue or maybe ask on stack overflow to get help? Thanks!

kjin9174 commented 6 years ago

ok,cool

micahkatz commented 6 years ago

image basically, I just want to be able to change the ref to enemy1, enemy2, etc... for each step of an array something like ref={(b) => {enemy{index} = b}}

micahkatz commented 6 years ago

actually I solved it. funny how that happens. Basically i made an array and did this

image

i can reference it by doing this.props.store.enemies[0].body

micahkatz commented 6 years ago

wait nevermind, this actually creates infinite enemies lmao

micahkatz commented 6 years ago

How do you do this? is there another way to do ref?

ryan-roemer commented 6 years ago

@katzmannn -- I'm not quite following. Can you open up a minimal repository with install + error reproduction steps so we can jump in and see what's going wrong? Will greatly help us diagnose the core issue!

micahkatz commented 6 years ago

@ryan-roemer I am basically trying to render bodies in an array. How would I approach this