I've small (20x20) circles in my libGDX stage. I have created the texture with GIMP, and for hdpi devices it is (30x30). When I use it in my game, it looks like this, as expected.
But when I tried linear filtering with following code
textureRegion.getTexture().setFilter(Texture.TextureFilter.Linear,Texture.TextureFilter.Linear);
,The circle has for some reason gray edges:
I checked the image in GIMP and it does not have any anti-aliased pixels. The original texture looks same as the first image. Why does it occur and how could I have a smooth circle?
If minification is used then border might have to be little bigger. And to avoid gray borders syndrome, transparent border should not be color(0,0,0,0) but color of the edge with alpha channel of 0. So white edge picture would use 255,255,255,0 as border color.
EDIT
How I add border with transparent layer using GIMP :
Create Canvas with any size(Image Size in GIMP) that you want (File -> New)
Draw your Image with transparent outer border/space on a layer.
Create new Layer below your Image Layer without space/border with Colour(255,255,255,0) so that this layer become invisible.
Export your Image.
Related
I have a 9-patch that goes like this:
I'm using it as a background for a rectangular area in an Android app. I expect that the center pixel takes the majority of the area, the pixel right above is scaled to a one pixel thick horizontal line underneath the frame, the one to the left forms a one pixel thick vertical line, and so forth. All the 9-patch guides state that.
However, users are reporting color artifacts on display, as if those pixels are scaled in the other direction, too:
What am I missing?
How would I replicate this in Android, my general instinct would be to create a regular layout w/ a border, then have 2 layouts that contain a triangle (one the same color as the border + one that's slightly smaller but white and overlap the two), idk if there's an easier way to do that:
You can use 9patch to achieve something like you wanted.
The Draw 9-patch tool is a WYSIWYG editor that allows you to create
bitmap images that automatically resize to accommodate the contents of
the view and the size of the screen. Selected parts of the image are
scaled horizontally or vertically based indicators drawn within the
image.
A complete guideline can be found here : http://developer.android.com/tools/help/draw9patch.html
The easiest way to reach this, is to set the layout background to that image.
background="#drawable/template"
Probably you want to have the area out of the "bubble" transparent, so you will need to save it as PNG.
I am creating a tiled background. I read may posts about using bitmap xml with repeat tile. The tile I am using is has a diamond shape. So when I do the tile there are black gaps in between the tiles.
I hope I am explaining myself. How can this be done so the whole screen is covered tiles (ie sides touching each other not only vertices)
Thank you
I am using this image
And this is the code
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/tile"
android:tileMode="repeat"
android:dither="true" />
What you want to achieve is impossible yet.
Images are always rectangle shaped. You see it as diamond just because corners of image are transparent. But it still has rectangle shape.
This is what actual image should look like,
But black corners are not visible because it has transparency set at the corners. That's why it looks like,
If your image had no transparency then your tiled background would look like,
And because of transparency at the corners it is looking like,
And what try to achieve is to overlap that blank space with diamond (because you say image is diamond shaped) which is not possible because images are always in rectangular shape.
And there's no library written yet which can ignore the alpha (transparency) of the image.
You should either use opaque image or leave the space blank in tiled background (if you use this image).
Perhaps change the way you are tiling your image? Maybe your initial image that you're tiling looks like this <> but maybe you want it to look like this >< ? It would be more helpful if you posted your image. Can you also post the code you're using to tile the bitmap?
I am using http://romannurik.github.io/AndroidAssetStudio/nine-patches.html to create a 9Patch image which is attached. . I use this is to set a drawableBottom to the TextView.But this does not stretch to the width the text view. What am i doing wrong ? This is the original image
Here are a few reasons for it to "not stretch"
Guides must only be one pixel wide, so if you want a 48×48 button, your png will actually be 50×50. Anything thicker than one pixel will remain part of your image.
guides must be solid black (#000000). Even a slight difference in color (#000001) or alpha will cause it to fail
MOST IMPORTANT: you should keep in mind that remaining area of the one-pixel outline must be completely transparent. This includes the four corners of the image – those should always be clear. This can be a bigger problem than you realize. For example, if you scale an image in Photoshop it will add anti-aliased pixels which may include almost-invisible pixels which will also cause it to fail*. If you must scale in Photoshop, use the Nearest Neighbor setting in the Resample Image pulldown menu (at the bottom of the Image Size pop-up menu) to keep sharp edges on your guides.
http://radleymarx.com/blog/simple-guide-to-9-patch/
You need to use android sdk draw9patch tool to make a 9-patch image.
you will need to define stretchable patches to image border like shown in below image border.
I use anti aliasing to make my images more smooth. When using anti aliasing a dark border will be drawn around the images. This happens because Android uses the color black and mixes it with the yellow from the images.
This is a gernal problem! When I draw a rectangle and set the alpha value to 127 the image also gets quiet dark. Instead of using black Android should use white to draw the transparency.
Is there any workaround how I can handles this problem?
Example sourcecode for drawing a semi transparent rectangle to a canvas. The rectangle is dark as well but it should be bright.
Bitmap bmp = Bitmap.createBitmap(200, 200, Config.ARGB_8888);
Canvas canvas = new Canvas(bmp);
Paint rPaint = new Paint();
rPaint.setColor(Color.parseColor("#F7E836"));
rPaint.setAlpha(127);
rPaint.setStyle(Paint.Style.FILL);
canvas.drawRect(0, 0, 100, 100, rPaint);
The images are SVG graphics which are rendered with the following library:
http://code.google.com/p/svg-android/
I think I found the bug. The problem is the SurfaceView. Its background is black. The same semi-transparent bug occurs when I use the code above and display it on an ImageView and the background color of the UI element behind the ImageView is black.
The background color of the SurfaceView is always black. If I change this to white with setBackgroundColor, the SurfaceView gets white, but the white background will be drawn OVER all my other images drawn with OpenGL. I think these must be switched. First the background color should be drawn and than the OpenGL stuff.
Post links to the original source images and show how your anti-aliasing them (code).
When an image is anti-aliased the algorithm will insert colors between the colors which make up the edges. So with your yellow star image, if the background was white, it will attempt to add pixels around the edge which are between the yellow and white (a lighter shade of yellow). This is what 'smooths' the image.
But, if the image has an indexed color space, those lighter shades of yellow probably don't exist in the images pallet and as a result, you can get almost any other color in its place, whatever color in the index lands on the index value calculated.
The image in your question is an indexed png and hence has this problem.
If this is the issue, then you need to convert your original source images to an non-indexed color space, or anti-alias them prior to indexing the images which doesn't work well if the images need to be scaled by your application or if you need to anti-alias against various different backgrounds.
The other thing that could be happening is that your anti-aliasing against a different background than you think you are, specifically the yellow star is anti-aliased correctly if the background were black, posting your code is the easiest way to figure this out.