I'm currently trying to create a game for a tablet device for Android using a SurfaceView. I have sprites and what not, but I'm struggling if I should use a whole spritesheet (With every animation in it), or just seperate the sprites on image files.
For example, my spritesheet is named bear.png, which contains 16 images inside. I can animate them beautifully using Rect (Thanks to mybringback for this):
canvas.drawBitmap(bitmap, rectSrc, rectDest, null);
But, I fear doing so would grow to larger than the heap size eventually.
However, there is another method. By seperating each image (bear1.png, bear2.png until bear16.png), I will also be able to create an animation with these sprites via:
Bitmap bitmap = Bitmap.decodeResource(context.getResources(), context.getResources().getIdentifier("bear" + index, "drawable", "com.example.game"));
then calling that to the canvas:
canvas.drawBitmap(bitmap, bitmapX, bitmapY, null);
Which also works fine for now. And of course, it greatly reduces my heap size since I'm only using 1 image at a time. But, because well.. Because, I'd be recalling Bitmap.decodeResource() at almost all times, I fear that when putting many animations together at one time, it may cause a significant lag.
So in short:
- Spritesheets: Increased heap size (which may eventually lead to an OutOfMemory error), but better performance
- Sprites on different image files: Decreased heap size, but may hinder performance
I'm not entirely sure which approach to use. Would it actually be okay if I go with the second method (Sprites on different image files)? Or would it be better with just spritesheets?
Never mind, I just answered my own question. It appears that rendering Bitmap.decodeResource() on every iteration lags the whole canvas, rather than rendering actual spritesheets and using Rect. Performance-wise, if experiencing too much lag on the canvas, there's no other way other than to shrink images using inSampleSize or using GLSurfaceView.
Related
Android Lollipop has introduced several new classes, one of them being VectorDrawable. I was just wondering when will it be suitable to use VectorDrawable over a bitmap image knowing VectorDrawable has a performance drawback. The only thing with VectorDrawable is scalability which comes at the cost of performance. So when is it that I can use a VectorDrawable if performance is the priority? Is the performance drop too high?
I think the "performance drop", if present, would be acceptable. One would hope you are not creating a ton of vector drawables every frame. Presumably, you would load the VD once, cast it into a drawable at which point the vector drawable isn't needed anymore.
Really the only thing that I can see that would cause an issue, is if you are loading an absurd amount of them all at once. But why would you? At that point, just something like a presized sprite sheet.
Note that VectorDrawable (comparing with BitmapDrawable), only has the initial drawing performance overhead. After the 1st frame the VectorDrawable show up, the framework will have a bitmap cache. From that on, all the performance of that VectorDrawable should be the same as the BitmapDrawable, as long as the size didn't change.
VectorDrawable is not recommended for huge background image, like full screen size, but for buttons and icons whose size is normally smaller than something like 200dp x 200dp. You should be able to use it without worrying too much about the performance.
I am stuck showing frame animation in android. My problem is that I have to animate 36 images. The smallest image is 69 kb in size and the biggest(last frame) is 526kb. A total of 11mb. I know its insane but I need to do it. See images below. The app is already made for iphone and I have to port it to android.
Requirements:
smooth animation
no frame loss
consistent with iphone
The solutions I tried are:
AnimationDrawable by providing in xml files. Problems: the start time is almost 6 -12 seconds. Images lose frames so jaggy experience.
Change imageview bitmap inside a handler. Problems: Frame loss and Out of memory
Create a custom imageview class. Define a method showAnimation() and inside it update bitmap and invalidate() the view unitl the last frame. Problems: Not fitting my requirement. This by far gave the best result but not half as required.
I am a noob in opengl and gamedevelopment. I am unable to find any alternative to my problem. Please help.
Smallest image:
Last image:
I can visualize the effect you are aiming at.I guess doing this will require pushing in different images onto the same imageView, with incremental frame rate.|
The accuracy will depend on the number of images you have. Greater the number of images finer will be the precision.
Also you need to implement incremental frame rate. So that it gives a smoother feel.
Doing this should be possible using a simple loop to change the image resource of the imageView Controller. There must be lag between two iterations, this lag will actually be the frame rate.
I think this can give satisfactory results.
Going for openGL, however, you will not need all these images. It will just require one image of the card that will be animated and duplicated to create the final image. This however is a complex piece of task(I think) so if you are catching some dead lines, you must go for a non-openGL solution like the 1st one, I have suggested.
My app is loading a large image (a house floorplan), then drawing touch-reactive objects (furniture, lamps etc.) on the image. I have a base image file included with my app but the objects come from coords in my database.
I've successfully deployed the app in multiple iterations, but now I need to use larger base images and BitmapFactory is causing an OutOfMemory exception on many devices (both old and new devices; anything with < 32MB heap seems to crash). I've read the 157 OOM questions on SO, but I'm afraid the link they all seem to point to won't help me since resolution / zooming is critical to the app's function.
I've tried to test the device's available memory before loading, but the results are spotty at best (some devices like the galaxy S3 report plenty of heap but still crash). I've also tried decreasing resolution but the image became unusable when reduced to a safe size based on the above test.
Is there another way to implement this design without ever using bitmaps?
I need to:
Load large base image
Create clickable shapes on top of the base image, maintaining their position / scale relative to the base image
BONUS: in the iOS version of my app, I can do SVG-style text scaling so a long label on a small object will stay inside the object
instead of running across the map(and will be invisible until the
image is zoomed). Replicating this in android would make me a happy
code monkey.
I can post code if needed, but you've all seen it before (almost all of it came from SO).
Thanks in advance for reading, and for any help you can give.
you have a few options:
break your large image into tiles, load these tiles into an array, and move a camera object around and only load tiles that need to be drawn, as the comments suggest.
make your image small and scale it up using 'android:scaletype`
Draw lines and curves on a Canvas object at runtime.
Use OpenGL
The appropriate solution really depends on how you want it to look. Tiling will take more dev effort but will look better, just be careful that you are properly cleaning up any tiles that aren't being drawn...
dynamically scaling will be easier, but you cannot guarantee the image won't be blurry.
Drawing on a Canvas object at runtime could work well-- just use Lines of different width and circles and Rects etc.
Using OpenGL will have the steepest learning curve, and might be overkill. This depends on your purpose.
You might like to look into using a "largeHeap"
http://developer.android.com/reference/android/R.styleable.html#AndroidManifestApplication_largeHeap
Here are some options:
1) Use tiles. Use tiles and dynamically load your data. Honestly, this is the best solution. With this solution you can load arbitrarily large images.
I've successfully used this approach for an endless paint canvas and it works quite well. You really only need to draw what is directly visible to the user. Tiles is a way to cast away pieces you don't need. A pyramid of tiles (where you pre-downsample your images and create more tiles), allows you to do this in a clean and fast way.
2) Use native code. The memory restrictions on native code are not the same as Java code. You can get away with allocating more memory.
3) Use OpenGL. Once again, the memory restriction for OpenGL are not the same as Java code.
4) Convert your original plan to an SVG and use an SVG library like this one.
5) Use "largeHeap". I strongly discourage this, as I think a largeHeap is rarely the solution, there are generally cleaner ways to approach the problem.
if the image is static , you might wish to use this nice library:
https://github.com/ManuelPeinado/ImageLayout
if the library doesn't support auto-downsampling of the image, you should do it by yourself, in order to use the best image for the current device (so that you won't get OOM).
for auto-sizing text , you might have some luch with the next post:
Auto-fit TextView for Android
I'm using the code outlined in the following post:
Draw text in OpenGL ES
I thought I could use this technique in order to dynamically display text (say an FPS counter). I realised that calls to resources to get the drawable slows down this process quite a lot, and I didn't need a bitmap background, so I removed it.
The technique works, but after a while (~2000 frames) the whole phone locks up. I suspect there's some memory which is not being freed in this code but I don't know where. I tried offloading the Canvas, Paint and Bitmap object creations which worked (so they aren't created every single frame) but the same problem still occurs.
I suspect therefore, that the generated GL texture is to blame, but I'm unsure how to remove it, or if this is even the case.
Any help would be appreciated.
EDIT: As an alternative, can someone please point out an easy way to render text to the screen dynamically (e.g. should be able to render the # of frames since starting for example, continually being updated and increasing). All the ways I can think of are either extremely tedious (make individual quads for each digit, store the textures for 0-9 in memory, parse the number and render each digit onto each quad), cannot be updated in good time (overlay Views) or can't get the required positioning in the glSurfaceView.
CBFG - http://www.codehead.co.uk/cbfg
This really is exactly what I've been wanting. You build a bitmap file from a font file using CBFG which can then be loaded and displayed with only a few lines of code (after importing his packages). It's literally as easy as fnt.PrintAt(gl,"Hello world!", 50, 160); in onDraw and more importantly, it handles dynamic text really well. I strongly advise anyone who is the same situation to try this.
two things I can guess you'll want to try:
1) dont' recreate the number of your frs every frame, generate number 1 to 60 and always reuse those.
2) there is an issue I found when generating text for my textures is that the font loader code of android never frees the memory space so avoid loading the font all the time, do it once and store a reference to it
I just wrote an entire tutorial on creating exactly what you are looking for.
The idea is basically to use font files and then generate a font bitmap (or atlas) at run-time instead of using a tool like CBFG to generate it offline. The benefit of this is that you can ship a small font file instead of multiple large bitmaps with your app, and never have to sacrifice font quality by using scaling.
The tutorial includes full working source (that can be dropped into any project). If you are interested go have a look here.
We are building a scrollable background, and currently have one large background image that we split up into 512x512 tiles, and want to load these tiles as they are needed, instead of all at once, when calling GLUtils.texImage2D within onDrawFrame, we have noticeable lag we think because of having to load the texture onto the hardware, is there a better way to do this?
Thanks.
Use texSubImage2D() to reload existing texture objects instead of creating entirely new ones.
G'day buddy,
I think the sheer amount of image data you're trying to transfer within a frame time is a tad much: if you are using a 24bpp format, 512x512 amounts to 1 MB of data. I can think of two ways to minimize it:
Change to a bitmap format that has less bpp. If you are using ARGB8888 you might want to try switching to RGB565 (as it is a background) to halve the data.
Consider splitting up the 512x512 into e.g. 4 chunks of 512x128 (since you are scrolling vertically). This way you distribute the loading over more frame intervals.
Cheers, Aert.