paint using array

Discussion and feedback on Construct 2

Post » Mon Jul 08, 2013 10:07 pm

any ideas on making paint using an array so it can easily be saved and generated tothe page size
B
40
S
11
G
7
Posts: 514
Reputation: 9,646

Post » Mon Jul 08, 2013 11:24 pm

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!zatyka2013-07-09 04:42:33
B
63
S
19
G
8
Posts: 341
Reputation: 12,130


Return to Construct 2 General

Who is online

Users browsing this forum: David181 and 10 guests