Last time on this "getting started with Mini Micro" series, we used gfx.setPixel to plot the trajectory of little projectiles. And the day before that, we drew lines in interesting patterns. So today, let's start learning how to draw something more interesting than a single pixel or line.
Let's draw some images!
The /sys disk in Mini Micro contains a small library of images for you to use. You can certainly import your own as well (using File.import), but for now let's just work with the built-in ones. Start by listing the files in the /sys/pics/ directory:
dir "/sys/pics/"
The file names that end in .png are images in PNG format. File names that end in a slash are subdirectories. For example, there's a "KP/" directory, containing a cute little character (whom I call "Kip") from Kenney's platformer assets. (If you don't know Kenney, check out his site; he makes thousands of high-quality game assets and gives them away for free, though various bundles are available to buy and donations are appreciated.)
So let's dig deeper into that KP directory:
dir "/sys/pics/KP/"
(Remember that you could just up-arrow to the previous command, and insert "KP/" before the closing quote.) OK, that "KP-wave" image sounds interesting. To load that image from disk into memory, we need to use the File.loadImage command, like so:
img = File.loadImage("/sys/pics/KP/KP-wave.png")
You just give File.loadImage the path to a picture file, and it returns an Image object. We've specified a full path here, though you can also change your current directory with cd and then give just the name (or partial path) of the file.
An image object has two useful properties, width and height. Go ahead and print out img.width and img.height, you should discover that the KP-wave image is 96 by 96 pixels.
Now to draw it to a pixel display, all you have to do is pass it to the gfx.drawImage method, along with the position you want the lower-left corner to be on screen. For example:
gfx.drawImage img, 400, 300
That draws the image at its native size (96x96), with its left side at X=400 and its bottom at Y=300. Neat, right?
Let's do another one just to help it all stick. Try this:
heart = File.loadImage("/sys/pics/Heart.png")
gfx.drawImage heart, 500, 300
Your screen should look something like this.
Now if you want to clear just the text display (without clearing the graphics display), use text.clear. Or you can use the global clear to clear everything.
It turns out that the drawImage method has a lot of parameters, though they're all optional except for the image you want to draw. To find out what all those parameters are, you should look at your Mini Micro Cheat Sheet. But another way to get a quick summary of a function is to type the function name after an @ (at) sign. The @ sign in MiniScript means "reference this function, but don't actually execute it." It's a pretty advanced feature, but you're ready for it! So try it now:
@gfx.drawImage
This shows you the name and default value (if any) of each parameter. In this case the left and bottom properties default to zero; the size (width/height) properties default to -1, which drawImage takes to mean "the full width/height". The first four set of numeric properties (left, bottom, width, height) tell drawImage where on screen to draw; the last four (srcLeft, srcBottom, srcWidth, and srcHeight) tell it what part of the image to draw. When you leave those out, you get the whole image.
So let's try adding the width and height parameters to make a Super-Kip! We'll scale him up by a factor of 8.
gfx.drawImage img, 100, 50, img.width*8, img.height*8
That's a big image! Experiment with other values. Can you make a tall, skinny Kip? How about a short, wide one?
We've been drawing images directly to the pixel display today, just like drawing lines or using setPixel. This means you can't really erase an image to move it; you can only draw over it, or clear the whole display layer. That's fine for making static images, but wouldn't be much good at making games where you want things to move quickly around the screen. Fortunately Mini Micro has two other ways of displaying images: as sprites, and as tiles. We'll start learning about those tomorrow. (Though if you're in a hurry, you could load "/sys/demo/spriteDemo" and start poking around now!)
