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': {} } } ]View Code
各种素材的数据个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: {}// 默认{} } };View Code
// 背景 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 ] };View Code
// 声音 sound = { "name": "A Bass", "md5": "c04ebf21e5e19342fa1535e4efcdb43b.wav", "sampleCount": 28160,// 声音样本计数,可以认为时声音的id "rate": 22050,// 声律,一个声音属性 "format": "",// 声音压缩算法,默认为"",部分声音为"adpcm" "tags": [ "music", "instruments", "notes" ] }View Code
scratch的作品保存到电脑流程
程序在scratch-vm中收集程序的每一个舞台和角色的每一个造型保存到costumeDescs中; 角色和舞台的声音都收集到soundDescs中,整个舞台动画的配置项都收集到projectJson中,然后用vm.saveProjectSb3方法使用JSZip压缩下载到本地(每一个图像和声音有单独的文件)。 下载下来的文件如下scrach从本地电脑上传sb3文件流程
用户选择文件时,进入程序监听函数handleChange,更改一状态,使用FileReader读取本地文件,当文件准备完毕调用onload解析,里面调用scratch-vm的vm.loadProject解析,完成项目加载。
标签:原图,展示,舞台,scratch,记录,默认,3.0,svg,md5 来源: https://www.cnblogs.com/chuaWeb/p/12546538.html