Return a map of Bodies from an array #49

micahkatz · 2017-11-30T14:57:32Z

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 · 2017-12-01T01:02:56Z

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 · 2017-12-01T06:55:09Z

@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 · 2017-12-01T06:56:41Z

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

ryan-roemer · 2017-12-01T19:14:17Z

@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 · 2017-12-02T01:08:24Z

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 · 2017-12-02T01:55:59Z

@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 · 2017-12-02T01:58:20Z

ok,cool

micahkatz · 2017-12-03T00:21:19Z

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 · 2017-12-03T00:29:12Z

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

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

micahkatz · 2017-12-03T00:49:30Z

wait nevermind, this actually creates infinite enemies lmao

micahkatz · 2017-12-06T07:59:08Z

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

ryan-roemer · 2017-12-06T23:08:02Z

@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 · 2017-12-19T17:56:10Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Return a map of Bodies from an array #49

Return a map of Bodies from an array #49

micahkatz commented Nov 30, 2017

kjin9174 commented Dec 1, 2017

micahkatz commented Dec 1, 2017 •

edited

Loading

micahkatz commented Dec 1, 2017

ryan-roemer commented Dec 1, 2017

kjin9174 commented Dec 2, 2017

ryan-roemer commented Dec 2, 2017

kjin9174 commented Dec 2, 2017

micahkatz commented Dec 3, 2017 •

edited

Loading

micahkatz commented Dec 3, 2017

micahkatz commented Dec 3, 2017

micahkatz commented Dec 6, 2017

ryan-roemer commented Dec 6, 2017

micahkatz commented Dec 19, 2017

Return a map of Bodies from an array #49

Return a map of Bodies from an array #49

Comments

micahkatz commented Nov 30, 2017

kjin9174 commented Dec 1, 2017

micahkatz commented Dec 1, 2017 • edited Loading

micahkatz commented Dec 1, 2017

ryan-roemer commented Dec 1, 2017

kjin9174 commented Dec 2, 2017

ryan-roemer commented Dec 2, 2017

kjin9174 commented Dec 2, 2017

micahkatz commented Dec 3, 2017 • edited Loading

micahkatz commented Dec 3, 2017

micahkatz commented Dec 3, 2017

micahkatz commented Dec 6, 2017

ryan-roemer commented Dec 6, 2017

micahkatz commented Dec 19, 2017

micahkatz commented Dec 1, 2017 •

edited

Loading

micahkatz commented Dec 3, 2017 •

edited

Loading