Animation Help

[TheBoyWhoTried]

So i'm nearing the end of my semester with Turing and I've been trying to learn how to animate. My teacher knows nothing of this component so i'm all on my own. For the past week I've been trying to learn how to animate (specifically with View.Set and View.Update). I understand how these components work I just don't understand how to tailor the rest of the program to work with it properly (I have no Idea how to even animate).

To give you a scenario of how to help me let's try this: I have plotted a few Draw.FillBoxes (different x, same y) to make it look like it's gliding across the screen. Surrounding the plotted boxes at the top is View.Set ("graphics, offscreenonly") and right before the plotting of the boxes is View.Update (i'm not sure if this is the right placement of the command View.Update, I would know where to put it if I knew how to animate at all). Why wouldn't this result in, when running, a box gliding across the screen? Could you fill me in by creating the animation properly and dissecting it for me.

NOTE: I'm trying to animate a character walking across the screen, with proper foot movement etc.. (not like a sprite however, I don't want any user interaction with the character, it's supposed to be purely an animation). This is the whole purpose of me trying to learn to animate (using View.Set and View.Update of course).

Maybe you could also help me by dissecting this animation for me as well? (Taken from Clayton who created a tutorial on how to use View.Set and View.Update, will be attached). As a heads up I know how all the iterations of if works and loop and var and the drawing stuff as well. I just don't understand how the program works.

I need help like really fast. What I plan to make will take a lot of time so I need to know how to animate. Please help, and fast. Thank you.

[Insectoid]

Every animation has the same basic structure, as follows:

loop
Draw everything
Advance everything one frame (by changing the coordinates)
View.Update
Delay
Cls
End loop

Notice that View.Update only happens once, after drawing and before the delay. There are very few circumstances where you would use more than one view.update in your entire program.

Where most people have trouble is line 3, advance everything one frame. This is where all the code goes to decide what happens to the objects in your animation. Animating one object is easy enough, but when adding a 2nd object don't be tempted to add a whole new loop- everything goes in the same loop. If you have more than one loop in your animation, there's a good chance you're doing it wrong, at least until you understand how an animation loop works.

Your comment about sprites is interesting- Turing really didn't care at all if you're making an animation or a game. You can use sprites, or draw command, put commands, or images. They all work for either project. In fact, the only practical difference between a game and an animation if user input, which means it's really easy to make a game one you can make an animation.

[TheBoyWhoTried]

Thank you so much. This clarified a lot for me. Another question though; how exactly do I use the sprite function (creating my original sprite) and animate it as well (rather than having a bunch of polygons trying to move in unison with each other)? Also on regards to the third line you mention do I have to plot out every single frame movement or could I apply like a constant to it e.g "×+1" or something like that so it will move according to the variable/constant value?

EDIT: I seem to be having issues with the third line, I'm pretty sure I'm not doing it right. Could I have an example of say a box gliding across the screen? My error seems to be that in writing another frame i move the box over but it just is placed on top of the other one, there is no animation whatsoever. I tried following the above formula but I think I'm doing it wrong. Here's what I did:

View.Set ("graphics")
loop
Draw.FillBox (100, 300, 300, 400, 8)
Draw.FillBox (150, 300, 350, 400, 8)
View.Update
delay (500)
cls
end loop

Why wouldn't this be an animation?

[Insectoid]

You aren't moving the box. You are drawing two boxes. Remember when I said the loop only does one frame at a time? Your trying to do two frames at a time.

Maybe we should eliminate all the nice tools and strip it down to the most basic commands so you can actually see what's going on. It'll be messy but it will get the point across. This short animation will only be 3 frames long and will move a box 100 pixels to the right each frame.

code:

Draw.Rectangle (100, 100, 200, 200, red) Delay (500) Cls Draw.Rectangle (200, 100, 300, 200, red) Delay (500) Cls Draw.Rectangle (300, 100, 400, 200, red) Delay (500)

See what's happening? We draw our box, wait a bit, then erase it and draw it somewhere else. Each time we do this is one frame. You can make it run a lot smoother by changing the interval to 10, shortening the delay, and adding more frames, but that's a lot more code. But it looks like a lot of our code is repeating over and over again. Only a couple of numbers are changing between frames. What if instead of typing out the same code a bunch of times, we just run the same code many times? That sounds like a loop, doesn't it?

Loop
Draw.Rectangle (100, 100, 200, 200, red)
Delay (10)
Cls
End loop

Now we can have as many frames as we want without writing any more code! But there's a new problem- the box doesn't move anymore because we don't change its coordinates. How do we change them without typing it every time? With variables! We can replace the number with a variable and just change that! In our original example, the x coordinate increased by 100 every frame, but we want a smooth animation, so we'll do it by 10 here instead. Notice that the box has 2 x coordinates, and the 2nd one is always 100 more than the first one. This means we don't need two x variables, we can just use the same one twice.

code:

var x := 100 Loop Draw.Rectangle (x, 100, 100, x+100, 200, red) x := x+10 Delay (10) Cls End loop

Now we haven't repeated any code, and the rectangle glides across the screen!

You can make the box move left instead of right by subtracting from the x variable instead of adding. You can make it move up or down by switching the y coordinates to a variable like we did to the x coordinates. You can make the movement as complicated as you like by applying all sorts of math and logic to those values. You saw velocities used in another post I think- you can use those to make the square slow down or speed up. You can define physics laws to make it bounce around. You can add keyboard controls to affect the behavior, and by then you'll have an entire game.

[TheBoyWhoTried]

oh wow that's really helpful, thank you. Could someone explain to me how exactly to make a character move across screen with proper walking animation without using sprites?

[TokenHerbz]

you can use booleans and ifstatments to choose which picture (of several) to draw.

if no movement and facing right then
draw stand still right pic
else if move right and first step then
draw move right step 1 pic
else if move right then
draw move right step 2
set step 1
end if

etc like that for all the directions/pics you want to use

You only want one of the pictures to be drawn at a time, so you should use a boolean value to help you determine which picture should be drawn next.

[Insectoid]

You seem to think that sprites are some magic animation tool. They aren't. In Turing, a sprite is just a way to handle drawing images on top of each other. They are not much different from pic.draw or Draw.Box. They will not make animations any easier or harder.

As far as walking animations- these are really just a bunch of small parts put together, moving relative to each other. The first step I think is making a whole man move as one piece. Try that. Use draw commands (boxes, circles, whatever) to make a simple stick figure and make him slide across the screen just like the box did in my earlier example. Don't worry about making his arms or legs wave around- just make him slide across. Once you get that we'll work on making his legs work right.

[TheBoyWhoTried]

Hey before I get to that I do have a quick question about that little example program you wrote:

var x := 100
Loop
Draw.Rectangle (x, 100, 100, x+100, 200, red)
x := x+10
Delay (10)
Cls
End loop

First of all, doesn't the rectangle have too many parameters? Also "x := x + 10" tells the comp to add 10 to the value of x every time it comes across it right? But what about the x coordinate "x+100", doesn't that translate to adding 10 to 200? because x was assigned as 100 and then was told to add 10 to it's value every time and we're already adding it to another 100 in the coordinate.

EDIT: wait i think i get it. "x" makes the first x be at 110, "x+100" makes it start at 210 correct? I kept on thinking that those values were what they moved by and also thought that the first x was = 10 so it shouldn't be a square because 210 is quite far.

[Insectoid]

You have two x values, remember? Ignore that I mixed up the x and y values in my example. The first (x, y) is the bottom left corner and the 2nd (x, y) is the top right. If you want to move the whole rectangle, both coordinates have to change. Otherwise the rectangle will stretch or shrink. You can use two variables, x1 and x2, for it, but since they both move the same amount each time, you can just use one x variable for both of them. This is very important to understand, because the same concept applies to making a big object out of multiple shapes. Kind of like our stick figure man.

[TheBoyWhoTried]

I understand moving both Xs to have it glide across the screen. It's just that the Box has 6 parameters and I get an error saying it has too many parameters:

"Draw.Rectangle (x, 100, 100, x+100, 200, red)"

Shouldn't the first two coordinate "x, 100" be combined actually to "x + 100"? That's what I had done in turing and the box glided.

Alsio yea stay tuned for my stick man animation, i just have a lot of assignments so it's a bit delayed. So please if you don't mind, please stick around. Your help is very much needed and appreciated.

[Insectoid]

Uh, yeah, it should be +. I typed that out on my phone and couldn't test it. Oops.