Thumbnails

See Type and Style if you aren't familiar with prop types.

Setting a prop's thumbnail at any specified frame will force it to render that thumbnail image in the viewport instead of its original icon.

caution

A prop's thumbnail is frame based, which means you have to set it for every frame (you can use the PositionConfigGenerator for helper methods).

Thumbnails only affect props with prop type STORYBOARD.

Use thumbnails as storyboards

Every animation config property also applies to STORYBOARD with thumbnail.

Apart from setting the storyboard's scale to scale it, you can also directly set the image's width and height (see below):

tip

If you simply want to attach some images or storyboard to your props, please check Scripts, Notes, Images, Step

Global Config Generator

new GlobalConfigGenerator()
    .addProp((generator) => {
        generator.type('STORYBOARD').addPosition((positionGenerator) => {
            positionGenerator.x(0).y(0).thumbnail('https://s2.loli.net/2022/03/16/KZw7yAWXudMGL21.png', 100)
        }).addPosition((positionGenerator) => {
            positionGenerator.x(25).y(25).thumbnail('https://s2.loli.net/2022/03/19/kfoHSKL792r4cvD.jpg', 200)
        }, 2).addPosition((positionGenerator) => {
            positionGenerator.x(90).y(90).degree(300).scale(0.5).degree(20)
        }, 3).shouldDisplayName(false)
    }).addProp((generator) => {
        generator.type('CHARACTER').addPosition((positionGenerator) => {
            positionGenerator.x(200).y(200)
        }).addPosition((positionGenerator) => {
            positionGenerator.x(50).y(50)
        }, 2).addPosition((positionGenerator) => {
            positionGenerator.x(90).y(90)
        }, 3)
    })

Config

config.props = [
      {
        "frameAnimationConfig": {
          "1": {
            "x": 0,
            "y": 0,
            "thumbnail": {
              "imageURL": "https://s2.loli.net/2022/03/16/KZw7yAWXudMGL21.png",
              "width": 100
            }
          },
          "2": {
            "x": 25,
            "y": 25,
            "thumbnail": {
              "imageURL": "https://s2.loli.net/2022/03/19/kfoHSKL792r4cvD.jpg",
              "width": 200
            }
          },
          "3": {
            "x": 90,
            "y": 90,
            "degree": 20,
            "scaleX": 0.5,
            "scaleY": 0.5
          }
        },
        "type": "STORYBOARD",
        "shouldDisplayName": false
      },
      {
        "frameAnimationConfig": {
          "1": {
            "x": 200,
            "y": 200
          },
          "2": {
            "x": 50,
            "y": 50
          },
          "3": {
            "x": 90,
            "y": 90
          }
        },
        "type": "CHARACTER"
      }
    ]