pixel_grid_snap/
pixel_grid_snap.rs

1//! Shows how to create graphics that snap to the pixel grid by rendering to a texture in 2D
2
3use bevy::{
4    camera::visibility::RenderLayers,
5    camera::RenderTarget,
6    color::palettes::css::GRAY,
7    prelude::*,
8    render::render_resource::{
9        Extent3d, TextureDescriptor, TextureDimension, TextureFormat, TextureUsages,
10    },
11    window::WindowResized,
12};
13
14/// In-game resolution width.
15const RES_WIDTH: u32 = 160;
16
17/// In-game resolution height.
18const RES_HEIGHT: u32 = 90;
19
20/// Default render layers for pixel-perfect rendering.
21/// You can skip adding this component, as this is the default.
22const PIXEL_PERFECT_LAYERS: RenderLayers = RenderLayers::layer(0);
23
24/// Render layers for high-resolution rendering.
25const HIGH_RES_LAYERS: RenderLayers = RenderLayers::layer(1);
26
27fn main() {
28    App::new()
29        .add_plugins(DefaultPlugins.set(ImagePlugin::default_nearest()))
30        .add_systems(Startup, (setup_camera, setup_sprite, setup_mesh))
31        .add_systems(Update, (rotate, fit_canvas))
32        .run();
33}
34
35/// Low-resolution texture that contains the pixel-perfect world.
36/// Canvas itself is rendered to the high-resolution world.
37#[derive(Component)]
38struct Canvas;
39
40/// Camera that renders the pixel-perfect world to the [`Canvas`].
41#[derive(Component)]
42struct InGameCamera;
43
44/// Camera that renders the [`Canvas`] (and other graphics on [`HIGH_RES_LAYERS`]) to the screen.
45#[derive(Component)]
46struct OuterCamera;
47
48#[derive(Component)]
49struct Rotate;
50
51fn setup_sprite(mut commands: Commands, asset_server: Res<AssetServer>) {
52    // The sample sprite that will be rendered to the pixel-perfect canvas
53    commands.spawn((
54        Sprite::from_image(asset_server.load("pixel/bevy_pixel_dark.png")),
55        Transform::from_xyz(-45., 20., 2.),
56        Rotate,
57        PIXEL_PERFECT_LAYERS,
58    ));
59
60    // The sample sprite that will be rendered to the high-res "outer world"
61    commands.spawn((
62        Sprite::from_image(asset_server.load("pixel/bevy_pixel_light.png")),
63        Transform::from_xyz(-45., -20., 2.),
64        Rotate,
65        HIGH_RES_LAYERS,
66    ));
67}
68
69/// Spawns a capsule mesh on the pixel-perfect layer.
70fn setup_mesh(
71    mut commands: Commands,
72    mut meshes: ResMut<Assets<Mesh>>,
73    mut materials: ResMut<Assets<ColorMaterial>>,
74) {
75    commands.spawn((
76        Mesh2d(meshes.add(Capsule2d::default())),
77        MeshMaterial2d(materials.add(Color::BLACK)),
78        Transform::from_xyz(25., 0., 2.).with_scale(Vec3::splat(32.)),
79        Rotate,
80        PIXEL_PERFECT_LAYERS,
81    ));
82}
83
84fn setup_camera(mut commands: Commands, mut images: ResMut<Assets<Image>>) {
85    let canvas_size = Extent3d {
86        width: RES_WIDTH,
87        height: RES_HEIGHT,
88        ..default()
89    };
90
91    // This Image serves as a canvas representing the low-resolution game screen
92    let mut canvas = Image {
93        texture_descriptor: TextureDescriptor {
94            label: None,
95            size: canvas_size,
96            dimension: TextureDimension::D2,
97            format: TextureFormat::Bgra8UnormSrgb,
98            mip_level_count: 1,
99            sample_count: 1,
100            usage: TextureUsages::TEXTURE_BINDING
101                | TextureUsages::COPY_DST
102                | TextureUsages::RENDER_ATTACHMENT,
103            view_formats: &[],
104        },
105        ..default()
106    };
107
108    // Fill image.data with zeroes
109    canvas.resize(canvas_size);
110
111    let image_handle = images.add(canvas);
112
113    // This camera renders whatever is on `PIXEL_PERFECT_LAYERS` to the canvas
114    commands.spawn((
115        Camera2d,
116        Camera {
117            // Render before the "main pass" camera
118            order: -1,
119            target: RenderTarget::Image(image_handle.clone().into()),
120            clear_color: ClearColorConfig::Custom(GRAY.into()),
121            ..default()
122        },
123        Msaa::Off,
124        InGameCamera,
125        PIXEL_PERFECT_LAYERS,
126    ));
127
128    // Spawn the canvas
129    commands.spawn((Sprite::from_image(image_handle), Canvas, HIGH_RES_LAYERS));
130
131    // The "outer" camera renders whatever is on `HIGH_RES_LAYERS` to the screen.
132    // here, the canvas and one of the sample sprites will be rendered by this camera
133    commands.spawn((Camera2d, Msaa::Off, OuterCamera, HIGH_RES_LAYERS));
134}
135
136/// Rotates entities to demonstrate grid snapping.
137fn rotate(time: Res<Time>, mut transforms: Query<&mut Transform, With<Rotate>>) {
138    for mut transform in &mut transforms {
139        let dt = time.delta_secs();
140        transform.rotate_z(dt);
141    }
142}
143
144/// Scales camera projection to fit the window (integer multiples only).
145fn fit_canvas(
146    mut resize_messages: MessageReader<WindowResized>,
147    mut projection: Single<&mut Projection, With<OuterCamera>>,
148) {
149    let Projection::Orthographic(projection) = &mut **projection else {
150        return;
151    };
152    for window_resized in resize_messages.read() {
153        let h_scale = window_resized.width / RES_WIDTH as f32;
154        let v_scale = window_resized.height / RES_HEIGHT as f32;
155        projection.scale = 1. / h_scale.min(v_scale).round();
156    }
157}
pixel_grid_snap/pixel_grid_snap.rs

pixel_grid_snap/
pixel_grid_snap.rs
