Skip to content
p5.we is a boilerplate to develop Wechat Mini Game using p5.js.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
libs
sketch
.gitignore
LICENSE
README.md
game.js
game.json
project.config.json

README.md

p5.we

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

webgl particle flocking

Usage

Just clone the project, and start forking. You should follow WeChat Mini Game workflow of course.

There are some examples in sketch directory. Only need very a few changes from the original p5.js example.

code screenshot

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 and TODO

  • 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~

  • p5 library:
    Only support core lib (p5.js) for now.

  • blendMode:
    The globalCompositeOperation of RenderingContext of WeChat Mini Game is NOT the same as p5.js: https://developers.weixin.qq.com/minigame/dev/api/RenderingContext.html

  • preload and loadImage:
    Now you can use preload and loadImage as usual! Thanks @xarray!!
    loadImage in preload may not display correctly.
    Canvas of the image created by loadImage() in preload() is not the same as the canvas in setup() or draw(). It should be something conflict with WeChat Mini Game.
    For now you can loadPixels() in callbackFunction of loadImage(xxx, callbackFunction) in preload(), and then setup the pixels to another Image created in draw().
    More about this: https://github.com/avantcontra/p5.we/issues/1


Cheers~

Contra

You can’t perform that action at this time.