How could I copy selected color to a secondary canvas to show the selected color?

1 favourites
  • 5 posts
From the Asset Store
Basic template for drawing game with masks and easy customization
  • Hey!

    I'm working on a project to make a teeth chart where indivitual sides of the teeth can be painted according to the color chosen.

    My issue here is that its 99% done but I cant understand how could i make the canvas next to the small Sprites to show the chose color.

    Ask more info if needed!

    Thank you!

  • Using a canvas object to display the selected color would be rather cumbersome. Either you have a premade list/dictionary of the selections and colors to fill the canvas with, or you use the canvas that covers the whole area to take a snapshot, look up the color at the coordinates that were clicked, and then fill the display area with that color.

    Personally I'd just use a sprite object with all the colors as animation frames, and set it the right frame when selecting a color.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • If you need to detect a color, after pasting it on the drawing canvas use "Save snapshot" action, then "Wait for previous action to complete". And after that you can get the color of any pixel using DrawingCanvas.SnapshotRedAt, DrawingCanvas.SnapshotGreenAt, DrawingCanvas.SnapshotBlueAt expressions.

    But it probably would be easier just to store color values in instance variables on the color palette sprites.

    Also check out this example:

    howtoconstructdemos.com/using-flood-fill-for-drawing-canvas-to-make-a-coloring-game

  • If you need to detect a color, after pasting it on the drawing canvas use "Save snapshot" action, then "Wait for previous action to complete". And after that you can get the color of any pixel using DrawingCanvas.SnapshotRedAt, DrawingCanvas.SnapshotGreenAt, DrawingCanvas.SnapshotBlueAt expressions.

    But it probably would be easier just to store color values in instance variables on the color palette sprites.

    Also check out this example:

    https://howtoconstructdemos.com/using-flood-fill-for-drawing-canvas-to-make-a-coloring-game/

    Yeah, thank you for your help!

    I have watched that video and it's great. I'm not a construct pro so I am confused that how this should be done in steps.

    Because the color should be detected before it was pasted to the "teeth canvas". And these sprites have the colors already in instance variables, so i wonder what could be the best option to copy the clicked color of the sprite to the canvas.

  • And these sprites have the colors already in instance variables, so i wonder what could be the best option to copy the clicked color of the sprite to the canvas.

    Once you grab the color values from the sprite, you can fill the entire canvas with that color using this action:

    -> DrawingCanvas: Clear canvas rgbex255(r, g, b)

    However, flood-filling a portion of the picture (like one tooth or one part of a tooth) is much more difficult. The example in that link I posted is using a JavaScript code to flood-fill an area.

    .

    There is a completely different approach without a canvas. Put each tooth in a separate animation frame in a sprite. Fill each surface of the tooth with different colors in the editor. So there will be 5 unique colors, repeating on every tooth in the sprite.

    And then use ReplaceColor effect. Here is a little demo:

    dropbox.com/s/0kvmlzzj6szop57/RainbowTeeth2.c3p

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