Game Design: How can I save "pixel images" using data

Help and Feedback Scripting Support
, ,
#1

Alright folks, while I am usually the guy finding answers, I finally have a question.

I am making a game in which players click text buttons that are in a grid, it’s a pixel drawing game. The idea is to match your picture to the preview picture, and there’s varying difficulties. What I want to do is get into studio, and draw those pictures out myself, then save them somehow into a table maybe? Then be able to get those back and display them as previews next to an empty canvas.

My thoughts are using either datastore and having a studio-only button to save my current image into the datastore with a name and description + all the color data

Or somehow export the data from the current canvas and then put it all into module scripts.

What would be the best way to handle this?

#2

Since the canvas is already seperate parts you could name them by rows and then by column (this is likely going to be tedious but if anybody wants to suggest a method to make it easier go for it) then have a button to save it that goes through them by name and inserts them into a table with the data being its position (row,column) and color. Then you could save that table and insert it into a larger table that picks randomly from the saved preview pictures to display and display it accordingly.

#3

My only thing with this is that regardless of how it’s built, or “set-up” all the colors will be in the correct positions.

Maybe a table like:

{
["Sunset"] = {
       ["data"] = {Color3.new(), Color3.new()...},
       -- Other metadata here
   }
}

Because no matter what, it will build correctly if the colors are all in order.

i.e it’s working off a UIGridLayout, plus it’s all uniform size + row/column sizes are all the same every time

EDIT: I guess my main question/issue is how is it best to save it? Datastore or Module Script, which is more performant

#4

If you use BrickColor instead instead of full color3, you can pretty easily store each color in 2 characters for each datastore (each character is 7 bits of storage, and only 11 is required to get any BrickColor, (there’s only like 397 colors but for some reason 32 have the ID past 1000, so you could also make a custom reader so when its above 365 it just adds 635, in that case you only need 9 bits), so you could manually read the bits from each character, but that all would be overkill), anywho, using string.byte and string.char, you can save any number between 0-127 in a string and have it able to be stored to datastores, here’s the documentation for them: string | Documentation - Roblox Creator Hub
anyway yeah, you could just have a string is turned into a table of numbers that gives brick colors for every pixel.

for your last question, id guess module scripts are better, but its not going to be readable, and really just adds more steps pasting all of it into a script, id suggest datastores, but its up to you. sorry if any of that was confusing, I kinda rambled.

#5

I ended up solving this issue myself by just storing the color data of each pixel in a data table, then adding extra metadata I need for each picture. Then saved it to the datastore using a unique-id for each picture.