Animation Tab and Editing Code.org Images

**In the animated tab, I added a Code.org Car I found in the pre-given pictures. I want to duplicate the car 4 ways…up, down, left, right. I want to make my car look like it’s going the direction when I press the specific arrows.
** When I duplicate my car in animation tab, it does not rotate correctly and cuts off the image. Then I cannot get the cut off image back.
**I’ve tried to change the size of the canvas behind the image, but cannot figure out how to do this. I have also tried using other images like bikes…same thing. I think it has to do with the size of the canvas behind the picture, but I cannot figure out how to change that.

Thank you,

Jaime Nicol

You are correct. If you change the size of the canvas behind the picture, you should be able to get it to work correctly.

Look for the icon on the far right of the screen that looks like a box with an arrow shooting out of the corner.Screen Shot 2021-01-08 at 7.53.54 AM

Once you click on it, make sure the width of your canvas is wider than the current length. You can even make it wider if you want. Then, rotate it and finally use the crop icon to resize the canvas to fit the sprite when you are done. Screen Shot 2021-01-08 at 7.55.01 AM

Hopefully that will help!

Good luck!

Mike

Hi Jaime, I understand what you are going through with the car pictures being cut off when you rotate them its usually because the canvas or bounding box behind the picture is set to its original size, so when you rotate it, the parts that are outside the box are cut off. One thing that might help is either setting the image size to be larger in the animation tab before you duplicate it or putting a transparent border around the image in an external editor before you import it. Another thing you could do is create separate images for each direction and switch between them when the arrow keys are pressed, so you would nt have to worry about rotation at all. are you going to be controlling just one car or multiple cars on the screen? In some projects I have seen, people have even tried using different types of vehicles, such as using a Bnlboston limo image to test the movement, just to see how directional sprites work.

1 Like