texture_atlas.rs

use bevy::prelude::*;
use kayak_ui::prelude::{widgets::*, KStyle, *};

fn startup(
    mut commands: Commands,
    mut font_mapping: ResMut<FontMapping>,
    asset_server: Res<AssetServer>,
) {
    font_mapping.set_default(asset_server.load("roboto.kayak_font"));

    let image_handle = asset_server.load("texture_atlas.png");

    //texture_atlas.png uses 16 pixel sprites and is 272x128 pixels
    let tile_size = 16;
    let columns = 272 / tile_size;
    let rows = 128 / tile_size;
    let atlas = bevy::sprite::TextureAtlas::from_grid(
        image_handle.clone(),
        bevy::prelude::Vec2::splat(tile_size as f32),
        columns,
        rows,
        None,
        None,
    );

    //The sign in the top right of the image would be index 16
    let sign_index = 16;
    //The flower is in the 6(-1) row and 15 collumn
    let flower_index = columns * 5 + 15;

    let mut widget_context = KayakRootContext::new();
    widget_context.add_plugin(KayakWidgetsContextPlugin);
    let parent_id = None;

    let atlas_styles = KStyle {
        position_type: StyleProp::Value(KPositionType::ParentDirected),
        width: StyleProp::Value(Units::Pixels(200.0)),
        height: StyleProp::Value(Units::Pixels(200.0)),
        ..KStyle::default()
    };

    let rect = atlas.textures[sign_index];
    let sign_position = rect.min;
    let sign_size = rect.max - rect.min;

    let rect = atlas.textures[flower_index];
    let flower_position = rect.min;
    let flower_size = rect.max - rect.min;

    rsx! {
        <KayakAppBundle>
            <TextureAtlasBundle
                atlas={TextureAtlasProps {
                    handle: image_handle.clone(),
                    position: sign_position,
                    tile_size: sign_size,
                }}
                styles={atlas_styles.clone()}
            />
            <TextureAtlasBundle
                atlas={TextureAtlasProps {
                    handle: image_handle,
                    position: flower_position,
                    tile_size: flower_size,
                }}
                styles={atlas_styles}
            />
        </KayakAppBundle>
    };

    commands.spawn(UICameraBundle::new(widget_context));
}

fn main() {
    App::new()
        .add_plugins(DefaultPlugins.set(ImagePlugin::default_nearest()))
        .add_plugin(KayakContextPlugin)
        .add_plugin(KayakWidgets)
        .add_startup_system(startup)
        .run()
}