Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Newcomers DBPro Corner / Struggling to find Sprite Tutorial

Author
Message
Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 16th Feb 2011 22:32
Hi, i have done a fair bit of searching and am failing to come up with a comprehensive sprite tutorial that i understand. I dont know if i am searching for the right thing. The are all either grossly out of date dead links, full of people arguing and therefore dont contain useful information or dont really tell me the application of what im doing (for example it says how to load a sprite and how to paste one, x and y is for co-ordinates etc, this i guessed but i dont know how to use it.

I could do with something step by step to loading a sprite then perhaps animating one from a sprite sheet.

In theory i think i know how i am supposed to do it but tests i have run have been a failure due to my lack of understanding. Is there a nice, simple yet comprehensive up to date tutorial knocking about somewhere?

I would greatly appreciate the help.
Cybermind
Valued Member
21
Years of Service
User Offline
Joined: 28th Nov 2002
Location: Denmark
Posted: 16th Feb 2011 22:48
Hello there Somarl, I found this tutorial on the site, have you tried it? (Sprites and the blue background)
http://www.thegamecreators.com/?m=view_product&id=2000&page=tutorials

The byte chrunchers are coming...
DIVIDING BY ZERO/BECAUSE WE SUCK...
Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 16th Feb 2011 23:35
I did take a look at that one, but didnt like it. For one with all that i have read i sort of now know more or less everything in that tutorial. Second its outdated because the second snippet of code does not work as intended, it says to type that in to avoid blue screen but instead all i got was a black and blue lined fuzzy screen. Now because i have had a play about i managed to avoid it by adding sync on and setting a rate but i only knew how to do that out of sheer luck. For most of the outdated tutorials if the code is wrong i seldom know what to do to fix it therefore rendering it useless for such a nublet like me.

Is there anything current on sprite animations from a sprite sheet. I may benefit from an indepth (but not too complicated) tutorial on that. In theory i thought you load up an image, then do something like work out how big each frame is within the big image, then break it up using some sort of grab command then paste it out as an when needed. But i tried this and what i did, did not work, so i think i need more help. Im not clever enough to fill in the blanks yet so to speak and some of these tutorials dont come with an image and there are a lot of numbers that are specific to that image and making them work with anything i have has only proved troublesome.

Thank you for the reply though.
LBFN
17
Years of Service
User Offline
Joined: 7th Apr 2007
Location: USA
Posted: 17th Feb 2011 04:26
This is a link to a thread about animating a sprite. It is not a tutorial, but I think you can look at what they did and perhaps it will be helpful to you. It looks like it even has the media available.

http://forum.thegamecreators.com/?m=forum_view&t=167772&b=7

Grog Grueslayer
Valued Member
19
Years of Service
User Offline
Joined: 30th May 2005
Playing: Green Hell
Posted: 17th Feb 2011 07:26 Edited at: 17th Feb 2011 07:28
Quote: "Is there anything current on sprite animations from a sprite sheet. I may benefit from an indepth (but not too complicated) tutorial on that. In theory i thought you load up an image, then do something like work out how big each frame is within the big image, then break it up using some sort of grab command then paste it out as an when needed."


Yes, your theory on how sprite sheets are loaded is right but you can do it the hard way (all yourself) or the easy way with the CREATE ANIMATED SPRITE command. The following code snips (Hard/Easy) do exactly the same thing (animating 10 frames that change every 100 milliseconds).


The Hard Way:

You load the image as a bitmap (so the user can't see it) and grab each frame as a separate image. To animate it you create a TIMER() and show the SPRITE but change it's image number when the TIMER() is up to animate.




The Easy Way:

You use CREATE ANIMATED SPRITE which tells Darkbasic how many frames are in the image so it cuts the image perfectly. Show the SPRITE and play the sprite to animate.



When Darkbasic Pro sees the CREATE ANIMATED SPRITE command it takes the image size horizontally (in this case 510) and the number of frames across (10) and divides the two numbers to get the horizontal size of each frame (510/10 = 51). It then does the same thing vertically (Image size 52 divided by frames down 1 = 52). So the attached image is going to automatically be 10 images cut up in 51x52 size.

To stop the blue screen all you do is add a screen sized PASTE IMAGE as a background.



Attachments

Login to view attachments
Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 17th Feb 2011 21:27 Edited at: 17th Feb 2011 21:30
@LBFN thanks, taking a look at one of those examples had led me to believe i may need to know more about trigonometry and its application to games programming a little earlier than expected so i am currently reading up a bit on that to.

@Grog lol, trust me if thats the hard way, i found an even harder way to do it than that
I just copy pasted the get image code several times with the coordinates for where to grab it changed. I just cant seem to understand how i can do this automatically in a for loop. Ive seen it done before but just dont get the math, i cant seem to follow it - its like "where did you get that number from, what does that number represent" etc.

For example:
load bitmap "GrogMegaSprite.png",1
` Set the starting image number
CImage=100
` Grab the images
for x=0 to 460 step 51
get image CImage,x,y,x+50,y+52,1
inc CImage
next x

I am not too sure (probably because i dont know the dimensions of the theoretical .png) where you get the 50 from, then the 52, also im a bit confused as to what the 460 is too.

How would i get sprites from a sprite sheet that was say 10 frames across by 8 frames down? What would be the for loop math for that.

I know that is the hard way but i think i should understand it, before getting more info on the create animated sprite command, which i also have trouble with, how does it know how many frames you have put into a sheet? Is it the 'across, down' bit. If that was the case then a 10 by 8 sheet you would just put 10, 8 and it would split the image exactly would it not?

Thanks.

Edit: Forgive me, i did not notice the attached .png i just got it, didnt know that was there, thanks again.
Grog Grueslayer
Valued Member
19
Years of Service
User Offline
Joined: 30th May 2005
Playing: Green Hell
Posted: 18th Feb 2011 17:35 Edited at: 18th Feb 2011 17:40
Quote: "How would i get sprites from a sprite sheet that was say 10 frames across by 8 frames down? What would be the for loop math for that."


I see the Edit but I'll reply anyways in case this may be helpful to others. The math is the same as if you let Darkbasic Pro do it by itself with the CREATE ANIMATED SPRITE command. You take the horizontal size of the image and divide it by the number of frames there are across to get the horizontal size of each individual frame. Then you take the vertical size of the image and divide it by the frames down to get the vertical size of each frame. If the sprite sheet is lined up just right (often they aren't because artists aren't programmers) then it should grab the images perfectly.

The code snip below uses the BOX command to simulate what area it would be grabbing if it was a GET IMAGE command instead for each individual frame (this assumes the same frame size as the attached image above but with 8 frames down).



Quote: "Edit: Forgive me, i did not notice the attached .png i just got it, didnt know that was there, thanks again."


It's ok. If I write code that has media it's always going to be attached to the message with the code (unless I'm using media that was already provided by somebody in the same thread). Most of the time though I usually make images within the code.

Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 19th Feb 2011 02:04
Sorry to be a pain again, but im having difficulty with a few bit still.
Why is CImage 100 and why increment it by 1?
In the for loop, i presume 364 for the x axis is the height of the whole image containing the many frames, just as 460 is the width? Or is that just the dimensions for the one frame that you want it to pick up.
And finally, why step 52 and 51. (I understand that it cuts off 1 pxl at the end so 51 and 52 not 52 and 52, but why those numbers in the first place, what are they?)
Again sorry about this but im just having difficulty following the logic particulaly some of the numbers and where they come from.
Grog Grueslayer
Valued Member
19
Years of Service
User Offline
Joined: 30th May 2005
Playing: Green Hell
Posted: 19th Feb 2011 05:44 Edited at: 19th Feb 2011 08:26
CImage is just a variable. I started it at 100 because I left room for image numbers 1-99 for other things like backgrounds. It's incremented by 1 because I wanted each frame of the animation to be in sequence (to make it easy to animate later). With the CREATE ANIMATED SPRITE command it uses 1 image number for all frames but the hard way requires individual image numbers for each frame as if you loaded each one from a separate file. For this one animation image numbers 100 to 109 are used.

The image size is 510x52. There are 10 frames so take the horizontal size of the image (510) divide it by the number of frames across (10) and that equals 51 (the horizontal size of each frame). 460 is the number I used because it's just close enough to stop at the end of the frame (actually it should of been 459 because 510-51=459 but 460 works because it goes by increments of 51). The STEP 51 in the FOR/NEXT loop says that it'll count from 0 to 460 in increments of 51. So it counts like this: 0, 51, 102, 153, 204, 255, 306, 357, 408, and 459. Each one of those numbers is the start of each frame for the animation (because each frame has 51 horizontal pixels). If you changed the STEP number to 20 it would count by 20's but not get each frame properly (you'd end up with 25 frames instead of 10). Using a FOR/NEXT loop is easier than doing what you did before. This would require 10 GET IMAGE commands if it wasn't using a FOR/NEXT loop with 1 GET IMAGE command that used a variable that changed each loop.

The attached image should shed some light. This is the same image with green boxes around each frame, a red dot at the corner where the start of the box is (at each STEP), and image numbers in each frame (CImage). Use the same Hard Way code above but use x+51 instead to grab each frame properly (I forgot GET IMAGE is the same way as the BOX command).

Attachments

Login to view attachments
Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 19th Feb 2011 10:40
Thanks Grog, i understand it now thats great. It is as i thought it might be. How would a for loop work though for a much bigger sheet that was a few rows down as well as columns. By what you have told me i think i could pretty much write the code for any single row sprite sheet (no matter how big each frame was in pixels and how many frames it was as it seems to be pretty simple maths just incrementing it by the number of each frame once you know how many pixels each frame is x, and y) but then how would you tell it to go down after it hit the end of the first row of frames and start doing the next row back at the start but then 1 frame down and so on?
Grog Grueslayer
Valued Member
19
Years of Service
User Offline
Joined: 30th May 2005
Playing: Green Hell
Posted: 20th Feb 2011 00:26 Edited at: 20th Feb 2011 00:28
Np. It works just like the message above my last message (the one with the single code snip). You use a FOR/NEXT loop for the vertical coordinates (y) around the FOR/NEXT loop for the horizontal coordinates (x). The y starts at 0 and x does 0 to 460 then y is increased by (in this case 52) and x does another 0 to 460 and so on.

I copied the one I'm talking about and added code to show the current x and y coordinates of where the boxes are created (where GET IMAGE would go for capturing frames). Press any key to go to the next box.



Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 20th Feb 2011 15:22
Thanks, i think this clears up what i was originally just guessing at but wasnt sure.
When i come to it i am going to put it into practice and if it doesnt work i will post up what i have done and maybe it can be explained what ive done wrong, hopefully it wont, i pretty much think my theory of how its done is as above.
Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 1st Mar 2011 21:46
Well i have to say, after leaving the main bulk bit of sprites for a while and trying to learn other parts of coding i have once again returned to the world of sprites and still cannot find any more than dead links or information that is far too advanced for a beginner.

Where are the tutorials that are just a little beyond 'how to load a sprite' but just before 'this is how tile sets work' and how to make a 2d scrolling engine. Because so far i am wasting lots of time just browsing forums and dead links for information on where to start and as you can probably understand that is a very frustrating experience.

I have said it before and ill say it again, far too many examples or threads i am pulling up are a bit presumptuous in regard to my ability to understand whats in front of me. Too many examples i am looking at just bash out a load of code with little to no explenation as to why we are doing what we are doing presuming that i will be able to wander through endless x's and y's and unusual symbols and variable names and figure out what is going on. The first thing my brain does when it sees something it doesnt recognise is shut off if no explenation is given.

I need the basics that are just beyond 'create animated sprite' and something that perhaps entails creating a north south east west scrolling map based on background images or something, then slowly adding in collision etc for when you get to buildings. Right now i havent a clue where to start but its not like i havent searched. I even tried the examples that come with dbpro but they are useless, no commenting, no info and you cant even load them because i dont have the bmps that are meant to go with them, if i have to create them myself how big would they be, what are half of them. This doesnt help me at all. Help me guys, my hair is getting thinner pulling it out as im trying to pull up some good info
Grog Grueslayer
Valued Member
19
Years of Service
User Offline
Joined: 30th May 2005
Playing: Green Hell
Posted: 2nd Mar 2011 16:47 Edited at: 2nd Mar 2011 16:53
We all use sprites differently so that may be why it's hard to find an end-all-be-all sprite tutorial. Some of us use the native sprite commands, Advanced Sprites plugin, Box2D, and some use a mix of all. The way their shown/animated is also different... some use normal sprites (the hard way) while others use the CREATE ANIMATED SPRITE command and some of us use pasted sprites while others use the actual sprite. When it comes to the order the sprites are drawn some use the natural sprite priority and some use the SPRITE PRIORITY command. Some of use like to use normal sprites while others insist on using 3D planes. When it comes to collision some of us use the normal collision commands while others use plugins, or MEMBLOCKs for pixel-perfect collision, and some of us use the POINT() command. And I'm sure there's ways that I forgot to mention.

And because all of us are at different levels of skill at programming there's no way to say "This is the next step in learning about _______." because what may be easy to somebody may be hard for somebody else. The best way is to just start messing with the SPRITE commands to see what you can figure out. If you get stuck we're more than happy to help you through it.

Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 2nd Mar 2011 18:26
I see! Thanks Grog ill bare it in mind then. I have that book through now so ill take a look at what it says and experiment. Only thing is i think its very old, it uses EndFor at the end of some For loops which i know doesnt work least not in DBPro.

I know ill get stuck and i know ill end up here but if i can get help i will get the gist of it eventually. The way i am trying to learn at the moment is by getting stuck into a 2d rpg and seeing how to do each element so that i might learn a thing or two about programming and game structure and so on (remembering that i am not just new to DB but new to programming in general). As long as folk dont mind me popping on here (i do hate to mither but its the only way) whenever i want to get the hang of something new then im sure ill do fine
Rich Dersheimer
AGK Developer
15
Years of Service
User Offline
Joined: 1st Jul 2009
Location: Inside the box
Posted: 2nd Mar 2011 20:40
Somarl - I was also confused a bit by "ENDFOR", but I think they use it mainly as an "english language" representation of how the program flows. Kind of silly I think, why not just use the actual "NEXT" command and simply explain what it does.

Good luck with the sprites!

Somarl
13
Years of Service
User Offline
Joined: 11th Feb 2011
Location: UK
Posted: 2nd Mar 2011 21:45
Thanks Rich, appreciated. Yeah after reading a bit more into that book i think thats what they meant, not that it used to be an actual command in DBpro, thats my mistake.

So you have the book too? Did you learn a lot from it or pick it up to refresh what you already knew or...?
If this book works out i will purchase the vol 2 with great pleasure.
Rich Dersheimer
AGK Developer
15
Years of Service
User Offline
Joined: 1st Jul 2009
Location: Inside the box
Posted: 3rd Mar 2011 03:49
I already knew a lot about programming, I got the books to learn about specific DBPro commands. I think you'll benefit from learning the programming concepts in that first book. And the second one has some "little known" info on some of the advanced DBPro commands. But unless you can find a good deal on it, the second book can be quite expensive to buy and ship.

Grog Grueslayer
Valued Member
19
Years of Service
User Offline
Joined: 30th May 2005
Playing: Green Hell
Posted: 3rd Mar 2011 10:46 Edited at: 3rd Mar 2011 10:48
Both of them can download it as an eBook now (.pdf file). It's about 25 bucks each.

http://www.digital-skills.co.uk/order.html

Login to post a reply

Server time is: 2024-11-16 20:00:21
Your offset time is: 2024-11-16 20:00:21