[Merged by Bors] - Add an example to draw a rectangle #2957

wooster0 · 2021-10-12T18:14:09Z

Objective

Every time I come back to Bevy I face the same issue: how do I draw a rectangle again? How did that work? So I go to https://github.com/bevyengine/bevy/tree/main/examples in the hope of finding literally the simplest possible example that draws something on the screen without any dependency such as an image. I don't want to have to add some image first, I just quickly want to get something on the screen with main.rs alone so that I can continue building on from that point on. Such an example is particularly helpful for a quick start for smaller projects that don't even need any assets such as images (this is my case currently).

Currently every single example of https://github.com/bevyengine/bevy/tree/main/examples#2d-rendering (which is the first section after hello world that beginners will look for for very minimalistic and quick examples) depends on at least an asset or is too complex. This PR solves this.
It also serves as a great comparison for a beginner to realize what Bevy is really like and how different it is from what they may expect Bevy to be. For example for someone coming from LÖVE, they will have something like this in their head when they think of drawing a rectangle:

function love.draw()
    love.graphics.setColor(0.25, 0.25, 0.75);
    love.graphics.rectangle("fill", 0, 0, 50, 50);
end

This, of course, differs quite a lot from what you do in Bevy. I imagine there will be people that just want to see something as simple as this in comparison to have a better understanding for the amount of differences.

Solution

Add a dead simple example drawing a blue 50x50 rectangle in the center with no more and no less than needed.

zimzat · 2021-10-12T18:24:13Z

This looks useful as a baseline. I'd like to see it include just a little more, such as one with an offset (this could be a way to show that zero/zero is in the middle and -30, 30 is left/top) and one with different length/width sizes.

If someone with more experience in Bevy could chime in, is it possible to draw anything other than a rectangle? Such as a circle, rounded rectangle, or triangle? With those this example could be graduated to "shapes" (mirroring the 3d_scene example) and would be very instructional for those who aren't good at drawing sprites :)

alice-i-cecile

Looks good to me! Eventually we may want to extend this example with other shapes, but until then this is a nice simple demonstration.

alice-i-cecile · 2021-10-12T18:25:58Z

If someone with more experience in Bevy could chime in, is it possible to draw anything other than a rectangle? Such as a circle, rounded rectangle, or triangle? With those this example could be graduated to "shapes" (mirroring the 3d_scene example) and would be very instructional for those who aren't good at drawing sprites :)

Currently, there are no other shapes supported out of the box :( bevy_prototype_lyon is the community's stopgap for now. I agree with this being a solid goal once that's in place.

wooster0 · 2021-10-12T18:28:34Z

This looks useful as a baseline. I'd like to see it include just a little more, such as one with an offset (this could be a way to show that zero/zero is in the middle and -30, 30 is left/top) and one with different length/width sizes.

I agree, such an example would be nice too. I suppose once Bevy supports more shapes out of the box another shapes.rs or other_shapes.rs in addition to rect.rs could be added to show that off as well as more shapes.

zimzat · 2021-10-12T18:33:06Z

Currently, there are no other shapes supported out of the box :( bevy_prototype_lyon is the community's stopgap for now. I agree with this being a solid goal once that's in place.

Ahh, thank you for that pointer @alice-i-cecile, I missed that. I've mainly been referencing the Official Examples (and Cheat Book) and started to forget about the https://bevyengine.org/assets/#2d page.

mockersf · 2021-10-15T20:49:28Z

After looking at

bevy/pipelined/bevy_sprite2/src/bundle.rs

Lines 11 to 16 in 43e8a15

    
           pub struct PipelinedSpriteBundle { 
        
               pub sprite: Sprite, 
        
               pub transform: Transform, 
        
               pub global_transform: GlobalTransform, 
        
               pub texture: Handle<Image>, 
        
           }

This may not work after the renderer rework because it won't be possible to just pick a plain color, it will be mandatory to use an image. Could someone working on the renderer confirm?

mockersf · 2021-12-16T00:23:07Z

The new renderer has been merged, with a completely revamped SpriteBundle:

bevy/crates/bevy_sprite/src/bundle.rs

Lines 13 to 23 in 49a4009

    
           #[derive(Bundle, Clone)] 
        
           pub struct SpriteBundle { 
        
               pub sprite: Sprite, 
        
               pub transform: Transform, 
        
               pub global_transform: GlobalTransform, 
        
               pub texture: Handle<Image>, 
        
               /// User indication of whether an entity is visible 
        
               pub visibility: Visibility, 
        
               /// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering 
        
               pub computed_visibility: ComputedVisibility, 
        
           }

Could you update this PR for the new bundle?

wooster0 · 2021-12-16T16:01:30Z

@mockersf I updated it hopefully correctly.

mockersf · 2021-12-16T16:16:57Z

examples/2d/rect.rs

+        transform: Transform {
+            scale: Vec3::new(50.0, 50.0, 0.0),
+            ..Default::default()
+        },


why do you set the scale here? is it to replace the Sprite::new(Vec2::new(50., 50.))?

Then you could do in in the Sprite struct like

bevy/examples/2d/contributors.rs

Line 100 in 7356f15

custom_size: Some(Vec2::new(1.0, 1.0) * SPRITE_SIZE),

Ah, okay. That's what someone else suggested as well but neither of us were sure which one is the right way.
I tried something else now. Is it fine?

mockersf · 2021-12-16T17:01:13Z

looking good, thanks!

cart · 2021-12-18T00:52:21Z

bors r+

# Objective Every time I come back to Bevy I face the same issue: how do I draw a rectangle again? How did that work? So I go to https://github.com/bevyengine/bevy/tree/main/examples in the hope of finding literally the simplest possible example that draws something on the screen without any dependency such as an image. I don't want to have to add some image first, I just quickly want to get something on the screen with `main.rs` alone so that I can continue building on from that point on. Such an example is particularly helpful for a quick start for smaller projects that don't even need any assets such as images (this is my case currently). Currently every single example of https://github.com/bevyengine/bevy/tree/main/examples#2d-rendering (which is the first section after hello world that beginners will look for for very minimalistic and quick examples) depends on at least an asset or is too complex. This PR solves this. It also serves as a great comparison for a beginner to realize what Bevy is really like and how different it is from what they may expect Bevy to be. For example for someone coming from [LÖVE](https://love2d.org/), they will have something like this in their head when they think of drawing a rectangle: ```lua function love.draw() love.graphics.setColor(0.25, 0.25, 0.75); love.graphics.rectangle("fill", 0, 0, 50, 50); end ``` This, of course, differs quite a lot from what you do in Bevy. I imagine there will be people that just want to see something as simple as this in comparison to have a better understanding for the amount of differences. ## Solution Add a dead simple example drawing a blue 50x50 rectangle in the center with no more and no less than needed.

bors · 2021-12-18T01:11:28Z

Pull request successfully merged into main.

Build succeeded:

wooster0 added 2 commits October 12, 2021 19:55

Add an example to draw a rectangle

691ba67

Add rect.rs to README.md

a8f6a17

github-actions bot added the S-Needs-Triage This issue needs to be labelled label Oct 12, 2021

Add it to Cargo.toml

384e487

alice-i-cecile added A-Rendering Drawing game state to the screen C-Examples An addition or correction to our examples and removed S-Needs-Triage This issue needs to be labelled labels Oct 12, 2021

alice-i-cecile approved these changes Oct 12, 2021

View reviewed changes

IceSentry approved these changes Oct 13, 2021

View reviewed changes

alice-i-cecile added the S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it label Oct 13, 2021

NiklasEi approved these changes Oct 13, 2021

View reviewed changes

mockersf mentioned this pull request Oct 15, 2021

add an example for sprites with a custom shape #2973

Closed

alice-i-cecile added the hacktoberfest-accepted label Nov 3, 2021

mockersf removed the S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it label Dec 16, 2021

wooster0 added 2 commits December 16, 2021 17:00

Update the rectangle example

f54a06f

Merge branch 'main' into patch-2

213c5ed

mockersf reviewed Dec 16, 2021

View reviewed changes

wooster0 added 3 commits December 16, 2021 17:30

Use custom_size

05216f0

Format

5206754

Another fixup

76455de

mockersf approved these changes Dec 16, 2021

View reviewed changes

mockersf added the S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it label Dec 16, 2021

bors bot changed the title ~~Add an example to draw a rectangle~~ [Merged by Bors] - Add an example to draw a rectangle Dec 18, 2021

bors bot closed this Dec 18, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Merged by Bors] - Add an example to draw a rectangle #2957

[Merged by Bors] - Add an example to draw a rectangle #2957

wooster0 commented Oct 12, 2021

zimzat commented Oct 12, 2021

alice-i-cecile left a comment

alice-i-cecile commented Oct 12, 2021

wooster0 commented Oct 12, 2021

zimzat commented Oct 12, 2021 •

edited

Loading

mockersf commented Oct 15, 2021

mockersf commented Dec 16, 2021

wooster0 commented Dec 16, 2021

mockersf Dec 16, 2021 •

edited

Loading

wooster0 Dec 16, 2021

mockersf commented Dec 16, 2021

cart commented Dec 18, 2021

bors bot commented Dec 18, 2021

[Merged by Bors] - Add an example to draw a rectangle #2957

[Merged by Bors] - Add an example to draw a rectangle #2957

Conversation

wooster0 commented Oct 12, 2021

Objective

Solution

zimzat commented Oct 12, 2021

alice-i-cecile left a comment

Choose a reason for hiding this comment

alice-i-cecile commented Oct 12, 2021

wooster0 commented Oct 12, 2021

zimzat commented Oct 12, 2021 • edited Loading

mockersf commented Oct 15, 2021

mockersf commented Dec 16, 2021

wooster0 commented Dec 16, 2021

mockersf Dec 16, 2021 • edited Loading

Choose a reason for hiding this comment

wooster0 Dec 16, 2021

Choose a reason for hiding this comment

mockersf commented Dec 16, 2021

cart commented Dec 18, 2021

bors bot commented Dec 18, 2021

zimzat commented Oct 12, 2021 •

edited

Loading

mockersf Dec 16, 2021 •

edited

Loading