I'm currently developing my first Android app and am having some issues rendering images. The image itself is great quality to begin with, but upon rendering it the quality drastically lowers. Edges become jagged and it just looks poorly done. Everyone I've showed it to thus far has almost immediately noticed it, without any prompting about it. [start on left, end on right:]
I'm trying everything I am aware of and every tip I've been able to find by looking around online, but nothing seems to fix it.
Currently, I get the image as a Bitmap and scale it:
Bitmap holeImage = BitmapFactory.decodeResource(res, R.drawable.hole_image);
Bitmap holeImageBMP = Bitmap.createScaledBitmap(holeImage, width, height, true);
Once I have the image, I create a Paint, set a few smoothing attributes to true, and then draw it on the canvas:
Paint smoothingPaint = new Paint();
smoothingPaint.setAntiAlias(true);
smoothingPaint.setFilterBitmap(true);
smoothingPaint.setDither(true);
canvas.drawBitmap(holeImageBMP, 0, 0, smoothingPaint);
Yet, as you can obviously see above, the image quality drastically decreases. I've seen plenty of images being rendered beautifully and I'm honestly just not sure what's going on so any advice would be great!
Other notes: I'm using a SurfaceView method to handle the drawing, similar in nature to the LunarLander example given in the SDK.
Thanks again!
If you aren't restricted to much less colors than the original picture has (Does Android have 256 color modes?), I'd suggest to disable dithering, if you zoom into your picture, it does have a visible effect that perhaps destroys a smooth look.
I think in your case, dithering infers with anti-aliasing by destroying the additional colors that anti-aliasing needs for a smooth look. A quick color count on your pictures (left one about 850, right one about 140) confirms this.
That is probably related to converting images from one format to another. Also, android screens vary from device to device. Try to use another device and it might look better... Almost for sure it will have a different tone.
Try to read this great article on this problem (and banding and dithering) and consider adapting the image you created for it to work better in android devices: http://www.curious-creature.org/2010/12/08/bitmap-quality-banding-and-dithering/
Related
So I am doing small game in android studio - java. And I was using 400x400 .png image as a ship. It worked well.
Bitmap.createScaledBitmap(BitmapFactory.decodeResource(context.getResources(),R.drawable.playermove),(int)(length),(int)(height),false);
I am using drawBitmap to draw image on screen.
Now I want to use different ship. Only thing that I changed is that instead of this image I use another one that is 150x150 also .png and game becomes so laggy and sloopy.
Length and Height are 1/10 size of the screen. I have 8 ship pictures with similair dimensions and every one make game sloppy.
Any idea why those pictures make everything sloppy and first one doesn't?
You are doing that on the UI thread. You shouldn't!
I'd recommend not to scale Bitmap dynamically, as bitmap scaling is bit expensive, and if you are doing that in onDraw() which would be triggered every ~17ms, doing redundant/expensive work is bad. I'd suggest you to preprocess the image and keep a scaled version of it and just use it to draw every time.
you are not optimizing your images and this is a background work. try to do this in background.
also this post may help you.
For reference the effect I'm going for is this:
I'm working in Processing 3, NOT p5.js.
I've looked around processing forums, but i can't find anything that works in the current version or doesn't use PGraphics and a mask which from what I've read can be expensive to use.
My current ideas and implementations have resulted to drawing shapes around the player and filling the gaps in with a circles with no fill that has a large stroke weight.
Does anyone know of any methods to easily and inexpensively draw a black background over everything except a small circular area?
If this is the wrong place to ask this question just send me on my way I guess, but please be nice. Thank you:)
You could create an image (or PGraphics) that consists of mostly black, with a transparent circle in it. This is called image masking or alpha compositing. Doing a Google image search for "alpha composite" returns a bunch of the images I'm talking about.
Anyway, after you have the image, it's just a matter of drawing it on top of your scene wherever the player is. You might also use the PImage#mask() function. More info can be found in the reference.
I'm currently working on an application where I at one point want to open an Activity that has a transparent background so that I can see the activity below it. This was simple enough and I solved it quick. However, now I want to also add some kind of blur filter so that the activity below my activity seems blurred out.
I have searched around and tried several different solutions but with no luck so I'm trying to add this as a question. Does anyone know of any good way to solve this?
Thanks
There are plenty of libraries that do this. Here's one list of them. Personally I've used BlurView (I hope linking to one of the libraries is not against site rules) but I've had to patch the library a bit, see this issue - the pull request is not in yet. I've also had performance issues with animations.
Basically all the libraries do the same things:
Create Canvas for a Bitmap, with scaled down dimensions (e.g. 4 times smaller), set the transformation matrix to apply this scaling
Render the background of the window to Canvas
Render the root view of the Activity to the Canvas
Blur the Canvas's Bitmap using ScriptIntrinsicBlur
Draw the Bitmap as the background of a View, scaled back up e.g. 4 times
Why the scaling? For performance reasons. It's much faster to draw everything 4 times smaller, and also the blur effect becomes "stronger" due to the upscaling - there's a limit how much ScriptIntrinsicBlur can blur with one pass, and multiple passes slow things down again.
For API < 14, you could use the flag WindowManager.LayoutParams.FLAG_BLUR_BEHIND.
For higher APIS this is no longer supported.
However, you could do this with a view.
Create a Bitmap from your activity's overall layout and Blur that bitmap with whatever method you want. Add(or unhide) a View in your layout that covers everything and you have your problem solved.
I'm developing 2D Side Scroll Android Game, using AndEngine.
I have problem with tiles quality.
If I will use DEFAULT texture option, for my texture congaing tiles, it doesn't look perfect, contours ARE NOT smooth, etc:
DEFAULT Texture options, uses such OPEN GL parameters:
new TextureOptions(GL10.GL_NEAREST, GL10.GL_NEAREST, GL10.GL_CLAMP_TO_EDGE, GL10.GL_CLAMP_TO_EDGE, GL10.GL_MODULATE, true);
But lately I realized, that if I will use such parameters (similar to BILINEAR parameters, except last one)
new TextureOptions(GL10.GL_LINEAR, GL10.GL_LINEAR, GL10.GL_CLAMP_TO_EDGE, GL10.GL_CLAMP_TO_EDGE, GL10.GL_MODULATE, true)
graphic looks smooth (i would say perfect, check image below)
Everything would be perfect, but while moving camera (Camera is chasing player) there are visible contours of those sprites, like for example on this screen:
I have been trying to use different OPEN GL parameters, but with no luck. I would be grateful for some help. With DEFAULT texture option, such problem doesn't exist, but quality is bad. Thanks.
Ps: I have been trying to cast integer on my setCenter method inside camera, but with no luck, some people were saying it should help, but it didn't.
This occurs because the function that is used for smoothing out the textures uses pixels that are outside of the pictures on the Texture Atlas. These are black by default so the pixels on the edges are poisoned by the black area outside.
I have temporarily fixed the issue by extending the picture an all sides by 1px and putting there a copy of the adjacent 1px line from the picture. Then I set my TextureRegion to contain only the middle of the picture with the padding being outside. The results are probably not perfect but the lines are no longer noticeable.
I have seen someone on the AndEngine forums say that in the newest version the problem is fixed, so you may try updating.
I'm developing Side Scroll 2D Game, using AndEngine
I'm using their SVG extension (I'm using vector graphic)
But I discovered strange and ugly effect, while moving my player (while camera is chasing player exactly, means while camera is changing its position)
Images of my sprites looks just different, they are like blurred or there is effect like those images would be moving (not changing their possition, just jittery effect, really hard to explain and call this effect properly) Hopefully this image may explain it a bit:
Its more or less, how does it look in the game, where:
a) "FIRST" image is showing square, while player is moving (CAMERA isn't) image looks as it should
b) "SECOND" the same image, but with this strange effect "which looks like image moving/blurring during camera moving [chasing player])
Friend of mine told me that it might be hardware problem:
"the blurring that you notice is actually a hardware problem. Some phones "smooth" the content on the screen to give a nicer feel to applications. I don't know if it's the screen or the graphics processor, but it doesn't occur on my wife's Samsung Captivate. It happens on my Atrix and Xoom though. It's really noticable on the Xoom due to the large screen size."
But seems there is way to prevent it, since I have tested many similar games, where camera is chasing player, and I could not notice such effect.
Is there a way to turn this off in code?
I'm grateful for previous answers, unfortunately, still problem exist.
Till now, I have tried:
casting (int) on setCenter method which is being executed on updateChaseEntity
testing game using PNG images, instead of SVG extension and vector graphic
different TextureOptions
hardwareAcceleration
If someone have different idea, what may cause this strange effect, I would be really grateful for help - thank you.
Some devices (Xperia Play) bleed everywhere when trying to draw things that are moving quickly. For example a red icon on the application list leaves a blur behind it. You could try hardwareAcceleration in the manifest (on and off) to see if it makes a difference.
You'd probably get the same effect if you weren't using svg
When your player's just going to the right and camera begins chasing him, all other sprites except player are moving to the left. Try to print the absolute coordinates of your "blurring" sprite (or some of its anchor points) to the log. The X-coord of sprite should be decreasing linearly. If you notice it's increasing some times, it could be a reason of blur.
Hope this will help.
It sounds like it's due to the camera moving in real increments, making the SVG components rest on non-integer bounds, and the SVG renderer making anti-aliasing come into effect to demonstrate this. Try moving the camera in integer increments by casting camera values to int.
I'm not familiar with this engine but I wonder why would you use vector graphics for pixelated art style. I'll be surprised if your character in the screenshot is really a vector art... maybe it's texture imported in SVG? I attempted back in the day to use flash a few times and I was making the same mistake... I'm not saying it's not possible but it's not intended to create pixel art with flash or any other vector software. There is a reason why most flash games have similar look.
Best way to debug it, is try a different looking sprite.
Maybe it is just the slow response time of your device display.
I'm also an Andengine developer, and never seen such behavior.
Sometimes you fix jittering using FixedStepEngine, it might help.
If you can post your code maybe we can better help you.