[−][src]Crate wasm_game_lib

Welcome!

The goal of this crate is to help you to make great 2d games running in web browsers. This crate is very similar to SFML.

How to use

Please follow these instructions to save yourself a lot of pain. To use this crate, you will need wasm-pack. You can install wasm-pack with:

cargo install wasm-pack

To create your game crate, the best way is to use:

wasm-pack new

Then, put this crate and the wasm-bindgen-futures crate in Cargo.toml as usual. Here is the template you may want to use in lib.rs:

#[allow(unused_imports)]
 
use wasm_bindgen::{prelude::*, JsCast};
use wasm_game_lib::graphics::image::Image;
use wasm_game_lib::graphics::sprite::Sprite;
use wasm_game_lib::inputs::event::Event;
use wasm_game_lib::graphics::window::Window;
use wasm_game_lib::system::log;
use wasm_game_lib::inputs::event::types::*;
use wasm_game_lib::system::sleep;
use std::time::Duration;
use console_error_panic_hook::set_once;
 
#[wasm_bindgen(start)]
pub async fn start() -> Result<(), JsValue> {
    set_once(); // needed to see panic messages in the console of your web browser
 
    let (mut window, mut canvas) = Window::init_with_events(MOUSE_EVENT + KEYBOARD_EVENT + RESIZE_EVENT + FOCUS_EVENT);
 
    // load images and fonts here
    // you could make a progress bar
 
    loop {
        for event in window.poll_events() {
            // do something with events
            log(&format!("{:?}", event));
        }
 
        canvas.clear();
        // canvas.draw(&object);
 
        sleep(Duration::from_millis(16)).await;
    }
 
    Ok(())
}

You can compile your crate using:

wasm-pack build --target=web

A folder named pkg has been created in the folder of your project. Only two files are important: project_name.js and project_name_bg.wasm.

To use these files on a web page, I recommend you to put the file index.html in the pkg folder, with this content:

<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <script type="module">
        import init from './project_name.js';

        async function run() {
            await init();
        }
        run();
    </script>
</body>
</html>

Make sure to modify the js file name in index.html depending on your project name. Now, you should be able to run your game by opening index.html in a web browser. In case this does not work, make sure you followed every instruction and contact me.

Modules

graphics	This module contains everything related to graphics.
inputs	This module contains everything related to inputs (keyboard, mouse) and events.
system	You will need this module for various things.