Snapr FX Animated stickers Spec

AnimatedStickers.md

Animated stickers

Number of frames

Number of frames needs to be restricted. If a user was to place a 3-frame and a 4-frame sticker on the same image we would need to render 12 output frames so that both stickers looped fully

Output	1	2	3	4	5	6	7	8	9	10	11	12
Sticker A	1	2	3	1	2	3	1	2	3	1	2	3
Sticker B	1	2	3	4	1	2	3	4	1	2	3	4

If the user places a 5-frame and a 6-frame sticker we have to render 30 frames! This is too many frames to render efficiently.

Option 1

1,2,3,6 frame stickers.

Output	1	2	3	4	5	6
Sticker 1	1	1	1	1	1	1
Sticker 2	1	2	1	2	1	2
Sticker 3	1	2	3	1	2	3
Sticker 6	1	2	3	4	5	6

When only 1-frame and 2-frame stickers are used the output can be 2 frames. When only 1-frame and 3-frame stickers are used the output can be 3 frames.

Option 2

1,2,4 frame stickers.

Output	1	2	3	4
Sticker 1	1	1	1	1
Sticker 2	1	2	1	2
Sticker 4	1	2	3	4

When only 1-frame and 2-frame stickers are used the output can be 2 frames.

Assets

• .gif Animated thumbnail 112 x 112px
• .gif Animated preview for placement. Max 500 x 500px
• .png for each frame. Must match the size of preview gif

JSON spec

Pack has a flag animated (boolean). This indicates all stickers in the pack Will be storred in the new folder structure.

JSON generated by fx.sna.pr contians an ID for each item.

{
    "sticker_pack": {
        "id": 1,
        "name": "Cool Cat",
        "slug": "cool-cat",
        "date_released": "",

        "animated": true,  <-- new for animated stickers

        "sections": [
            {
                "id": 3,
                "name": "Cool Stickers"
                "slug": "cool-stickers",
                "stickers": [
                    {
                        "id": 1,
                        "name": "Cat Waving",
                        "slug": "cat-waving",

                        "frames": 2  <-- new for animated stickers
                    },
                    {
                        "id": 2,
                        "name": "Cat Face",
                        "slug": "cat-face",

                        "frames": 1  <-- new for animated stickers
                    },
                    ...
                ]
            }
        ]
    }
}

Files

Stickers with multiple frames have animated gif files for thumb and preview. Preview is used to show on image while the user resizes, moves and rotates the sticker. For rendering there is a png for each frame. This allows much nicer transparent edges in the rendered stickers than .gif frames can provide.

Stickers with only 1 frame have no .gif assets - .png is used for better quality.

• /sticker-pack.json
• /assets/
  • cat-waving/ (2 Frames)
    • thumb.gif
    • preview.gif
    • frame1.png
    • frame2.png
  • cat-face/ (1 Frame)
    • thumb.png
    • sticker.png