How would you animate a sprite? - GameCreators Forum

Author

Message

Eminent

13

Years of Service

User Offline

Joined: 15th Jul 2010

Location:

Posted: 9th Aug 2010 05:18

Link

Dark Noob Games are making a Space Invaders game and Im in charge of graphics. So how would I animate a sprite? I have attached a image of what I have so far. I want it to show frame 1 then frame 2 then frame 1 again and so on. How would I animate a sprite to do something like this?

Attachments

Login to view attachments

Back to top

Profile PM

Van B

Moderator

21

Years of Service

User Offline

Joined: 8th Oct 2002

Location: Sunnyvale

Posted: 9th Aug 2010 12:59

Link

You could have a sprite sheet, then either grab each part as a seperate image, or UV map the sprite or plain to suit the frame you want.
It's all good, because you probably want an animated explosion, or maybe even firing too, so drawing it all out on a 4x4 grid for example is a good start. If you are using sprites then the SET SPRITE TEXTURE COORD command will let you take over UV mapping, or there is also the automatic sprite animation system, never used it but it might save you a bit of time. If you are pasting the images onto the screen, then you have to grab each sprite frame individually, then paste whatever frame on the screen. If you are using a plain, then I can post a plain UV mapper function, you just specify the grid size, and grid position of your tile on the tile sheet and it does the rest.

Health, Ammo, and bacon and eggs!

Back to top

Profile PM Email

Eminent

13

Years of Service

User Offline

Joined: 15th Jul 2010

Location:

Posted: 9th Aug 2010 19:59

Link

Can you post a code snippet because being the newb I am, I under stood just about nothing that you said.

Back to top

Profile PM

LBFN

17

Years of Service

User Offline

Joined: 7th Apr 2007

Location: USA

Posted: 10th Aug 2010 06:07 Edited at: 10th Aug 2010 06:12

Link

Quote: "So how would I animate a sprite?"

In a nutshell, create the images needed to give the illusion of movement. Code it so that the images are played in a fluent manner.

You could use the CREATE ANIMATED SPRITE command, but I normally do not use it myself, as there is at least one issue with it. I like to do like Van B's first idea, make a sprite sheet and pull the images off of it within a game.

Here is some example code that may help you:

+ Code Snippet

` grabbing images off of a sprite sheet - LBFN
sync on : sync rate 60
backdrop off : autocam off
randomize timer()
dim speed(3)
ScrWid = (screen width() - 32)
load bitmap "Emmy.jpg",1
restore ImageData
for img = 1 to 3
  read x1,y1,x2,y2
  get image img,x1,y1,x2,y2
next img
delete bitmap 1
set current bitmap 0
for s = 1 to 3
  sprite s,rnd(500) + 40,rnd(300) + 50,s
  speed(s) = rnd(7) + 1
next s
repeat
  for s = 1 to 3
    sprite s,sprite x(s) + speed(s),sprite y(s),s
    if (sprite x(s) > ScrWid) or  (sprite x(s) <= abs(speed(s))) then speed(s) = speed(s) * -1
  next s
  sync
until spacekey() = 1
end


ImageData:
` x1, y1, x2, y2
data 0,0,31,31,64,0,95,31,0,32,31,63

It is a simple program to show you how to pull images off of a bitmap. Once grabbed, the images are used by three sprites to move horizontally back and forth across the screen. The bitmap is attached to this post.

EDIT: It is worth noting that the sprites are not animated. This example is only intended to show you how to pull images off of a bitmap.

So many games to code.......so little time.

Attachments

Login to view attachments

Back to top

Profile PM Email

Grog Grueslayer

Valued Member

18

Years of Service

User Offline

Joined: 30th May 2005

Playing: Green Hell

Posted: 10th Aug 2010 07:54 Edited at: 10th Aug 2010 07:56

Link

There are two methods that are basically the same. The manual method which grabs separate images and you cycle those images like animation frames and the CREATE ANIMATED SPRITE command which does everything automatically for you.

The Manual Method:

+ Code Snippet


` Load the image as bitmap 1 (outside of players view)
load bitmap "BadGuy1.png",1

` Grab images
for i=1 to 2
 ` Grab the image
 get image i,x,0,x+32,16,1
 ` Increase the x coordinate (to go to start of next image)
 inc x,32
next i

` Change the current viewed screen to the main screen
set current bitmap 0
` Hide the mouse 
hide mouse

` Pick the starting frame number and set a timer
CFrame=1:tim=timer()
do

 ` Show the animation at the mouse coordinates
 sprite 1,mousex(),mousey(),CFrame
 ` Check if it's time to change the current frame on the animation
 ` 100 is the delay of each frame  1000 = 1 second
 if timer()>tim+100
  ` Go to the next frame number
  inc CFrame
  ` Check if the current frame needs to be reset to the first frame
  if CFrame=3 then CFrame=1
  ` Reset the timer
  tim=timer()
 endif

loop

The CREATE ANIMATED SPRITE method:

+ Code Snippet


` Create an animated sprite
` Use sprite number 1, it's 2 frames across and 1 down, and use image number 1
create animated sprite 1,"BadGuy1.png",2,1,1

` Hide the mouse 
hide mouse

do

 ` Cycle the animation (sprite number 1, animate between frames 1 and 2, at 100 delay) 1000 = 1 second
 play sprite 1,1,2,100
 ` Show the animation at the mouse coordinates
 sprite 1,mousex(),mousey(),1

loop

Both of these methods do the same exact thing but the manual method you have to grab your own images, create a timer, and make code to change the frames manually. CREATE ANIMATED SPRITE does the image grabbing for you and it automatically animates the sprite with the PLAY SPRITE command. The only difference is you have to be very careful with the image you use. The size of the image has to be even otherwise you'll get a wobble in the animation.

CREATE ANIMATED SPRITE takes the size of the image and divides it by the number of frames you say is in that image so it can determine how big each frame needs to be... if it's an odd number it doesn't grab it just right. The attached image is 64x16... so when you tell Darkbasic to make it an animated sprite with 2 frames across and 1 down it knows to divide 64 by 2 and divide 16 by 1 to get each frame size at 32 by 16 pixels. If the image was odd like 63x16 it wouldn't look as good because it didn't divide the frame size evenly.

I also noticed that you used .jpg in your image. It's better to use .png so it's easier to work with (doesn't change colors around like .jpg) and allows you to use transparencies.

Edit: I changed the image to use orange instead of white so you can see it with the view button.

Attachments

Login to view attachments

Back to top

Profile PM Email

LBFN

17

Years of Service

User Offline

Joined: 7th Apr 2007

Location: USA

Posted: 10th Aug 2010 08:09

Link

Like I said, I don't normally use CREATE ANIMATED SPRITE. I have yet to get .pngs to show transparency correctly with them (you obviously have, but the commands just don't seem to work right for me and in searching I saw where others had the same issue). Another thing with CREATE ANIMATED SPRITE is that if you are playing a sprite and switch directions (and animations), it tends to play all of the animations before it gets to the right ones. Maybe you have figured out a different work-around than I have for this. From my experience, even though .pngs tend to be smaller, they take a little longer to load (which is really only noticeable in larger programs), so I do not use them like many do.

Quote: "It's better to use .png so it's easier to work with (doesn't change colors around like .jpg) and allows you to use transparencies."

Because the forum uploads .jpgs better I used that format. I use the .dds format for most of what I do.

So many games to code.......so little time.

Back to top

Profile PM Email

Grog Grueslayer

Valued Member

18

Years of Service

User Offline

Joined: 30th May 2005

Playing: Green Hell

Posted: 10th Aug 2010 08:54 Edited at: 10th Aug 2010 09:41

Link

Quote: "Like I said, I don't normally use CREATE ANIMATED SPRITE."

That message wasn't aimed at you specifically... it was aimed at Eminent. I didn't like using CREATE ANIMATED SPRITE either at first but it grew on me.

Quote: "it tends to play all of the animations before it gets to the right ones."

Yes it is rather annoying but if you use the SET SPRITE FRAME you can jump to the starting frame you want so the next time the PLAY SPRITE command is seen it'll start on the desired frame without playing through all the other frames.

+ Code Snippet

` Create an animated sprite
` Use sprite number 1, it's 10 frames across and 2 down, and use image number 1
create animated sprite 1,"MegaRun.png",10,2,1

` Hide the mouse 
hide mouse

` Set the first frame and last frame
FFrame=1:LFrame=10
` Create a timer (for spacebar)
tim=timer()
do

 ` Cycle the animation (sprite number 1, animate between frames FFrame and LFrame, at 100 delay) 1000 = 1 second
 play sprite 1,FFrame,LFrame,100
 ` Show the animation at the mouse coordinates
 sprite 1,mousex(),mousey(),1

 ` Check if the user wants to switch direction (spacebar)
 if keystate(57) and timer()>tim+200
  ` Check which frames are playing and switch to the opposite
  if FFrame=1
   FFrame=11:LFrame=20
   else
   FFrame=1:LFrame=10
  endif
  ` Change the starting animation frame
  set sprite frame 1,FFrame
  tim=timer()
 endif

loop

In the above snip use the spacebar to switch directions. Normally I would just use MIRROR SPRITE since running right and running left are the same but I added running left to show SET SPRITE FRAME in action.

Quote: "Because the forum uploads .jpgs better I used that format. I use the .dds format for most of what I do."

Eminent was using .jpg too. I prefer .pngs but .dds is a decent format too.

Attachments

Login to view attachments

Back to top

Profile PM Email

Sorry your browser is not supported!

2D All the way! / How would you animate a sprite?

Attachments

Attachments

Attachments

Attachments