Best way to highlight png image with transparent background.

[atanasovskyjiri]

Hello,

would someone please give me some tips what is the best way to highlight an image? Here is what i mean:

I write an app where object (display.newImageRect, png image with transparent background) can be selected by tapping it. I would like to highlight this png image somehow after it is selected, like golden border around an image (or any other way that is easy to achieve with Corona sdk).

I thought about using sprites but isnt there some easier way than drawing each picture again with border (in highlighted state)?

Thank you for your tips!

[yosu]

How about creating an empty box with a stroke-border ?

local yourPngImage = display.newImage( .... ) local backgroundBorder = display.newRect( yourPngImage.x, yourPngImage.y, yourPngImage.width, yourPngImage.height ) backgroundBorder:setFillColor( 0,0,0,0 ) -- Make the fill color transparent backgroundBorder:setStrokeColor( 1, 0, 0 ) backgroundBorder.strokeWidth = 8

[atanasovskyjiri]

Thank you for your reply!

This approach would result in something like this:

[sharedmedia=core:attachments:8843]

I was hoping for a result more like this:

[sharedmedia=core:attachments:8844]

Im not sure if this is easy to achieve so I welcome any tips on topic “how to highlight pictures”. I was thinking about changing hue of the picture maybe?

[sporkfin]

The stroke interprets the entire image space (length and width) - not just the active space. 

Make a second image that is slightly larger and only one color (in this case yellow).  Pin it under your original image and turn it on and off as needed.  You could make the image a sprite and then change frames to the highlighted version - however the first option has the advantage of being able to change the color and scale of the highlight quickly or adding glow effects

[lua]

myHighlight.blendMode = “add”

[/lua]

[atanasovskyjiri]

@sporkfin

The stroke interprets the entire image space (length and width) - not just the active space. 

Make a second image that is slightly larger and only one color (in this case yellow).  Pin it under your original image and turn it on and off as needed.  You could make the image a sprite and then change frames to the highlighted version - however the first option has the advantage of being able to change the color and scale of the highlight quickly or adding glow effects

[lua]

myHighlight.blendMode = “add”

[/lua]

Thank you for this tip, this really seems better than using sprites. I was afraid about size of png images but png of one solid color is super small.

[sporkfin]

You are welcome!  As far as png size goes, the actually texture memory that gets loaded into the device might not match the your png as there is a “bloat” effect similar to the way your shape gets counted by its length and width instead of its actual size.  There is a minimum size that gets loaded each image file and that is the real benefit of sprite sheets - just one minimum to meet.

[pixec]

You could trace the image and create a polygon that you apply stroke to to make that

[sporkfin]

@ pixec, that works too but you have to use enough points to make it feel natural and not chunky.

[yosu]

How about creating an empty box with a stroke-border ?

local yourPngImage = display.newImage( .... ) local backgroundBorder = display.newRect( yourPngImage.x, yourPngImage.y, yourPngImage.width, yourPngImage.height ) backgroundBorder:setFillColor( 0,0,0,0 ) -- Make the fill color transparent backgroundBorder:setStrokeColor( 1, 0, 0 ) backgroundBorder.strokeWidth = 8

[atanasovskyjiri]

Thank you for your reply!

This approach would result in something like this:

[sharedmedia=core:attachments:8843]

I was hoping for a result more like this:

[sharedmedia=core:attachments:8844]

Im not sure if this is easy to achieve so I welcome any tips on topic “how to highlight pictures”. I was thinking about changing hue of the picture maybe?

[sporkfin]

The stroke interprets the entire image space (length and width) - not just the active space. 

Make a second image that is slightly larger and only one color (in this case yellow).  Pin it under your original image and turn it on and off as needed.  You could make the image a sprite and then change frames to the highlighted version - however the first option has the advantage of being able to change the color and scale of the highlight quickly or adding glow effects

[lua]

myHighlight.blendMode = “add”

[/lua]

[atanasovskyjiri]

@sporkfin

The stroke interprets the entire image space (length and width) - not just the active space. 

Make a second image that is slightly larger and only one color (in this case yellow).  Pin it under your original image and turn it on and off as needed.  You could make the image a sprite and then change frames to the highlighted version - however the first option has the advantage of being able to change the color and scale of the highlight quickly or adding glow effects

[lua]

myHighlight.blendMode = “add”

[/lua]

Thank you for this tip, this really seems better than using sprites. I was afraid about size of png images but png of one solid color is super small.

[sporkfin]

You are welcome!  As far as png size goes, the actually texture memory that gets loaded into the device might not match the your png as there is a “bloat” effect similar to the way your shape gets counted by its length and width instead of its actual size.  There is a minimum size that gets loaded each image file and that is the real benefit of sprite sheets - just one minimum to meet.

[pixec]

You could trace the image and create a polygon that you apply stroke to to make that

[sporkfin]

@ pixec, that works too but you have to use enough points to make it feel natural and not chunky.