How do I add CSS styling to a sprite?

Get help using Construct 2

Post » Thu Jul 06, 2017 2:43 pm

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 :mrgreen:
B
21
S
6
Posts: 158
Reputation: 1,723

Post » Thu Jul 06, 2017 5:08 pm

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.
Scirra Founder
B
398
S
236
G
88
Posts: 24,433
Reputation: 194,635

Post » Thu Jul 06, 2017 11:55 pm

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:
Code: Select all
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;
}
which is based on https://github.com/BradLarson/GPUImage/ ... teFilter.m and the author gives this hint
vignetteColor: The color to use for the vignette (GPUVector3), with a default of black
B
21
S
6
Posts: 158
Reputation: 1,723

Post » Wed Jul 19, 2017 11:42 pm

@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 :)
B
21
S
6
Posts: 158
Reputation: 1,723

Post » Thu Jul 20, 2017 7:57 am

ChesVCF wrote:@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
If your vision so exceeds your ability, then look to something closer.
Moderator
B
134
S
30
G
86
Posts: 5,420
Reputation: 59,526

Post » Thu Jul 20, 2017 11:20 am

@zenox98 It's exactly what I was looking for. Thank you :)
B
21
S
6
Posts: 158
Reputation: 1,723


Return to How do I....?

Who is online

Users browsing this forum: TRMG and 38 guests