Resizing the animation

How do I resize the animation for puzzle 8 in lesson 16?

The animation can be resized by using sprite.scale= .05. etc. Here is the link to how to do it: https://studio.code.org/s/csd3/stage/6/puzzle/11

You can also resize in the Animation tab by clicking on the Resize drawer on the right side of the screen.

Can you explain the resize drawer? In Lesson 15: I want to make the size of the sprite canvas smaller without making the actual drawing smaller. I don’t think I really understand the resize tool well.

1 Like

Here’s steps that should work

  1. Open animation tab and go to the animation
  2. Open resize drawer.
  3. Check “Maintain aspect ratio”
  4. Uncheck “Resize canvas content”
  5. Set the “Anchor” to the middle square
  6. Choose a slightly smaller width (e.g. if it’s 100 right now make it 90). The “height” should change as well
  7. Hit “Resize”

If everything worked correctly the drawing content itself will not have changed size but the canvas will have shrunk to the new size you chose.

Hope that helps!

4 Likes

Hi GT, Just wondering if I missed an explanation in another lesson on how to use the resize drawer. It’s not intuitive and I would never expect the kids to figure it out on their own. I played with it for a while (before reading this post) and couldn’t figure it out. Is there a lesson you can direct me to or any other resource for how to use all the Animation tab’s features in Game Lab? Thanks!

1 Like

@asalas using the Resize Drawer is not covered in curriculum, in part because we know it’s a feature that we need to make more intuitive. We do teach students to use the sprite.scale property in Lesson 6 (link) which hopefully is a little more intuitive.

We don’t currently have documentation for the Animation Tab so there’s no easy one-stop-shop to learn how it works. It’s something we’ve discussed making and plan to make eventually. One way you could do some low-risk experimentation with the tool right now is by creating a new blank project in Stand-alone Game Lab and try out the different drawing and resizing tools there. FWIW the CSD team agrees that Resize Drawer in particular needs some work, but I think with a bit of experimentation at least the drawing tools on the left can be figured out.

Sorry not to have a more straightforward answer but I hope that helps you get started. If you have more specific questions please don’t hesitate to ask!

I am also wondering if there is a way to reduce the amount of blank space around the balloon. I understand how to make the balloon smaller, but it does not really fix the issue of it “popping” the balloon before it actually touches it. Any suggestions? :0)

I did it again. It worked a little better, not completely, but I think that is what you mean when you say you are working on the Animation Tab. Thanks.

A student tried clicking on Crop and that made the balloon fill the entire canvas so that it’s “debugging square” matched the size of the balloon and so the tack hit it at the right time.
He and I were both kind of surprised that it worked.

Kristen,

Great! I would try to see if in any condition it doesn’t work because that’s a great situation in which you can discuss how you can solve comp sci problems multiple ways but based on conditions they might not always work OR there might be a more efficient way. Glad to hear the student is thinking outside the box!

Brad

Hi Code.org ~ Is there any more documentation/help for students to learn about using the Drawing Tools in the Animation Tab to Draw Sprites?

@koliner,

Thanks for your message! Have you seen the information at the links below?

https://studio.code.org/docs/concepts/game-lab/animation-tab/
https://studio.code.org/docs/concepts/game-lab/animation-tab/editing-images/
https://studio.code.org/docs/concepts/game-lab/animation-tab/multi-frame-animations/

I believe that the animate tool is based on piskelapp (a standalone website) and there may be more detailed instructions out there, but the links above are the official code.org documentation. Does this help?

Mike