How to disable pixel alignment for 2D sprites?

[adsick]

So I decided to move some sprites on screen and quickly noticed that their movement is not smooth.
It seems like sprite coordinates are getting round up (or down) to whole (1, 2, 3...) values while being rendered despite their transform is represented as real floating point values (1.0, 1.1, 1.2, 1.3...)

Reproduction is simple: take a sprite and move it with the speed of 1 pixel per second in any direction.
here is the code:

use bevy::prelude::*;

fn main() {
    App::build()
        .add_plugins(DefaultPlugins)
        .add_startup_system(setup.system())
        .add_system(animate.system())
        .run();
}

fn setup(
    mut commands: Commands,
    asset_server: Res<AssetServer>,
    mut materials: ResMut<Assets<ColorMaterial>>,
) {
    // 2d camera
    commands.spawn_bundle(OrthographicCameraBundle::new_2d());

    let texture_handle = asset_server.load("branding/icon.png");
    commands.spawn_bundle(SpriteBundle {
        material: materials.add(texture_handle.into()),
        ..Default::default()
    });
}

fn animate(time: Res<Time>, mut query: Query<&mut Transform, With<Draw>>) {
    //println!("time delta: {}", time.delta().as_secs_f32());
    for mut transform in query.iter_mut() {
        transform.translation.x += 1.0 * time.delta_seconds();
        println!("transform: {:?}", transform);
    }
}

console output as expected:

transform: Transform { translation: Vec3(1.0035007, 0.0, 0.0), rotation: Quat(0.0, 0.0, 0.0, 1.0), scale: Vec3(1.0, 1.0, 1.0) }
transform: Transform { translation: Vec3(1.0204005, 0.0, 0.0), rotation: Quat(0.0, 0.0, 0.0, 1.0), scale: Vec3(1.0, 1.0, 1.0) }
transform: Transform { translation: Vec3(1.0370445, 0.0, 0.0), rotation: Quat(0.0, 0.0, 0.0, 1.0), scale: Vec3(1.0, 1.0, 1.0) }
transform: Transform { translation: Vec3(1.05332, 0.0, 0.0), rotation: Quat(0.0, 0.0, 0.0, 1.0), scale: Vec3(1.0, 1.0, 1.0) }
transform: Transform { translation: Vec3(1.0700871, 0.0, 0.0), rotation: Quat(0.0, 0.0, 0.0, 1.0), scale: Vec3(1.0, 1.0, 1.0) }
transform: Transform { translation: Vec3(1.087208, 0.0, 0.0), rotation: Quat(0.0, 0.0, 0.0, 1.0), scale: Vec3(1.0, 1.0, 1.0) }
transform: Transform { translation: Vec3(1.1033664, 0.0, 0.0), rotation: Quat(0.0, 0.0, 0.0, 1.0), scale: Vec3(1.0, 1.0, 1.0) }
transform: Transform { translation: Vec3(1.1200224, 0.0, 0.0), rotation: Quat(0.0, 0.0, 0.0, 1.0), scale: Vec3(1.0, 1.0, 1.0) }
transform: Transform { translation: Vec3(1.1365589, 0.0, 0.0), rotation: Quat(0.0, 0.0, 0.0, 1.0), scale: Vec3(1.0, 1.0, 1.0) }

but sprite "jumps" 1 pixel in 1 second instead of smooth movement. **how to fix this? **
I expect that this will be useful for others as well.

[adsick]

looks like I need to change the filtering mode of the texture to linear, but I don't know how to do it.

[adsick]

after long tries I've finally figured out a weird way of setting filtering mode to linear, and it both works and fixes the jitter but

1. it is not optimal
2. it is not the most obvious thing to do (it took me hours to get to it)

//setup system 
    let texture_handle = asset_server.load("branding/icon.png");
    commands.insert_resource(texture_handle.clone()); //here I put the handle to the texture inside Res

        
    commands.spawn_bundle(SpriteBundle {
        material: materials.add(ColorMaterial::texture(texture_handle)),
        ..Default::default()
    });

fn change_filter(handle: Res<Handle<Texture>>, mut assets: ResMut<Assets<Texture>>){
    if let Some(tex) = assets.get_mut(&*handle){ //here I get the actual texture from Assets<Texture>
        tex.sampler.mag_filter = bevy::render::texture::FilterMode::Linear; //and finally able to set the filtering (b.t.w. it is not obvious which property of the sampler we want to set.
        println!("now should be linear");
    }
}

[adsick]

yep, it does it on every frame that's the reason it is not optimal

[zicklag]

Yeah, there has been some discussion before about ways of more easily handling modifying assets when they are loaded. A couple references I could find:

• add a method on AssetServer to create an asset from an existing one #1665
• Multi-stage asset loading #1833
• Ergonomics around Asset Processing #1307

Unfortunately there isn't a much better way to do this right now, that I know of.

As for setting the filtering mode every frame, you can get around that by listening for asset created events and then only modifying the filtering mode when the asset is created:

Warning: Untested code.

fn linear_texture_filter(
    mut event_reader: EventReader<AssetEvent<Texture>>,
    mut texture_assets: Assets<Texture>
) {
    for event in event_reader.iter() {
        match event {
            // When the map asset has been modified
            AssetEvent::Created { handle } => {
                if let Some(texture) = texture_assets.get_mut(handle) {
                    texture.sampler.mag_filter = bevy::render::texture::FilterMode::Linear;
                }
            }
            _ => (),
        }
    }
}

[adsick]

ty hor your comment, maybe it will get better in future updates.

[The-DevBlog]

[adsick]

sorry bro, but seems like it is unrelated to the topic.

[The-DevBlog]

You right. I removed it. Is your project open sourced? I'd like to take a look at it and poke around.

[adsick]

It is lost now (I did not published and then performed a OS installation).
I will start from scratch when I feel like it.

[The-DevBlog]

Haha sounds good. I'm thinking I'm actually going to get away from bevy_rapier2d and create my own physics. I'll post here when I get something working.