Implement 2D

SeanOMik commented

2024-10-30 19:16:17 +00:00

Owner

Currently, the engine is only 3D. I want to implement 2D since its easier to make art for, and I am no artist lmao. The renderer graph is hard coded by the BasicRenderer::new() function, I need to add a way to get the renderer and manually create the graph. This would make it more versatile and I could maybe create something like Renderer2DPlugin that constructs the render graph for 2D.

Currently, the engine is only 3D. I want to implement 2D since its easier to make art for, and I am no artist lmao. The renderer graph is hard coded by the `BasicRenderer::new()` function, I need to add a way to get the renderer and manually create the graph. This would make it more versatile and I could maybe create something like `Renderer2DPlugin` that constructs the render graph for 2D.

SeanOMik added the

Kind/Feature

Priority

High

labels 2024-10-30 19:16:17 +00:00

SeanOMik commented

2024-11-02 21:27:51 +00:00

Author

Owner

I got a 2D sprite rendering!

Its an egg from a free sprite pack I found on itch.io.

Since the Sprite rendering code is just a node in the render graph, I didn't have to do anything special to render 3d (the cube) at the same time.

Sprites are massive though since the dimensions of the images are used to create the quad, meaning that 1 pixel is the same as 1 unit. The cube in the above screenshot is a 1x1x1 cube, so each pixel in the egg texture is the size of the cube.

The camera movement when its projection is orthographic doesn't work very well at all. I need to take a look at that.

I got a 2D sprite rendering! ![image](/attachments/47ce61c3-ab66-4794-b36a-295d58faf22a) Its an egg from a [free sprite pack I found on itch.io](https://cupnooble.itch.io/sprout-lands-asset-pack). Since the Sprite rendering code is just a node in the render graph, I didn't have to do anything special to render 3d (the cube) at the same time. Sprites are massive though since the dimensions of the images are used to create the quad, meaning that 1 pixel is the same as 1 unit. The cube in the above screenshot is a 1x1x1 cube, so each pixel in the egg texture is the size of the cube. The camera movement when its projection is orthographic doesn't work very well at all. I need to take a look at that.

image.png

27 KiB

SeanOMik commented

2024-11-16 04:16:00 +00:00

Author

Owner

Not long after the last post, I implemented a working orthographic projection. The camera movement I talked about was actually issues with the projection (who would've expected lol).

I also implemented scaling modes for the projection, so you can set the size of the screen to fit a certain amount of world units. The above screenshot was taken with a fix height of 180 world units:

world.spawn((
    Camera2dBundle {
        projection: CameraProjection::Orthographic(OrthographicProjection {
            scale_mode: ScaleMode::Height(180.0),
            ..Default::default()
        }),
        ..Default::default()
    },
    Transform::from_xyz(0.0, 0.0, 0.0),
    FreeFly3dCamera::default(),
));

I still don't have a 2d camera controller implemented, still reusing the 3d one. It should be easy to write a top down controller, so I'll do that next.

Not long after the last post, I implemented a working orthographic projection. The camera movement I talked about was actually issues with the projection (who would've expected lol). ![2024-11-15_23-12](/attachments/6f097fd8-e532-4657-8d7c-7b04f41596d1) I also implemented scaling modes for the projection, so you can set the size of the screen to fit a certain amount of world units. The above screenshot was taken with a fix height of 180 world units: ```rust world.spawn(( Camera2dBundle { projection: CameraProjection::Orthographic(OrthographicProjection { scale_mode: ScaleMode::Height(180.0), ..Default::default() }), ..Default::default() }, Transform::from_xyz(0.0, 0.0, 0.0), FreeFly3dCamera::default(), )); ``` I still don't have a 2d camera controller implemented, still reusing the 3d one. It should be easy to write a top down controller, so I'll do that next.

2024-11-15_23-12.png

7.9 KiB

SeanOMik commented

2024-11-16 04:52:33 +00:00

Author

Owner

The top down controller is complete! I also implemented zooming, but its kind of wonky when I have a fixed height scale mode on the projection since it doesn't zoom into the origin of the screen. I think its because the origin of the projection is not the origin of the screen. I'm not really sure how I would fix that yet...

The top down controller requires the system (top_down_2d_camera_controller) to be added to world, this can be done with the TopDown2dCameraPlugin plugin, or you can manually add it. After its added, just add the TopDown2dCamera component to the camera entity and configure its settings:

TopDown2dCamera {
    speed: 5.0,
    zoom_speed: Some(0.1),
    max_zoom: 0.36,
    min_zoom: 1.0,
}

The zoom can be disabled by setting the zoom_speed to None, then the max and min zoom can be whatever since they wont be used. Since the zoom is actually just modifying the scale parameter of the projection, the max is actually the minimum scale value. As the scale approaches zero, the camera appears to be more zoomed in.

The top down controller is complete! I also implemented zooming, but its kind of wonky when I have a fixed height scale mode on the projection since it doesn't zoom into the origin of the screen. I think its because the origin of the projection is not the origin of the screen. I'm not really sure how I would fix that yet... The top down controller requires the system (`top_down_2d_camera_controller`) to be added to world, this can be done with the `TopDown2dCameraPlugin` plugin, or you can manually add it. After its added, just add the `TopDown2dCamera` component to the camera entity and configure its settings: ```rust TopDown2dCamera { speed: 5.0, zoom_speed: Some(0.1), max_zoom: 0.36, min_zoom: 1.0, } ``` The zoom can be disabled by setting the `zoom_speed` to `None`, then the max and min zoom can be whatever since they wont be used. Since the zoom is actually just modifying the scale parameter of the projection, the max is actually the minimum scale value. As the scale approaches zero, the camera appears to be more zoomed in.

SeanOMik added spent time 2024-11-16 04:52:42 +00:00

3 hours

SeanOMik added spent time 2024-11-16 04:52:54 +00:00

5 hours

SeanOMik commented

2024-11-20 22:27:12 +00:00

Author

Owner

I implemented a TextureAtlas for using sprites from an atlas. I made a little demo that would create an entity with an AtlasSprite (a sprite from an atlas) and animate it!

This was done by a system that would manually move the "frame" of the sprite and wrapping it around when it needs to restart. Its hacky, I'll make something more general next.

Its pretty easy to load an atlas. This code example creates one using a loaded texture, and sets up the grid:

// Load the texture for the atlas
let soldier = resman.request::<Image>("../assets/tiny_rpg_characters/Characters(100x100)/Soldier/Soldier/Soldier.png").unwrap();
soldier.wait_recurse_dependencies_load().unwrap();

// Create a texture atlas and store it as an asset to get a handle
let atlas = resman.store_new(TextureAtlas {
    texture: soldier,
    grid_offset: UVec2::ZERO,
    grid_size: UVec2::new(9, 7),
    cell_size: UVec2::new(100, 100),
    sprite_color: Vec3::ONE,
    pivot: Pivot::default(),
});

// Get a sprite from the atlas grid
let sprite = AtlasSprite::from_atlas_index(atlas, 9);

world.spawn((
    sprite,
    WorldTransform::default(),
    Transform::from_xyz(0.0, 0.0, -10.0),
));

This isn't very useful for more unique atlases, so maybe I should make it just store Vec<URect> inside of it, then a new_grid function that would automatically fill the vec with a grid of rects.

I implemented a `TextureAtlas` for using sprites from an atlas. I made a little demo that would create an entity with an `AtlasSprite` (a sprite from an atlas) and animate it! ![Video](/attachments/2936fe0e-9a29-4d56-b75d-95135060ded0) This was done by a system that would manually move the "frame" of the sprite and wrapping it around when it needs to restart. Its hacky, I'll make something more general next. Its pretty easy to load an atlas. This code example creates one using a loaded texture, and sets up the grid: ```rust // Load the texture for the atlas let soldier = resman.request::<Image>("../assets/tiny_rpg_characters/Characters(100x100)/Soldier/Soldier/Soldier.png").unwrap(); soldier.wait_recurse_dependencies_load().unwrap(); // Create a texture atlas and store it as an asset to get a handle let atlas = resman.store_new(TextureAtlas { texture: soldier, grid_offset: UVec2::ZERO, grid_size: UVec2::new(9, 7), cell_size: UVec2::new(100, 100), sprite_color: Vec3::ONE, pivot: Pivot::default(), }); // Get a sprite from the atlas grid let sprite = AtlasSprite::from_atlas_index(atlas, 9); world.spawn(( sprite, WorldTransform::default(), Transform::from_xyz(0.0, 0.0, -10.0), )); ``` This isn't very useful for more unique atlases, so maybe I should make it just store `Vec<URect>` inside of it, then a `new_grid` function that would automatically fill the vec with a grid of rects.

2024-11-19 20-54-49.mp4

1.1 MiB

Implement 2D #31