I am starting for game developing with using react-game-kit about react-game-kit

[micahkatz]

@kjin9174 your body has to be inside of loop and stage and world. You should read the documentation in the readme

[kjin9174]

thanks, Could you write code for very simple animation here,sir?
I don't understand, sorry.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import intro from './assets/intro.png';
import './App.css';
import { Loop, Stage, World, Body } from 'react-game-kit';
import PropTypes from 'prop-types';
import{ AudioPlayer} from 'react-game-kit';

export default class Intro extends Component {
static propTypes = {
onStart: PropTypes.func,
};

constructor(props) {
super(props);

this.state = {
  blink: false,
};

this.startUpdate = this.startUpdate.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);

}

componentDidMount() {
this.startNoise = new AudioPlayer('/assets/start.wav');
window.addEventListener('keypress', this.handleKeyPress);
this.animationFrame = requestAnimationFrame(this.startUpdate);
this.interval = setInterval(() => {
this.setState({
blink: !this.state.blink,
});
}, 500);
}

componentWillUnmount() {
window.removeEventListener('keypress', this.handleKeyPress);
cancelAnimationFrame(this.animationFrame);
clearInterval(this.interval);
}

render() {
return (

<p
className="start"
style={{ display: this.state.blink ? 'block' : 'none' }}
>
Press Start

);
}

startUpdate() {
this.animationFrame = requestAnimationFrame(this.startUpdate);
}

handleKeyPress(e) {
if (e.keyCode === 13) {
this.startNoise.play();
this.props.onStart();
}
}
}

this code is working

But what import code should i use for using tags in react-game-kit?????

[micahkatz]

Read this in order to better understand how this library works

[kjin9174]

I've already read it.
But i don't understand,sir. sorry.
Could you send here for simple animation code to me?

[micahkatz]

what do you need to animate?

[kjin9174]

right going and left going animation,sir

[kjin9174]

with using
How should i import?
import { Loop, Stage, ...etc } from 'react-game-kit/native'; is not working in my end. error is coming
help me,sir

[kjin9174]

i need your code of this format.sir
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import intro from './assets/intro.png';
import './App.css';
import { Loop, Stage, World, Body } from 'react-game-kit';
import PropTypes from 'prop-types';
import{ AudioPlayer} from 'react-game-kit';

export default class Intro extends Component {
static propTypes = {
onStart: PropTypes.func,
};

constructor(props) {
super(props);

this.state = {
  blink: false,
};

this.startUpdate = this.startUpdate.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);

}

componentDidMount() {

window.addEventListener('keypress', this.handleKeyPress);
this.animationFrame = requestAnimationFrame(this.startUpdate);
this.interval = setInterval(() => {
  this.setState({
    blink: !this.state.blink,
  });
}, 500);

}

componentWillUnmount() {
window.removeEventListener('keypress', this.handleKeyPress);
cancelAnimationFrame(this.animationFrame);
clearInterval(this.interval);
}

render() {
return (

<img className="intro" src={intro} style={{height:500, width:800}}/>
<p
className="start"
style={{ display: this.state.blink ? 'block' : 'none' }}
>
Press Start

);
}

startUpdate() {
this.animationFrame = requestAnimationFrame(this.startUpdate);
}

handleKeyPress(e) {
if (e.keyCode === 13) {

}

}
}

[micahkatz]

what are you animating?

[kjin9174]

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import intro from './assets/intro.png';
import './App.css';
import { Loop, Stage, World, Body, Sprite } from 'react-game-kit';
import PropTypes from 'prop-types';
import{ AudioPlayer} from 'react-game-kit';

class App extends Component {
static contextTypes = {
loop: PropTypes.object,
};

loop = () => {
//Do stuff here
};

componentDidMount() {
this.loopID = this.context.loop.subscribe(this.loop);
}

componentWillUnmount() {
this.context.loop.unsubscribe(this.loopID);
}

render() {
return (

<Sprite
repeat={true}
src="./assets/intro.png"
scale={this.context.scale * 2}
state={0}
steps={[9, 9, 0, 4, 5]}
/>
);
}
}

export default App;

this is my code of app.js of my new react app. but it is not working.
so i need to know how i should fix.

[ryan-roemer]

Closing as we don't have a specific issue here, and it's been a while :)