Clipping (animation)? (2d) - GameCreators Forum

Author

Message

Acolyte Entertainment

19

Years of Service

User Offline

Joined: 28th Dec 2004

Location: Oregon, US

Posted: 6th Aug 2006 02:47 Edited at: 6th Aug 2006 02:48

Link

hello everyone.
i plan on designing a 2D side scroller/platform game. i am wondering how too go about clipping (animating) a sprite.
i designed a simple image (32x96) so 3 sprite sizes wide. it is a picture of a bouncingball. i am wondering how too go about clipping out the 32x32 images and animating it so it goes up and down.
here is my image:

my current transparency color is pink (rgb 255,0,255)
here is my image. A lil code snippet of how too make this play maybe even remmed out or a lil tutorial would help me bundles.

thank you for your time,
-Snow

Attachments

Login to view attachments

Back to top

Profile PM

Acolyte Entertainment

19

Years of Service

User Offline

Joined: 28th Dec 2004

Location: Oregon, US

Posted: 6th Aug 2006 02:47 Edited at: 6th Aug 2006 02:48

Link

sry, accidental double post. dang internet connection

Back to top

Profile PM

Acolyte Entertainment

19

Years of Service

User Offline

Joined: 28th Dec 2004

Location: Oregon, US

Posted: 6th Aug 2006 09:26

Link

Guys come on please help me out

Back to top

Profile PM

Gamers for sale

19

Years of Service

User Offline

Joined: 19th Nov 2005

Location: Some where beneath the elements

Posted: 7th Aug 2006 17:38 Edited at: 7th Aug 2006 19:03

Link

Well I would suggest a program to cut the sprite into several images then save it as an animated gif file. One way of doing this is download game maker from gamemaker.nl and you can use the sprite button to open and edit the sprite so it will be an animated gif file. If you are using DBpro then you can load an animated sprite. I haven't tried if gif files work for this command in DBpro but it's worth a try. Another way to do this would be to cut them up into several images, load them, hide and show the sprite, and position the sprites all in the same area. There might be a way to do this in code for DB but I haven't figured it out yet. !!!!!!!Edit: Or use CJD's idea!!!!!!!

Hope this helps

Back to top

Profile PM Email Website

CJD

18

Years of Service

User Offline

Joined: 15th Mar 2006

Location:

Posted: 7th Aug 2006 18:49

Link

Use the create animated sprite command and the play sprite command.

E.G. created animated sprite 1,"ball.bmp",1,3,1

DBPRO newbie

Back to top

Profile PM

Zergei

19

Years of Service

User Offline

Joined: 9th Feb 2005

Location: Everywhere

Posted: 7th Aug 2006 21:51

Link

This something i made, and modified it to apply to you bouncingball. Also, i edited your pic so to have a better animation going.

sync on
sync rate 60

set image colorkey 255,0,255

load bitmap "spot.bmp",0

get image 1,0,0,19,18,1
get image 2,19,0,37,18,1
get image 3,37,0,54,18,1

`Coordinates of the sprite
global x# : x#=100
global y# : y#=100
`This the image that will be shown
global image as integer : image=1
`Jump state:  0=no jump ; 1=ascending ; 2=descending
global jump as integer
`How high you can go.
global jumpascence#
`How fast you can go
global jumpspeed# : jumpspeed#=1
`Time taken to switch between images
global imagetimer as integer

`how high=(1+jumpascence#/jumpspeed#)*jumpascence#/2
`that formula tells how high you will reach according to jumpascence# and jumpspeed#

do

cls

spot()

sync

loop

Function spot()
`This checks if space is being pressed, if so starts jumping. If it's released before
`reaching max height, then it makes you start descending.
 if spacekey()=0 and jump<>2 and imagetimer=0 then jump=0
 if spacekey()=1 and jump=0 then jump=1

`Entering jump sequence 1= ascence
 if jump=1
`Playing around with the image to make the animation of first crouching, and then stretching
`before actually ascending in the jump.
  if image=1 and imagetimer=0 then image=2 : imagetimer=3
`Set jumpascence for the jumping sequence
  if image=2 and imagetimer=0 then image=3 : imagetimer=3 : jumpascence#=10

`Once ascending, it enters here
  if jumpascence#>0
`This controls the position of the sprite regarding the jump.
   dec y#,jumpascence#
   dec jumpascence#,jumpspeed#
`Once you don't ascence anymore, you start sequence 2
   if jumpascence#<=1 then jump=2

endif

else
`Sequence 2 = descence
  if jumpascence#>0 then jumpascence#=1 : jump=2
  if jump=2
`Here you descend, if you increase the number in "dec jumpascence#,1",
`then you'll speed up descence, until you reach jumpspeed#
 `  if jumpascence#<-jumpspeed# then jumpascence#=-jumpspeed#
   y#=y#-jumpascence#
   dec jumpascence#,1
  endif

endif

`This part stops you from falling and falling and falling. Later on it must be replaced
`by the appropiate collision system, which will tell when the sprite is on the floor.
`For now, it will just stop you when surpasing y#>100, starts the drop down animation, and
`returns you to your normal state and image.
 if y#>100 then y#=100 : jump=0 : image=2 : imagetimer=5 : jumpascence#=0

`This sets your image to state 1, normal, circle, whatever. Works allong with the imagetimer
 if jump=0 and imagetimer=0 then image=1

`This controls decreases imagetimer, so that when it reaches 0 an image change can be done.
 dec imagetimer,1
 if imagetimer<0 then imagetimer=0

sprite 1,x#,y#,image

endfunction

+ Code Snippet

sync on
sync rate 60

set image colorkey 255,0,255

load bitmap "spot.bmp",0

get image 1,0,0,19,18,1
get image 2,19,0,37,18,1
get image 3,37,0,54,18,1

`Coordinates of the sprite
global x# : x#=100
global y# : y#=100
`This the image that will be shown
global image as integer : image=1
`Jump state:  0=no jump ; 1=ascending ; 2=descending
global jump as integer
`How high you can go.
global jumpascence#
`How fast you can go
global jumpspeed# : jumpspeed#=1
`Time taken to switch between images
global imagetimer as integer

`how high=(1+jumpascence#/jumpspeed#)*jumpascence#/2
`that formula tells how high you will reach according to jumpascence# and jumpspeed#

do

 cls

 spot()

 sync

loop

Function spot()
`This checks if space is being pressed, if so starts jumping. If it's released before
`reaching max height, then it makes you start descending.
 if spacekey()=0 and jump<>2 and imagetimer=0 then jump=0
 if spacekey()=1 and jump=0 then jump=1

`Entering jump sequence 1= ascence
 if jump=1
`Playing around with the image to make the animation of first crouching, and then stretching
`before actually ascending in the jump.
  if image=1 and imagetimer=0 then image=2 : imagetimer=3
`Set jumpascence for the jumping sequence
  if image=2 and imagetimer=0 then image=3 : imagetimer=3 : jumpascence#=10

`Once ascending, it enters here
  if jumpascence#>0
`This controls the position of the sprite regarding the jump.
   dec y#,jumpascence#
   dec jumpascence#,jumpspeed#
`Once you don't ascence anymore, you start sequence 2
   if jumpascence#<=1 then jump=2

  endif

 else
`Sequence 2 = descence
  if jumpascence#>0 then jumpascence#=1 : jump=2
  if jump=2
`Here you descend, if you increase the number in "dec jumpascence#,1",
`then you'll speed up descence, until you reach jumpspeed#
 `  if jumpascence#<-jumpspeed# then jumpascence#=-jumpspeed#
   y#=y#-jumpascence#
   dec jumpascence#,1
  endif

 endif

`This part stops you from falling and falling and falling. Later on it must be replaced
`by the appropiate collision system, which will tell when the sprite is on the floor.
`For now, it will just stop you when surpasing y#>100, starts the drop down animation, and
`returns you to your normal state and image.
 if y#>100 then y#=100 : jump=0 : image=2 : imagetimer=5 : jumpascence#=0

`This sets your image to state 1, normal, circle, whatever. Works allong with the imagetimer
 if jump=0 and imagetimer=0 then image=1

`This controls decreases imagetimer, so that when it reaches 0 an image change can be done.
 dec imagetimer,1
 if imagetimer<0 then imagetimer=0

 sprite 1,x#,y#,image

endfunction

I also uploaded the pic of the bouncingball. Hope it helps and gives you some ideas.

Attachments

Login to view attachments

Back to top

Profile PM Email Website

Zergei

19

Years of Service

User Offline

Joined: 9th Feb 2005

Location: Everywhere

Posted: 7th Aug 2006 21:52 Edited at: 7th Aug 2006 21:53

Link

Sorry for the double post.
Here's a gif of how i expected the animation to go...

Attachments

Login to view attachments

Back to top

Profile PM Email Website

Acolyte Entertainment

19

Years of Service

User Offline

Joined: 28th Dec 2004

Location: Oregon, US

Posted: 7th Aug 2006 22:28 Edited at: 7th Aug 2006 22:30

Link

wow nice.. just wow, i cant thank you enough.

even with a jumping code!
i couldent be more set. thank you so much

Back to top

Profile PM

Zergei

19

Years of Service

User Offline

Joined: 9th Feb 2005

Location: Everywhere

Posted: 7th Aug 2006 22:37 Edited at: 7th Aug 2006 22:39

Link

Actually, this is the code with no side notes:

sync on
sync rate 60

set image colorkey 255,0,255

load bitmap "spot.bmp",0

get image 1,0,0,19,18,1
get image 2,19,0,37,18,1
get image 3,37,0,54,18,1

global x# : x#=100
global y# : y#=100
global image as integer : image=1
global jump as integer
global jumpascence#
global jumpspeed# : jumpspeed#=1
global imagetimer as integer

do
 cls
 spot()
 sync
loop

Function spot()
 if spacekey()=0 and jump<>2 and imagetimer=0 then jump=0
 if spacekey()=1 and jump=0 then jump=1
 if jump=1
  if image=1 and imagetimer=0 then image=2 : imagetimer=3
  if image=2 and imagetimer=0 then image=3 : imagetimer=3 : jumpascence#=10
  if jumpascence#>0
   dec y#,jumpascence#
   dec jumpascence#,jumpspeed#
   if jumpascence#<=1 then jump=2
  endif
 else
  if jumpascence#>0 then jumpascence#=1 : jump=2
  if jump=2
   y#=y#-jumpascence#
   dec jumpascence#,1
  endif
 endif
 if y#>100 then y#=100 : jump=0 : image=2 : imagetimer=5 : jumpascence#=0
 if jump=0 and imagetimer=0 then image=1
 dec imagetimer,1
 if imagetimer<0 then imagetimer=0
 sprite 1,x#,y#,image
endfunction

+ Code Snippet

sync on
sync rate 60

set image colorkey 255,0,255

load bitmap "spot.bmp",0

get image 1,0,0,19,18,1
get image 2,19,0,37,18,1
get image 3,37,0,54,18,1

global x# : x#=100
global y# : y#=100
global image as integer : image=1
global jump as integer
global jumpascence#
global jumpspeed# : jumpspeed#=1
global imagetimer as integer

do
 cls
 spot()
 sync
loop

Function spot()
 if spacekey()=0 and jump<>2 and imagetimer=0 then jump=0
 if spacekey()=1 and jump=0 then jump=1
 if jump=1
  if image=1 and imagetimer=0 then image=2 : imagetimer=3
  if image=2 and imagetimer=0 then image=3 : imagetimer=3 : jumpascence#=10
  if jumpascence#>0
   dec y#,jumpascence#
   dec jumpascence#,jumpspeed#
   if jumpascence#<=1 then jump=2
  endif
 else
  if jumpascence#>0 then jumpascence#=1 : jump=2
  if jump=2
   y#=y#-jumpascence#
   dec jumpascence#,1
  endif
 endif
 if y#>100 then y#=100 : jump=0 : image=2 : imagetimer=5 : jumpascence#=0
 if jump=0 and imagetimer=0 then image=1
 dec imagetimer,1
 if imagetimer<0 then imagetimer=0
 sprite 1,x#,y#,image
endfunction

The code is quite long if you looking just to animate the ball jumping, but i thought you'd like to have control of it, as if it were the player, so things got complicated.
Indeed you can make a simple animation of it with just a few lines, but you'll end up having no control over the spot, good if you want it as part of an animation, or like a cursor, something you won't be interacting with, not like the player itself.

Back to top

Profile PM Email Website

Acolyte Entertainment

19

Years of Service

User Offline

Joined: 28th Dec 2004

Location: Oregon, US

Posted: 7th Aug 2006 22:41

Link

Sry for double post, Zergei i have some questions.
i read the other post how u were helpin the guy with his map editor and exporting the code etc.
i am making a map editer and it is turning out very nice. i have noticed u seem very expiecienced in the ways of 2d so here are some questions i have. just say you dont know if you dont

1) if you use bluegui how do you paste an image on top of a gadget.
2) in the code you wrote for the guy about data statements (

+ Code Snippet

sync on:sync rate 60

rem both images are 32 x 32
load image "media/tiles/terrain/dirt/dirt2.bmp",1
load image "media/tiles/terrain/grass/grass1.bmp",2
rem set variables
width=6
height=5
offsetx=0
offsety=0

rem fill world array------------------------------
dim world(width,height)
for y=0 to height-1
 for x=0 to width-1
    read world(y,x)
 next x
next y
rem ---------------------------------------------------
rem game loop
do
 rem draw world--------------------------------------------
 offsety=0
 offsetx=0
 for y=0 to height-1
  for x=0 to width-1
   paste image world(y,x),offsetx,offsety
   offsetx=offsetx+32
  next x
  offsety=offsety+32
  offsetx=0
 next y
 rem -------------------------------------------------------
 sync
loop

rem world---------------------------
data 2,2,2,2,2,2
data 2,1,1,1,1,2
data 2,1,1,1,1,2
data 2,1,1,1,1,2
data 2,2,2,2,2,2
rem
wait key

) i do not 100% understand how the data statements corispond with the pasteing of the images.

3) When exporting code could i read the data statements from a text file that my tile editor sends out?

4) Thank you for your time, i will ask more here if i come up with new ones,

thx,
-snow

Back to top

Profile PM

Zergei

19

Years of Service

User Offline

Joined: 9th Feb 2005

Location: Everywhere

Posted: 7th Aug 2006 23:11 Edited at: 7th Aug 2006 23:11

Link

First of i did this in 15 min, as im on a hurry now.

+ Code Snippet

sync on
sync rate 60

set image colorkey 255,0,255

load bitmap "spot.bmp",0

get image 1,0,0,19,18,1
get image 2,19,0,37,18,1
get image 3,37,0,54,18,1

global x# : x#=100
global y# : y#=100

global imagetimer#

do
 cls
 spot()
 sync
loop

Function spot()
 height#=4
 speed#=0.4
 inc imagetimer#,speed#
 image=1
 if (imagetimer#<2 and imagetimer#>1) or (imagetimer#>11 and imagetimer#<12) then image=2
 if imagetimer#>3 and imagetimer#<10 then image=3
 if imagetimer#>=4 and imagetimer#<=6 then dec y#,height#
 if imagetimer#>=8 and imagetimer#<=10 then inc y#,height#
 if imagetimer#>6 and imagetimer#<7 then dec y#,height#/2
 if imagetimer#>7 and imagetimer#<8 then inc y#,height#/2

 if imagetimer#>10 then imagetimer#=0
 sprite 1,x#,y#,image

endfunction

Just reedited the code from above to make is a simple jumping spot.

Now, about those other questions...

1) Im have no idea what bluegui is, or what your refering to a gadget. If you could explain something more about it i may ( may not) now something about it.

2) The part were it says "Fill world array", loads the data statement to an array, wich will be used for the creation of the level. When you READ data statements, it starts from the very first data, wich is a 2. Then you must use the READ command again to grab the 2° data wich is a 2 (the one next to the first one), and so on. When it reaches the end of the line, then it goes to the next DATA. If thats what your not understanding, fine. However if its how i pasted the images using the paste, offset, and for loops, then re ask

.

3) Yes, actually i've done 2 programs that help me with a characters animation sheet, and a map editor, but this last i did just the basic, as i started another project, still i may help you.

4) Glad i can help, im not that experienced yet, but looking forward it

.

Back to top

Profile PM Email Website

Acolyte Entertainment

19

Years of Service

User Offline

Joined: 28th Dec 2004

Location: Oregon, US

Posted: 8th Aug 2006 01:02

Link

kk sweet.
i have a few questions now, in

+ Code Snippet

sync on:sync rate 60

rem both images are 32 x 32
load image "media/tiles/terrain/dirt/dirt2.bmp",1
load image "media/tiles/terrain/grass/grass1.bmp",2
rem set variables
width=6
height=5
offsetx=0
offsety=0

rem fill world array------------------------------
dim world(width,height)
for y=0 to height-1
 for x=0 to width-1
    read world(y,x)
 next x
next y
rem ---------------------------------------------------
rem game loop
do
 rem draw world--------------------------------------------
 offsety=0
 offsetx=0
 for y=0 to height-1
  for x=0 to width-1
   paste image world(y,x),offsetx,offsety
   offsetx=offsetx+32
  next x
  offsety=offsety+32
  offsetx=0
 next y
 rem -------------------------------------------------------
 sync
loop

rem world---------------------------
data 2,2,2,2,2,2
data 2,1,1,1,1,2
data 2,1,1,1,1,2
data 2,1,1,1,1,2
data 2,2,2,2,2,2
rem
wait key

in the last part (the data statements) how would i load a txt file and give the data that data from the text file. lets say i have a text file with those data statements in it but i dont want too hard code it into the program. how would i do that

Back to top

Profile PM

Zergei

19

Years of Service

User Offline

Joined: 9th Feb 2005

Location: Everywhere

Posted: 8th Aug 2006 04:33

Link

In DbPro, press F1 to access the help, goto commands, option N°4 File Commands. There you have the commands to achieve it.

So, what you first do is open a file, but when you open it you must have in consideration what you're gonna do with it, say READ or WRITE. To read use "open to read" command, read the help to get an understanding of what goes along with it, the FileNumber, FileName. (but i doubt you won't understand that). To write use "open to write".

Once opened, you can read/write it, and what is important, make sure not to open another file and assign it the same number or error will happen. Also don't forget to CLOSE the FILE with the "Close file" command once your done with it, else it will keep stored in memory.

Once thats cleared, to read/write a file you use one of the many ways of reading/writing, accordingly to how you expect data to be. For strings use "Read String"/"Write String", for float values use "Read Float"/"Write Float", and for short amounts of data use byte "Read Byte"/"Write Word" or word "Read Word"/"Write Word" (in one variable, not in all the file, ex: use byte if you know you'll never surpase 256 values, else use WORD as it ranges to 65536).

Read and write using the same type of information, write bytes, read bytes, write strings, read strings....

Now, something to take into account. When reading strings, for each "Read String" command you call, you'll be grabbing a complete line. However, when using any of the other types, the program will grab the necesary ammount to complete that type. It'll be hard to write on your own a byte type file using notepad, so i recomend you work out in your own map editor a save function that will write a file in the type of data you wish.

Oh, and in order to write a file, it must first not exist, else error. Looks like you can't modify a file, so you'll have to read it, save it in an array, close it, delete it, and then write it.

Here's a quick example, anything else just ask:

+ Code Snippet

sync on
sync rate 60

open to read 1,"read.txt"
read string 1,s$
close file 1

print s$
sync
wait key

Create a .txt file and write something in it.

Back to top

Profile PM Email Website

Acolyte Entertainment

19

Years of Service

User Offline

Joined: 28th Dec 2004

Location: Oregon, US

Posted: 8th Aug 2006 07:57

Link

k nice.
i have a few more things too ask.
i cant seem too load the file and use it as data. at the end of the code were it says

+ Code Snippet

 data 1,2,2,2,1 etc

how wuold unstead of saying all that data load a file and just use the file unstead of writing the data

Back to top

Profile PM

Dream And Death

18

Years of Service

User Offline

Joined: 21st Feb 2006

Location: The circus! Juggling job, kids and DBPro

Posted: 8th Aug 2006 14:09

Link

Snowfall,

The data from the text file would never replace those DATA lines.

Try that last example of Zergei's, with a .txt file containing a first line that says "This replaces the first DATA statement". You should find that his example reads that from the file. A little mental leap, and you should see that you can put "1,2,2,2,1" as the first line of your .txt file, read it in, split it up and assign it to your variables.

"You get what everyone gets, you get a lifetime!" - Death, The Sandman Library

First you Dream, then you ... - Neil Gaiman, 2001

Back to top

Profile PM

Sorry your browser is not supported!

Newcomers DBPro Corner / Clipping (animation)? (2d)

Attachments

Attachments

Attachments