Adding new stuff to .sketch file save/load

OK. I'm going to have to refresh my own memory of this! If I were you I'd start by changing this setting:

70 Replies

andybak•15mo ago

That makes Open Brush save sketches as a folder instead of the default (a zip file with .sketch extension) - this will make it easier to check the JSON to see if you're doing what you think you're doing. Just don't commit that change! Next - have a look at SketchMetadata.cs. Anything related to layers is a good model to follow as that was the last change to the file format we made.

    [Serializable]
    public class LayerMetadata
    {
        [JsonProperty(NullValueHandling = NullValueHandling.Ignore)]
        public string Name;
        [JsonProperty(NullValueHandling = NullValueHandling.Ignore)]
        public bool Visible;
    }

    [Serializable]
    public class LayerMetadata
    {
        [JsonProperty(NullValueHandling = NullValueHandling.Ignore)]
        public string Name;
        [JsonProperty(NullValueHandling = NullValueHandling.Ignore)]
        public bool Visible;
    }

That defines a class for each layer.

        [JsonProperty(NullValueHandling = NullValueHandling.Ignore)]
        public LayerMetadata[] Layers { get; set; }

        [JsonProperty(NullValueHandling = NullValueHandling.Ignore)]
        public LayerMetadata[] Layers { get; set; }

That declares it in the SketchMetadata class and makes sure JSON.Net knows what to do with it

andybak•15mo ago

That property is used in 3 places:

andybak•15mo ago

Also - there are 5 places that the LayerMetaData class itself is referenced:

andybak•15mo ago

Look at the code in those places and see how it's done. @Seethrough - is that enough to get you started? I'd like to have some input into the data structure you decide on. And - I also want to add a transform property to the LayerMetadata as I am going to try implementing moveable layers soon. Bear that in mind.

Seethrough•15mo ago

yes this is excellent the simplest way I was thinking of was just adding an array wrapper around the already existing formatting for the layers in json, along with some variable for the framerate of the animation but I doubt that's going to be the best way to do it long term A dict might be better as 2D array not be good for sparse layer usage (in the case there are a lot of empty canvases)

andybak•15mo ago

Remember Layers != Canvases They do currently - but not after your changes. "Layers" conceptually are the top level things.

Seethrough•15mo ago

yup sorry slip of the tongue

andybak•15mo ago

the simplest way I was thinking of was just adding an array wrapper around the already existing formatting for the layers in json

But that doesn't make sense then surely? There won't be an array of Layers - you're adding a new thing beneath that for frames. Maybe I'm misunderstanding you. Here's how I see it conceptually: Layer 1 > Frame1, Frame2 etc Layer 2 > Frame1 Frame2 etc Before your changes Layer==Canvas. After your changes Frame==Canvas

Seethrough•15mo ago

oh nono each frame has a list of layers I've sorted it by time first and then layer second

andybak•15mo ago

What does the user think is a "Layer"? it's the thing on the layers panel.

Seethrough•15mo ago

the user can think of layers as the number of canvases each frame has frame being a unit of time

andybak•15mo ago

These are layers:

Seethrough•15mo ago

okay so those

andybak•15mo ago

They contain frames.

Seethrough•15mo ago

I suppose the right word would be layer tracks?

andybak•15mo ago

No. They are layers! we've already named them

Seethrough•15mo ago

when they click on the button they'll be drawing on the same layer number for each frame I didn't necessarily mean in code but just as a way of understanding basically

andybak•15mo ago

A Layer contains Frames. I don't see how anything else makes sense.

Seethrough•15mo ago

Conceptually that makes sense too

andybak•15mo ago

Can you paste in your current UI for comparison?

Seethrough•15mo ago

but in code to make it easier I've organized it so that frames contain the layers

andybak•15mo ago

forget the code we can rename the code

Seethrough•15mo ago

oh in that case then you're right sure it hasn't changed hang on

Seethrough•15mo ago

my headset isn't on so lets just use this to save time only difference is timeline is at the top and the play button has an icon

andybak•15mo ago

Yeah - each row is a Layer. Each dot is a frame

Seethrough•15mo ago

yeah

andybak•15mo ago

right. we agree 🙂

Seethrough•15mo ago

yes

andybak•15mo ago

So the thing in the JSON should match the user's understanding. (and so should the code eventually)

Seethrough•15mo ago

well the reason I organized it the other way around is that playback is easier to think about when coding just one frame after the other

andybak•15mo ago

currently we have something like:

    Layers: [
        {Name: "Layer1", Visible: true},
        {Name: "Layer2", Visible: true},
    }

    Layers: [
        {Name: "Layer1", Visible: true},
        {Name: "Layer2", Visible: true},
    }

What data do you need per frame?

Seethrough•15mo ago

I suppose so. I think even without looking at code my brain organizes it into frames first that might be where the confusion comes from

andybak•15mo ago

I don't really understand how you see it. frames belong to layers, yes? You can have one layer with 20 frames and another layer with 1 frame. Correct? And a frame is never associated with more than one layer?

Seethrough•15mo ago

Atm each frame is a list of layers, plus a deleted variable for undoing that's not needed for saving though so just the list no not really

andybak•15mo ago

Atm each frame is a list of layers, plus a deleted variable for undoing

is that using your "swapped around" terminology?

Seethrough•15mo ago

each layer has to have the same number of frames

andybak•15mo ago

Let's temporarily use new words to force us both to use the same taxonomy. Otherwise we keep meaning different things.

Seethrough•15mo ago

each frame is just a timestamp that can be filled but isn't necessarily. That's what the filled dots are supposed to depict

andybak•15mo ago

Let's use "Track" and "SingleThing" - just for now, ok?

Seethrough•15mo ago

yes yes

andybak•15mo ago

stop a sec i'm completely lost until we sort out terminology

Atm each frame is a list of layers, plus a deleted variable for undoing

this made my brain melt. Let's start again using new words Stop me if i say anything thats incorrect.

Seethrough•15mo ago

andybak•15mo ago

Atm each "Track: is a list of "SingleThing"s, plus a deleted variable for undoing

ok? And a "SingleThing" can never belong to more than one "Track"? And "Tracks" have multiple "SingleThings"?

Seethrough•15mo ago

Yes except the deleted variable at the moment yes yes again

andybak•15mo ago

ok. good. so:

Tracks: [
        {Name: "Track1", Visible: true, Things: [...]},
        {Name: "Track2", Visible: true, Things: [...]},
    }

Tracks: [
        {Name: "Track1", Visible: true, Things: [...]},
        {Name: "Track2", Visible: true, Things: [...]},
    }

OK?

Seethrough•15mo ago

yup that's doable haha sorry for the confusion

andybak•15mo ago

So - forget what things are called in the code. Think what the User will see "Tracks" should be called "Layers" ok?

Seethrough•15mo ago

yep

andybak•15mo ago

and "Things" are what the user will regard as "Frames"? so - that's what I will call them. If you have it the other way in your head then keep it to yourself 😉

Seethrough•15mo ago

this feels blasphemous but okay I'll need to rewrite the code to reflect it so I don't go insane

andybak•15mo ago

You nearly sent me insane using the terms the other way around! 😉

Seethrough•15mo ago

haha okay is the json really this simple though?

andybak•15mo ago

I don't know - i wanted to make sure we had the hierarchy correct first.

Seethrough•15mo ago

Okay no worries I'm used to json so I'm just surprise you can use it In previous project I've had to make my own file types

andybak•15mo ago

Here's the real JSON from a save on my drive:

  "Layers": [
    {
      "Name": "Main Canvas",
      "Visible": true
    },
    {
      "Name": "Layer Foo",
      "Visible": true
    }
  ],

  "Layers": [
    {
      "Name": "Main Canvas",
      "Visible": true
    },
    {
      "Name": "Layer Foo",
      "Visible": true
    }
  ],

Seethrough•15mo ago

wow what about the data? the strokes

andybak•15mo ago

totally separate. that's stored in a binary blob

Seethrough•15mo ago

in a different file? that makes more sense

andybak•15mo ago

That's the contents of a .sketch file

Seethrough•15mo ago

ohh okay when you say .sketch is that the compressed version? like a zip?

andybak•15mo ago

it literally is a zip.

Seethrough•15mo ago

or is it stored as 3 separate files in a folder okay awesome

andybak•15mo ago

rename any .sketch to .zip and you can see those 3 files

Seethrough•15mo ago

okay this helps a lot I thought the save file would just be one

andybak•15mo ago

but remember where i said:

andybak•15mo ago

change that while developing this to make life easier then it won't zip the sketch when you save

Seethrough•15mo ago

yeah already did that thanks for the help navigating all of that would have been a nightmare

andybak•15mo ago

Shame we used the word "Layer" prematurely. If we'd stuck to Canvas until now we'd have been fine! Maaaaybe. We could keep "Layer" to mean frame. And use "Track" when we're talking about animation? i'd be open to persuasion on that.

Gaming

Programming

Adding new stuff to .sketch file save/load