react-webgl.js v0.0.1

react-webgl.js 是一款面向 Web 开发者 的游戏开发框架，能够快速创建 H5 以及 微信小游戏。其 目标 是为了 降低游戏开发门槛，能以 最低的学习成本 即可开始游戏的开发。

• 上层 API 基本上以 React 相同，这里就不再重复写文档了，如果有发现什么地方错误或不同，请随时联系我 或者 提 issue 参与共建。下面就主要列举下一些异同点。

• 由于渲染层为 PIXI，因此游戏中更多的功能可以直接使用 PIXI 来处理，例如加载资源等。后续这部分期望能封装成可易用的 游戏组件库，更易用且降低学习成本。

安装

npm i react-webgl.js pixi.js

游戏创建

• 配置 JSX

// 打包工具中的 babel loader 配置
use: {
	loader: 'babel-loader',
	options: {
		plugins: [["transform-jsx", { 
		    "function": "ReactWebGL.createElement",
		    "useVariables": true
		}]],
	}
}

• gameRender(Component): 创建游戏`

import * as ReactWebGL from 'react-webgl.js'

const { Component, gameRender } = ReactWebGL
class Game extends Component {
    public render() {
        return (
            <Container>Game</Container>
        )
    }
}

gameRender(<Game />)

属性机制

1. 属性同步

除了一些特殊属性，标签上的属性都会被直接设置到真实创建的元素上。例如:

<Text x={100} y={100}>Text</Text>

2. 事件绑定

标签中可直接使用 on${事件名} 进行事件监听，例如:

import * as ReactWebGL from 'react-webgl.js'

const { Component, Text } = ReactWebGL
class App extends Component {
    public render() {
        return (
            <Text ontap={this.tapHandler}>按钮</Text>
        )
    }
    public tapHandler = (ev) => {
        console.log('点击按钮了！')
    }
}

• 回调函数

1. ev.stopPropagation: 阻止冒泡；
2. ev.delta: 事件增量；

• 支持事件:

• touchstart: 触摸事件开始

• touchmove: 触摸划动
• touchend: 触摸结束
• shorttap: 短点击，建议使用。
• tap: 短点击，swipe 系列事件会同时触发。
• longtap: 长按
• swipeleft: 左划
• swiperight: 右划
• swipeup: 上划
• swipedown: 下划
• drag: 拖动事件
• pinch: 双指缩放事件
• rotate: 双指旋转事件
• singlepinch: 单指缩放
• singlerotate: 单指旋转

内建标签

内置的元素标签，对应游戏开发中的各种元素，不同标签 拥有 不同的特殊属性。

1. <Container>

容器，无法设置宽高，完全由子级内容撑开。

2. <Sprite src={imageSrc} >

图片元素，特殊属性:

• src: string | PIXI.Texture，图片资源；

  	- 1、 由 `PIXI.Loader.shared` 加载好的资源对应的 `name`；
  
  	- 2、 图片路径；
  
  	- 3、 `PIXI.Texture`

3. <AnimatedSprite src={['image1', 'image2']}>

帧动画元素， 特殊属性:

• src: string | string[] | PIXI.Texture[]，图片资源，

  	- 1、 由 `PIXI.Loader.shared` 加载好的资源对应的 `name` 的 **数组合集** 或 **组合字符串(逗号隔开)**
  
  	- 2、 图片路径 **数组合集**
  
  	- 3、 `PIXI.Texture` **数组合集**

• loop: boolean，是否循环播放， default: true；

• speed: number，播放速率，每秒帧数；

4. <Text>

文字元素，可通过 style 设置文字样式；

5. <Rect>

矩形元素，特殊属性:

• backgroundColor: number | string，矩形背景色；

• backgroundAlpha: number，背景色透明度，0 ~ 1；

• borderWidth: number，矩形边框宽度；

• borderColor: number | string，矩形边框颜色；

• borderRadius: number，矩形圆角；

6. <Circle>

圆形元素，特殊属性:

• backgroundColor: number | string，矩形背景色；

• backgroundAlpha: number，背景色透明度，0 ~ 1；

• borderWidth: number，矩形边框宽度；

• borderColor: number | string，矩形边框颜色；