easy-scratch3源码分析

目标：希望了解sprite3文件是如何解析的。如下图中选择了【上传角色】——》白鸽.sprite3，然后是如何解析该文件，得到对应的角色名称，造型图片，声音等资源的。

思路：要分析源码，肯定的找到对应关键源码。然后在对关键源码研读分析。

步骤：

一、找关键源码

1.因为项目使用了国际化，所以先在文件lib.min.js中查找“上传角色”四个字（我使用的是notepad++工具）。结果如下：

2.然后查找项目中那些文件包含“gui.spriteSelector.addSpriteFromFile”关键字。结果如下：

3.查找“addSpriteFromFile”

4.查找onSpriteUpload

5.在easy-scratch3\src\containers\target-pane.jsx文件中查找。得到如下结果：

6.猜测解析文件方法在handleFileUpload，spriteUpload，handleNewSprite三个方法中。

easy-scratch3\src\containers\target-pane.jsx文件下

easy-scratch3\src\lib\file-uploader.js文件下：

7.经过分析，spriteUpload中对文件数据进行了解析。如上图的第202行代码，后面注释了上传文件类型为.sprite2或者.sprite3类型文件的处理办法。

handleSprite函数的入参是spriteJSONString。即spriteJSONString = new Uint8Array(fileData)

Uint8Array 是JavaScript 标准内置对象。数组类型表示一个8位无符号整型数组，创建时内容被初始化为0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。

8.在lib.min.js中查找到addSprite方法。其返回值是validationPromise。具体解析文件数据方法在"./node_modules/scratch-parser/index.js"模块中。

9.分析"./node_modules/scratch-parser/index.js"模块模块

结果分析得出结果：

对sprite3文件进行zip解压可以得到对应角色的名称，造型，声音，脚本等信息！

测试结果：

{"isStage":false,"name":"白鸽","variables":{},"lists":{},"broadcasts":{},"blocks":{"i):BTzIylqT]]*qN)}P@":{"opcode":"event_whenflagclicked","next":"{?*`qyrJ,vQ;XA^5p5}f","parent":null,"inputs":{},"fields":{},"shadow":false,"topLevel":true,"x":197,"y":133},"{?*`qyrJ,vQ;XA^5p5}f":{"opcode":"control_forever","next":null,"parent":"i):BTzIylqT]]*qN)}P@","inputs":{"SUBSTACK":[2,"nw]EL@yTaMxf)eT;7^Tx"]},"fields":{},"shadow":false,"topLevel":false},"nw]EL@yTaMxf)eT;7^Tx":{"opcode":"motion_glideto","next":null,"parent":"{?*`qyrJ,vQ;XA^5p5}f","inputs":{"SECS":[1,[4,"1"]],"TO":[1,"]M+FgRDbr}zpKLeuJ(d["]},"fields":{},"shadow":false,"topLevel":false},"]M+FgRDbr}zpKLeuJ(d[":{"opcode":"motion_glideto_menu","next":null,"parent":"nw]EL@yTaMxf)eT;7^Tx","inputs":{},"fields":{"TO":["_random_",null]},"shadow":true,"topLevel":false}},"comments":{},"currentCostume":0,"costumes":[{"assetId":"c3911bf6c0fbee7c1f450b89f4d998d8","name":"白鸽飞行0001","bitmapResolution":2,"md5ext":"c3911bf6c0fbee7c1f450b89f4d998d8.png","dataFormat":"png","rotationCenterX":200,"rotationCenterY":200},{"assetId":"f46a67fd3c73b0da18552126d2d2f120","name":"白鸽飞行0002","bitmapResolution":2,"md5ext":"f46a67fd3c73b0da18552126d2d2f120.png","dataFormat":"png","rotationCenterX":200,"rotationCenterY":200},{"assetId":"9612ef522d5cff16a4224eb2a344eb0c","name":"白鸽飞行0003","bitmapResolution":2,"md5ext":"9612ef522d5cff16a4224eb2a344eb0c.png","dataFormat":"png","rotationCenterX":200,"rotationCenterY":200},{"assetId":"47051914739ec89ddac02f59baab7ed0","name":"白鸽飞行0004","bitmapResolution":2,"md5ext":"47051914739ec89ddac02f59baab7ed0.png","dataFormat":"png","rotationCenterX":200,"rotationCenterY":200},{"assetId":"9612ef522d5cff16a4224eb2a344eb0c","name":"白鸽飞行0005","bitmapResolution":2,"md5ext":"9612ef522d5cff16a4224eb2a344eb0c.png","dataFormat":"png","rotationCenterX":200,"rotationCenterY":200},{"assetId":"bc0b5de889ac901b3269e3add74cf1e3","name":"白鸽飞行0006","bitmapResolution":2,"md5ext":"bc0b5de889ac901b3269e3add74cf1e3.png","dataFormat":"png","rotationCenterX":200,"rotationCenterY":200}],"sounds":[],"volume":100,"visible":true,"x":-81.77499999999999,"y":71.025,"size":50,"direction":90,"draggable":false,"rotationStyle":"all around"}