How do I get the percent of filling in drawing canvas?

  • Hello everyone,

    I am using drawing canvas for my education project.

    I would like to know how to get the percent of filling when player draw to fill a sprite to check that he complete the filling.

    Like the image below, I want to know how many percent of drawing canvas is overlapping the yellow sprite.

    Thanks a lot for your help.

  • Hmm you probably have to loop through it, depending on how exact it has to be you probably want to not loop through on a per-pixel basis but maybe a 3x3 or 5x5 pixel basis (and not every tick) for performance reasons. A full HD image checked on a per-pixel basis would mean just above 2 million checks aka really slow. I think you would get the best result in terms of performance you´ll get by scaling whatever image you have down to a much smaller resolution (like a tenth maybe? 192x108 px) and use that for comparing rather than the full sized image.

    Then you loop through that grid on the canvas (snapshot), and if there is color on the canvas (using DrawingCanvas.SnapshotAlphaAt) on that tile attemt to pick the sprite with pick overlapping point. If it is picked, that part of the tile has color and you could increase a variable to keep track of how many tiles are colored VS the amount of tiles and simply calculate the percentage from that.

    Note that by picking the Sprite like this it uses the collision polygon of the sprite to check if it is overlapping or not, it may be a bit imprecise. You probably can instead use a second canvas that you copy the image on and check that DrawingCanvas.SnapshotAlphaAt against the first canvas' DrawingCanvas.SnapshotAlphaAt.

    I have not tried this so no guarantees :)

  • Thanks WackyToaster for you help!

    I have tried a clumsy way that create a temp sprite while drawing, then I check the filling area with area of sprite will overlap then I have the % of filling.

    If anyone have other ideas, please share your experience :)

  • You made me curious so here you go :) That´s how I´d do it.

    wackytoaster.at/parachute/coloringCanvasPercent.c3p

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Thanks WackyToaster, can you share it again because it is forbidden :D.

  • Forbidden is weird, may have been some server error because it works fine for me. In any case

    drive.google.com/open

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