Page 1 of 1

Dont know how to move objects.

Posted: Wed Jul 25, 2007 8:30 am
by Sinuvoid
Still after reading 5 tutorials I dont understand how to move stuff across the screen! Can someone make me a simple tutorial please?
Thanks in advance :D

Basic Animation

Posted: Wed Jul 25, 2007 8:32 am
by Stoves
Is it the actual changing of the picture's position? or the displaying of the picture that's confusing you?

Posted: Wed Jul 25, 2007 8:56 am
by Sinuvoid
The actual moving :oops:

Animation Basics in QB

Posted: Wed Jul 25, 2007 10:08 am
by Stoves
The key is storing the picture's screen position in 2 variables. Store one for the horizontal (usually referred to as the x) position and one for the vertical (usually referred to as the y) position. Then you can just manipulate the variables to change the picture's position on the screen.

Keep in mind that in the default screen settings, QBasic considers position 0,0 at the top left corner of the screen. Increasing the x value, will move from left to right and increasing the y value will move from top to bottom. (So in screen 13 for example, position 320,200 is the bottom right corner of the screen.)

Here's some code that will move a ball from left to right across the screen by drawing the ball, erasing the ball and changing it's position, and then redrawing the ball.

Code: Select all

'Choose a valid drawing screenmode.
'Screen 13 is 320 by 200 pixels and allows for 256 different colors to be displayed at the same time.

SCREEN 13

'Clear the screen.
CLS

'Initialize the ball's position on the screen by defining the 2 variables. I want it to start in the middle left side of the screen, so X value will be 0 and Y value will be about half way between 0 and 200.
X = 0
Y = 100

'Draw the ball using the X and Y values.
CIRCLE (X, Y), 5, 4
'Erase the ball using the same values and the LINE command to draw a filled in box.
LINE (X-5, Y-5)-(X+5, Y+5), 0, BF
'Change the ball's position. Move it to the right by increasing the X value.
X = X + 10
'Redraw the ball using the X and Y values again.
CIRCLE (X, Y), 5, 4

'Wait for the user to hit any key to continue to the next part of the code.
A$=INPUT$(1)

'Move the ball from the left side of the screen (0,100) to the right side of the screen (320,100).

'Initialize the ball's position.
X = 0
Y = 100

'Using a FOR NEXT loop to change the ball's X value, we can implement the commands above to animate the ball.
FOR X = 0 TO 320
  CIRCLE (X, Y), 5, 4
  LINE (X-5, Y-5)-(X+5, Y+5), 0, BF
NEXT X

This animation probably blinks a lot due to the constant erasing and redrawing, but it should illustrate how to move a picture across the screen. It may be necessary to add a slight pause between drawing the ball and erasing it if the animation needs to be slowed down.


Here's some similar code that will use a better technique for smoother animation.

Code: Select all

'Choose a valid drawing screenmode.
'Screen 13 is 320 by 200 pixels and allows for 256 different colors to be displayed at the same time.

SCREEN 13

'Clear the screen.
CLS

'Prepare the picture array. I used 1000 cuz I'm lazy and don't feel like calculating the exact size.
DIM ball (1000)

'Draw a circle and fill it to create the ball.
CIRCLE (20,20), 5, 4
PAINT (20,20), 4

'Capture the picture of the ball. I intentionally want to capture an extra border around the ball so when redraw the picture 1 pixel over, it automatically erases itself. No blinking.
GET (14,14)-(26,26), ball

'Clear the screen and begin the animation.
CLS

'Initialize the ball's position.
X = 0
Y = 90

'Animate the ball, moving it from left to right one pixel at a time.
FOR X = 0 TO 300
  'When PUTing a picture on the screen, (X,Y) indicates where the picture's top left corner should start, as opposed to the CIRCLE command, in which (X,Y) indicates the center of the circle.
  PUT (X,Y), ball, PSET
NEXT X

From here, it's just a matter of manipulating the x and y values to move the picture how you want to.

For details about specific QB commands (CIRCLE, LINE, GET, PUT, etc...) check out http://www.qbasicstation.com/, and click on the Command Tutorials link.

Hope this helps.

Re: Animation Basics in QB

Posted: Wed Jul 25, 2007 11:55 am
by Sinuvoid
Stoves wrote:Draw a circle and fill it to create the ball.
CIRCLE (20,20), 5, 4
PAINT (20,20), 4

'Capture the picture of the ball. I intentionally want to capture an extra border around the ball so when redraw the picture 1 pixel over, it automatically erases itself. No blinking.
GET (14,14)-(26,26), ball
Why put paint? and what are the values for GET stand for?

Posted: Wed Jul 25, 2007 12:16 pm
by Patz QuickBASIC Creations
The PAINT command fills the ball so it's not just a circle, but a filled circle. He just wanted to make it look prettier :)

The GET statement saves a picture of the ball starting at (14,14) and ending at (26,26) [those are screen coordinates]. Then he saves the "picture" of the circle in the variable "ball".

Posted: Wed Jul 25, 2007 12:25 pm
by Sinuvoid
Does it matter which coordinates i save the ball?
Lets say

Code: Select all

 GET (11, 11)-(26, 26) 
can it be just random numbers?

Posted: Wed Jul 25, 2007 3:14 pm
by Stoves
Lee,

Yes, coordinate numbers matter, because they determine exactly which part of the screen is captured as the picture designated "ball". If we capture the wrong part of the screen, the ball doesn't get drawn correctly or doesn't get drawn at all. Consider the following explanation.

Code: Select all

SCREEN 13 
CLS
So, here's our blank screen after the commands, SCREEN 13 and CLS:
Image

Code: Select all

CIRCLE (20,20), 5, 4 
PAINT (20,20), 4
Then we draw the ball at position (20,20) on the screen using the CIRCLE command:
(the number 5 indicates the radius of the circle, the number 4 indicates the color red; as noted, the PAINT command fills in the circle.)
Image
Note that for the CIRCLE command, (20,20) indicates the center of the circle.
Image

Code: Select all

GET (14,14)-(26,26), ball
When GET captures, the picture, it copies a square-shaped section of the screen into memory noting the colors of each pixel. The first set of coordinates identify the top lefthand corner of the section we wish to capture (14,14), and the second set of coordinates identify the bottom righthand corner (26,26).
Image
If we use the wrong coordinates, we capture the wrong part of the screen. For example if we start capturing the picture of the ball from the center of the circle:

Code: Select all

GET (20,20)-(30,30), ball
Image
or in some other random area of the screen:

Code: Select all

GET (160,100)-(170,110), ball
Image

The coordinates you asked about (11,11)-(26,26) would be ok, because they would include the entire ball in the area of the screen captured. However, it's usually best to capture a rectangular area of the screen that only just barely includes the entire picture you want to use.

The example code that only uses CIRCLE and LINE works fine no matter where you redraw the ball, even if you draw it offscreen. However, PUT requires you to draw the picture completely onscreen or it causes an error. You can't draw any part of the picture offscreen when you use PUT.