p5.we

p5.we is a boilerplate to develop Wechat Mini Game using p5.js.

Usage

Just clone the project, and start forking. There are some examples in sketch directory.

Only need very a few changes from the original p5.js example.

Examples PR are always welcome!

Code structure

|
├── libs
│   ├── symbol.js           // ES6 Symbol
│   └── weapp-p5js-adapter  // WeChat Mini Game p5js-adapter
│       ├── xxx.js   
│
├── sketch  
│   ├── xxx.js              // p5 example sketch
│
└── game.js                 // main game enter

weapp-p5js-adapter

p5.we contains "weapp-p5js-adapter", which is the key to port p5.js on WeChat Mini Game.

WeChat has a basic "weapp-adapter" example.

"weapp-p5js-adapter" I created is based on weapp-adapter ES6 version made by @finscn.

More WeChat Mini Game document.

Notes

CANVAS and WEBGL:

The WeChat Mini Game only support one canvas to draw, created at wx.createCanvas() firstly called. If you call wx.createCanvas() multiple times, the canvas except the first one are all offscreen, they can't be shown on screen directly.

However, p5.js will create a default canvas firstly itself on start (and the renderer is P2D).

So if you want WEBGL renderer, you could hack the p5.js source code and change the default canvas from P2D to WEBGL. And better solutions PR are welcome~

---

Cheers~

Contra

• website: floatbug.com/contra
• facebook: avantcontra
• twitter: avantcontra
• patreon (buy me a coffee): avantcontra