How do I change a Sprite's color in Javascript?

0 favourites
  • 7 posts
From the Asset Store
Simplistic hyper-casual game with nature elements. Tap to switch between the 4 elements and reach a better score.
  • I have a project in which I am layering different types of Sprite instances in different colors. The function is in a separate Javascript file and then imported for use in events.

    Essentially I have an instance of a sprite that is simply a solid gray color. In a Javascript function, I create a new instance of this sprite in the correct position (Ive tested this, and it works), and now want to color it in with a specific rgb value. The sprite should remain solid and non-seethrough. (Ideally it should retain its alpha value to not look pixelated.)

    I've seen the function setColorRgb() somewhere, but using it says it's not a function, so I may have that wrong. What would the correct function be to do this?

    Codebit (Yes, I do pass runtime from scripts where I use the function.):

    switch (secpattern)

    {

    case "Plain":

    const seccolor0 = hexToRgb(seccolor[0]);

    let secinst = runtime.objects.CR_FelNoc_SecColor.createInstance(6, positionx, positiony);

    secinst.setColorRgb(seccolor0[0], seccolor0[1], seccolor0[2]);

    break;

    }

  • Don't guess -look in the manual to see what methods and properties you can actually use. In this case you want the IWorldInstance property colorRgb, e.g. to set a red filter:

    inst.colorRgb = [1, 0, 0];
    

    You might also want to take a look at using TypeScript which provides precise autocomplete and error checking to help catch mistakes like the one you made.

  • I find the documentation sometimes difficult to navigate, as I checked IObjectInstance and the Sprite API and didn't find anything. Thank you very much for the answer!

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Remember to think about the inherited classes. The ISpriteInstance manual entry states it derives from IWorldInstance, which in turn states it derives from IInstance. So all the properties and methods covered in all three manual entries are available for Sprite instances. (This is the standard way object-oriented programming works in a range of languages.)

  • Sorry to be here again, but unfortunately colorRgb isn't working. There are no more errors, but the Sprite remains gray. here's what I have (I have checked what the console logs print and copy pasted it over):

    console.log("pricolor is: " + pricolor); // PRINTS pricolor is: 10439f,874ccc,c65bcf,f27bbd

    // PRIMARY

    switch (pripattern)

    {

    case "Plain":

    const pricolor0 = hexToRgb(pricolor[0]);

    console.log("RGB color to use is: R:" + pricolor0[0] + ", G:" + pricolor0[1] + ", B:" + pricolor0[2]); // PRINTS RGB color to use is: R:16, G:67, B:159

    let priinst = runtime.objects.CR_FelNoc_PriColor.createInstance(5, positionx, positiony);

    priinst.colorRgb = [pricolor0[0], pricolor0[1], pricolor0[2]];

    // Sprite remains gray. No errors or Warnings.

    break;

    }

    The instances are created and placed, so they definitely exist.

  • Nevermind, I found that it needs the rgb values as floats. Is there a reason for this...? I couldn't even find the name of such an rgb system. Dividing each value through 255 gave me colors, but not the correct ones.

  • Again, the manual entry describes that:

    colorRgb ... An array with 3 elements specifying the red, green and blue color filter of the instance, with color values as floats in the 0-1 range.

    Using floats in the range 0-1 is how GPUs actually process the data. It makes many color calculations work more easily, and works regardless of the actual color data being processed. For example when using colors in the 0-1 range, the multiply effect is literally just "a x b". If you use colors in the 0-255 range, that is very much specific to 8-bit unsigned storage - e.g. 10-bit storage would use a 0-1024 range instead - and doing "a x b" will process an entirely different type of effect that isn't really useful - to get a multiply effect with the result also in the 0-255 you'd actually have to do "round(((a / 255) x (b / 255)) x 255)".

    So basically everything in computer graphics uses colors as floats in the 0-1 range as it works a lot better, and so does Construct.

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