good-web-game is a wasm32-unknown-unknown implementation of a ggez subset on top of miniquad

good-web-game is a wasm32-unknown-unknown implementation of a miniquad

Good Web Game

good-web-game is a wasm32-unknown-unknown implementation of a ggez subset on top of miniquad. Originally built to run zemeroth in the web.

It has been recently updated to support much of the ggez 0.6.0 API. If you're already working with ggez you might use this library to port your game to the web (or perhaps even mobile). Since it also runs well on desktop it also offers an alternative implementation of ggez, which might come in handy if you experience bugs in ggez, which you can't work around for some reason. Canvases with multisampling are currently buggy in classic ggez while they work fine in good-web-game, for example.

If you are looking for a properly maintained and supported minimal high-level engine on top of miniquad - check out macroquad instead.

Status

"good-web-game" implements the most important parts of the ggez 0.6.0 API.

Missing / Not available:

  • filesystem with writing access (if you need it take a look at quad-storage)
  • game pad support
  • writing your own event loop (doesn't make much sense on callback-only platforms like HTML5)
  • spatial audio (overall audio support is still relatively limited, but could be improved)
  • resolution control in fullscreen mode
  • setting window position / size (the latter is available on Windows, but buggy)
  • screenshot function
  • window icon
  • and custom shader support (yes, this is a big one, but if you need it and are familiar with miniquad please consider starting a PR; miniquad has all the tools you need)

Demo

In action(0.1, pre-miniquad version): <#404>

Example

To build and run an example as a native binary:

Building for web and mobile is currently a WIP (ironic, I know). If you want to try your luck anyway the miniquad instructions for WASM might be a good place to start.

Architecture

Here is how good-web-game fits into your rust-based game:

Issues

Collection of the latest Issues

PSteinhaus

PSteinhaus

bug
3

Ok, this is the most annoying bug for me in ggez currently. I thought good-web-game just wouldn't have it, but it turns out I was wrong.

In ggez 0.6 trying to create a Canvas with a NumSamples count other than 1 leads to this bug: https://github.com/ggez/ggez/issues/695

If we stick to 1 things work out ok, but as soon as multisampling is activated globally the canvas starts to get drawn slightly blurry. This effect increases with multisampling level.

Now the sad thing is: good-web-game currently has the same bug. To recreate try the 03_drawing example, set multisampling to 16 (uncomment a line in the boilerplate) and press a button to switch between drawing onto the screen directly and drawing onto the offscreen canvas, which is then drawn onto the screen.

drawn directly: no_canvas

drawn on canvas: canvas

As you can see by looking at the white thing somewhat in the middle (which is drawn using a nearest neighbor filter) no MSAA has been applied when drawing it in the second case. The only reason it looks less jagged (but still wrong) is because the whole canvas was drawn somewhat blurry...

The good news is: This replicates the ggez behavior when using a Canvas with multisample count 1 perfectly, so we might fix it by somehow specifying that the framebuffer supplied by a canvas is supposed to have the same level of multisampling as the application. But, AFAIK, there is currently no feature present in miniquad to achieve this.

PSteinhaus

PSteinhaus

bug
0

Here are both blend_modes examples. Top is ggez, bottom is good-web-game:

blendmodes

For some reason the blend modes behave differently, though they should be the same.

The first step to analyzing this might be calculating some colors by hand using these formulas to then check whether one of the two cases actually produces this expected result. This would at least give us an answer to which of the two is actually "correct".

PSteinhaus

PSteinhaus

bug
8

Apparently some dependencies used require wasm-bindgen to get them to work on WASM.

Since I've never worked with WebAssembly or Javascript before it's safe to say that I'm the wrong person for this job, though.

Therefore I hereby humbly ask for help.

PSteinhaus

PSteinhaus

enhancement
0

A screenshot function, similiar to the one in ggez should be relatively straightforward to implement. My naive first guess:

  • call glFinish
  • copy the renderbuffer texture
  • create a new Image from that copy
  • return it
PSteinhaus

PSteinhaus

enhancement
0

The current filesystem is a remnant from a time when miniquad wasn't able to load files via URL on WASM. Since it's now able to do so we might think about removing the embedded file cache. On the other hand it might still be nice to have in some circumstances and could just be disabled by default.

What should be addressed though is writing data, or even creating folders and the like. It should be easily possible to recreate ggez's filesystem by copying the code and then hiding it behind conditional compilation for WASM (since I assume Android and iOS do support std::fs, gotta take a look into it).

One may argue though, whether this is actually the right thing to do, as good-web-game is (obviously) meant to be portable to the web, which these functions aren't.

PSteinhaus

PSteinhaus

enhancement
1

ggez currently features three functions allowing you to use custom shaders when drawing:

It should be possible to implement them using miniquad, but since I'm relatively inexperienced when it comes to shaders (and using shaders with miniquad) I leave this open for now for anyone willing to help.

Once the functionality is implemented porting the two examples shader.rs and shadows.rs should be pretty straightforward (at least for shader.rs, not sure whether the shaders in shadows.rs can be written to work in glsl100).

Moxinilian

Moxinilian

1

Hello. When building any of the examples on Windows native, emigui-miniquad fails to build.

Is this because of an outdated commit? If not, should I open an issue at emigui-miniquad?

maciejhirsz

maciejhirsz

0

Basically on hidpi/retina screens, the canvas width and height properties need to be multiplied by window.devicePixelRatio (rounded or floored), with CSS pixel values entered as CSS width/height values, otherwise the image will be blurred (linear upscaling, most commonly by a factor of 2 on hidpi / retina screens). Hidpi desktop screens are not super common yet outside of Apple products (although I don't know how anyone can live without them :P), most phones are typically retina/hidpi though, at least as far as web is concerned.

not-fl3

not-fl3

0

ios since 11.3 as well as android support progressive web apps, so it would be nice to implement all the PWA boilerplate for good-web-game.

google play is now supporting PWA, making it the easiest way to deploy good-web-game to play market. Probably this will never happens on appstore, but who knows?

  • write .webmanifest, figure out how the icons and all the meta information works in PWA
  • support offline service-workes for filesystem
  • like tool to build play store's .apk from the PWA
  • same for Microsoft Store?
Versions

Find the latest versions by id

Information - Updated Jun 03, 2022

Stars: 278
Forks: 25
Issues: 14

maomi: A rust wasm framework for building pages with components

maomi is a MVVM-like framework for web development

maomi: A rust wasm framework for building pages with components

Rust / Wasm client web app framework

Pull requests which improve test coverage are also very welcome

Rust / Wasm client web app framework

A Rust/WASM Library to interact with Bitcoin SV

npm i bsv-wasm-bundler --save

A Rust/WASM Library to interact with Bitcoin SV

WASM / Rust / D3 example

Fetch data with Rust + WASM and show it with JS + D3

WASM / Rust / D3 example

@texhno-rust-wasm-game-of-life

A template for kick starting a Rust and WebAssembly project using Tutorial

@texhno-rust-wasm-game-of-life

rust wasm worker hello world

Built using the template at which

rust wasm worker hello world

👷‍♀️🦀🕸️ rustwasm-worker-template

A template for kick starting a Cloudflare worker project using

👷‍♀️🦀🕸️ rustwasm-worker-template

Rust WASM Web Worker Examples

This repository contains four different examples of using web workers in conjunction with WASM in

Rust WASM Web Worker Examples

NES Emulator in Rust-WASM

Requires Rust with cargo, nodejs, and wasm-pack

NES Emulator in Rust-WASM
Facebook Instagram Twitter GitHub Dribbble
Privacy