How to set alpha channel of GlSurfaceView - android

I can not to set alpha parameter for my GlSurfaceView. XML-attribute android:alpha= not working, call of method from code mView.setAlpha() too not working. I read about a similar problem, for example, - how to make a transparent background on this View, but unfortunately solution did not help to solve my problem - to set alpha channel the contains of GlSurfaceView. I tried to move GlSurfaceView inside FrameLayout and yet to set alpha of FrameLayout, but this solution did not help.
Now i am still see only a one variant - to move a sample View above GlSurfaceView and to set a transparent of a sample View. This solution to be last case for me!
I want to ask - Is there any way to solve this problem differently?

The problem is solved!
Only one variant is correct - to set parametr 'alpha' in 'gl_FragColor' of your shader! For example: gl_FragColor.a=0.5;
That to have acces to your shader from code - need to make parameter alpha in shader as global ('uniform' type), and to link him across methods 'glGetUniformLocation', 'glUniform1f'. For example:
// View-code
int mAlpha;
float alpha = 0.5f;
mAlpha = GLES20.glGetUniformLocation(mProgrammerHandle, "u_alpha");
GLES20.glUniform1f(mAlpha, alpha);
// Shader-code
...
uniform float u_alpha;
...
gl_FragColor = vec4(rgb,u_alpha);
But that is not all!
Need to set parameters GlSurfaceView and Render. After initialization GlSurfaceView should be allowed a transparent Drawing:
setEGLConfigChooser(8, 8, 8, 8, 16, 0);
getHolder().setFormat(PixelFormat.RGBA_8888);
In render object too must to set a transparent color cleaning and correct color mixing.
GLES20.glClearColor ( 0.0f, 0.0f, 0.0f, 0.0f );
GLES20.glEnable(GL_BLEND);
Color mixing can be different. Default - colors mix i.e. GLES20.glBlendEquation(GL_FUNC_ADD); - not necessary write.
But there are other options of mixing:
GL_FUNC_SUBTRACT
GL_FUNC_REVERSE_SUBTRACT
I was not write 'glBlendEquation' in my code.
Next important moment - alpha mixing. Method 'glBlendFunc' or 'glBlendFuncSeparate'. More information you can read in OpenGL tutorial. For correct alpha mixing i took advantage of more detailed setup:
GLES20.glBlendFuncSeparate(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ZERO);
The last thing to do - overriding methods 'setAlpa' and 'getAlpa' in your GlSurfaceView.
P.S. If in your View a transparent artifact appear, then you may tried to set parameters setZOrderOnTop(true); and/or android:windowIsTranslucent="true" inside XML. But for me it was not required - everything works fine!

Related

COCOS 2dx setColor(Color3B::GREEN) is not working

when i am trying to publish ios game into android setColor(Color3B::GREEN) is not working,color of font not coming properly
l_answer = Label::createWithTTF(label_config,str_numberStr );
l_answer->setColor(Color3B::GREEN);
l_answer->enableOutline(Color4B(0,0,0,255),255);
l_answer->enableGlow(Color4B(0,0,0,225));
l_answer->setScale(0.0f);
Color of font not coming properly.
You can’t set more than one effect on the label. Effects defined in enum class LabelEffect in ccTypes.h and they cancel each other. Now you can see only Glow effect, but if you swap enableOutline() and enableGlow(), you will see only Outline effect.
For example, for code
Label* lbSomeText = Label::createWithTTF("sometext", "fonts/junegull_rg.ttf", 100);
lbSomeText->setPosition(Vec2(winSize.width * 0.5f, winSize.height * 0.5f));
lbSomeText->setColor(230,110,180); // I set for more contrast with green
lbSomeText->enableGlow(Color4B(0,0,0,255));
lbSomeText->enableOutline(Color4B(0,255,0,255), 15);
this->addChild(lbSomeText);
result is:
For code
...
lbSomeText->enableOutline(Color4B(0,255,0,255), 15);
lbSomeText->enableGlow(Color4B(0,0,0,255));
...
result is:
Next, if you want to see GREEN effect, you need set Color4B(r, g, b, alpha) to Color4B(0, 255, 0, 255). Now you have (0, 0, 0, 255) and result is BLACK color. For example, here is result for lbSomeText->enableGlow(Color4B(0,255,0,255));
As you can see, there is little difference between green and black glowing, because you can’t to set width of glowing. So, if you need more glow, better way is make the sprite from label text in designer program like Photoshop and add more glow manually in this program.
I hope, I answered your question. Now you can choose which option suits you best.

Android Studio Libgdx Sprite/Texture Transparency

I need to change the transparency of a texture/sprite and I really have no idea how to do it. Any help?
I see two solutions here - one is to change transparency directly in sprite:
Sprite sprite = new Sprite( yourTexture );
Sprite otherSprite = new Sprite( yourOtherTexture );
sprite.setAlpha(0.1f); // 0f is full transparent when 1f is full visible
...
batch.begin();
sprite.draw( batch ); //this one will be almost transparent
otherSprite.draw( batch ); //this one will be normal
batch.end();
you can always manipulate with Sprite color directly:
sprite.setColor( sprite.getColor.r, sprite.getColor.g, sprite.getColor.b, 0.1f);
but it seems to be a silly way for me.
The second one which I recommend is to wrap your Sprite into Scene2d Actor class like for example Image. Then you can still change aplha directly but you are also able to use Scene2d Actions mechanism, manipulating actor's alpha smoothly (like alpha changing animation step by step).
Both Scene2d and Actions are to wide to describe it here but I encourage you to read about it here:
Scene2d
Scene2d Actions
I added this to my GameRenderer.java:
private void drawTapTapChuggy() {
batcher.setColor(1, 1, 1, 0.5f);
batcher.draw(AssetLoader.tapTapChuggy, 28, 89, (83 * 0.9f), (52 * 0.9f));
batcher.setColor(1, 1, 1, 1.0f);
}

Android properties that can be animated with ObjectAnimator

I am starting to play around with Property Animations over view animations as I have a view that needs to scale and push others out of the way as it does. I've seen some examples but I'm just wondering if there is anywhere that provides a list of the properties that can be altered using these classes. For example, I saw one tutorial that did a quick rotation using:
ObjectAnimator.ofFloat(aniView, "rotation", 360)
Which is quite cool, but I wouldn't have known the rotation property if not for that exact tutorial, is there any comprehensive list of what can be done? The particular property I want to animate is the weight of a view within a LinearLayout, if anyone has any advice on that specifically.
Better late than never, so here is the comprehensive list of the properties that can be animated with ObjectAnimator.
http://developer.android.com/guide/topics/graphics/prop-animation.html#views
The Docs imply that any value can be used with ObjectAnimator as long as you follow a naming convention:
The object property that you are animating must have a setter function (in camel case) in the form of set<propertyName>(). Because
the ObjectAnimator automatically updates the property during
animation, it must be able to access the property with this setter
method. For example, if the property name is foo, you need to have a
setFoo() method. If this setter method does not exist, you have three
options:
Add the setter method to the class if you have the rights to
do so.
Use a wrapper class that you have rights to change and have
that wrapper receive the value with a valid setter method and forward
it to the original object.
Use ValueAnimator instead.
[...]
With respect to your question, View has the method setRotation(float) -- that gives you a hint it can be used. In particular here's how you would do it with a particular TimeInterpolator:
ObjectAnimator anim = ObjectAnimator.ofFloat(myView, "rotation", 0f, 90f);
anim.setDuration(2000); // Duration in milliseconds
anim.setInterpolator(timeInterpolator); // E.g. Linear, Accelerate, Decelerate
anim.start() // Begin the animation
You can read the docs for more details on the expectations of ObjectAnimator.
Here is the comprehensive list of property names that you are looking for:
rotation
rotationX
rotationY
translationX
translationY
scaleX
scaleY
pivotX
pivotY
alpha
x
y
Source: Docs
Use "translateX" or "transalteY" to move a <group>
Take a look at vectorDrawable
You can check it at the View.java file in Properties block. Now it starts with the line of:
public static final Property<View, Float> ALPHA = new FloatProperty<View>("alpha")

OpenGL transparent images have black in them

I am working on a game for Android and I was wondering why whenever I draw images with transparency there seems to always be some black added to the transparent parts. This happens all over and makes some of my effects look strange.
Here is an example. The two circles are only white images with a blur but you can see when one overlaps the other it has a shadow. If I overlap two of the circles say in Inkscape I get pure white where they overlap.
I am using
GLES20.glEnable(GLES20.GL_BLEND);
GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA);
for my blending.
Any idea why this happens and how I can avoid it?
Edit: the only thing I can think of is that the two images have the same z so maybe they are blending only with the background instead of each other?
Edit:
I changed
GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA);
to
GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_DST_ALPHA);
Here is the result I was looking for.
The only thing now is that the transparent images that I had that have a transparent black in them are ignored, which makes sense because I think the destination alpha is 1. Why would One minus source add that gray?
I figured out how to fix it.
I changed
GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA);
to
GLES20.glBlendFunc(GLES20.GL_ONE, GLES20.GL_ONE_MINUS_SRC_ALPHA);
It turns out that Android pre-multiplies the alpha of textures of PNG images when you load it (making white turn gray).
I added
vColor.r = vColor.r * vColor.a;
vColor.g = vColor.g * vColor.a;
vColor.b = vColor.b * vColor.a;
to my vertex shader to do the multiplying for my other colors.
Are you sure your content is correct? If you don't want the circles to produce any black color the color values in the image should be completely white, and the alpha channel should define the shape of the circle. Now it looks like the image has a white circle with both alpha channel and the color value fading to zero, which leads to a halo.
Are you using linear sampling? My thought could be if you have a very small image (less than say 30-40 pixels in dimension), you could be getting interpolated alpha values between the inside of the circle (alpha = 1) to the outside of the circle (alpha = 0). This would give you intermediate alpha values that result in the kind of blur effect.
Try the following code when you have the circle texture bound:
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
Maybe you can host the actual texture that you're using such that we can inspect it? Also please post your drawing code if this doesn't help.
You can also divide by alpha, because, the problem is, when you export your textures, Image processing software may pre-multiply your Alpha channel. I ended up with alpha division into my fragment shader. The following code is HLSL, but you can easily convert it to GLSL:
float4 main(float4 tc: TEXCOORD0): COLOR0
{
float4 ts = tex2D(Tex0,tc);
//Divide out this pre-multiplied alpha
float3 outColor = ts.rgb / ts.a;
return float4(outColor, ts.a);
}
Note that this operation is lossy, very lossy and even if it will most likely suffice in cases such as these, it's not a general solution. In your case you can totally ignore the COLOR and serve original alpha AND white in your fragment shader, e.g. return float4(1,1,1,ts.a); (convert to GLSL)

Android Progressbar: Indeterminate animation without images

I'd like to create an indeterminate animation that simply fades from one color to another (a pulse, if you will). I don't think this should require the use of images but despite my best efforts, I'm not sure I understand how to use something like AlphaAnimation with a Shape to accomplish this.
Could someone please provide some insight as to how to accomplish this? I have a feeling I'm missing something pretty straightforward here. (Examples are always appreciated!)
Thanks!
This is a trivial task in 3.0 - you can set up an ObjectAnimator to change the "color" or "backgroundColor" of an object (View, ColorDrawable, whatever has the property) between two values. See the ApiDemo animations/BouncingBalls for an example of this.
But assuming you're using pre-3.0 APIs, there are a couple of approaches. First, you could set up your own handler to give you the timing events you need, then calculate the new color at each point.
It's probably slightly easier (if not entirely intuitive) to use an AlphaAnimation. All you really want from the animation is percentage values, not to fade anything. So you don't set the animation on a view, but just set it up to run internally from a value of 0 to 1, then get the current animated value in your onDraw() method and set the current color appropriately.
For example, this will set up and start the alpha animation to run for one second:
Transformation transform = new Transformation();
AlphaAnimation anim = new AlphaAnimation(0f, 1f);
anim.setDuration(1000);
anim.start();
Then in your drawing loop, you grab the current animated value:
long time = getDrawingTime();
anim.getTransformation(time, transform);
float elapsedFraction = transform.getAlpha();
Once you have the elapsedFraction (a value between 0 and 1), you can calculate the appropriate in-between color value.
The code above may not match your situation exactly, but you should be able to do something similar to get what you want.

Categories

Resources