Game Lab: The Animation Tab


Hi I’m Aston and I was the first
software engineer hired at DropBox. I also work with an organization called
dev color. ‘dev color’ is a nonprofit that advances careers of black software engineers. Sprites make it much easier to organize your code, but visually they’re still just rectangles. To make our creations come to life,
we want to add images to our sprites. We’ll start with the simple program you’ve seen before
that creates a single rectangular sprite. Before we can turn this rectangle into
something more fun, we need to tell Game Lab about the image we want to use. All images and drawings you add to your project are created and managed in the animation tab. To switch back and forth between your code and animations, use a toggle in the upper left corner. To add a new animation, click the plus sign.
This will open a library of images that are already built into Game Lab. From the library, you can browse the
categories to find what you’re looking for. Once you’ve selected an image, it’ll be added to your project and shown on the left. If you like, you can also change the name of your image. So, here we’ve added an image in the animation tab and we have code that creates a basic sprite. Now I need to put those two together and tell the computer that we want this particular sprite. We’ll use the setAnimation() block to do this. First, we use
the name of our sprite and the name of the image we selected
in the animation tab. Now when we run our program, the sprite
will be drawn with image we selected. All of the sprite’s properties can still
be modified as usual to do things like moving across the screen. You’re not limited to the images that come built in the Game Lab. You can also choose to
upload an image from your computer or draw something yourself.
In fact, you can edit any image in the animation tab using the pixel editor. Using the different commands in the pixel editor, you can easily draw erase or modify images. To adjust the dimensions of an image, just make changes in the menu on the right side. It’s also just one quick to flip your image to face the opposite direction. If you like an image you’ve made, but want to make some changes, just make a copy. There are lots of helpful little tools
in the pixel editor. Play around with them on your own and see what they do. Back in your code, the drop
down of animations makes it easy to pick which animation your sprite should use
until you find the perfect look. Adding images or your own drawings to sprites
lets you unleash your creativity and make your programs really your own. Let’s get
to it!

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *