How do I create a 'magic wand' feature in a C2 app I made

Get help using Construct 2

Post » Wed Mar 12, 2014 5:06 am

Hi All,

Searching the forum there seems to be a lot of people who want a 'magic wand' feature in the Sprite Editor -- this request is NOT about that. :)

What I want to achieve is the following: I want the user to be able to take a picture of an object against a white backgroud (usermedia object -- check), have that picture saved to a sprite (again usermedia object -- check), at which point they can then use a 'magic wand' type feature to isolate an object in the picture in order to then cut the object out and paste it into a sprite with a transparent background (this part -- ???)

Off the top, perhaps some sort of floodfill algorithm to 'select' all the white (however, there may be varying degrees of white in the photo -- so there would need to be some sort of tolerance). Next, I wonder how I could get the selected object into a transparent background sprite/image? Through the paster/canvas object?

Maybe there is an easier way? Maybe the problem could be changed to achieve a similar result? :?

If so, please let me know!

-Remy
B
73
S
14
G
1
Posts: 152
Reputation: 5,026

Post » Sat Mar 22, 2014 1:31 am

@R0J0hound for the steal maybe? :)
B
73
S
14
G
1
Posts: 152
Reputation: 5,026

Post » Sat Mar 22, 2014 3:28 am

It's possible to do with the canvas plugin since as a basic requirement you need to be able to get and set pixels. The issue is the plugin doesn't have a direct way to erase pixels. Currently the only way to erase a pixel is to paste a 1x1 sprite with the destination out blend.

You'll have to do your own flood fill which is simple enough. Wikipedia has some useful info on how to do one.

The tolerance can be done with a 3d distance from color to color.
So a pixel is only flood filled if
Sqrt((255-r)^2 + (255-g)^2 + (255-b)^2) <= tolerance

There is a capx that does a simple flood fill with just events. It is rather slowish so it would be better if the whole bit was done with javascript for speed.

I haven't put much time aside as of late to make examples or tinker with much coding, so I can't help much furthur ATM.
B
92
S
32
G
110
Posts: 5,298
Reputation: 71,507

Post » Sat Mar 22, 2014 6:20 pm

Here's something that works.
https://dl.dropboxusercontent.com/u/5426011/examples21/clearWhite.capx
To make it work with an imgUrl change the executeJs in event 2 to something like this:
"this.clearFill('"& Canvas.imageUrl&"'," & int(TextBox.Text) &");"
B
92
S
32
G
110
Posts: 5,298
Reputation: 71,507


Return to How do I....?

Who is online

Users browsing this forum: 25games, Artcadev, grodrigues and 24 guests