Zenn
📱

画面サイズが原因でBevy+Wasmがスマホで起動しないとき

2025/03/02に公開
Rust
WebAssembly
bevy
tech

はじめに

...
Caused by:
  `Surface` width and height must be within the maximum supported texture size. Requested was (4160, 2340), maximum extent for either dimension is 4096.

Bevy製アプリをWasmでビルドし、ブラウザから起動したときに一部スマートフォンで上記のエラーが出たときの対処法。

エラーの原因

画面のwidth/heightどちらかのサイズが4096を超えると上記のエラーが出る。
Bevyのデフォルトの画面サイズは1280x720だが、起動中にそれにデバイスのDPRを掛けたサイズに変更されるので、デバイスによっては4096を超えることがある。
4096/1280=3.2なので、手元のDPR=3.25のスマートフォンでエラーが出た。

解決策

Bevyのデフォルトの画面サイズは1280x720だが、起動中にそれにデバイスのDPRを掛けたサイズに変更されるので、デバイスによっては4096を超えることがある。

これはscale_factor_overrideを無視して適用されるので、そもそもWindowのサイズを小さくしておく。

    App::new()
        .add_plugins((
            DefaultPlugins.set(WindowPlugin {
                primary_window: Some(Window {
                    // Workaround for hi-dpr phones
                    #[cfg(target_arch = "wasm32")]
                    resolution: bevy::window::WindowResolution::new(800.0, 600.0),
                    fit_canvas_to_parent: true,
                    ..Default::default()
                }),
                ..Default::default()
            }),
        ))
        ...

例えばもともとのwidthを800くらいにしておけば多少DPRが高くても4096を超えない。

これだけだと画面をCSSで画面一杯に広げるときに高さが4096を超えることがあるので、viewportを設定しておく。
(ここで指定したscaleは起動した瞬間には参照されないっぽいので上の対策も必要というわけ)

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
GitHubで編集を提案

Discussion