0 Favourites

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

  • 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

  • R0J0hound for the steal maybe?

  • Construct 3

    Buy Construct 3

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

    Buy Now Construct 3 users don't see these ads
  • 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.

  • 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) &");"

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