Share My Creation Reading a sprite sheet

simple test to see if I could read a single sprite sheet and walk thru it. This uses an image of a deck of cards. The key is to declare an array of source rectangle, intialize them from the source rectangle, then display them. Works well for me.

here is the code:

Sub Globals
   'These global variables will be redeclared each time the activity is created.
   'These variables can only be accessed from this module.
   Dim can1 As Canvas 
   Dim b1 As Bitmap  
   Dim r As Rect
   Dim s(55) As Rect
   Dim lv As LayoutValues
   Dim inc As Int
   Dim pos As Int
   Dim Speed As Int
End Sub

Sub Activity_Create(FirstTime As Boolean)
   speed = 500
   Activity.LoadLayout("main")
   timer1.Initialize("timer1",speed)
   timer1.Enabled = True
   can1.Initialize(activity)
   b1.Initialize(File.DirAssets, "cards.png") 
   x = 10
   y = 10
   lv = GetDeviceLayoutValues
   r.Initialize(10,10,lv.Width - 10 ,lv.Height - 10 )
   For i = 0 To 4
      For ii = 0 To 10
         s(pos).Initialize(68 * ii, 96 * i,68 * (ii + 1),96 * (i + 1)) 
         'the sprite sheet is 11 cols x 5 rows. The image is 748x480, so, the dest rect needs to read in 68x96 (748 / 11 = 68, 480 / 5 = 96)
         pos = pos + 1
      Next
   Next
   
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)
   
End Sub

Sub timer1_tick()
   
      can1.DrawBitmap(b1,s(inc),r)
      activity.Invalidate2(r)   
      inc = inc + 1
      If inc > 54 Then
         inc = 0
      End If
   
End Sub

 

[mshihrer]

requires this image:

 

[mshihrer]

a little more work. This is explosions sprite sheet, and can display up to 10 of them whereever you click on the screen. Can also speed up or slow down the animation. Just experimenting around.

 

[nfordbscndrd]

In the "Card Game Shell" I posted on here, I used a deck of cards in which each card face is stored in an individual image file and loaded into an ImageView each time it needs to be displayed. To display all 4 hands at once requires a total of 52 ImageViews.

In the old days (Windows), using a sprite sheet was necessary because (1) using 52 individual controls (instead of just drawing on the Form) to show the cards ate up way too much of the Windows systems resources, and (2) constantly going back to the hard drive to load the images was slower than loading the sprite sheet once and drawing from it.

I've been told that reason 1 is not a factor in Android -- the number of Views does not impact the system -- and since Android devices normally have files on a solid state device instead of a hard drive, it would seem that reason 2 does not apply either (although I think that my device, an Archos 70 with 250GB internal hard drive, does keep the image files on the hard drive).

So does a sprite sheet have any advantages over individual image files in Android (other than possibly on the A70)?

 

[mshihrer]

well, 1 image is alot easier to deal with in general. Alot easier to update. Also, it is possible to do scrolling backgrounds and such. And also a great source for data. Color values could be stored in the image and then later read in as column/rows. In Windows 3d apps, this is how normal maps and texturing and lightmapping are done. As for performance, I don't know if there is any real benefit, as long as the individual images sizes doesn't add up to more than the single image size.

edit:
I think this explains the pros/cons:
Graphics | Android Developers

I've done a little bit more work on this, added scrolling background.

 

[mshihrer]

wow, I've learned ALOT in the last couple hours. First, for stuff like this, you don't even need a panel, or view to draw on. You can draw direct to the activity. Second, I have no idea why, I need to check this out, but my .apk went from like 320k down to 170k after I took out a few vars I wasn't using, and removed the panel from the layout. Thats a pretty big savings in my book, AND, I even added a sound file. So, please try this out if you get a chance. Here is the source, I added alot of comments so it should be pretty clear whats going on. Thanks.

 

[nfordbscndrd]

well, 1 image is alot easier to deal with in general. Alot easier to update. Also, it is possible to do scrolling backgrounds and such. And also a great source for data. Color values could be stored in the image and then later read in as column/rows. In Windows 3d apps, this is how normal maps and texturing and lightmapping are done. As for performance, I don't know if there is any real benefit, as long as the individual images sizes doesn't add up to more than the single image size.

edit:
I think this explains the pros/cons:
Graphics | Android Developers

The link you provided is just talking about ways of drawing graphics. What I was asking about was loading sprites (card faces) from individual graphics files versus from a sprite page.

As you said, I don't see any advantage one way or the other since scrolling backgrounds, storing colors, etc., don't apply.

 

[mshihrer]

well, I guess the advantage is in the last example source code I posted. Try to do those effects with views and several images, it would be alot more code I'm sure.
And, I think, you are misunderstanding my intentons, and the definition of a sprite. Sprite sheets are still used all the time in 2d, and even 3d gaming.
See this link for the definition of a sprite:

http://en.wikipedia.org/wiki/Sprite_(computer_graphics)

 

[nfordbscndrd]

well, I guess the advantage is in the last example source code I posted. Try to do those effects with views and several images, it would be alot more code I'm sure.
And, I think, you are misunderstanding my intentons, and the definition of a sprite. Sprite sheets are still used all the time in 2d, and even 3d gaming.
See this link for the definition of a sprite:

Sprite (computer graphics) - Wikipedia, the free encyclopedia

Yes, I know what a sprite is, but since your first sprite upload was a sheet of card faces, I have been trying to find out if using a sprite sheet of card faces has any advantages over using individual files for each card face. I guess you misunderstood my question, since you keep referring to animations.

 

[stevel05]

Very nice, thanks for sharing. There's a lot of information in there, I've not looked creating game graphics, now I just might.

Steve

 

[Merlot2309]

@mshihrer

Thank you very much for the code.
This really helped me to get started with sprites in B4A

Greetz,
Helen.

 

[kblood]

Yes, I know what a sprite is, but since your first sprite upload was a sheet of card faces, I have been trying to find out if using a sprite sheet of card faces has any advantages over using individual files for each card face. I guess you misunderstood my question, since you keep referring to animations.

The advantage is that you can set up the cards in an array, or in most cases, the individual frames of a sprite character animation, into arrays. The advantage is you do not have to deal with dozens of files for each frame. And probably having to make each file yourself with individual programming, or at least naming each file because of this.

When I programmed Flash a bit to test it out, I manually made each animation and it took for ever. Grabbing them out of sprite sheets is a big time saver in the long run. Some sprite sheets are easier to use than others though.

I think this could help me make a 2D game for Android

 

[eps]

Fab!! Just what I've been looking for and I didn't even know it!

I've manipulated all my images together, 120 of them and then stitched them together using image magick, which worked excellently!! Now time to access the image map....

 

[eps]

Yes, I know what a sprite is, but since your first sprite upload was a sheet of card faces, I have been trying to find out if using a sprite sheet of card faces has any advantages over using individual files for each card face. I guess you misunderstood my question, since you keep referring to animations.

Way less coding, for instance I can reference my images using a database table and then shift along and down the sprite map instead of having to code and reference each graphic - 120 of them!! You'd have to dim each and every one, no thanks.

 

[Kamac]

I wonder why not to use other alghoritm.

I had one coded in some alien language deep inside my computer :sign0137:.

Gotta find and conver it.


It's easier to use regular squares (32x32 etc.)

 

[nfordbscndrd]

Way less coding, for instance I can reference my images using a database table and then shift along and down the sprite map instead of having to code and reference each graphic - 120 of them!!

I guess we're not talking about the same thing. When I want to display, say, the King Of Diamonds, which is the file "kd.png", I just say (where fileName = "kd.png"):

CardViews1(i).Bitmap = LoadBitmap(File.DirAssets, fileName.


I don't have to compute where the graphic is on a sprite map or anything, just call it by name. Yes, I end up with more files than using a single sprite sheet, but I think that it simplifies the programming.

You'd have to dim each and every one, no thanks.

I'm not sure what this refers to. When I need to dim cards, I stretch a half-transparent gray label over them. I don't dim one at a time. This can be seen in the code for the Card Game Shell For Programmers.

 

[eps]

I think we are looking from a different perspective. I have a list of items which will grow over time and the one displayed is based on the record selected..

 

[bryon]

question about sprites

Hi,
first, thanks for posting the example on how to read the sprite sheets. I have a question I hope you won't mind answering.

What I have is a scrolling background consisting of three imageviews. What I want to do is overlay a sprite from a sprite sheet onto one of the background image views. I can read from the sprite sheet with an array of rectangles as in your guide but I have having trouble drawing them onto the background. I can draw them on the underlying activity, but I can seem to draw them on the background bitmaps.

Also, how do you move the target rectangle around dynamically? I know you can set the location during the initialization, but after that, how do you move where you want your sprite to draw to?

Thanks for your help.

 

[Cableguy]

Here are my two cents:

1st Cent.

The use of a Sprite Sheet, as I see it, and I may be wrong as I never worked with them, is very usefull indeed, if one condition is met: All Images are the same size...
In the example above of the deck of cards, every image has the same size, so it would be logical to use a sprite sheet...It makes the Diming of the image views a lot easier I think, and also setting the views layout as well.

2nd Cent.

When working with difeent sized images, and sometimes individual images (understand this as "unique" images), then a Sprite Sheet may not be of a great use, and you would end up by Diming the image views and setting layouts individually...


The Pay

So from my understanding, this post has two lines of thought...
The initial one, I think, mistakenly used the word "animation" as this is normally what sprites are used to, but he had originally used the code to load a series of identical individual images, all with a known and same size.
The discussion then went over the other side, discussing the usage and benifits of a SpriteSheet in an animation...
I guess that if you need to animate a series of 200 images, then a Sprite Sheet is the way to go, but if you are just loading background images for buttons, panels and activities, then I guess single file manipulation is easier...

Well, as I said, these were my two cents, payed...But keep in mind...I never worked with Sprites before...so I may be right..

 

[Cableguy]

I can draw them on the underlying activity, but I can seem to draw them on the background bitmaps.

Have a lok at the Canvas Keyword
You may need to first draw the image to a canvas and then set the background to be that canvas... dont forget to invalidade the part of the view you are drawing to.

Also, how do you move the target rectangle around dynamically? I know you can set the location during the initialization, but after that, how do you move where you want your sprite to draw to?

Thanks for your help.

You may use a Timer, and set the new position in the tick event, or use the activities "Activity_Touch (Action As Int, X As Float, Y As Float)", if the sprite's parent is the activity...