How to create colour gradient for shadow?

snooks

I need to add a shadow to my navigation drawer implementation, I see that a Pixel can be created with a gradient but it's not clear to me how it is intended to be used. Could anybody shine some light on this?

snooks

I'm back to this issue and Pixel doesn't allow setting a relative alpha amount after setting the alpha for the corners. So Pixel:setAlpha() doesn't do anything. It also doesn't follow the alpha channel of the parent.

Can I draw it offscreen and create a Texture from it?

antix

Maybe @hgy29 or somebody more familiar with Pixels can help out. Maybe a mesh would work.

Is this gradient supposed to be a rectangle?

snooks

Yes, it's 5 logical pixels wide going from black, alpha 1 to black alpha 0 and it's the full height of the screen.

hgy29

Can't you use http://docs.giderosmobile.com/reference/gideros/Pixel/setColor2#Pixel:setColor ?

pixel:setColor(0x000000,1,0x000000,0,0)

snooks

Yes, that's what I have done, but I want to tween the first alpha when opening/closing with fling gestures or with open/close methods. For just manual dragging that would work fine.

hgy29

Looks like a gideros bug to me, Pixel should have honored setAlpha() setting.
It looks like the shader doesn't multiply gradient color by constant color multiplier.
Those color shaders are only used by Mesh (when supplying a color array) and Pixel (when using gradient), so maybe this bug wasn't noticed before.

Try replacing the default shader and see if it helps:

local shader=Shader.new([[ attribute lowp vec4 vColor; attribute highp vec3 vVertex; uniform lowp vec4 fColor; uniform highp mat4 vMatrix; varying lowp vec4 fInColor; void main() { vec4 vertex = vec4(vVertex,1.0); gl_Position = vMatrix*vertex; fInColor=vColor*fColor; } ]],[[ varying lowp vec4 fInColor; void main() { gl_FragColor = fInColor; } ]],Shader.FLAG_FROM_CODE, { {name="vMatrix",type=Shader.CMATRIX,sys=Shader.SYS_WVP,vertex=true}, {name="fColor",type=Shader.CFLOAT4,sys=Shader.SYS_COLOR,vertex=false}, }, { {name="vVertex",type=Shader.DFLOAT,mult=3,slot=0,offset=0}, {name="vColor",type=Shader.DUBYTE,mult=4,slot=1,offset=0}, {name="vTexCoord",type=Shader.DFLOAT,mult=2,slot=2,offset=0}, })   pixel:setShader(shader)

Another method would be to call setColor() on the pixel on each tween step to adjust the gradient values manually.

snooks

Yes, that's it - thanks for that! And my skill of finding at least one bug in mature products within days remains strong! With the new shader I can set the alpha channel of the Pixel and it respects changes in the alpha channel of the parent.

Speaking of shadows and shaders, where would the best resource be for seeing how to implement a diffuser (or whatever is best) for diffusing grey/black rects for general pop up/UI shadows? To implement this..

https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-shadows

... which would be easy with CSS...

https://css-tricks.com/snippets/css/css-box-shadow/

,,, ?

HubertRonald

@snook it looks interesting

I believe that development a widget with the concept Material Design, It could be a great feature for Gideros about all in business, social or educational app development.

Honestly, I think about it, but currently I haven't wrote some code for Material Design yet maybe when I finished some projects I'll take this matter.