How do I get a pixel value from a DrawingCanvas?

0 favourites
  • 8 posts
From the Asset Store
Per Pixel Destruction like in "Worms" (perfect performance, no third party plugins)
  • Hello, I have a DrawingCanvas instance which I use to let the player draw on it. I would like to manipulate the individual pixels of the DrawingCanvas instance through code. How do I access these pixels? getImagePixelData() seems to return something but I don't know how to access an individual pixel on it. In the documentation it says that it resolves an ImageData object but the data property doesn't exist when I try to access it. :/

    Thanks in advance for any help, this is really important to me. :D

  • You need to execute "DrawingCanvas Save snapshot" action, wait for it to complete, and then you can read pixels with expressions, for example:

    DrawingCanvas.SnapshotRedAt(10,20)

    DrawingCanvas.SnapshotGreenAt(10,20)

    DrawingCanvas.SnapshotBlueAt(10,20)

    DrawingCanvas.SnapshotAlphaAt(10,20)

  • You need to execute "DrawingCanvas Save snapshot" action, wait for it to complete, and then you can read pixels with expressions, for example:

    DrawingCanvas.SnapshotRedAt(10,20)

    DrawingCanvas.SnapshotGreenAt(10,20)

    DrawingCanvas.SnapshotBlueAt(10,20)

    DrawingCanvas.SnapshotAlphaAt(10,20)

    Thank you so much for the answer! :D

    While this works just fine for a single pixel, when I try to access all pixels of the snapshot it takes some serious time. Is there any way to do it through code?

  • You need to execute "DrawingCanvas Save snapshot" action, wait for it to complete, and then you can read pixels with expressions, for example:

    DrawingCanvas.SnapshotRedAt(10,20)

    DrawingCanvas.SnapshotGreenAt(10,20)

    DrawingCanvas.SnapshotBlueAt(10,20)

    DrawingCanvas.SnapshotAlphaAt(10,20)

    While this works just fine for a single pixel, when I try to access all pixels of the snapshot it takes some serious time. Is there any way to do it through code?

  • Yes, it's much faster with scripting, check out this demo:

    dropbox.com/s/lv0j2ylolrcexv7/DrawingCanvasRewritePixelsJS.c3p

    I am not a guru in JS, not sure if the script is correct, but it works.

  • Heeey thanks for the help! :D

    I almost got it working but for some reason the playerPixels varaiable is giving me an array of zeros even when I draw on the Drawing canvas so I can't compare between the two DrawingCanvases.

    Here's how I call the getImagePixelData() of the two DrawingCanvases:

    	function load(playerImage, computerImage)
    {
    	playerImage.getImagePixelData().then(playerData=>loadComputerData (playerData,computerImage));
    }
    
    function loadComputerData (playerData, computerImage) {
    
    	computerImage.getImagePixelData().then (computerData=>compare(playerData, computerData));
    }
    
    
  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Try asking in the scripting forum:

    construct.net/en/forum/construct-3/scripting-51

  • Try asking in the scripting forum:

    https://www.construct.net/en/forum/construct-3/scripting-51

    Apparently I was "painting" with black lines oin the DrawingCanvas so for some reason all values were zero (even the drawn ones), I changed color and now it works fine. :D

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