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

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?

Comments

  • 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?
  • Maybe @hgy29 or somebody more familiar with Pixels can help out. Maybe a mesh would work.

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

    ,,, ?
  • @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.
Sign In or Register to comment.