PART SIX
SPRITE SHEETS
Embedded Files
LOAD IMAGES
Reminder
Make sure you have read the Coder's Handbook Entry on Sprite and Animation before starting this section.
Images
In your Images class, we'll need to create code to load our Sprite Sheets for corn and potato.
A Sprite Sheet is another way of looking at an image file. It loads up an image file, but chops it up into pieces.
If you're using my default images, each subImage is 32x48.
SETTING IMAGES
Entity
Delete or comment out everything related to color
Create an Image variable named image.
Plant
In our program, all plants can grow over time. This means they'll need a SpriteSheet, as they have multiple images associated with them.
Create a protected SpriteSheet called sheet in the Plant class. Since it's an abstract class, we won't need to initialize this here.
We'll also want to create a method called setImage() that chooses which of the four images we want to display.
Zero should be when the plant isn't grown yet
One should be at 50% of growth or less
Two should be at anything below 100% growth
Three should be at maximum growth
Corn and Potato
Delete or comment out everything related to color
You can also remove the line that initializes the image
In the constructor, set the appropriate sheet and call setImage()
Crop
In the nextDay() method when you advance days to grow the crop, call setImage()
Entity (again)
At first, you'll render the image in the same way you drew the circle.
Notice that your images may look squished initially.
This is because the images provided by Mr. M are not square, and aren't designed to live inside a square cell. They are deliberately oversized to be 1.5 cells tall.
To make this work better...
Subtract half of the cell's height from the y Position, so they start half a cell up
Multiply the image's height by 1.5 to scale the image correctly (2 wide to 3 tall)
CHECKPOINT
Run your code and see...
Crops are displayed as images
Images are clearly "oversized." They should look like they are growing out of the cell and tall plants will stretch a little bit above it. This is easiest to see when plants are mature.
HIGHLIGHTING MATURE CROPS
Clarity
Ideally, our images help convey to the user how grown a crop is. But I can imagine that a user of the program might be unsure when a crop is fully grown - especially if they aren't familiar with the game. Always design programs to be clear for new users.
To do this, we could make the plant glow, or add a sparkling animation around it. Instead, let's start with something simpler: marking the cell with a white outline.
Cell
Modify the cell's render method to have code as follows
If the cell has an entity and it is a Plant and the (Plant) entity is mature...
Draw a 2 wide white box around the cell
Note that we need to reduce the size of the box based on twice the size of the line.
We want out user interfaces to be abundantly clear and draw the user's attention to important elements.
Shown above is the iconic "World of Warcraft" quest giver icon. It's hard to miss!
CHECKPOINT
Run your code and see...
Fully mature plants are highlighted with a white box
The box should be behind the plants when they reach outside of the cell's bounds
The box should be the same size on all sides and not be "clipped" on the bottom right
Page updated
Google Sites
Report abuse