How do I add CSS styling to a sprite?

  • Hi, I want to create a rounded image like this: https://www.w3schools.com/css/css3_images.asp and I was wondering how to add CSS to a Sprite in C2.

    Thank you <img src="{SMILIES_PATH}/icon_mrgreen.gif" alt=":mrgreen:" title="Mr. Green">

  • It's not possible because sprites are not HTML elements, so cannot be styled with CSS. They're drawn directly in to a canvas instead. You can however use the full range of WebGL shader effects on them.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Ok thank you Ashley

    I think I will use the Vignette effect but I want the vignette colour to be white. I guess I only have to change a paramater from the effect's code, but I've trying for an hour and a half and I really haven't got any clue on how to change it. This is the effect's code:

    varying mediump vec2 vTex;
    uniform lowp sampler2D samplerFront;
    
    uniform mediump float vignetteStart;
    uniform mediump float vignetteEnd;
    
    void main(void)
    {	
    	lowp vec4 front = texture2D(samplerFront, vTex);
    	lowp float a = front.a;
    	
    	if (a != 0.0)
    		front.rgb /= a;
    	
        lowp float d = distance(vTex, vec2(0.5, 0.5));
        front.rgb *= smoothstep(vignetteEnd, vignetteStart, d);
    	front.rgb *= a;
    	
        gl_FragColor = front;
    }
    [/code:1j59hu63] which is based on [url=https://github.com/BradLarson/GPUImage/blob/master/framework/Source/GPUImageVignetteFilter.m]https://github.com/BradLarson/GPUImage/ ... teFilter.m[/url] and the author gives this hint[quote:1j59hu63]vignetteColor: The color to use for the vignette (GPUVector3), with a default of black
  • Kyatric I think you are the "effect's master", could you please let me know what parameter is necessary to change in order to change the Vignette's colour? Thank you in advance

  • Kyatric I think you are the "effect's master", could you please let me know what parameter is necessary to change in order to change the Vignette's colour? Thank you in advance

    Have you tried the Vignettecolor fx created by crisbrobs? It's like the normal vignette fx but with RGB parameters.

    Link to chrisbrobs original files haven't yet been updated since DropBox changed the rules, so here is a link to my DropBox. Just unzip to 'C:\Program Files\Construct 2\effects'.

    https://www.dropbox.com/s/zoas7k735k6nuo9/VignetteColorfx.zip?dl=1

  • zenox98 It's exactly what I was looking for. Thank you

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)