Color Utils Extension [1.0.2]

ETHproductions

  • *
  • Posts: 430
Color Utilities Extension

Welcome to the Color Customization Zone! With the Color Utilities Extension, you can adjust colors at runtime, as well as define colors using HSL and hex values. You can use these blocks to modify an image, adjust color attributes, or even put a color-selection tool in-game!

NOTE: This is my first extension, so it might be a little sloppy. Please post how you think I can make it better!

I know that it works on Flash and Windows. (Please let me know if it works on Mac, Linux, iOS, or Android!)
Designed to work with Stencyl v3.1. Do not use in Stencyl v2.2 or below!

Features
- get, set and shift RGB/HSL values from colors
- get negative or opposite versions of colors
- define a color with HSL or hex values

- Download
- Sample project (try it below!)

(How to Install and Update an Extension)


Blocks



Returns a color value (red, green, blue, hue, saturation or lightness) from a color.




Returns the color that was put in, but with a color value set to the input number.
Useful for editing a color attribute.




Returns the color that was put in, but with a color value changed by the input number.
Useful for performing tasks like hue-shifts on images, or editing a color attribute.




Returns the negative or opposite of the color that was put in.
'negative' reverses each RGB value, while 'opposite' reverses the hue value.
E.g. Light green, when made negative, would create violet; on the other hand, when made opposite, it would create pink.




Converts an HSL value into a color.
The hue is a number from 0-359 (it automatically loops around, so 360 = 0).
Saturation should be between 0-160, and lightness/luminance between 0-240. Both are self-adjusting, so any value outside the range will work, but will be replaced by the maximum or minimum value.




Converts a hexadecimal value into a color.
Upper- and lower-case are completely interchangeable; even aF0eDc will work.
The block can also handle many formats, including six-digits like ffffff, #ffffff and 0xffffff, and three-digits like fff, #fff, and 0xfff.


Version History

1.0 - Initial release (08/09/14)
Blocks:
 - get/set/shift (R, G, B, H, S, L) value from color
 - negative/opposite of color
 - hue, sat, lum as color
 - convert hex to color

1.0.1 (08/10/14)
 - Minor updates to the haXe files and Manual.txt.

1.0.2 (08/29/14)
 - Minor updates to the code and sample, as well as laying the base for the next update.

Planned features:
 - get/define color by name
 - pre-defined list of all HTML colors
 - blocks for adjusting images - This can already be achieved with effects


If you have any questions, problems, or suggestions, feel free to post them! :)
ETH

« Last Edit: June 20, 2022, 06:17:00 am by Luyren »
Fontstruct - Stencyl - Website (in progress)

Proud Member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.

This is super cool, I could have used this on my last app!

Photon

  • Posts: 2691
Oh wow, this looks nifty! Nice job.
Do NOT PM me your questions, because I likely will not respond. If I have replied to your question on the forum, keep using that topic. Thanks!

ETHproductions

  • *
  • Posts: 430
Thanks a bunch, guys! I'm working on the sample project right now; hopefully I'll post it tomorrow.
Fontstruct - Stencyl - Website (in progress)

Proud Member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.

1MrPaul1

  • *
  • Posts: 1285
very very good, very useful extention, everybody must have it!
thank you!
only one question, how heavy this color operations for performance?

ETHproductions

  • *
  • Posts: 430
only one question, how heavy this color operations for performance?

Just as much as the built-in code blocks. :) When the blocks are used to work with large-ish images, it starts to get slow, but this is because separately adjusting each pixel in an image takes a while to compute.

Also, the sample project is ready! It's got a color picker and an mini image editor. Here it is:

<a href="https://www.dropbox.com/s/fw6hh0d03mlycim/Color%20Utilities%20Sample.swf?raw=1" target="_blank" class="new_win">https://www.dropbox.com/s/fw6hh0d03mlycim/Color%20Utilities%20Sample.swf?raw=1</a>

Update (08/29/14): The color picker now has a randomize button! It's very good for finding new and unusual colors.

« Last Edit: December 12, 2014, 10:04:40 am by ETHproductions »
Fontstruct - Stencyl - Website (in progress)

Proud Member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.

Unept

  • *
  • Posts: 351
This is great. Especially having the ability to control colors through HSL values. I've already implemented some of it in my game project and it's working like a charm. Well done!
Unicycle Hero: iOS  |  Level With Me: iOS/Android  |  Hue Ball: iOS/Android  |  Lava Bird: iOS/Android   |   Disposabot   |   Twitter

ETHproductions

  • *
  • Posts: 430
Great to hear! I'm also working on a new extension for drawing arcs, rotated rectangles, regular polygons, and a few other shapes. Hopefully it will be as useful as this one.
Fontstruct - Stencyl - Website (in progress)

Proud Member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.

MichaelPel

  • *
  • Posts: 458
Love this - using hex values makes life so much easier. You've saved me hours upon hours of mess, thank you!

Bhoopalan

  • Posts: 1018
BEAuuuutiful extension. Great and endless possibilities.
If I helped you at anytime, help me back build my twitter followers :)
https://twitter.com/imbhoopalan

squeeb

  • Posts: 1617
Love this extension.. is there a way to set a pixel to clear?  Transparent?
Like get pixel at x,y and set to transparent?
*Edit using image api

« Last Edit: August 09, 2018, 08:06:26 pm by squeeb »

merrak

  • *
  • Posts: 2738
Love this extension.. is there a way to set a pixel to clear?  Transparent?
Like get pixel at x,y and set to transparent?
*Edit using image api

The Image API uses RGB color. I looked at this extension (well, a slightly older version of it) and it uses RGB too. You need RGBA to work with transparency.

These are the functions I use in my game to work with colors with alpha value. I don't have these functions packaged up in an extension... so if you want blocks you'll need to make them.

Code: [Select]
public static inline function getColorRGBA( R:Int, G:Int, B:Int, A:Int ):Int
{
return A << 24 | R << 16 | G << 8 | B;
}

public static inline function getRed( color:Int ):Int
{
return color >> 16 & 0xFF;
}

public static inline function getGreen( color:Int ):Int
{
return color >> 8 & 0xFF;
}

public static inline function getBlue( color:Int ):Int
{
return color & 0xFF;
}

public static inline function getAlpha( color:Int ):Int
{
return color >> 24 & 0xFF;
}

Stencyl already provides getRed, getBlue, and getGreen, so you really just need the other two functions.

Unfortunately there is a catch--I'm not sure if you can plug the output of the "getColorRGBA" into the "Set pixel at x,y" block the Image API provides. It might work. Since I use a 3rd party extension to set pixels, I've never tested this with the Image API.

squeeb

  • Posts: 1617
thank you!! i may give that a go.. i just found this block.. i may try to clear the image with
if color = color to clear.

and make the width and height 1px

yoplalala

  • *
  • Posts: 1632
clear image doesn't work on 3.5 normallly (for now, I think it work again in the future,  when openfl will have corrected the problem

squeeb

  • Posts: 1617
Good to know!  Im still on 3.4 .... im waiting until.all these little openfl things are fixed