How to make a pixel drawing renderer for a flipnote studio-like game

I'm looking to make a flipnote studio-like game where you can basically animate (albeit in a low resolution canvas) and add sound to your animations, and share it with a community.

How do I make a "canvas renderer"?

For example, the canvas isn't high resolution, you can see the pixels. But, how do I write data to the pixels and display them, so that if I draw something in red, it will show up on the canvas? Basically, how to display what I draw, and how to draw at all?

Let me know if this is too confusing to understand, so I can explain it better.

Thanks!

My idea is pretty crazy, but there it is:

Say you have a 64x64 pixel canvas,

Each pixel could be assigned to a value in an array (X is pixel's X coord, Y is pixel's Y coord)

for each XY value, you have something in the format of "255,255,255", a RGB value for each pixel (you can pick individual pieces of this value using the left, mid and right expressions).

Now, the Z axis is the frame of animation, iif you want to work with animations. So, the Z axis would store a different RGB value for each pixel for each frame.

Now, for the drawing detection:

First, create global variables that store the current frame (i'm calling canvas_curframe(num)) and the selected brush color in RGB (i'm calling canvas_brushrgb(string)).

To select a color from a menu, you can do something like

- If color selected is RED -> set canvas_brushrgb as "255,0,0" -

To register where the user draws the colors on the canvas, you can compare the cursor's X and Y coords and assign them to a grid.

- On Mouse Left click hold (or whatever) -> Array set at X = mouse.x, Y = mouse.y, Z = canvas_curframe, value = canvas_brushrgb

Finally, the last step is showing the actual pixels on screen via the canvas renderer an that's the one part I can't help you because I never used the Canvas external plugin, but it gives you options like drawing lines, points and boxes directly, wich you could then save as canvas snapshots and turn into frames. Just google "Construct 2 canvas plugin" and you should find info on it.

My idea is pretty crazy, but there it is:

Say you have a 64x64 pixel canvas,

Each pixel could be assigned to a value in an array (X is pixel's X coord, Y is pixel's Y coord)

for each XY value, you have something in the format of "255,255,255", a RGB value for each pixel (you can pick individual pieces of this value using the left, mid and right expressions).

Now, the Z axis is the frame of animation, iif you want to work with animations. So, the Z axis would store a different RGB value for each pixel for each frame.

Now, for the drawing detection:

First, create global variables that store the current frame (i'm calling canvas_curframe(num)) and the selected brush color in RGB (i'm calling canvas_brushrgb(string)).

To select a color from a menu, you can do something like

- If color selected is RED -> set canvas_brushrgb as "255,0,0" -

To register where the user draws the colors on the canvas, you can compare the cursor's X and Y coords and assign them to a grid.

- On Mouse Left click hold (or whatever) -> Array set at X = mouse.x, Y = mouse.y, Z = canvas_curframe, value = canvas_brushrgb

Finally, the last step is showing the actual pixels on screen via the canvas renderer an that's the one part I can't help you because I never used the Canvas external plugin, but it gives you options like drawing lines, points and boxes directly, wich you could then save as canvas snapshots and turn into frames. Just google "Construct 2 canvas plugin" and you should find info on it.

Hi, thanks for the info!

The only thing I'm slightly confused on is the renderer and how to set the pixels in the right place, and how to manipulate them, but I believe using simple maths will suffice.

As for the canvas plugin, I had considered that before, but i found some difficulties working with it and using pixels give much more charm and ease of use, especially with arrays.

For now, I'll just work on the renderer, but thanks a bunch for your help!