react-webgl.js

一款让前端工程师快速起飞的游戏框架

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('点击按钮了！')
    }
}

• 回调函数

Property	Type	Description
ev	Object	事件对象

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，矩形边框颜色；