Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add example for pixel-perfect grid snapping in 2D #8112

Merged
merged 15 commits into from
Dec 26, 2023
Merged
Show file tree
Hide file tree
Changes from 12 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -474,13 +474,12 @@ category = "2D Rendering"
wasm = true

[[example]]
name = "pixel_perfect"
path = "examples/2d/pixel_perfect.rs"
doc-scrape-examples = true
name = "pixel_grid_snap"
path = "examples/2d/pixel_grid_snap.rs"

[package.metadata.example.pixel_perfect]
name = "Pixel Perfect"
description = "Demonstrates pixel perfect in 2d"
[package.metadata.example.pixel_grid_snap]
name = "Pixel Grid Snapping"
description = "Shows how to create graphics that snap to the pixel grid by rendering to a texture in 2D"
category = "2D Rendering"
wasm = true

Expand Down
Binary file modified assets/pixel/bevy_pixel_dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/pixel/bevy_pixel_light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
158 changes: 158 additions & 0 deletions examples/2d/pixel_grid_snap.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
//! Shows how to create graphics that snap to the pixel grid by rendering to a texture in 2D

use bevy::{
prelude::*,
render::{
camera::RenderTarget,
render_resource::{
Extent3d, TextureDescriptor, TextureDimension, TextureFormat, TextureUsages,
},
view::RenderLayers,
},
sprite::MaterialMesh2dBundle,
window::WindowResized,
};

// in-game resolution
const RES_WIDTH: u32 = 160;
const RES_HEIGHT: u32 = 90;

fn main() {
App::new()
.add_plugins(DefaultPlugins.set(ImagePlugin::default_nearest()))
.insert_resource(Msaa::Off)
.add_systems(Startup, (setup_camera, setup_sprite, setup_mesh))
.add_systems(Update, (rotate_drawables, fit_canvas))
.run();
}

#[derive(Component)]
struct Canvas;

#[derive(Component)]
struct InGameCamera;

#[derive(Component)]
struct OuterCamera;

#[derive(Component)]
struct Drawable;

fn setup_sprite(mut commands: Commands, asset_server: Res<AssetServer>) {
// the sample sprite that will be rendered to the pixel-perfect canvas
commands.spawn((
SpriteBundle {
texture: asset_server.load("pixel/bevy_pixel_dark.png"),
transform: Transform::from_xyz(-40., 20., 2.),
..default()
},
Drawable,
RenderLayers::layer(1),
));

// the sample sprite that will be rendered to the high-res "outer world"
commands.spawn((
SpriteBundle {
texture: asset_server.load("pixel/bevy_pixel_light.png"),
transform: Transform::from_xyz(-40., -20., 2.),
..default()
},
Drawable,
));
}

fn setup_mesh(
mut commands: Commands,
mut meshes: ResMut<Assets<Mesh>>,
mut materials: ResMut<Assets<ColorMaterial>>,
) {
commands.spawn((
MaterialMesh2dBundle {
nxsaken marked this conversation as resolved.
Show resolved Hide resolved
mesh: meshes.add(Mesh::from(shape::Quad::default())).into(),
transform: Transform::from_xyz(40., 0., 2.).with_scale(Vec3::splat(32.)),
material: materials.add(ColorMaterial::from(Color::BLACK)),
..default()
},
RenderLayers::layer(1),
Drawable,
));
}

fn setup_camera(mut commands: Commands, mut images: ResMut<Assets<Image>>) {
let canvas_size = Extent3d {
width: RES_WIDTH,
height: RES_HEIGHT,
..default()
};

// this Image serves as a canvas representing the low-resolution game screen
let mut canvas = Image {
texture_descriptor: TextureDescriptor {
label: None,
size: canvas_size,
dimension: TextureDimension::D2,
format: TextureFormat::Bgra8UnormSrgb,
mip_level_count: 1,
sample_count: 1,
usage: TextureUsages::TEXTURE_BINDING
| TextureUsages::COPY_DST
| TextureUsages::RENDER_ATTACHMENT,
view_formats: &[],
},
..default()
};

// fill image.data with zeroes
canvas.resize(canvas_size);

let image_handle = images.add(canvas);

// this camera renders whatever is on Render layer 1 to the canvas
commands.spawn((
Camera2dBundle {
camera: Camera {
// render before the "main pass" camera
order: -1,
target: RenderTarget::Image(image_handle.clone()),
..default()
},
..default()
},
RenderLayers::layer(1),
InGameCamera,
));

// spawn the canvas
commands.spawn((
SpriteBundle {
texture: image_handle,
..default()
},
Canvas,
));

// the "outer" camera renders the objects that are not rendered to the canvas
// here, the canvas and one of the sample sprites will be rendered by this camera
commands.spawn((Camera2dBundle::default(), OuterCamera));
alice-i-cecile marked this conversation as resolved.
Show resolved Hide resolved
}

/// Rotates drawables to demonstrate grid snapping
fn rotate_drawables(time: Res<Time>, mut query: Query<&mut Transform, With<Drawable>>) {
for mut transform in &mut query {
let dt = time.delta_seconds();
transform.rotate_z(dt);
}
}

/// Scales camera projection to fit the window (integer multiples only)
fn fit_canvas(
mut resize_events: EventReader<WindowResized>,
mut q: Query<&mut OrthographicProjection, With<OuterCamera>>,
nxsaken marked this conversation as resolved.
Show resolved Hide resolved
) {
for event in resize_events.read() {
let h_scale = event.width / RES_WIDTH as f32;
let v_scale = event.height / RES_HEIGHT as f32;
let mut projection = q.single_mut();
projection.scale = 1. / h_scale.min(v_scale).round();
}
}
49 changes: 0 additions & 49 deletions examples/2d/pixel_perfect.rs

This file was deleted.

2 changes: 1 addition & 1 deletion examples/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ Example | Description
[Mesh 2D](../examples/2d/mesh2d.rs) | Renders a 2d mesh
[Mesh 2D With Vertex Colors](../examples/2d/mesh2d_vertex_color_texture.rs) | Renders a 2d mesh with vertex color attributes
[Move Sprite](../examples/2d/move_sprite.rs) | Changes the transform of a sprite
[Pixel Perfect](../examples/2d/pixel_perfect.rs) | Demonstrates pixel perfect in 2d
[Pixel Grid Snapping](../examples/2d/pixel_grid_snap.rs) | Shows how to create graphics that snap to the pixel grid by rendering to a texture in 2D
[Sprite](../examples/2d/sprite.rs) | Renders a sprite
[Sprite Flipping](../examples/2d/sprite_flipping.rs) | Renders a sprite flipped along an axis
[Sprite Sheet](../examples/2d/sprite_sheet.rs) | Renders an animated sprite
Expand Down
Loading