scratch 3.0 部分记录

素材弹出框组件src\components\library\library.jsx，组件使用时传入的数据格式解析如下

[
    {
        'name': 'Abby',
        'md5': 'afab2d2141e9811bd89e385e9628cb5f.svg',
        'type': 'sprite', // 素材类型
        'tags': [// 素材标签，即素材的子类型
            'people',
            'person',
            'drawing'
        ],
        'info': [960, 720, 2], // 原图规格，以及原图和展示图片的比例
        'json': {// 包含内容
            'objName': 'Abby',
            'sounds': [// 声音
                {
                    'soundName': 'pop',
                    'soundID': -1,
                    'md5': '83a9787d4cb6f3b7632b4ddfebf74367.wav',
                    'sampleCount': 258,
                    'rate': 11025,
                    'format': ''
                }
            ],
            'costumes': [// 造型
                {
                    'costumeName': 'abby-a',
                    'baseLayerID': -1,
                    'baseLayerMD5': 'afab2d2141e9811bd89e385e9628cb5f.svg',
                    'bitmapResolution': 1,
                    'rotationCenterX': 31,
                    'rotationCenterY': 100
                }
                // ......
            ],
            'currentCostumeIndex': 0, // 添加到舞台时初始化展示的造型
            'scratchX': -20,
            'scratchY': -38,
            'scale': 1,
            'direction': 90,
            'rotationStyle': 'normal',
            'isDraggable': false,
            'visible': true,
            'spriteInfo': {}
        }
    }
]

 

 

各种素材的数据个json格式

// 造型
const costumeTpl = {
    svg: {
        name: 'Abby-a',
        md5: 'afab2d2141e9811bd89e385e9628cb5f.svg',
        type: 'costume', // 类型，costume:造型
        tags: [],
        info: [
            31, // svg图时，为展示在舞台上的宽度的一半
            100, // svg图时，为展示在舞台上的高度的一半
            1// 位图分辨率，svg图时，默认为1
        ]
    },
    other: {
        name: 'Amon',
        md5: '60f720956ab1840431dcf0616ce98f14.png',
        type: 'costume',
        tags: [],
        info: [
            348, // 非svg图时，为展示在舞台上的宽度的一倍
            324, // 非svg图时，为展示在舞台上的宽度的一倍
            2// 位图分辨率，非svg图时，默认为2。展示宽度：宽度/2
        ]
    }
};
// 角色
const spriteTpl = {
    name: 'Abby',
    md5: 'afab2d2141e9811bd89e385e9628cb5f.svg',
    type: 'sprite', // 类型，即一级大类型，sprite：角色， backdrop:背景
    tags: [],
    info: [
        0, // 默认为0
        4, // 造型数量
        1// 声音数量
    ],
    json: {
        objName: 'Abby',
        sounds: [],
        costumes: [
            {
                costumeName: 'abby-a', // 造型名称
                baseLayerID: -1, // 在舞台上展示层级，越大层级越高，展示就越在前，默认为 -1
                baseLayerMD5: 'afab2d2141e9811bd89e385e9628cb5f.svg',
                bitmapResolution: 1, // 位图分辨率,图片的一个属性， svg图默认为1
                rotationCenterX: 31, // 图片展示在舞台时旋转中心X轴位置, 对于svg图片时为展示宽度的一半（一般为原图的一半），整数
                rotationCenterY: 100 // 图片展示在舞台时旋转中心Y轴位置，对于svg图片时图片为展示高度的一半（一般为原图的一半），整数
            }
        ],
        currentCostumeIndex: 0, // 当前造型的下标，默认为0
        scratchX: -20, // 目前不清楚作用，保留
        scratchY: -38, // 目前不清楚作用，保留
        scale: 1, // 舞台展示缩放比例，默认为1
        direction: 90, // 方向，默认顺时针90度
        rotationStyle: 'normal', // 旋转风格，默认"normal"
        isDraggable: false, // 是否可以拖动，默认false
        visible: true, // 默认在舞台上是否可见，默认true
        spriteInfo: {}// 默认{}
    }
};

// 背景
const backdropTpl = {
    name: 'Arctic',
    md5: '67e0db3305b3c8bac3a363b1c428892e.png', // 可以是png/svg格式
    type: 'backdrop', // 类型，即一级大类型，sprite：角色， backdrop:背景
    tags: [// 标签，即二级类型
        'outdoors',
        'cold',
        'north pole',
        'south pole',
        'ice',
        'antarctica',
        'robert hunter'
    ],
    info: [
        960, // 图片原图宽度
        720, // 图片原图高度
        2// 位图分辨率, 展示宽度和高度是： 图片宽度/位图分辨率。对于所有图片都是一样，包括svg
    ]
};

// 声音
sound = {
    "name": "A Bass",
    "md5": "c04ebf21e5e19342fa1535e4efcdb43b.wav",
    "sampleCount": 28160,// 声音样本计数，可以认为时声音的id
    "rate": 22050,// 声律，一个声音属性
    "format": "",// 声音压缩算法，默认为"",部分声音为"adpcm"
    "tags": [
        "music",
        "instruments",
        "notes"
    ]
}

 

 

scratch的作品保存到电脑流程

程序在scratch-vm中收集程序的每一个舞台和角色的每一个造型保存到costumeDescs中；

角色和舞台的声音都收集到soundDescs中，整个舞台动画的配置项都收集到projectJson中，然后用vm.saveProjectSb3方法使用JSZip压缩下载到本地（每一个图像和声音有单独的文件）。

下载下来的文件如下

 

scrach从本地电脑上传sb3文件流程

 用户选择文件时，进入程序监听函数handleChange，更改一状态，使用FileReader读取本地文件，当文件准备完毕调用onload解析，里面调用scratch-vm的vm.loadProject解析，完成项目加载。