0 Favourites

paint using array

  • any ideas on making paint using an array so it can easily be saved and generated tothe page size

  • Construct 3

    Buy Construct 3

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

    Buy Now Construct 3 users don't see these ads
  • The method I used to make Paint Share is relatively straight forward.

    Create a 3 dimensional array, with each cell on the X and Y axis representing a pixel. Use the Z axis to save the pixel's color data. In the application's editor, create a "pixel sprite" for each X and Y element, place it appropriately, and set its color. To keep things simple in Paint Share, I limited the palette to only 10 colors, and created a different frame for each color within the pixel sprite. I did this to make sure the game would work on platforms using Canvas2D (IE Mostly). If you're targeting WebGL enabled devices, you could probably get away with a single white sprite, and set it's color using shader effects.

    Anytime the user makes an edit to the image, the appropriate cells and pixel update. To show a preview of an edit (like when drawing a shape/line), the appropriate pixels change color when the mouse button is down, and the appropriate cells are updated when the mouse button is released.

    When you save a drawing locally, the array data is saved to webstorage. When the application is restarted, the array data is retrieved, and the image is redrawn in the application's editor. If a user wants to upload their image to the web for others to see, the canvas size changes to the size of the image, a screenshot is taken, the canvas size goes back to normal, and the png data goes to my server. That way, other users download images as png's rather than an array that renders a sprite per pixel.

    Believe it or not, the hardest part about making the app was creating a flood fill tool.

    Good luck!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread hot topic
59 9,522
DesixStudios's avatar
DesixStudios
Unread hot topic
76 9,273
Pandadoor's avatar
Pandadoor
Unread hot topic
0 Favourites
[plugin] 3D using Copperlicht
72 25,983
Reken's avatar
Reken