Leptos Bevy Canvas

https://github.com/synphonyte/leptos-bevy-canvas
Admin
Leptos Bevy Canvas is a Rust crate that enables embedding idiomatic Bevy applications inside Leptos...
Tokens:5,225
Snippets:24
Trust Score:7.7
License:Apache-2.0
Update:7 months ago
Show doc for...
Tokens:
Raw
### Install Trunk

Source: https://github.com/synphonyte/leptos-bevy-canvas/blob/main/examples/loading_screen/README.md

Installs the Trunk build tool, which is required to serve and build the Leptos application. Trunk is a fast, low-latency web development tool for Rust.

```bash
cargo install trunk
```

--------------------------------

### Serve Leptos Example with Trunk

Source: https://github.com/synphonyte/leptos-bevy-canvas/blob/main/examples/loading_screen/README.md

Serves the Leptos application using Trunk and automatically opens it in the default web browser. This command is used to run the example locally during development.

```bash
trunk serve --open
```

--------------------------------

### Embed Bevy App in Leptos with Message Passing

Source: https://github.com/synphonyte/leptos-bevy-canvas/blob/main/README.md

Demonstrates how to initialize a BevyCanvas component in Leptos and establish a communication channel using message_l2b. The example shows sending text input from Leptos to a Bevy system via a message receiver.

```rust
use bevy::prelude::*;
use leptos::prelude::*;
use leptos_bevy_canvas::prelude::*;

#[derive(Message)]
pub struct TextMessage {
    pub text: String,
}

#[component]
pub fn App() -> impl IntoView {
    let (text_message_sender, bevy_text_receiver) = message_l2b::<TextMessage>();

    let on_input = move |evt| {
        text_message_sender
            .send(TextMessage { text: event_target_value(&evt) })
            .ok();
    };

    view! {
        <input type="text" on:input=on_input />

        <BevyCanvas
            init=move || {
                init_bevy_app(bevy_text_receiver)
            }
            width="300"
            height="500"
        />
    }
}

pub fn set_text(
    mut message_reader: MessageReader<TextMessage>,
) {
    for message in message_reader.read() {
        // Handle message
    }
}

fn init_bevy_app(text_receiver: BevyMessageReceiver<TextMessage>) -> App {
    let mut app = App::new();
    app
        .add_plugins(
            DefaultPlugins.set(WindowPlugin {
                primary_window: Some(Window {
                    canvas: Some("#bevy_canvas".into()),
                    ..default()
                }),
                ..default()
            }),
        )
        .import_message_from_leptos(text_receiver)
        .add_systems(Update, set_text);

    app
}
```

--------------------------------

### Synchronize Bevy State with Leptos Signal (Rust)

Source: https://context7.com/synphonyte/leptos-bevy-canvas/llms.txt

Synchronizes a Bevy State with a Leptos signal, enabling bidirectional state updates. This functionality requires the `bevy_state` feature to be enabled in your project. It facilitates managing application states like 'Start', 'Loading', and 'Ready' across both frameworks.

```rust
use bevy::prelude::*;
use leptos::prelude::*;
use leptos_bevy_canvas::prelude::*;

#[derive(States, Default, Clone, PartialEq, Eq, Hash, Debug)]
pub enum AppState {
    #[default]
    None,
    Start,
    Loading,
    Ready,
}

#[component]
pub fn App() -> impl IntoView {
    // Create synchronized state signal
    let (state_signal, bevy_state) = signal_synced(AppState::default());

    // Monitor state changes
    Effect::new(move || {
        leptos::logging::log!("AppState changed to {:?}", state_signal.get());
    });

    let is_loading = Signal::derive(move || {
        matches!(state_signal.get(), AppState::Start | AppState::Loading)
    });

    view! {
        <Show when=move || state_signal.get() == AppState::None>
            <button on:click=move |_| state_signal.set(AppState::Start)>
                "Start Game"
            </button>
        </Show>

        <Show when=is_loading>
            <div class="loading-spinner">"Loading..."</div>
        </Show>

        <Show when=move || state_signal.get() != AppState::None>
            <BevyCanvas
                init={
                    let bevy_state = bevy_state.clone();
                    move || {
                        let mut app = App::new();
                        app.add_plugins(DefaultPlugins.set(WindowPlugin {
                            primary_window: Some(Window {
                                canvas: Some("#bevy_canvas".into()),
                                ..default()
                            }),
                            ..default()
                        }))
                        // Sync state - also initializes Bevy's State
                        .sync_leptos_signal_with_state(bevy_state)
                        .add_systems(Update, check_loading_complete);
                        app
                    }
                }
                {..}
                width="400"
                height="300"
            />
        </Show>
    }
}

fn check_loading_complete(
    mut next_state: ResMut<NextState<AppState>>,
    current_state: Res<State<AppState>>,
    assets: Res<AssetServer>,
) {
    if *current_state.get() == AppState::Loading {
        // Check if assets are loaded
        if assets.all_loaded() {
            next_state.set(AppState::Ready);
        }
    }
}

```

--------------------------------

### Embed Bevy Application in Leptos using BevyCanvas Component (Rust)

Source: https://context7.com/synphonyte/leptos-bevy-canvas/llms.txt

Demonstrates how to embed a Bevy application within a Leptos component using the BevyCanvas component. It initializes a Bevy app and configures its primary window to use a specific HTML canvas element. This is the foundational step for integrating Bevy rendering into a Leptos web interface.

```rust
use bevy::prelude::*;
use leptos::prelude::*;
use leptos_bevy_canvas::prelude::*;

#[component]
pub fn App() -> impl IntoView {
    view! {
        <BevyCanvas
            init=move || {
                let mut app = App::new();
                app.add_plugins(
                    DefaultPlugins.set(WindowPlugin {
                        primary_window: Some(Window {
                            canvas: Some("#bevy_canvas".into()),
                            ..default()
                        }),
                        ..default()
                    }),
                );
                app
            }
            canvas_id="bevy_canvas"
            {..}
            width="800"
            height="600"
        />
    }
}
```

--------------------------------

### Cargo.toml Configuration for leptos-bevy-canvas (TOML)

Source: https://context7.com/synphonyte/leptos-bevy-canvas/llms.txt

Configures the `Cargo.toml` file to include `leptos-bevy-canvas`, `bevy`, and `leptos` as dependencies. It also shows how to enable optional features like `bevy_state` for state synchronization capabilities.

```toml
[dependencies]
leptos-bevy-canvas = "0.5"
bevy = "0.18"
leptos = "0.8"

# Enable state synchronization feature
[features]
default = []
bevy_state = ["leptos-bevy-canvas/bevy_state", "bevy/bevy_state"]

```

--------------------------------

### LeptosBevyApp Trait Extension Methods for Bevy App (Rust)

Source: https://context7.com/synphonyte/leptos-bevy-canvas/llms.txt

Extends Bevy's `App` with methods for integrating Leptos signals and messages. These methods allow for importing and exporting messages, handling bidirectional communication, and synchronizing signals with Bevy resources, queries, and states.

```rust
use bevy::prelude::*;
use leptos_bevy_canvas::prelude::*;

// All extension methods available on Bevy App:
fn configure_app(
    text_receiver: BevyMessageReceiver<TextMessage>,
    click_sender: BevyMessageSender<ClickMessage>,
    duplex: BevyMessageDuplex<StateMessage>,
    resource_duplex: BevyMessageDuplex<GameScore>,
    query_duplex: BevyQueryDuplex<(Transform,), With<Selected>>,
    state_duplex: BevyMessageDuplex<AppState>,
) -> App {
    let mut app = App::new();

    app.add_plugins(DefaultPlugins)
        // Import messages from Leptos into Bevy
        .import_message_from_leptos(text_receiver)

        // Export messages from Bevy to Leptos
        .export_message_to_leptos(click_sender)

        // Bidirectional message handling
        .add_duplex_leptos_message(duplex)

        // Sync Leptos signal with Bevy Resource
        .sync_leptos_signal_with_resource(resource_duplex)

        // Sync Leptos signal with Bevy Query
        .sync_leptos_signal_with_query(query_duplex)

        // Sync Leptos signal with Bevy State (requires bevy_state feature)
        .sync_leptos_signal_with_state(state_duplex);

    app
}

```

--------------------------------

### Synchronize Bevy Resource with Leptos Signal

Source: https://context7.com/synphonyte/leptos-bevy-canvas/llms.txt

Creates an `RwSignalSynced` that automatically synchronizes with a Bevy Resource. Changes from either the Leptos signal or the Bevy resource propagate to the other. This is useful for managing shared application state between the frontend and the game engine.

```rust
use bevy::prelude::*;
use leptos::prelude::*;
use leptos_bevy_canvas::prelude::*;

#[derive(Resource, Clone, Debug, Default)]
pub struct GameScore {
    pub points: i32,
    pub level: u32,
}

#[component]
pub fn App() -> impl IntoView {
    // Create synchronized signal with initial value
    let (score_signal, bevy_duplex) = signal_synced(GameScore::default());

    // Read and write like a normal RwSignal
    let add_points = move |_| {
        score_signal.write().points += 10;
    };

    view! {
        <div>
            <p>"Score: " {move || score_signal.read().points}</p>
            <p>"Level: " {move || score_signal.read().level}</p>
            <button on:click=add_points>"Add Points"</button>
        </div>
        <BevyCanvas
            init=move || {
                let mut app = App::new();
                app.add_plugins(DefaultPlugins.set(WindowPlugin {
                    primary_window: Some(Window {
                        canvas: Some("#bevy_canvas".into()),
                        ..default()
                    }),
                    ..default()
                }))
                // Syncs the signal with a Bevy Resource
                .sync_leptos_signal_with_resource(bevy_duplex)
                .add_systems(Update, update_game_score);
                app
            }
            {..}
            width="400"
            height="300"
        />
    }
}

fn update_game_score(mut score: ResMut<GameScore>) {
    // Changes here automatically sync to the Leptos signal
    if score.points >= 100 {
        score.level += 1;
        score.points = 0;
    }
}
```

--------------------------------

### Send Messages from Leptos to Bevy using message_l2b (Rust)

Source: https://context7.com/synphonyte/leptos-bevy-canvas/llms.txt

Illustrates how to establish a communication channel for sending messages from Leptos to Bevy. It defines a custom message struct, creates a sender/receiver pair using `message_l2b`, and demonstrates sending a message from a Leptos input field to a Bevy system for processing. This enables interactive data flow from the UI to the game engine.

```rust
use bevy::prelude::*;
use leptos::prelude::*;
use leptos_bevy_canvas::prelude::*;

// Define a message type with the Message derive macro
#[derive(Message, Debug)]
pub struct TextMessage {
    pub text: String,
}

#[component]
pub fn App() -> impl IntoView {
    // Create the channel pair
    let (text_sender, bevy_receiver) = message_l2b::<TextMessage>();

    let on_input = move |evt| {
        // Send message from Leptos to Bevy
        text_sender.send(TextMessage {
            text: event_target_value(&evt)
        }).ok();
    };

    view! {
        <input type="text" on:input=on_input />
        <BevyCanvas
            init=move || init_bevy_app(bevy_receiver)
            {..}
            width="400"
            height="300"
        />
    }
}

// Bevy side: import the message and read it in a system
fn init_bevy_app(text_receiver: BevyMessageReceiver<TextMessage>) -> App {
    let mut app = App::new();
    app.add_plugins(DefaultPlugins.set(WindowPlugin {
        primary_window: Some(Window {
            canvas: Some("#bevy_canvas".into()),
            ..default()
        }),
        ..default()
    }))
    .import_message_from_leptos(text_receiver)
    .add_systems(Update, handle_text_message);
    app
}

fn handle_text_message(mut reader: MessageReader<TextMessage>) {
    for message in reader.read() {
        println!("Received from Leptos: {}", message.text);
    }
}
```

--------------------------------

### Synchronize Bevy Query with Leptos Signal

Source: https://context7.com/synphonyte/leptos-bevy-canvas/llms.txt

Creates a signal synchronized with a Bevy Query result using `get_single_mut()`. This allows reading and writing component data directly from Leptos. It's particularly useful for interacting with specific entities or components within the Bevy world from the UI.

```rust
use bevy::prelude::*;
use leptos::prelude::*;
use leptos_bevy_canvas::prelude::*;

#[derive(Component, Clone, Debug, Deref, DerefMut)]
pub struct RotationSpeed(f32);

#[derive(Component, Clone, Debug, PartialEq)]
pub struct ObjectColor(Color);

#[derive(Component, Clone, Debug)]
pub struct Selected;

#[component]
pub fn App() -> impl IntoView {
    // Create query signal for selected entity's components
    let (selected, query_duplex) = 
        single_query_signal::< (RotationSpeed, ObjectColor, Selected), () >();

    let disabled = Signal::derive(move || selected.read().is_none());

    view! {
        <div class=move || if disabled.get() { "opacity-50" } else { "" }>
            <label>"Rotation Speed"</label>
            <input
                type="range"
                min="-0.1"
                max="0.1"
                step="0.01"
                prop:value=move || {
                    selected.read()
                        .as_ref()
                        .map(|(speed, _, _)| speed.to_string())
                        .unwrap_or_default()
                }
                on:input=move |ev| {
                    // Modify component directly from Leptos
                    selected.write().as_mut().map(|(speed, _, _)| {
                        if let Ok(value) = event_target_value(&ev).parse() {
                            **speed = value;
                        }
                    });
                }
            />
            <label>"Current Color"</label>
            <div style:background-color=move || {
                selected.read()
                    .as_ref()
                    .map(|(_, color, _)| format!("{:?}", color.0))
                    .unwrap_or_default()
            }></div>
        </div>
        <BevyCanvas
            init=move || {
                let mut app = App::new();
                app.add_plugins(DefaultPlugins.set(WindowPlugin {
                    primary_window: Some(Window {
                        canvas: Some("#bevy_canvas".into()),
                        ..default()
                    }),
                    ..default()
                }))
                .sync_leptos_signal_with_query(query_duplex)
                .add_systems(Update, apply_rotation);
                app
            }
            {..}
            width="400"
            height="300"
        />
    }
}

fn apply_rotation(
    mut query: Query<(&RotationSpeed, &mut Transform), With<Selected>>
) {
    for (speed, mut transform) in query.iter_mut() {
        transform.rotate_y(**speed);
    }
}
```

--------------------------------

### Send Bidirectional Messages with message_duplex

Source: https://context7.com/synphonyte/leptos-bevy-canvas/llms.txt

Creates a bidirectional channel for sending messages in both directions between Leptos and Bevy. This allows for more complex interactions where both the frontend and the game engine need to communicate state or commands to each other. The LeptosMessageDuplex implements Signal-like reading for Leptos.

```rust
use bevy::prelude::*;
use leptos::prelude::*;
use leptos_bevy_canvas::prelude::*;

#[derive(Message, Debug, Clone)]
pub struct StateMessage {
    pub value: i32,
    pub source: String,
}

#[component]
pub fn App() -> impl IntoView {
    let (leptos_duplex, bevy_duplex) = message_duplex::<StateMessage>();

    // Send to Bevy
    let increment = move |_| {
        leptos_duplex.send(StateMessage {
            value: 1,
            source: "leptos".to_string(),
        }).ok();
    };

    // Receive from Bevy (LeptosMessageDuplex implements Signal-like reading)
    Effect::new(move || {
        if let Some(msg) = leptos_duplex.get() {
            leptos::logging::log!("From {}: {}", msg.source, msg.value);
        }
    });

    view! {
        <button on:click=increment>"Increment"</button>
        <BevyCanvas
            init=move || {
                let mut app = App::new();
                app.add_plugins(DefaultPlugins.set(WindowPlugin {
                    primary_window: Some(Window {
                        canvas: Some("#bevy_canvas".into()),
                        ..default()
                    }),
                    ..default()
                }))
                .add_duplex_leptos_message(bevy_duplex)
                .add_systems(Update, handle_duplex_message);
                app
            }
            {..}
            width="400"
            height="300"
        />
    }
}

fn handle_duplex_message(
    mut reader: MessageReader<StateMessage>,
    mut writer: MessageWriter<StateMessage>,
) {
    for msg in reader.read() {
        // Echo back to Leptos with modified value
        writer.send(StateMessage {
            value: msg.value * 2,
            source: "bevy".to_string(),
        });
    }
}

```

--------------------------------

### Send Bevy to Leptos Messages with message_b2l

Source: https://context7.com/synphonyte/leptos-bevy-canvas/llms.txt

Creates a unidirectional channel for sending messages from Bevy to Leptos. It returns a LeptosMessageReceiver (usable like a Signal) and a BevyMessageSender for Bevy. This is useful for scenarios where Bevy needs to notify Leptos about events, such as user interactions or game state changes.

```rust
use bevy::prelude::*;
use leptos::prelude::*;
use leptos_bevy_canvas::prelude::*;

#[derive(Message, Debug, Clone)]
pub struct ClickMessage {
    pub entity_id: u32,
    pub position: (f32, f32),
}

#[component]
pub fn App() -> impl IntoView {
    // Create channel for Bevy -> Leptos communication
    let (click_receiver, bevy_sender) = message_b2l::<ClickMessage>();

    // React to messages from Bevy using Effect
    Effect::new(move || {
        if let Some(message) = click_receiver.get() {
            leptos::logging::log!("Clicked entity {} at {:?}",
                message.entity_id,
                message.position);
        }
    });

    view! {
        <div>
            <p>"Last clicked: " {move || {
                click_receiver.get()
                    .map(|m| format!("Entity {}", m.entity_id))
                    .unwrap_or_else(|| "None".to_string())
            }}</p>
        </div>
        <BevyCanvas
            init=move || init_bevy_app(bevy_sender)
            {..}
            width="400"
            height="300"
        />
    }
}

fn init_bevy_app(click_sender: BevyMessageSender<ClickMessage>) -> App {
    let mut app = App::new();
    app.add_plugins(DefaultPlugins.set(WindowPlugin {
        primary_window: Some(Window {
            canvas: Some("#bevy_canvas".into()),
            ..default()
        }),
        ..default()
    }))
    .export_message_to_leptos(click_sender)
    .add_systems(Update, send_click_message);
    app
}

fn send_click_message(
    mut writer: MessageWriter<ClickMessage>,
    query: Query<(Entity, &Transform), With<Clickable>>,
) {
    // Send message to Leptos when entity is clicked
    for (entity, transform) in query.iter() {
        writer.send(ClickMessage {
            entity_id: entity.index(),
            position: (transform.translation.x, transform.translation.y),
        });
    }
}

```
Tokens:
Raw