Let's exchange information to improve Pyxel's web support #404

kitao · 2022-08-20T14:25:01Z

Thanks to everyone's great efforts, now Pyxel works on web browsers.
Here is the test site of web features: https://kitao.github.io/pyxel/wasm/

It's working, but there are various limitations and points that could be improved.
Therefore, please provide information that will lead to improvement.

Especially I would like to improve following points with priority:

Fix mouse-handling functions
Handle touch events on smart phones
Suppress various errors occurring during execution
Safe way to exit with pyxel::quit
Appropriately sized and positioned screen display regardless of PC or smart phones
Make a github action to build wheels for many platforms
Use (un-patched) Pyodide and SDL2
Clarify the way to link Python statically like Pygame in terms of performance (also need to confirm its necessity)
Make HTML/JavaScript template to run Pyxel's code

Regardless of these issues, please feel free to discuss various web-related matters with me!

messense · 2022-08-23T02:18:16Z

Encountered Rust-SDL2/rust-sdl2#1249 when try to build manylinux wheels on Linux with bundled and static-link features, Rust-SDL2/rust-sdl2#1250 should fix it.

Make a github action to build wheels for many platforms

Progress: https://github.com/messense/pyxel/actions/runs/2903962186

kitao · 2022-08-23T08:35:05Z

@messense Excellent! This trial is really helpful.
Actually I have some requests:

Could you use make clean build command provided by Pyxel to build instead of calling Maturin directly. Pyxel's Makefile include some commands which makes the attached README and copy SDL2.dll in the wheel when on Windows
On Mac, is it possible to make wheels both for x86_64 and arm64? But it should not be a universal binary

Thank you.

messense · 2022-08-23T10:33:29Z

Could you use make clean build command provided by Pyxel to build instead of calling Maturin directly

To do that you need to hard code manylinux docker image for each supported Linux targets. Windows and macOS targets can use make clean build.

On Mac, is it possible to make wheels both for x86_64 and arm64? But it should not be a universal binary

It's already doing that.

Feel free to copy and edit the workflow to suit your needs.

messense · 2022-08-23T10:46:10Z

I also noticed that there are some dependencies compiled with different versions, for example

   Compiling miniz_oxide v0.4.4
   Compiling miniz_oxide v0.5.3
   Compiling miniz_oxide v0.3.7
   Compiling deflate v1.0.0
   Compiling deflate v0.8.6
   Compiling png v0.16.8
   Compiling png v0.17.5
   Compiling rand v0.8.5
   Compiling rand v0.7.3
   Compiling jpeg-decoder v0.1.22
   Compiling jpeg-decoder v0.2.6
   Compiling tiff v0.6.1
   Compiling tiff v0.7.3
   Compiling image v0.23.14
   Compiling image v0.24.3

kitao · 2022-08-25T13:53:30Z

It seems that new Pyodide has been released 3 days ago. With it, the web version of Pyxel can be improved?

notbored · 2022-08-25T15:36:48Z

I just had a look at the the examples on https://kitao.github.io/pyxel/wasm/ and noticed that while controls work immediately once things have finished loading, the sound/music wont start until you click the mouse somewhere on the page.

Also pressing escape freezes the game and there's no way to return without refreshing the page.

Firefox/MacOS.

km19809 · 2022-08-26T07:33:43Z

I just had a look at the the examples on https://kitao.github.io/pyxel/wasm/ and noticed that while controls work immediately once things have finished loading, the sound/music wont start until you click the mouse somewhere on the page.

Also pressing escape freezes the game and there's no way to return without refreshing the page.

Firefox/MacOS.

The browsers do not allow to play of sound without user interaction. It is not Pyxel's fault. It can be solved by creating a "play" button. Like [this].(https://km19809.github.io/pyxelodide/test_pyxel_fs.html?py=04_sound_api)
About escaping, it uses sys.exit. So it would break a python session.
It is one of the unresolved topics of this issue.

Safe way to exit with pyxel::quit

notbored · 2022-08-26T13:34:44Z

I didn't realise that was the default behaviour from the browser, makes sense.

I saw the mention of sys.exit/pyxel.quit but just wanted to raise the issue/comment just in case.

Apologies for sticking my nose in without doing a thorough enough reading!

laurentabbal · 2022-08-26T13:57:22Z

Demo with pyxel-1.8.0-cp37-abi3-emscripten_3_1_14_wasm32.whl : www.pyxelstudio.net
For tests...

km19809 · 2022-08-27T00:09:48Z

@notbored
No need to apologize!
I just wanted to inform you of the reasons for the problems.

kitao · 2022-08-28T12:08:30Z

I've separated the topic for compiling for many platforms on GitHub Actions here: #409

kitao · 2022-09-04T11:03:26Z

I separated embedding Python topic into #412.

pmp-p · 2022-09-07T08:24:34Z

if think pygbag and pygame-script codebase can help on :

Appropriately sized and positioned screen display regardless of PC or smart phones
Make a github action to build wheels for many platforms ( pygbag ci is wasm only , but pygame's one is manylinux and others )
Make HTML/JavaScript template to run Pyxel's code

but for

Use (un-patched) Pyodide and SDL2

-> i can help too but only after pyodide reach 3.11, because loading SDL2 dynamically is tricky and i will do it for pygame only at that moment. ( SDL2 is not meant to be a side module because it's full of JS calls )

Clarify the way to link Python statically like Pygame in terms of performance (also need to confirm its necessity)

-> need serious benchmarking before taking any decision so imho after 3.11 pyodide too.

kitao · 2022-09-08T12:34:56Z

Pyxel for WASM builds MEMFS from the specified files like this now.

Is there any good way to remove this table? If possible, I'd like to copy necessary files by checking files under the specified origin directory automatically or mount real file system.

Current:

let pyxel = await loadPyxel("canvas");
await pyxel.loadFiles("../python/pyxel/examples", [
    "02_jump_game.py",
    "assets/jump_game.pyxres",
]);
pyxel.run("02_jump_game.py");

Ideal:

let pyxel = await loadPyxel("canvas");
await pyxel.mount("../python/pyxel/examples");
pyxel.run("02_jump_game.py");

pmp-p · 2022-09-08T15:30:01Z

mount real file system

pygbag uses zip format (<gamename>.apk) as a real file system and assets are in /assets as they would be in a android apk. the zip in mounted at path /data/data/<gamename>/ in MEMFS and is writeable ( it's an overlayFS )

checking files under the specified origin directory automatically

checking files one by one is not possible on webserver where index is disallowed :( so it is not a bullet proof solution

kitao · 2022-09-11T01:25:31Z

@messense
Toward easier web support, I'm planning to release sdist as well as bdist_wheels.
But when I tried the options for sdist in Maturin, it doesn't work because Pyxel's pyproject.toml is located in the top of the project. Do you know how to handle this file structure?

https://github.com/kitao/pyxel/blob/main/pyproject.toml

📡 Using build options manifest-path from pyproject.toml
💥 maturin failed
  Caused by: Failed to build source distribution
  Caused by: pyproject.toml was not included by `cargo package`. Please make sure pyproject.toml is not excluded or build without `--sdist`

In addition to the above, Maturin looks Cargo.toml-centered design and if the pyptorject.toml is not placed there, some paths such as readme and license also looks strange. For examples, pyproject.toml and license file are in the same directory, but I should wirte

license = { file = "../../LICENSE" }

in the pyproject.toml

messense · 2022-09-11T14:54:15Z

@kitao I'm aware of the these unpolished parts of maturin and plan to address them in the upcoming v0.13.3 release.

Ideally the current file structure should just work.

kitao · 2022-09-12T05:43:21Z

@messense Great. I look forward to new version of Maturin.

messense · 2022-09-12T08:43:55Z

@kitao Please try maturin v0.13.3-beta.6, you can install it by running pip install maturin==0.13.3b6.

kitao · 2022-09-12T12:32:53Z

@messense Thank you for your support!
I tried the new Maturin. Path for readme and license in the pyproject.toml worked as I expected.
It it right result that the sdist doesn't include the python module folder specified by python-source with Maturin sdist command?

messense · 2022-09-12T13:59:37Z

It it right result that the sdist doesn't include the python module folder specified by python-source with Maturin sdist command?

Fixed in PyO3/maturin#1102, please try maturin v0.13.3-beta.7.

kitao · 2022-09-12T14:27:27Z

@messense I confirmed the python directories are included.
Now I tried to include other files like this:

sdist-include = [
    "Makefile",
    "crates/rustfmt.toml",
    "docs/**/*",
    "requirements.txt",
    "scripts/*",
    "setup.cfg",
]

But they aren't included though the output said:

 Including files matching "Makefile"
📦 Including files matching "crates/rustfmt.toml"
📦 Including files matching "docs/**/*"
📦 Including files matching "requirements.txt"
📦 Including files matching "scripts/*"
📦 Including files matching "setup.cfg"

kitao · 2022-09-13T01:18:45Z

@messense Though sdist-include doen't work, I confirmed the wheel can be built and installed from the generated sdist. Thank you!

kitao · 2022-09-13T01:45:45Z

Now every example of Pyxel, a retro game engine for Python, works on web browsers!

https://kitao.github.io/pyxel/wasm/

messense · 2022-09-13T02:43:19Z

@kitao sdist-include issue fixed in PyO3/maturin#1103, please try maturin v0.13.3-beta.8.

If everything goes well, v0.13.3 will be released this week.

kitao · 2022-09-13T03:24:30Z

@messense Thank you. I confirmed it works. I look forward to the next official release!

messense · 2022-09-15T09:12:15Z

@kitao maturin v0.13.3 is out.

kitao · 2022-09-15T09:22:10Z

@messense Great news! I'll change the latest Maturin to build.

laurentabbal · 2022-09-16T12:57:46Z

I'm still having Pyodide has suffered a fatal error.
And, because Pyodide craches I cannot read the file system with pyodide.FS.readFile.

pyodide.asm.js:10
Pyodide has suffered a fatal error. Please report this to the Pyodide maintainers.
    API.fatal_error @ pyodide.asm.js:10
    Module.callPyObjectKwargs @ pyodide.asm.js:10
    Module.callPyObject @ pyodide.asm.js:10
    apply @ pyodide.asm.js:10
    apply @ pyodide.asm.js:10
    runPython @ pyodide.asm.js:10
    run @ pyxel.js:37
    (anonymous) @ 01_hello_pyxel.html:22
    await in (anonymous) (async)
    (anonymous) @ 01_hello_pyxel.html:23
    pyodide.asm.js:10
The cause of the fatal error was:
    API.fatal_error @ pyodide.asm.js:10
    Module.callPyObjectKwargs @ pyodide.asm.js:10
    Module.callPyObject @ pyodide.asm.js:10
    apply @ pyodide.asm.js:10
    apply @ pyodide.asm.js:10
    runPython @ pyodide.asm.js:10
    run @ pyxel.js:37
    (anonymous) @ 01_hello_pyxel.html:22
    await in (anonymous) (async)
    (anonymous) @ 01_hello_pyxel.html:23
pyodide.asm.js:10 Error: unwind
    at ensureCaughtObjectIsError (pyodide.asm.js:10:144954)
    at API.fatal_error (pyodide.asm.js:10:146175)
    at Module.callPyObjectKwargs (pyodide.asm.js:10:119134)
    at Module.callPyObject (pyodide.asm.js:10:119434)
    at PyProxyClass.apply (pyodide.asm.js:10:126878)
    at Object.apply (pyodide.asm.js:10:125906)
    at Object.runPython (pyodide.asm.js:10:149846)
    at Pyxel.run (pyxel.js:37:23)
    at 01_hello_pyxel.html:22:19

kitao · 2022-09-21T09:55:40Z

I moved this topic to #418

kitao · 2022-10-02T06:29:30Z

Now Pyxel Web works stably. So please let me close this issue. Thank you.

kitao added enhancement New feature or request help wanted Extra attention is needed labels Aug 20, 2022

messense mentioned this issue Sep 12, 2022

Fix sdist when pyproject.toml isn't in the same dir of Cargo.toml PyO3/maturin#1099

Merged

messense mentioned this issue Sep 12, 2022

Change readme and license paths in pyproject.toml to be relative to pyproject.toml PyO3/maturin#1100

Merged

messense mentioned this issue Sep 12, 2022

Add python source files specified in pyproject.toml to sdist PyO3/maturin#1102

Merged

messense mentioned this issue Sep 13, 2022

Change sdist-include paths to be relative to pyproject.toml PyO3/maturin#1103

Merged

messense moved this to Issues in @messense's open-source contributions Sep 14, 2022

messense added this to @messense's open-source contributions Sep 14, 2022

kitao closed this as completed Oct 2, 2022

Repository owner moved this from Issues to Done in @messense's open-source contributions Oct 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Let's exchange information to improve Pyxel's web support #404

Let's exchange information to improve Pyxel's web support #404

kitao commented Aug 20, 2022

messense commented Aug 23, 2022 •

edited

Loading

kitao commented Aug 23, 2022

messense commented Aug 23, 2022 •

edited

Loading

messense commented Aug 23, 2022

kitao commented Aug 25, 2022

notbored commented Aug 25, 2022

km19809 commented Aug 26, 2022

notbored commented Aug 26, 2022

laurentabbal commented Aug 26, 2022

km19809 commented Aug 27, 2022

kitao commented Aug 28, 2022

kitao commented Sep 4, 2022

pmp-p commented Sep 7, 2022 •

edited

Loading

kitao commented Sep 8, 2022

pmp-p commented Sep 8, 2022 •

edited

Loading

kitao commented Sep 11, 2022

messense commented Sep 11, 2022 •

edited

Loading

kitao commented Sep 12, 2022

messense commented Sep 12, 2022

kitao commented Sep 12, 2022

messense commented Sep 12, 2022

kitao commented Sep 12, 2022

kitao commented Sep 13, 2022

kitao commented Sep 13, 2022

messense commented Sep 13, 2022 •

edited

Loading

kitao commented Sep 13, 2022

messense commented Sep 15, 2022

kitao commented Sep 15, 2022

laurentabbal commented Sep 16, 2022

kitao commented Sep 21, 2022

kitao commented Oct 2, 2022

Let's exchange information to improve Pyxel's web support #404

Let's exchange information to improve Pyxel's web support #404

Comments

kitao commented Aug 20, 2022

messense commented Aug 23, 2022 • edited Loading

kitao commented Aug 23, 2022

messense commented Aug 23, 2022 • edited Loading

messense commented Aug 23, 2022

kitao commented Aug 25, 2022

notbored commented Aug 25, 2022

km19809 commented Aug 26, 2022

notbored commented Aug 26, 2022

laurentabbal commented Aug 26, 2022

km19809 commented Aug 27, 2022

kitao commented Aug 28, 2022

kitao commented Sep 4, 2022

pmp-p commented Sep 7, 2022 • edited Loading

kitao commented Sep 8, 2022

pmp-p commented Sep 8, 2022 • edited Loading

kitao commented Sep 11, 2022

messense commented Sep 11, 2022 • edited Loading

kitao commented Sep 12, 2022

messense commented Sep 12, 2022

kitao commented Sep 12, 2022

messense commented Sep 12, 2022

kitao commented Sep 12, 2022

kitao commented Sep 13, 2022

kitao commented Sep 13, 2022

messense commented Sep 13, 2022 • edited Loading

kitao commented Sep 13, 2022

messense commented Sep 15, 2022

kitao commented Sep 15, 2022

laurentabbal commented Sep 16, 2022

kitao commented Sep 21, 2022

kitao commented Oct 2, 2022

messense commented Aug 23, 2022 •

edited

Loading

messense commented Aug 23, 2022 •

edited

Loading

pmp-p commented Sep 7, 2022 •

edited

Loading

pmp-p commented Sep 8, 2022 •

edited

Loading

messense commented Sep 11, 2022 •

edited

Loading

messense commented Sep 13, 2022 •

edited

Loading