├── .gitignore
├── .rusty-hook.toml
├── Cargo.toml
├── README.md
├── assets
    ├── Idle.png
    ├── Run.png
    ├── demo.gif
    ├── parallax-forest-back-trees.png
    ├── parallax-forest-front-trees.png
    ├── parallax-forest-lights.png
    └── parallax-forest-middle-trees.png
├── credits.txt
├── examples
    └── forest.rs
└── src
    ├── layer.rs
    ├── lib.rs
    └── window_size.rs


/.gitignore:
--------------------------------------------------------------------------------
1 | /target
2 | Cargo.lock
3 | 


--------------------------------------------------------------------------------
/.rusty-hook.toml:
--------------------------------------------------------------------------------
1 | [hooks]
2 | pre-commit = "cargo fmt -- --check"
3 | 
4 | [logging]
5 | verbose = true
6 | 


--------------------------------------------------------------------------------
/Cargo.toml:
--------------------------------------------------------------------------------
 1 | [package]
 2 | name = "bevy-prototype-parallax"
 3 | version = "0.1.0"
 4 | authors = ["beau trepp <beautrepp@gmail.com>"]
 5 | edition = "2018"
 6 | description = "Parallax scrolling plugin for bevy"
 7 | keywords = ["gamedev", "bevy", "bevy-prototype"]
 8 | readme = "README.md"
 9 | license = "MIT"
10 | 
11 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
12 | 
13 | [dependencies]
14 | bevy = "0.5.0"
15 | 
16 | [dev-dependencies]
17 | rstest = "0.6.4"
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # bevy-prototype-parallax
 2 | 
 3 | A simple parallax component for the bevy engine.
 4 | 
 5 | This will allow you to quickly have a scrolling parralax style background.
 6 | It should also be useable to have a simple scrolling background too.
 7 | 
 8 | It does assume your image repeats nicely infinitely
 9 | 
10 | ![Demo](assets/demo.gif)
11 | 
12 | # Usage
13 | 
14 | ```rust
15 | 
16 |     App::build()
17 |         ....
18 |         .add_plugin(ParallaxPlugin)
19 | 
20 |     ....
21 |     let handle = /*load your colormaterial */
22 | 
23 |     commands
24 |         .spawn(Camera2dComponents::default())
25 |         .with(WindowSize::default())
26 |         .with_children(|cb| {
27 |             // Spawn the layers.
28 |             // We can have as many as we like
29 |             cb.spawn(LayerComponents {
30 |                 layer: Layer {
31 |                     speed: speed,
32 |                 },
33 |                 material: handle,                                                                                
34 |                 ..Default::default()
35 |         });
36 | ```
37 | 
38 | Make sure your camera has a window size component. 
39 | This will enable a system that allows, the window size to be known, which allows the plugin to
40 | determine how many times to repeat the image.
41 | 
42 | Then make sure your layer uses this camera as it's parent element. This allows it so shift
43 | itself depending on how much the camera is offset. Different speeds off different layers will
44 | achieve a repeating effect, a speed of 0 will make the layer static, a speed of 1.0 will 
45 | make it move linearly with the camera.
46 | 
47 | The sprite components are managed automatically by the layer system, it will only spawn as many
48 | as needed to fill the screen.
49 | 
50 | Note: doesn't support resizing yet.
51 | Note: only horizontal for now. 
52 | 
53 | 


--------------------------------------------------------------------------------
/assets/Idle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/btrepp/bevy-prototype-parallax/c2838605548815c80e821fb8f8457e76d00e2d39/assets/Idle.png


--------------------------------------------------------------------------------
/assets/Run.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/btrepp/bevy-prototype-parallax/c2838605548815c80e821fb8f8457e76d00e2d39/assets/Run.png


--------------------------------------------------------------------------------
/assets/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/btrepp/bevy-prototype-parallax/c2838605548815c80e821fb8f8457e76d00e2d39/assets/demo.gif


--------------------------------------------------------------------------------
/assets/parallax-forest-back-trees.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/btrepp/bevy-prototype-parallax/c2838605548815c80e821fb8f8457e76d00e2d39/assets/parallax-forest-back-trees.png


--------------------------------------------------------------------------------
/assets/parallax-forest-front-trees.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/btrepp/bevy-prototype-parallax/c2838605548815c80e821fb8f8457e76d00e2d39/assets/parallax-forest-front-trees.png


--------------------------------------------------------------------------------
/assets/parallax-forest-lights.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/btrepp/bevy-prototype-parallax/c2838605548815c80e821fb8f8457e76d00e2d39/assets/parallax-forest-lights.png


--------------------------------------------------------------------------------
/assets/parallax-forest-middle-trees.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/btrepp/bevy-prototype-parallax/c2838605548815c80e821fb8f8457e76d00e2d39/assets/parallax-forest-middle-trees.png


--------------------------------------------------------------------------------
/credits.txt:
--------------------------------------------------------------------------------
1 | ansimuz https://ansimuz.itch.io/parallax-forest
2 | LuizMelo https://luizmelo.itch.io/huntress


--------------------------------------------------------------------------------
/examples/forest.rs:
--------------------------------------------------------------------------------
  1 | use std::f32::consts::PI;
  2 | 
  3 | use bevy::{prelude::*, render::camera::Camera};
  4 | use bevy_prototype_parallax::{Layer, LayerBundle, ParallaxPlugin, WindowSize};
  5 | 
  6 | struct Player {
  7 |     pub run: Handle<TextureAtlas>,
  8 |     pub idle: Handle<TextureAtlas>,
  9 | }
 10 | 
 11 | fn main() {
 12 |     let window = WindowDescriptor {
 13 |         title: "Forrest".to_string(),
 14 |         width: 1280.0,
 15 |         height: 720.0,
 16 |         vsync: true,
 17 |         resizable: false,
 18 |         ..Default::default()
 19 |     };
 20 | 
 21 |     App::build()
 22 |         .insert_resource(window)
 23 |         .add_plugins(DefaultPlugins)
 24 |         .add_startup_system(setup_parallax.system())
 25 |         .add_startup_system(setup_character.system())
 26 |         .add_system(move_character_system.system())
 27 |         .add_system(follow_player_camera.system())
 28 |         .add_system(animate_sprite_system.system())
 29 |         .add_plugin(ParallaxPlugin)
 30 |         .run();
 31 | }
 32 | 
 33 | /// Set up our background layers
 34 | fn setup_parallax(
 35 |     mut commands: Commands,
 36 |     asset_server: Res<AssetServer>,
 37 |     mut materials: ResMut<Assets<ColorMaterial>>,
 38 | ) {
 39 |     // Helper that loads an asset as a parallax layer
 40 |     // layers should have different speeds to achieve the effect
 41 |     let mut layer = |path: &str, speed: f32| -> LayerBundle {
 42 |         let handle = {
 43 |             let handle = asset_server.load(path);
 44 |             let color = materials.add(handle.into());
 45 |             color
 46 |         };
 47 |         LayerBundle {
 48 |             layer: Layer {
 49 |                 speed: speed,
 50 |                 ..Default::default()
 51 |             },
 52 |             material: handle,
 53 |             transform: Transform {
 54 |                 scale: Vec3::new(4.0, 4.5, 1.0),
 55 |                 translation: Vec3::new(0.0, 0.0, 0.0),
 56 |                 ..Default::default()
 57 |             },
 58 |             ..Default::default()
 59 |         }
 60 |     };
 61 | 
 62 |     // Note the backgrounds are associated with a camera.
 63 |     commands
 64 |         .spawn_bundle(OrthographicCameraBundle::new_2d())
 65 |         .insert(WindowSize::default())
 66 |         .with_children(|cb| {
 67 |             // Spawn the layers.
 68 |             // We can have as many as we like
 69 |             cb.spawn_bundle(layer("parallax-forest-back-trees.png", 0.0));
 70 |             cb.spawn_bundle(layer("parallax-forest-lights.png", 0.05));
 71 |             cb.spawn_bundle(layer("parallax-forest-middle-trees.png", 0.1));
 72 |             cb.spawn_bundle(layer("parallax-forest-front-trees.png", 0.2));
 73 |         });
 74 | }
 75 | 
 76 | /// Spawns our character and loads it's resources
 77 | fn setup_character(
 78 |     mut commands: Commands,
 79 |     asset_server: Res<AssetServer>,
 80 |     mut texture_atlases: ResMut<Assets<TextureAtlas>>,
 81 | ) {
 82 |     let player = {
 83 |         let texture_handle_run = asset_server.load("Run.png");
 84 |         let texture_atlas_run =
 85 |             TextureAtlas::from_grid(texture_handle_run, Vec2::new(24.0, 24.0), 8, 1);
 86 |         let texture_handle_idle = asset_server.load("Idle.png");
 87 |         let texture_atlas_idle =
 88 |             TextureAtlas::from_grid(texture_handle_idle, Vec2::new(24.0, 24.0), 8, 1);
 89 |         let run = texture_atlases.add(texture_atlas_run);
 90 |         let idle = texture_atlases.add(texture_atlas_idle);
 91 |         Player { run, idle }
 92 |     };
 93 | 
 94 |     commands
 95 |         .spawn_bundle(SpriteSheetBundle {
 96 |             texture_atlas: player.idle.clone(),
 97 |             transform: Transform {
 98 |                 scale: Vec3::new(25.0, 25.0, 1.0),
 99 |                 translation: Vec3::new(0.0, -220.0, 1.0),
100 |                 ..Default::default()
101 |             },
102 |             ..Default::default()
103 |         })
104 |         .insert(Timer::from_seconds(0.1, true))
105 |         .insert(player);
106 | }
107 | 
108 | /// From bevy examples, will animate the sprites in an atlas
109 | fn animate_sprite_system(
110 |     texture_atlases: Res<Assets<TextureAtlas>>,
111 |     time: Res<Time>,
112 |     mut query: Query<(&mut Timer, &mut TextureAtlasSprite, &Handle<TextureAtlas>)>,
113 | ) {
114 |     for (mut timer, mut sprite, texture_atlas_handle) in query.iter_mut() {
115 |         if timer.tick(time.delta()).finished() {
116 |             let texture_atlas = texture_atlases.get(texture_atlas_handle).unwrap();
117 |             sprite.index = ((sprite.index as usize + 1) % texture_atlas.textures.len()) as u32;
118 |         }
119 |     }
120 | }
121 | 
122 | /// Moves the character and sets the appropriate atlas for animation
123 | fn move_character_system(
124 |     keyboard_input: Res<Input<KeyCode>>,
125 |     mut query: Query<(&Player, &mut Transform, &mut Handle<TextureAtlas>)>,
126 | ) {
127 |     for (player, mut transform, mut atlas) in query.iter_mut() {
128 |         if keyboard_input.pressed(KeyCode::A) {
129 |             transform.translation.x += -1.0 * 5.0;
130 |             transform.rotation = Quat::from_rotation_y(PI).into();
131 |             *atlas = player.run.clone();
132 |         } else if keyboard_input.pressed(KeyCode::D) {
133 |             transform.translation.x += 1.0 * 5.0;
134 |             transform.rotation = Quat::from_rotation_y(0.0).into();
135 |             *atlas = player.run.clone();
136 |         } else {
137 |             *atlas = player.idle.clone();
138 |         }
139 |     }
140 | }
141 | 
142 | /// A simple system that will cause the camera to follow the character
143 | fn follow_player_camera(
144 |     player: Query<&Transform, (With<Player>, Without<Camera>)>,
145 |     mut camera: Query<&mut Transform, (With<Camera>, Without<Player>)>,
146 | ) {
147 |     if let Some(first_player) = player.iter().next() {
148 |         for mut transform in camera.iter_mut() {
149 |             transform.translation.x = first_player.translation.x;
150 |         }
151 |     }
152 | }
153 | 


--------------------------------------------------------------------------------
/src/layer.rs:
--------------------------------------------------------------------------------
  1 | use crate::window_size::WindowSize;
  2 | use bevy::{prelude::*, render::camera::Camera};
  3 | 
  4 | #[derive(Default, Debug)]
  5 | pub struct Layer {
  6 |     pub speed: f32,
  7 | }
  8 | 
  9 | #[derive(Bundle, Default)]
 10 | pub struct LayerBundle {
 11 |     pub layer: Layer,
 12 |     pub transform: Transform,
 13 |     pub global: GlobalTransform,
 14 |     pub children: Children,
 15 |     pub material: Handle<ColorMaterial>,
 16 |     pub sprite: Sprite,
 17 | }
 18 | 
 19 | /// Gets the 'screen' width of the sprite.
 20 | /// This takes into account the scaling
 21 | fn sprite_scaled_width(sprite: &Sprite, transform: &Transform) -> f32 {
 22 |     sprite.size[0] * transform.scale.x
 23 | }
 24 | 
 25 | /// Calculate the amount of sprites we need for the effect
 26 | fn desired_children_count(window: &WindowSize, sprite: &Sprite, transform: &Transform) -> f32 {
 27 |     let tex_width = sprite_scaled_width(sprite, transform) as f32;
 28 |     if tex_width > 0.0 {
 29 |         window.width.div_euclid(tex_width) + 2.0
 30 |     } else {
 31 |         0.0
 32 |     }
 33 | }
 34 | 
 35 | /// Caculates an offset to put the layer at the left edge of the 'container'
 36 | /// This is because the camera seems to center on 0.0
 37 | fn camera_left_edge_offset(window: &WindowSize) -> f32 {
 38 |     let left_side = 0.0 - window.width as f32 / 2.0;
 39 |     left_side
 40 | }
 41 | 
 42 | /// How far to offset the layer due to the camera position
 43 | /// Will be clamped by the sprite offset
 44 | fn camera_sprite_offset(
 45 |     camera: &Vec3,
 46 |     layer: &Layer,
 47 |     sprite: &Sprite,
 48 |     transform: &Transform,
 49 | ) -> f32 {
 50 |     let sprite_width = sprite_scaled_width(sprite, transform);
 51 |     -(camera.x * layer.speed).rem_euclid(sprite_width)
 52 | }
 53 | 
 54 | /// Mutates the layer based on the camera position
 55 | /// this allows us to have the parallax effect by having the layers move at different rates
 56 | /// once we move past the width of the sprite, it resets to 0
 57 | fn move_layer_position(
 58 |     window: &WindowSize,
 59 |     camera: &Vec3,
 60 |     sprite: &Sprite,
 61 |     layer: &Layer,
 62 |     transform: &mut Transform,
 63 | ) -> () {
 64 |     let offset = camera_left_edge_offset(&window);
 65 |     let camera_x = camera_sprite_offset(camera, layer, sprite, transform);
 66 | 
 67 |     transform.translation.x = offset + camera_x;
 68 | }
 69 | 
 70 | /// Manages the amount of child sprites we need to repeat
 71 | /// Based on the windows size
 72 | pub fn children_count_system(
 73 |     mut commands: Commands,
 74 |     cameras_query: Query<(&Camera, &WindowSize, &Children)>,
 75 |     mut layer_query: Query<
 76 |         (
 77 |             Entity,
 78 |             &Parent,
 79 |             &Children,
 80 |             &Sprite,
 81 |             &Handle<ColorMaterial>,
 82 |             &Transform,
 83 |         ),
 84 |         With<Layer>,
 85 |     >,
 86 | ) {
 87 |     for (entity, parent, children, sprite, material, transform) in layer_query.iter_mut() {
 88 |         if let Ok(window) = cameras_query.get_component(parent.0) {
 89 |             let desired_children = desired_children_count(&window, &sprite, &transform);
 90 |             let current_children = children.len();
 91 |             let to_add = desired_children as usize - current_children;
 92 | 
 93 |             for _ in 0..to_add {
 94 |                 commands
 95 |                     .spawn_bundle(SpriteBundle {
 96 |                         material: material.clone(),
 97 |                         sprite: Sprite::default(),
 98 |                         ..Default::default()
 99 |                     })
100 |                     .insert(Parent(entity));
101 |             }
102 | 
103 |             // TODO: remove sprites if they aren't needed
104 |         }
105 |     }
106 | }
107 | 
108 | /// Responsible for setting the positioning of the sprites
109 | pub fn children_layout_system(
110 |     layers: Query<(&Sprite, &Children), With<Layer>>,
111 |     mut sprites: Query<&mut Transform>,
112 | ) {
113 |     for (sprite, children) in layers.iter() {
114 |         for (index, child) in children.iter().enumerate() {
115 |             if let Ok(mut transform) = sprites.get_component_mut::<Transform>(*child) {
116 |                 transform.translation.x = index as f32 * sprite_scaled_width(sprite, &transform);
117 |                 transform.translation.z = -999.0;
118 |             }
119 |         }
120 |     }
121 | }
122 | 
123 | /// Matches the layer to the camera.
124 | /// Note the layer is offset to the left by half the window to make
125 | pub fn layer_movement_system(
126 |     cameras: Query<(&Transform, &WindowSize, &Children), With<Camera>>,
127 |     mut layers: Query<(&Layer, &Sprite, &mut Transform), Without<Camera>>,
128 | ) -> () {
129 |     for (transform, window, children) in cameras.iter() {
130 |         let camera = transform.translation;
131 |         for child in children.iter() {
132 |             if let Ok((layer, sprite, mut trans)) = layers.get_mut(*child) {
133 |                 move_layer_position(window, &camera, sprite, layer, &mut trans);
134 |             }
135 |         }
136 |     }
137 | }
138 | 
139 | #[cfg(test)]
140 | mod tests {
141 |     use super::*;
142 |     use rstest::rstest;
143 | 
144 |     #[rstest(
145 |         width,
146 |         expected,
147 |         case(1024.0, -512.0),
148 |         case(1000.0, -500.0)
149 |     )]
150 |     fn test_left_edge(width: f32, expected: f32) {
151 |         let window = WindowSize {
152 |             height: 576.0,
153 |             width: width,
154 |         };
155 |         let result = camera_left_edge_offset(&window);
156 |         assert_eq!(expected, result);
157 |     }
158 | 
159 |     #[rstest(
160 |         camera,
161 |         speed,
162 |         sprite,
163 |         expected,
164 |         case(0.0, 1.0,100.0, 0.0),
165 |         case(1.0, 1.0,100.0, -1.0),
166 |         case(101.0, 1.0, 100.0, -1.0),
167 |         case(200.0, 1.0, 100.0, 0.0),
168 |         case(220.0, 1.0, 100.0, -20.0)
169 |         ::trace
170 |     )]
171 |     fn test_layer_offset(camera: f32, speed: f32, sprite: f32, expected: f32) {
172 |         let camera = Vec3::new(camera, 0.0, 0.0);
173 |         let sprite = Sprite::new(Vec2::splat(sprite));
174 |         let transform = Transform::default();
175 |         let layer = Layer { speed };
176 |         let result = camera_sprite_offset(&camera, &layer, &sprite, &transform);
177 |         assert_eq!(expected, result);
178 |     }
179 | 
180 |     #[rstest(
181 |         sprite,
182 |         scale,
183 |         expected,
184 |         case(100.0, 1.0, 100.0),
185 |         case(100.0, 2.0, 200.0),
186 |         case(100.0, 0.0, 0.0),
187 |         case(512.0, 1.0, 512.0)
188 |         ::trace
189 |     )]
190 |     fn test_scaled_width(sprite: f32, scale: f32, expected: f32) {
191 |         let transform = Transform {
192 |             scale: Vec3::splat(scale),
193 |             ..Default::default()
194 |         };
195 |         let sprite = Sprite::new(Vec2::splat(sprite));
196 |         let result = sprite_scaled_width(&sprite, &transform);
197 |         assert_eq!(expected, result);
198 |     }
199 | 
200 |     #[rstest(
201 |         screen,
202 |         texture,
203 |         scale,
204 |         expected,
205 |         case(1024.0, 100.0, 1.0, 12.0),
206 |         case(1024.0, 1025.0, 1.0, 2.0),
207 |         case(1024.0, 800.0, 1.0, 3.0),
208 |         case(1024.0, 0.0, 1.0, 0.0)
209 |         ::trace
210 |     )]
211 |     fn test_desired_children_count(screen: f32, texture: f32, scale: f32, expected: f32) {
212 |         let window = WindowSize {
213 |             height: 576.0,
214 |             width: screen,
215 |         };
216 | 
217 |         let transform = Transform {
218 |             scale: Vec3::splat(scale),
219 |             ..Default::default()
220 |         };
221 | 
222 |         let texture = Sprite::new(Vec2::new(texture as f32, window.height as f32));
223 |         let result = desired_children_count(&window, &texture, &transform);
224 |         assert_eq!(expected, result);
225 |     }
226 | 
227 |     #[rstest(
228 |         screen,camera,sprite,speed,expected,
229 |         case(1024.0, 0.0, 512.0, 0.0, -512.0),
230 |         case(1024.0, 1.0, 512.0, 0.0, -512.0),
231 |         case(1024.0, 512.0, 512.0, 1.0, -512.0),
232 |         case(1024.0, 513.0, 512.0, 1.0, -513.0),
233 |         case(1024.0, 1.0, 512.0, 1.0, -513.0),
234 |         case(1024.0, 2.0, 512.0, 0.5, -513.0),
235 |         case(1024.0, 1024.0, 512.0, 1.0, -512.0)
236 |         ::trace
237 |     )]
238 |     fn test_layer_translation(screen: f32, camera: f32, sprite: f32, speed: f32, expected: f32) {
239 |         let window_size = WindowSize {
240 |             height: 576.0,
241 |             width: screen,
242 |         };
243 | 
244 |         let camera = Vec3::new(camera, 0.0, 0.0);
245 |         let speed = Layer { speed };
246 |         let sprite = Sprite::new(Vec2::new(sprite, window_size.height as f32));
247 |         let mut transform = Transform::default();
248 |         move_layer_position(&window_size, &camera, &sprite, &speed, &mut transform);
249 |         assert_eq!(expected, transform.translation.x);
250 |     }
251 | }
252 | 


--------------------------------------------------------------------------------
/src/lib.rs:
--------------------------------------------------------------------------------
 1 | mod layer;
 2 | mod window_size;
 3 | use bevy::prelude::*;
 4 | 
 5 | pub use layer::{Layer, LayerBundle};
 6 | pub use window_size::WindowSize;
 7 | 
 8 | /// The plugin that enables parallax backgrounds
 9 | /// Note you will still need to make sure you add a background entity
10 | pub struct ParallaxPlugin;
11 | impl Plugin for ParallaxPlugin {
12 |     fn build(&self, app: &mut AppBuilder) {
13 |         app.add_system(layer::layer_movement_system.system())
14 |             .add_system(layer::children_count_system.system())
15 |             .add_system(layer::children_layout_system.system())
16 |             .add_system(window_size::window_size.system());
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/window_size.rs:
--------------------------------------------------------------------------------
 1 | use bevy::{prelude::*, render::camera::Camera};
 2 | ///! Helpers for getting the current window size.
 3 | ///! We need to know this so we can determine how much to repeat an image
 4 | 
 5 | /// Simple struct storing the height and width of the window.
 6 | /// Hopefully this may be integrated into bevy in future.
 7 | #[derive(Default)]
 8 | pub struct WindowSize {
 9 |     pub height: f32,
10 |     pub width: f32,
11 | }
12 | 
13 | /// Syncs the window width to the camera
14 | pub fn window_size(windows: Res<Windows>, mut camera_query: Query<(&Camera, &mut WindowSize)>) {
15 |     for (cam, mut size) in camera_query.iter_mut() {
16 |         if let Some(window) = windows.get(cam.window) {
17 |             // Note: This conversion will be lossy, but u32 is used internally
18 |             // for texture calcs.
19 |             let windowsize = WindowSize {
20 |                 height: window.height(),
21 |                 width: window.width(),
22 |             };
23 |             *size = windowsize;
24 |         }
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------