Extreme Bevy: Making a p2p web game with rust and rollback netcode

[dejaime]

Extremely informative, thank you!

[favilo]

For input to be a used in with_input_system I had to make the signature of that method look like the following:

fn input(In(_handle): In<PlayerHandle>, keys: Res<Input<KeyCode>>) -> Vec<u8> {
  ...
}

But over all, this was very neat. Thank you for the write up.

[johanhelsing]

@favilo Oops, thanks for the heads up. Should be fixed now!

[nvsonha]

Thank you for the informative blog. At the step of start_matchbox_socket, the build must target to wasm32-unknown-unknown. Then, I could not run anymore "*.wasm: cannot execute binary file". Could you please support how you run it along with "matchbox_server" in terminal?

[johanhelsing]

@nvsonha That can happen if you missed the step adding wasm-server-runner to .cargo/config.toml. Perhaps you added it to Cargo.toml instead?

Regarding running matchbox_server in the terminal, you can simply run cargo install matchbox_server and then matchbox_server.

[nvsonha]

@johanhelsing thank you for your support! Unfortunately it is not the issue with "wasm-server-runner", I have followed everything correctly: https://github.com/nvsonha/t21l If you can do it without any front-en like .css, .ts, .js and .html as well as wasm-bindgen, probably I could not run it due to my "cargo run --release" on Mac mini M1 arch x86_64. Do you indeed "cargo run --release" only in a seperate terminal? (beside the terminal with "starting matchbox signaling server") Furthermore, I tried running the wasm directly by "wasmer target/wasm32-unknown-unknown/release/*.wasm", but it also failed to run. Please help for ideas :-(

[johanhelsing]

@nvsonha Took a look at your repo. You are missing a line with [target.wasm32-unknown-unknown] above runner = "wasm-server-runner" here

Do you indeed "cargo run --release" only in a seperate terminal? (beside the terminal with "starting matchbox signaling server")

Yeah.

[nvsonha]

@johanhelsing I really appreciate your time! It is solved by your solution. I thought it was simply a comment and ignored it.

[heisencoder]

For those wanting to run this against Bevy 0.8, you need to make a couple changes:

First, use this setup function instead:

fn setup(mut commands: Commands) {
    commands.spawn_bundle(Camera2dBundle {
        projection: OrthographicProjection {
            scale: 1. / 50.,
            ..default()
        }
        .into(),
        ..default()
    });
}

The OrthographicCameraBundle was dropped in favor of creating a more generic Camera2dBundle with an OrthographicProjection parameter

Next, use this alternative start_matchbox_socket implementation:

fn start_matchbox_socket(mut commands: Commands) {
    let room_url = "ws://127.0.0.1:3536/next_2";
    info!("connecting to matchbox server: {:?}", room_url);
    let (socket, message_loop) = WebRtcNonBlockingSocket::new(room_url);

    // The message loop needs to be awaited, or nothing will happen.
    // We do this here using bevy's task system.
    let task_pool = IoTaskPool::get();
    task_pool.spawn(message_loop).detach();

    commands.insert_resource(Some(socket));
}

In particular, starting in Bevy 0.8, the IoTaskPool is no longer a resource, but is instead a global that you access via the get() method.

See https://discord.com/channels/691052431525675048/1009377339123175436/1009391941085057165 for more details (You'll need to first join the Bevy Discord channel, as described on the Bevy homepage).

[jrasanen]

Interesting blog post! By the way, examples on the page don't work on Firefox and Safari because of a CORS error,

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3.johanhelsing.studio/helsing/bevy_embeds/extreme_ggrs_input/app.js. (Reason: CORS request did not succeed).

[johanhelsing]

Interesting blog post! By the way, examples on the page don't work on Firefox and Safari because of a CORS error,

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3.johanhelsing.studio/helsing/bevy_embeds/extreme_ggrs_input/app.js. (Reason: CORS request did not succeed).

Thanks! Turned out my hosting server was down, and the CORS errors were for an error message. Should be fixed now :)

[lucasericsson222]

I believe there is a typo when adding bevy_matchbox as a dependency. I ran into an error when trying to call MatchboxSocket::new_ggrs, and I was able to fix it by changing feature to features on this line: Before bevy_matchbox = { version = "0.6", feature = ["ggrs"] } After bevy_matchbox = { version = "0.6", features = ["ggrs"] }

[johanhelsing]

Oops, yes, that's probably been tripping people up. Fixed now, thanks!

[lewiszlw]

https://helsing.studio/posts/extreme-bevy this can't be reached.

[chickenchicken9]

Thank you so much for the tutorial, this was really cool to get working locally and I appreciate all the explanations!

I'm a little confused by wait_for_players(). Is there supposed to be something that stops the system from running once connected? I get a panic from socket.take_channel(0).unwrap() when running the code as-is.

I wrote this to make it work, but maybe there's a more elegant way you intended?

    // move the channel out of the socket (required because GGRS takes ownership of it)
    if let Ok(channel) = socket.take_channel(0) {
        info!("All peers have joined, going in-game");

        // start the GGRS session
        let ggrs_session = session_builder
            .start_p2p_session(channel)
            .expect("failed to start session");

        commands.insert_resource(bevy_ggrs::Session::P2PSession(ggrs_session));
    } else {
        // channel was already taken, hopefully; how do i stop this from running?
    }

[johanhelsing]

@chickenchicken9 thanks so much for taking the time to report this. I forgot to add three lines to the start of that method. It was missing this early return:

if socket.get_channel(0).is_err() {
    return; // we've already started
}

I've updated the tutorial now. If you run into more issues, the extreme_bevy repo should be the place to look, that's what I test after each upgrade of bevy/matchbox/ggrs.

However, if you have the time, please also post here if you find something :)

[dwexel]

in bevy 0.10.1 this is the start_matchbox_server function/system that I used

fn start_matchbox_socket(mut commands: Commands) {
    let room_url = "ws://127.0.0.1:3536/extreme_bevy?next=2";
    info!("connecting to matchbox server: {:?}", room_url);

    let socket: MatchboxSocket<SingleChannel> = WebRtcSocket::builder(room_url)
        .add_channel(ChannelConfig::reliable())
        .into();

    commands.insert_resource(socket);
}

also,

I got a compile error when I tried to build a project using bevy 0.11 and matchbox and ggrs that depended on bevy 0.10, so I reverted to bevy 0.10.1,

seems like soon matchbox will be updated to bevy 0.11, so it might change again, who knows.

[GarrettFleischer]

For anyone else having the issue with ggrs failing to compile, what I had to do was clone ggrs, bevy_ggrs, bevy_matchbox, bevy_roll_safe, to a local folder then modify their cargo.toml files to point to the local version of ggrs because the released version of ggrs on crates.io is broken, but the main branch on github has the fix. I suppose you could skip cloning ggrs and just modify the others to point to the git repo instead of the version number. Either way, after modifying their toml files you import them into your .toml with

bevy_ggrs = { path = "../bevy_ggrs", features = ["wasm-bindgen"] }
bevy_matchbox = { path = "../matchbox/bevy_matchbox", features = ["ggrs"] }
bevy_roll_safe = { path = "../bevy_roll_safe" }