Pixel Art Checker

Hey!

I have an image at the top of my game which is a background with some pixel art on it:


I then have the image on the bottom where the player will draw their own pixel art using these little green sprites. What would the best way to check if the drawing on the bottom is the same as the image on the top?

Thanks! :smile:

Note: I have a lot of these patterns, so I need a way that is easily copyable for other patterns!

the basic problem is that i believe the sprite is drawn in continuous mode. am i rite?
therefore,…

the problem is more difficult than it looks.

it would have been different if the sprite hook the boxes one by one…

if you are in the first situation:

the most obvious thing that comes to mind is to use the marching squares extension, in order to flip the drawing of the sprites and check the match of the images. i believe it’s possible… however, it requires well knowledge of the extension… which is not exactly within everyone’s reach.

instead,

the tile check sprite by sprite by coordinates should be simpler, but it would limit the freedom in drawing.

edit: or maybe you can check after drawing the grid snap (i mean the grid snap like 32x32) and check if the sprite is drawn by points…it could works …like repeat for each boxes x times and check if the sprite matches the grid coordinate one by one in a loop…problem is that ,as above , it would limit the drawing.

1 Like

Hi Snowy. You could use read pixel extension. Vars Picture (an array) and Vars checkx and checky and step. and then change Picture[step] to the colours at checkx,checky. with a repeat event for rows inside a repeat for columns which increases checkx and checky and sort.
Then to check if it’s right use a ā€˜repeat while’ with the read pixel colour at checkx,checky equal to the colour string in the array Picture[step] as the condition plus step not equal to number of cells in picture+1. This with a sub event repeating for rows and repeat for collumns adding 1 to step and adjusting checkx and checky. Also contains the condition step equals number of cells in picture then picture correct

2 Likes

what you said it surely works, I didn’t suggest it because the last time I tried that method it lagged on a 640x480 grid… but it’s been a while…maybe things changed

2 Likes

Let me give a bit more information, sorry that I forgot this earlier…

The boxes placed automatically align with the checkerboard shape on the grid. The boxes placed are not a tile map, they are sprites.

I’m open to any options to make it easier though, such as making it a tile map (if that’s easier)!

2 Likes

640 times 480 is 307,200 colour checks! - so that will probably still lag, but this looks like being 8 by 8 so 64 colour checks as you can just increase the checkx by the cell width

2 Likes

well…he said he’s using boxes so it should be easier…
I explained above how…or just use petlimpet method swapping the color method with the grid snap with sprite

2 Likes


Is this the extension you were talking about?

1 Like

Hello!

There is a solution more easy.
If the two matrix have the same size and if you know the number of squares at the start, you can do that;

  • use a variable with the total number of cases (ex: ā€œTotal Numberā€)
  • then, at each try of the player, if the placement of this last is incorrect, decrease of 1 the variable above. If the placement is correct, don’t do nothing.
  • if the variable ā€œTotal Numberā€ is egal to the number of squares then you can be sure that the 2 drawings are the same (you can verify that at every time)

The only difficulty will be to determine the correct (or incorrect) response of the player. For that, i propose to use 2 arrays: the one for the first drawing and the second for the second drawing.
Each array will have to contain by case, 1 number (ex: 1 for a green case, 2 for a black case, etc.)

You must think a little before diving into making your game.

A+
Xierra

3 Likes

Hi Snowy - That’s the one! Store the colour value as a string in the array.
I think @Amigo54 is suggesting two arrays and store the object animation index number in the array. So you could use two arrays containing a structure with object x and y value and ani number and compare the two arrays. Storing and comparing the array in the right order is then the tricky bit.

2 Likes

Hmm, okay.

Would it be easier to just custom add the sprites onto the first one, then compare it with the second one?

1 Like

There’s a few ways to do it. I’m not quite sure what you mean by that. As for which is easiest…I don’t know enough about Marching Square to know how easy that is. The one i can picture clearly is the one i came up with …but there might be easier ways to do it!

2 Likes

There are so many possibilities. It makes my head spin.

The top and bottom could be a tilemap. Theh both could be individual tiles. They could be a mix.

You could store the levels in external layouts or save the levels in arrays. Maybe an array of arrays convert to JSON strings.

If it’s an array of structures of x, y or columns and rows then you could compare the players objects or grid locations if it’s a tilemap.

The challenges are making sure there are enough matches plus the players tiles don’t overlap. Or some other way to make sure a tile is counted as good more than once.

I guess it would be better to check if the solution matched the players drawing and not the other way around. Since the solution wouldn’t have missing or duplicate tiles.

It’s all theory unless I have time to try it myself.

The pixel reader method is also an option if you use an offset for the Y value between the solution and the players board.

2 Likes