WeChat html5 mini games run in a pure JavaScript environment. There is no HTML or DOM or BOM. WeChat provides a compatibility shim to help you port your browser games. Here is an improved version of the WeChat shim: https://github.com/finscn/weapp-adapter/blob/master/README_EN.md
I’m trying to hack up the OpenFl html5 output to see how far I can get. Not very far yet, heh. Somehow I need to replace: lime.embed("HelloWorld", "openfl-content", 0, 0, { parameters: {} });
with some code that creates the canvas and starts things up.
If anybody has any experience doing anything like this I’m all ears.
Thanks! Just needed to hack up a couple things because of the lack of DOM/BOM and it’s kinda working!
The environment supports ES6, but because my game js file is too big (712 KB after -final) it falls back to ES5: “VM169:4 The following JS file is too large (more than 500K) and ES6-to-ES5 and compression processing has been skipped:” (translated from Simplified Chinese)
I guess I have to find some way to split up the file.
Thanks – ES5 is fine and the Haxe output is compatible. My fault – I didn’t understand a particular ES5 capability.
Right now I have a “Hello World” app I’m trying to get running on an Android phone in WeChat. It works flawlessly in the WeChat simulator, but on the phone I just get a black screen. At this point I don’t have a clue. I added some straight canvas code to see if that would draw. I never see the OpenFl drawing, but the straight canvas code I added displays correctly:
Main.prototype = $extend(openfl_display_Sprite.prototype, {
init: function (event) {
this.removeEventListener("addedToStage", $bind(this, this.init));
console.info("drawing in haxe");
// this works in the simulator, but not on an Android phone:
var rect = new openfl_display_Sprite();
rect.get_graphics().beginFill(16711680);
rect.get_graphics().drawRect(0, 0, 200, 200);
rect.get_graphics().endFill();
rect.set_x(0);
rect.set_y(50);
this.addChild(rect);
}
, __class__: Main
});
//-----------------------------------------------------------------------------
// main app
exports.lime.embed("HelloWorld", canvas, canvas.width, canvas.height, { parameters: {} });
console.info("drawing in js");
// this works:
// use the canvas global object to see if it will draw anything
var ctx = canvas.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "blue");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Just to be clear in the console I see:
drawing in haxe
drawing in js
Perhaps try the Lime HelloWorld sample, which amounts to a basic fill. That would eliminate issues such as asset loading, but ultimately, a JavaScript debugger is going to be essential, probably, to get information if there is a runtime error
OpenFl uses DOM APIs, and liberally creates canvases for instance - this isn’t possible with straight WeChat runtime: window and document don’t exist! Maybe also OpenFl tries to resize the canvas and this crashes.
As linked before in this thread, a sample Phase.js adapted to WeChat IG can be found here:
It would be good to confirm that it’s working for you, then you will have to look at wrapping OpenFl.
One of the key additions is the weapp-adapter which simulates some key DOM APIs, like document.createElement for some DOM types. Although it’s webpack-compiled, the logic can be followed:
The API seem fairly rich, but everything has to be rendered using the main canvas.