Scratch 3.0을 Hack하자. scratch-storage.js를 터치합시다.

9392 단어 Scratch
scratch-storage를 만져보세요.

Scratch-Storage는 프로젝트와 Assets을로드하는 데 사용됩니다.

코드는 아래에 게시됩니다.
htps : // 기주 b. 코 m / lK / sc 등 tch-s

프로젝트 내용은 json



Scratch로 만든 프로젝트에서 "수중 컴퓨터로 다운로드"를 선택하면 Scratch의 Project를 로컬로 다운로드 할 수 있습니다.

"Untitled.sb2"를 "Untitled.sb2.zip"으로 봅시다.

압축 해제 앱에서 압축을 풀면,
unzip Untitled.sb2.zip
find ./Untitled.sb2
./Untitled.sb2/0.png
./Untitled.sb2/0.wav
./Untitled.sb2/1.svg.
./Untitled.sb2/1.wav
./Untitled.sb2/2.svg
./Untitled.sb2/3.png
./Untitled.sb2/project.json

라는 데이터가 완성됩니다.

이번에는 이러한 데이터를 API로 얻을 수 있습니다.

Project.json



화상 데이터와 음성 데이터 이외의 모든 것이 여기에 쓰여져 있습니다.

Scratch의 스크립트라든지, Sprite나 배경의 정보 등

json이라는 텍스트 형식으로 작성되었습니다.

시도하려면 project.json을 텍스트 편집기에서 열어 보겠습니다.
{
 "objName": "Stage",
 "sounds": [{
   "soundName": "pop",
   "soundID": 1,
   "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
   "sampleCount": 258,
   "rate": 11025,
   "format": ""
  }],

 "costumes": [{
   "costumeName": "backdrop1",
   "baseLayerID": 3,
   "baseLayerMD5": "739b5e2a2435f6e1ec2993791b423146.png",
   "bitmapResolution": 1,
   "rotationCenterX": 240,
   "rotationCenterY": 180
  }],

 "currentCostumeIndex": 0,
 "penLayerMD5": "5c81a336fab8be57adc039a8a2b33ca9.png",
 "penLayerID": 0,
 "tempoBPM": 60,
 "videoAlpha": 0.5,
 "children": [{
   "objName": "Sprite1",
   "sounds": [{
     "soundName": "meow",
     "soundID": 0,
     "md5": "83c36d806dc92327b9e7049a565c6bff.wav",
     "sampleCount": 18688,
     "rate": 22050,
     "format": ""
    }],

   "costumes": [{
     "costumeName": "costume1",
     "baseLayerID": 1,
     "baseLayerMD5": "09dc888b0b7df19f70d81588ae73420e.svg",
     "bitmapResolution": 1,
     "rotationCenterX": 47,
     "rotationCenterY": 55
    },

    {
     "costumeName": "costume2",
     "baseLayerID": 2,
     "baseLayerMD5": "3696356a03a8d938318876a593572843.svg",
     "bitmapResolution": 1,
     "rotationCenterX": 47,
     "rotationCenterY": 55
    }],

   "currentCostumeIndex": 0,
   "scratchX": 0,
   "scratchY": 0,
   "scale": 1,
   "direction": 90,
   "rotationStyle": "normal",
   "isDraggable": false,
   "indexInLibrary": 1,
   "visible": true,
   "spriteInfo": {
   }
  }],

 "info": {
  "swfVersion": "v459.1",
  "userAgent": "Mozilla\/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/63.0.3239.84 Safari\/537.36",
  "flashVersion": "MAC 28,0,0,126",
  "projectID": "194253022",
  "videoOn": false,
  "scriptCount": 0,
  "hasCloudData": false,
  "spriteCount": 1
 }
}

그리고 데이터가 확장됩니다.

다양한 프로젝트 데이터를 다운로드합시다.



scratch-storage.js를 사용하여 다양한 데이터를 다운로드하십시오.

scratch-json에는 ScratchStorage 클래스가 있습니다.



htps : // 기주 b. 이 m/ㅇlK/sc등 tch-s 토레게/bぉb/로 곤후 g. js
의entry을 보자.
./src/index.js에서 시작하는 것으로 나타났습니다.

htps : // 기주 b. 이 m/ㅇlK/sc등 tch-s토레게/bぉb/로 ゔぇぉp/src/그리고 x. js
그래서 module.exports하고있는 곳을 보자.
ScratchStorage 클래스를 사용할 수 있다는 것을 알았습니다.

htps : // 기주 b. 이 m / lK / sc 등 tch-s 처짐 / bp b /에서 p p / src / Sc 등 tchS 풀어. js
를 열어 보자.
load (assetType, assetId, dataFormat)
그리고 데이터를 읽는 방법이 있네요.

사용법은 사용중인 코드를 참조합시다.



예를 들어,

downloadProjectId() 등으로 Project를 다운로드하고 있습니다.

쓰고 시도해 보자.



scratch-storage.js 생성
git clone https://github.com/LLK/scratch-storage.git
cd scratch-storage
npm install
npm run build

./dist/아래에 js 파일이 생성됩니다.
> find ./dist -type f -name "*.js"
./dist/node/scratch-storage.js
./dist/web/scratch-storage.js
./dist/web/scratch-storage.min.js

scratch-storage.js를 사용해보기


cd ./dist/node
emacs main.js

const storage = require('./scratch-storage.js');


console.log(JSON.stringify(storage.AssetType.Project));
var storageObj = new storage();

const ASSET_SERVER = 'https://cdn.assets.scratch.mit.edu/';
const PROJECT_SERVER = 'https://cdn.projects.scratch.mit.edu/';

const getProjectUrl = function (asset) {
    const assetIdParts = asset.assetId.split('.');
    const assetUrlParts = [PROJECT_SERVER, 'internalapi/project/', assetIdParts[0], '/get/'];
    if (assetIdParts[1]) {
        assetUrlParts.push(assetIdParts[1]);
    }
    return assetUrlParts.join('');
};


const getAssetUrl = function (asset) {
    const assetUrlParts = [
        ASSET_SERVER,
        'internalapi/asset/',
        asset.assetId,
        '.',
        asset.dataFormat,
        '/get/'
    ];
    return assetUrlParts.join('');
};


storageObj.addWebSource([storage.AssetType.Project], getProjectUrl);
storageObj.addWebSource([storage.AssetType.ImageVector, storage.AssetType.ImageBitmap, storage.AssetType.Sound], getAssetUrl);


var id = '119615668';

const promise = storageObj.load(storage.AssetType.Project, id);
promise.then(projectAsset => {
 return projectAsset.decodeText();
}).then(jsonSrc =>{
    console.log(jsonSrc);
});


project.json이 표시됩니다.



계속



 
 
..
..
..
 
 
 
 
 

PS



이번 코드는 다음



이하의 장소에서도, 알레코레 써 갑니다.



Scratch3.0 자신 전용기를 만들자!!



(0) Scratch 3.0 자신 전용기를 만들자!! (0)
(1) Scratch3.0을 빌드해 보자
(2) Scratch3.0을 Android 앱으로 작동합시다. (1)
(3) Scratch3.0을 Android 앱으로 작동합시다. (2)
(4) Scratch3.0을 Android 앱으로 작동합시다 (3)
(5) Webpack이란?
(6) Scratch3.0의 package.json을 읽어 보자.
(7) scratch-gui를 설치해 봅시다.
(8) scratch-vm에 사용되는 scratch-xxx를 만져 보자.
(9) Babel을 만져 보자.
(10) scratch-render.js에서 무언가를 만들어 만져 보자.
(11) scratch-storage.js를 만져 보자.

Scratch2.0 입문





불의 형태 With Scratch 2.0 (프로그램 입문) 00권
불의 형태 With Scratch 2.0 (프로그램 입문) 01권
화염 유형 With Scratch 2.0 (게임 프로그램 시작)

좋은 웹페이지 즐겨찾기