Wechat mini games

#1

Has anyone used OpenFl to develop a WeChat mini game? (e.g., as described here: https://www.lewagon.com/blog/wechat-mini-games-are-making-noise-how-can-developers-get-started-quickly)

Wonder how much massaging of the html5 output would be required to make it work.

There is this shim for Phaser.js (https://github.com/littlee/wechat-small-game-phaser) and Phaser.js uses Pixi.js so that is promising.

Cheers,
Rick

#2

They system is crazy :dizzy_face:

It shouldn’t be too hard to adapt Haxe engines.

#3

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.

Cheers,
Rick

#4

Try passing the canvas element to the second argument, instead of an ID name:

lime.embed ("HelloWorld", canvasElement, 0, 0, {});
1 Like
#5

This is simply fantastic, WeChat mini games.

#6

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.

#7

What’s the issue with using ES5? Our generated code should be compatible?

#8

Yes Haxe output is ES5 friendly - if there’s an option for that, disable ES6 processing.

#10

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

Not sure how to debug this.

Cheers,
Rick

#11

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

#12

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.

Aside from that, from the documentation, creating a canvas normally requires to create it from wx.createCanvas():
https://translate.google.co.uk/translate?sl=auto&tl=en&js=y&prev=_t&hl=en&ie=UTF-8&u=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminigame%2Fdev%2Fdocument%2Frender%2Fcanvas%2Fwx.createCanvas.html&edit-text=&act=url

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.

#13

If you’ve done all that, apparently there is a debugger console:
https://translate.googleusercontent.com/translate_c?depth=1&hl=en&rurl=translate.google.co.uk&sl=zh-CN&sp=nmt4&tl=en&u=https://developers.weixin.qq.com/minigame/dev/tutorial/usability/debug.html%3Ft%3D2018329&xid=25657,15700021,15700124,15700149,15700168,15700186,15700201&usg=ALkJrhiVR8rqLlPqz1KNx5n9KB5fesBMvQ