Sprites! (Mini Micro Day 8)

jstrout

Yesterday we learned how to load images from disk, and draw them into a pixel display. Today we're going to load images the same way, but draw them very differently: as "sprites," which can be efficiently moved, rotated, scaled, and even tinted a different color!

As always, you should have your Mini Micro Cheat Sheet on hand. But here's the key section for today:

It's only a handful of methods and properties, but they provide so much power!

Let's begin by creating a Sprite object, and assigning its image:

heart = new Sprite
heart.image = File.loadImage("/sys/pics/Heart.png")

Notice that the image we're assigning comes from File.loadImage, which is the same method we used yesterday.

Next we need to prepare the sprite display. A common pattern in Mini Micro, when working with display modes, is to first set the display mode on a particular layer, and then assign it to some convenient variable so you can refer to it more easily. (You don't need to do this with the default text or pixel displays, because we already have text and gfx to refer to those. But there are no default references for other display modes.)

So we need three more lines:

display(4).mode = displayMode.sprite
disp = display(4)
disp.clear

The first line above makes sure that display(4) is set to Sprite mode. The second line assigns display(4) (which is now a sprite display) to a variable we call disp, and the last line clears all sprites from that display.

Now we can display that heart sprite we created above, by simply adding it to the display's sprites list:

disp.sprites.push heart

What's that red thing that just appeared behind your text? It's a heart! It's just mostly off screen. That's because its x and y properties (its position on screen) are 0,0, i.e. the lower-left corner of the screen.

But here's the fun bit: you can move a sprite anywhere on the screen, simply by assigning new values to its x and y properties! Recall that the screen is 960 pixels wide and 640 pixels tall. So, to position the heart in the center of the screen, simply assign half those values to its x and y position:

heart.x = 480
heart.y = 320

Notice how the moment you assign a new value to x or y, the sprite immediately moves accordingly. And it moves cleanly, not leaving behind any old images of itself (unlike drawing repeatedly with gfx.drawImage would do).

You've probably already realized that you can make an animation, just by changing these properties in a loop. Try it!

for x in range(50, 900, 3)
    heart.x = x
    wait 0.01
end for

Note that we need a wait in there, in order to make the animation slow enough to see. You could also use yield, which waits until the next frame, normally about 1/60th of a second.

What else can you do with sprites? Well, how about scaling? Try these:

heart.scale = 0.5
heart.scale = 2

A scale of 1 (the default) means, "standard size" — 1 pixel in the sprite image appears as 1 pixel on screen. If you set the scale to 0.5, it shrinks the image down to 50% of standard size. And when you set the scale to 2, it appears twice as big. Of course you can use any value. But here's an advanced trick: instead of a single number, you can assign a list of two numbers, which will be used to scale the sprite differently in x and y. Try it:

heart.scale = [0.5, 2]

This sets the heart scale to 0.5 in x, and 2 in y — a narrow, tall heart! Experiment with other combinations until you're sure you've got it. Then set the scale back to 1 for the next bit.

heart.rotation = 45

Here we've set the sprite rotation to 45 degrees. The result is as you'd expect:

Note that rotation is given in degrees (not radians) counter-clockwise. Again, we could animate:

for rot in range(0, 360, 5)
    heart.rotation = rot
    wait 0.01
end for

Finally let's talk about tint: a color applied to the color of the sprite. It doesn't replace the sprite's original colors; it sort of multiplies in. If the original sprite is white — as many of the built-in images are — then the result will be exactly the tint color. But in this case, our heart is mostly red, so any tint we apply will be multiplied by those red color values. So let's try a few:

heart.tint = color.gray

Any color, when multiplied by gray, gets darker. So this gives us a darker heart. Or try this one:

heart.tint = color.aqua

This produces a dark green heart. To restore any sprite to its original full-color glory, tint it white (which is no tint at all):

heart.tint = color.white

And you now know pretty much everything there is to know about sprites! At this point you should load up and run the spriteDemo.ms program, located in /sys/demo:

load "/sys/demo/spriteDemo"
run

You should now be able to recognize what's going on here:

There are two sprites on the sprite display: the wumpus, and a heart.
The standard text display is used to print the instructions at the top of the screen.
The standard graphics display is used to display little stars (pixels), with more drawn every time you catch the heart.

Play a bit, then press Escape to exit the program. And then edit to inspect the code. You should be able to understand pretty much everything you see now. There are some things we haven't talked about yet, like the key.pressed method, but you can probably guess what that stuff does.

What do you think? Are sprites the coolest thing since sliced bread, or what?

Julian

Was messing around with this yesterday and seem to understand everything Sprite related.
I was able to put 2 sprites on the screen and change their color , i was also able to control one of the Sprites by adding "key.pressed" lines.

My Question now how could i add A.I to one of the Sprites and make it perform some tasks, maybe copy movement of the other Sprite or do random movements around the screen.
Also how would i get collision with Sprites or with the Display Border?
At anytime im able to move the sprite out of the Display but i would like to have some kind of Border(invisible wal) at the end of the Display Area.

jstrout

First, great job getting up to speed on sprites and mastering how to control sprites on the screen!

Those are some good questions. The basic idea for making sprites (or anything else) behave in certain ways is, there must be a main loop that tells them to update on every frame. So at the bottom of pretty much any Mini Micro game, you will find a loop that looks something like this:

while not key.pressed("escape")
    // (do stuff to update your sprites here)
    yield
end while

This loops forever, until you stop it by pressing Escape (or control-C). Then where the "do stuff" comment is above, you'll have some code to make your sprites do something. You can put it right in the loop, but to make it neater you might want to put that code into its own function (or even make use of classes, though that's a little more advanced).

As a simple example, let's suppose you have two sprites, called sprite1 and sprite2, and you want to make sprite2 chase sprite1. Then inside the main loop, you could have something like:

    // make sprite2 chase sprite1
    sprite2.x = sprite2.x + 2 * sign(sprite1.x - sprite2.x)
    sprite2.y = sprite2.y + 2 * sign(sprite1.y - sprite2.y)

How this works is, we subtract sprite2.x from sprite1.x, which gives us a positive number if sprite1 is to the right, or a negative number if sprite1 is to the left. The sign function converts that number into just -1, 0, or 1. And then we multiply that by how much we want to move each frame (I used 2 here, but you should try different values and see what you like).

Collision detection (i.e. detecting when a sprite is touching another), or dealing with the edges of the screen, are all doable but they're kind of beyond scope for this post. For now, why not see if you can use the above to make a little game where you move sprite1 and sprite2 chases you around. And then start a separate thread about collision detection, and we'll delve into it there.

Julian

Finally had some time this Evening to put it together 🙂
Its nothing too special but here it is..

text.clear
text.color = color.yellow
text.row = 25
print "Sprite Chase Demo"
print "W,A,S,D to control the Sprite ; Press ESC to exit"

display(4).mode = displayMode.sprite
disp = display(4)
disp.clear

Mochi = new Sprite
Mochi.image = file.loadImage("/sys/pics/Mochi.png")
disp.sprites.push Mochi
Mochi.x = 300
Mochi.y = 300
Mochi.scale = 0.8

turtle = new Sprite
turtle.image = file.loadImage("/sys/pics/animals/turtle.png")
disp.sprites.push turtle
turtle.x = 100
turtle.y = 100
turtle.scale = 0.8

SpritesChase = function() // Makes Sprite turtle chase Mochi
turtle.x = turtle.x + 1 * sign(Mochi.x - turtle.x)
turtle.y = turtle.y + 1 * sign(Mochi.y - turtle.y)
end function

SpritesControl = function () //Gives control over Sprite with Keyboard
if key.pressed("w") then Mochi.y = Mochi.y + 2 //Up
if key.pressed("s") then Mochi.y = Mochi.y -2 //Down
if key.pressed("a") then Mochi.x = Mochi.x -2 //Left
if key.pressed("d") then Mochi.x = Mochi.x +2 //Right
if key.pressed("escape") then exit
end function

while not key.pressed("escape")

SpritesControl
SpritesChase

yield

end while
key.clear