npm install --save react-scene
React Scene is a component that expose different methods to handle a typic scene logic.
The methods are:
load
Load everything that has to be loadedbuild
Build the scene (if you need to create or rend any object)resize
Resize the scene. It is also automatically called when thewidth
orheight
props change on the scenemute
To mute the sceneunmute
To unmute the sceneplay
Play the scenepause
Pause the sceneend
End the scenedestroy
Destroy any resources
Each method can be synchronous or asynchronous and will trigger lifecycle methods on the parent listening to them. Those lifecycles methods are in the following format sceneWill[Method]
and sceneDid[Method]
(Ex: sceneWillLoad
, sceneDidLoad
)
var React = require('react');
var ReactScene = require('react-scene');
var createjs = require('preload-js');
var Scene = React.createClass({
render: function()
{
return (
<div>
</div>
);
},
/**
* Scene methods
*/
load: function(e)
{
// Methods can be asynchronous by either calling the async method
// on the first argument. The async method returns a function
// that needs to be called when the action is done. Or you can
// also return a promise and it will automatically wait for the
// promise completion before calling sceneDidLoad
var done = e.async();
this.preloadQueue = new createjs.LoadQueue();
this.preloadQueue.addEventListener('complete', done);
this.preloadQueue.loadFile({
id: 'photo',
src: '/photo.jpg'
});
},
build: function(e)
{
},
resize: function(e)
{
},
mute: function(e)
{
},
unmute: function(e)
{
},
play: function(e)
{
var that = this;
setTimeout(function()
{
// If you need to control a scene within a scene. There is a scene
// props containing the scene methods. Calling the `end` when the
// playback is done is a good example.
that.props.scene.end();
}, 2000);
},
pause: function(e)
{
},
end: function(e)
{
},
destroy: function(e)
{
}
});
// Calling createScene with the Component as the first argument, will wrap
// your scene component in a ReactScene Component and assure that the methods
// you define will be called and the corresponding lifecycle methods.
module.exports = ReactScene.createScene(Scene);
var React = require('react');
var Scene = require('./Scene');
var Story = React.createClass({
render: function()
{
return (
<div>
<Scene
sceneWillLoad={this.onSceneWillLoad}
sceneDidLoad={this.onSceneDidLoad}
sceneWillPlay={this.onSceneWillPlay}
sceneDidPlay={this.onSceneDidPlay}
/>
</div>
);
},
onSceneWillLoad: function()
{
console.log('Scene will load');
},
onSceneDidLoad: function()
{
console.log('Scene did load');
},
onSceneWillPlay: function()
{
console.log('Scene will play');
},
onSceneDidPlay: function()
{
console.log('Scene did play');
}
});
module.exports = Story;
var React = require('react');
var Scene = require('./Scene');
var Story = React.createClass({
getInitialState: function()
{
return {
remote: null
};
},
render: function()
{
return (
<div>
<div>
<button type="button" onClick={this.onClickPlay}>Play</button>
</div>
<Scene
ref="scene"
onRemote={this.onRemote}
sceneWillLoad={this.onSceneWillLoad}
sceneDidLoad={this.onSceneDidLoad}
sceneWillPlay={this.onSceneWillPlay}
sceneDidPlay={this.onSceneDidPlay}
sceneWillEnd={this.onSceneWillEnd}
sceneDidEnd={this.onSceneDidEnd}
/>
</div>
);
},
onClickPlay: function(e)
{
e.preventDefault();
// Scene methods can be called either by using a `ref`
this.refs.scene.play();
// or using the remote provided by the `onRemote`
this.state.remote.play();
},
onRemote: function(remote)
{
// When providing an onRemote props to a scene, the function
// is called with a remote object as the first argument. This
// object has every scene methods. It can be stored in the state
// for later use.
this.setState({
remote: remote
});
},
onSceneWillLoad: function()
{
console.log('Scene will load');
},
onSceneDidLoad: function()
{
console.log('Scene did load');
},
onSceneWillPlay: function()
{
console.log('Scene will play');
},
onSceneDidPlay: function()
{
console.log('Scene did play');
},
onSceneWillEnd: function()
{
console.log('Scene will end');
},
onSceneDidEnd: function()
{
console.log('Scene did end');
}
});
module.exports = Story;