I am using the WeChat game API now, without the BOM and DOM running environment, no global document and window objects. How do you need to be compatible with the WeChat game API?
I tried to download the DevTools and the whole process is in Chinese so I didn’t get very far with it.
My guess is that PlayCanvas is not a module so therefore you can’t import it as is. I believe you can add support for it in one of the JSON config files in the project via an alias or similar.
I may play more with this over the weekend as I’m quite interested in this. Someone who has more web development knowledge may be able to help in the meantime.
The playcanvas engine uses document or window objects, which is incompatible with WeChat API. So need to modify the intermediate file (weapp-adapter.js) to be compatible with the playcanvas engine
Thank you, because the WeChat game platform is very hot in China, so it is very urgent that the playcanvas will be supported.
So I try to use egret, layabox or three.js.
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
function createApp()
{
// create a PlayCanvas application
var canvas = document.getElementById('application');
var app = new pc.Application(canvas, { });
app.start();
// fill the available space at full resolution
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
// ensure canvas is resized when window changes size
window.addEventListener('resize', function() {
app.resizeCanvas();
});
// create box entity
var cube = new pc.Entity('cube');
cube.addComponent('model', {
type: 'box'
});
// create camera entity
var camera = new pc.Entity('camera');
camera.addComponent('camera', {
clearColor: new pc.Color(0.1, 0.1, 0.1)
});
// create directional light entity
var light = new pc.Entity('light');
light.addComponent('light');
// add to hierarchy
app.root.addChild(cube);
app.root.addChild(camera);
app.root.addChild(light);
// set up initial positions and orientations
camera.setPosition(0, 0, 3);
light.setEulerAngles(45, 0, 0);
// register a global update event
app.on('update', function (deltaTime) {
cube.rotate(10 * deltaTime, 20 * deltaTime, 30 * deltaTime);
});
}
loadScript('/playcanvas-stable.js', createApp);
However, I believe that WeChat tools uses a builder of some sort like WebPack or Babel etc given the file structure you have shown above.
Usually with tools like those, there is support for libraries like PlayCanvas which are not modules via configuring the project config JSON file. (e.g here is WebPack’s example of doing so: https://github.com/webpack/docs/wiki/shimming-modules).
This would be the ‘correct’ way of including a library like PlayCanvas into a project like this.
You may have to dig into the documentation of WeChat to find out how.
Good luck and reply back on how you do it as it will be helpful for others !
Thank you for your patience. API is Chinese, and maybe you don’t understand it.
WeChat games do not have BOM and DOM operating environments, and there are no global document and window objects. So when you want to use DOM API to create elements such as Canvas and Image, it can cause an error.
exp:create canvas
document.createElement('canvas')
It’s wrong.
You need to use WeChat game API to create Canvas
wx.createCanvas()
This is right.
So the playcanvas engine may need to modify or use the intermediate file (weapp-adapter.js) to extend the method to be compatible with playcanvas
Like this:
var document = {
createElement: function (tagName) {
tagName = tagName.toLowerCase()
if (tagName === 'canvas') {
return wx.createCanvas()
}
else if (tagName === 'image') {
return wx.createImage()
}
}
}
Now you can use document.createElement ('canvas') to create canvas!
If the developer is going to modify the engine, it’s quite tired, so can the official give a solution?
Ah, I see now. There’s only a few places where the PlayCanvas core engine uses “document” so it will require someone to fork of on Gut hub and modify it to work.
The link you posted to three.js is someone’s fork of the original project.
Erm, it would be something I would like a look at but with WeChat Developer Tools and documentation not being very English friendly, it’s not something I can do or even look at unfortunately.