React Native Cocos2dx (remobile)
A react-native wrapper cocos2dx html5
Installation
npm install @remobile/react-native-cocos2dx --save
Usage
Example
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
StyleSheet,
View,
} = ReactNative;
var resolveAssetSource = require('resolveAssetSource');
var Cocos2dx = require('@remobile/react-native-cocos2dx');
module.exports = React.createClass({
renderCocos2dx() {
return (res, transProps)=> {
cc.game.onStart = function(){
var MyScene = cc.Scene.extend({
alert(transProps.text);
onEnter:function () {
this._super();
var size = cc.director.getWinSize();
var sprite = cc.Sprite.create(res.img.qq);
sprite.setPosition(size.width / 2, size.height / 2 - 200);
sprite.setScale(0.8);
this.addChild(sprite, 0);
var sprite = cc.Sprite.create(res.img.weixin);
sprite.setPosition(size.width / 2, size.height / 2);
sprite.setScale(0.8);
this.addChild(sprite, 0);
var label = cc.LabelTTF.create("Hello World", "Arial", 40);
label.setPosition(size.width / 2, size.height / 2 + 200);
label.setColor(255, 0,255);
this.addChild(label, 1);
}
});
cc.director.runScene(new MyScene());
};
cc.game.run();
}
},
render () {
const resource = {
img: {
qq: resolveAssetSource(require('./img/qq.img')).uri,
weixin: resolveAssetSource(require('./img/weixin.img')).uri,
}
};
return (
<View style={styles.container}>
<Cocos2dx
render={this.renderCocos2dx()}
resource={resource}
transProps={{text: 'I am from react-native'}}
width={sr.tw}
height={sr.tch}
/>
</View>
);
},
});
var styles = StyleSheet.create({
container: {
flex: 1
},
});
Screencasts
Props
-
width: PropTypes.number
canvas width -
height: PropTypes.number
canvas height -
showFPS: PropTypes.boolean
default: false -
frameRate: PropTypes.number
default: 60 -
renderMode: PropTypes.number
{0:default
, 1:canvas
, 2:webgl
} default is 1:canvas
-
resource: PropTypes.object
must beresolveAssetSource(require('xx.png')).uri
-
transProps: PropTypes.any
pass props from react-native to cocos2dx -
render: PropTypes.function
the main logic funciton of cocos2dx- it return a nickname funciton like:
(res, transProps)=> {...}
- res android params in cocos2dx code is global variables
- it return a nickname funciton like:
-
onCocos2dxMessage: PropTypes.function
params is data passed from cocos2dx code- in cocos2dx code, we add a method
cc.sendMessage(data)
for cc
- in cocos2dx code, we add a method
Develop with project
mkdir for cocos2dx code and resource
remobile-cocos2dx-render
cocos2dx code directory must be
remobile-cocos2dx-resource
cocos2dx resource directory must be - see example
add command
- add package.json script like:
"scripts": {
"genres": "genccresource modules/remobile/react-native-cocos2dx/remobile-cocos2dx-resource modules/remobile/react-native-cocos2dx/remobile_cocos2dx_resource.js",
"genrender": "genccrender modules/remobile/react-native-cocos2dx/remobile-cocos2dx-render modules/remobile/react-native-cocos2dx/remobile_cocos2dx_render.js",
"genrender:dev": "npm run genrender dev"
}
-
genccresource
sourceDir targetFile -
genccrender
sourceDir targetFile - run
npm run genres
, will create a tmp filemodules/remobile/react-native-cocos2dx/remobile_cocos2dx_resource.js
, you will keep it ignore for git. - run
npm run genrender
, will create a tmp filemodules/remobile/react-native-cocos2dx/remobile_cocos2dx_render.js
, you will keep it ignore for git. - we will require
remobile_cocos2dx_resource.js
andremobile_cocos2dx_render.js
for render and resource
Fix ReactNative Packer
- In android release version, we need packer cocos2dx resource files in res/raw folder
- modify
node_modules/react-native/local-cli/bundle/assetPathUtils.js:30
...
30: const androidFolder = 'drawable-' + suffix; // <------ replace here
31: return androidFolder;
...
35 var folderPath = getBasePath(asset);
36 return (folderPath + '/' + asset.name) // <------ replace here
37 .toLowerCase()
replace with
...
30: const isImage = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(asset.type) !== -1; // <------ add
31: const isCocos2dxResource = asset.httpServerLocation.split('/').indexOf('remobile-cocos2dx-resource') !== -1; // <------ add
32: const androidFolder = isImage && !isCocos2dxResource ? 'drawable-' + suffix : 'raw'; // <------ add
33: return androidFolder;
...
37 var folderPath = getBasePath(asset);
38 return (folderPath + '/' + asset.name + '_' + asset.type) // <------ add
39 .toLowerCase()