combining_multiple_transformation.md

Combining Multiple Transformation

In a Transform, translations, rotations and scales can be performed at the same time. We do so by setting the fields translation, rotation and scale when constructing a Transform.

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    commands.spawn(Camera2dBundle::default());

    commands.spawn(SpriteBundle {
        texture: asset_server.load("bevy_bird_dark.png"),
        transform: Transform {
            translation: (300., 100., 0.).into(),
            rotation: Quat::from_rotation_z(1.57),
            scale: (2., 1., 1.).into(),
        },
        ..default()
    });
}

When all the fields are set, the result can be treated as performing scale, rotation and translation in order.

The full code is as follows:

use bevy::{
    app::{App, Startup},
    asset::AssetServer,
    core_pipeline::core_2d::Camera2dBundle,
    ecs::system::{Commands, Res},
    math::Quat,
    sprite::SpriteBundle,
    transform::components::Transform,
    utils::default,
    DefaultPlugins,
};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    commands.spawn(Camera2dBundle::default());

    commands.spawn(SpriteBundle {
        texture: asset_server.load("bevy_bird_dark.png"),
        transform: Transform {
            translation: (300., 100., 0.).into(),
            rotation: Quat::from_rotation_z(1.57),
            scale: (2., 1., 1.).into(),
        },
        ..default()
    });
}

Result:

Sometimes, we would like the translation to be performed prior to the rotation. In this case, we can use mul_transform of Transform to combine two transformation.

Be careful with the order of mul_transform. For two transformation A and B, A.mul_transform(B) means B will be performed prior to A. This is due to the nature of the underlying mathematics.

In the following example, we translate an image to the right of the origin first and then we rotate the image counter-clockwise based on the origin. The transformed image will be closer to the top-right corner of the window.

use bevy::{
    app::{App, Startup},
    asset::AssetServer,
    core_pipeline::core_2d::Camera2dBundle,
    ecs::system::{Commands, Res},
    math::Quat,
    sprite::SpriteBundle,
    transform::components::Transform,
    utils::default,
    DefaultPlugins,
};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    commands.spawn(Camera2dBundle::default());

    commands.spawn(SpriteBundle {
        texture: asset_server.load("bevy_bird_dark.png"),
        transform: Transform::from_rotation(Quat::from_rotation_z(0.79))
            .mul_transform(Transform::from_xyz(300., 0., 0.)),
        ..default()
    });
}

Result:

The method mul_transform can also help us combining multiple transformation. For example, to combine three transformation A, B and C, we can write A.mul_transform(B.mul_transform(C)).

➡️ Next: Displaying Texts

📘 Back: Table of contents