Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
How to create colour gradient for shadow? — Gideros Forum
  • Home
    • ›

    How to create colour gradient for shadow?

    snookssnooks Member
    edited August 2017 in General questions
    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?
    +1 -1Share on Facebook

    Comments

    • snookssnooks Member
      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?
      +1 -1Share on Facebook
    • antixantix Member
      Maybe @hgy29 or somebody more familiar with Pixels can help out. Maybe a mesh would work.

      Is this gradient supposed to be a rectangle?
      +1 -1Share on Facebook
    • snookssnooks Member
      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.
      +1 -1Share on Facebook
    • hgy29hgy29 Maintainer
      Can't you use http://docs.giderosmobile.com/reference/gideros/Pixel/setColor2#Pixel:setColor ?
      pixel:setColor(0x000000,1,0x000000,0,0)
      +1 -1Share on Facebook
    • snookssnooks Member
      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.
      +1 -1Share on Facebook
    • hgy29hgy29 Maintainer
      edited August 2017
      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.

      Likes: antix

      Dislikes: dreiko65

      +1 -1 (+1 / -1 )Share on Facebook
    • snookssnooks Member
      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/

      ,,, ?
      +1 -1Share on Facebook
    • HubertRonaldHubertRonald Member
      @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.

      [-] Liasoft
      +1 -1Share on Facebook
    Sign In or Register to comment.