scratchfoundation/scratch-vm
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-vm.git synced 2025-03-13 17:04:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Load projects & costumes through scratch-storage

Browse source 
This also sets up the framework to load sounds through scratch-storage,
to be finished in a later change.
This commit is contained in:
Christopher Willis-Ford 2017-01-27 13:44:48 -05:00
parent 2ebb112d30
commit c23e9c6bf8
8 changed files with 213 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -41,6 +41,7 @@
"scratch-audio": "latest",
"scratch-blocks": "latest",
"scratch-render": "latest",
"scratch-storage": "latest",
"script-loader": "0.7.0",
"stats.js": "^0.17.0",
"tap": "^10.2.0",

16
src/engine/runtime.js
View file

@ -311,6 +311,14 @@ Runtime.prototype.clearEdgeActivatedValues = function () {
this._edgeActivatedHatValues = {};
};
/**
* Attach the audio engine
* @param {!AudioEngine} audioEngine The audio engine to attach
*/
Runtime.prototype.attachAudioEngine = function (audioEngine) {
this.audioEngine = audioEngine;
};
/**
* Attach the renderer
* @param {!RenderWebGL} renderer The renderer to attach
@ -320,11 +328,11 @@ Runtime.prototype.attachRenderer = function (renderer) {
};
/**
* Attach the audio engine
* @param {!AudioEngine} audioEngine The audio engine to attach
* Attach the storage module
* @param {!ScratchStorage} storage The storage module to attach
*/
Runtime.prototype.attachAudioEngine = function (audioEngine) {
this.audioEngine = audioEngine;
Runtime.prototype.attachStorage = function (storage) {
this.storage = storage;
};
// -----------------------------------------------------------------------------

128
src/import/sb2import.js
View file

@ -5,10 +5,13 @@
* scratch-vm runtime structures.
*/
var ScratchStorage = require('scratch-storage');
var AssetType = ScratchStorage.AssetType;
var Blocks = require('../engine/blocks');
var RenderedTarget = require('../sprites/rendered-target');
var Sprite = require('../sprites/sprite');
var Color = require('../util/color.js');
var Color = require('../util/color');
var log = require('../util/log');
var uid = require('../util/uid');
var specMap = require('./sb2specmap');
@ -26,7 +29,7 @@ var parseScratchObject = function (object, runtime, topLevel) {
if (!object.hasOwnProperty('objName')) {
// Watcher/monitor - skip this object until those are implemented in VM.
// @todo
return;
return null;
}
// Blocks container for this object.
var blocks = new Blocks();
@ -37,33 +40,36 @@ var parseScratchObject = function (object, runtime, topLevel) {
sprite.name = object.objName;
}
// Costumes from JSON.
var costumePromises = [];
if (object.hasOwnProperty('costumes')) {
for (var i = 0; i < object.costumes.length; i++) {
var costume = object.costumes[i];
// @todo: Make sure all the relevant metadata is being pulled out.
sprite.costumes.push({
skin: 'https://cdn.assets.scratch.mit.edu/internalapi/asset/' +
costume.baseLayerMD5 + '/get/',
name: costume.costumeName,
bitmapResolution: costume.bitmapResolution,
rotationCenterX: costume.rotationCenterX,
rotationCenterY: costume.rotationCenterY
});
var costumeSource = object.costumes[i];
var costume = {
name: costumeSource.costumeName,
bitmapResolution: costumeSource.bitmapResolution || 1,
rotationCenterX: costumeSource.rotationCenterX,
rotationCenterY: costumeSource.rotationCenterY,
skinId: null
};
costumePromises.push(loadCostume(costumeSource.baseLayerMD5, costume, runtime));
sprite.costumes.push(costume);
}
}
// Sounds from JSON
if (object.hasOwnProperty('sounds')) {
for (var s = 0; s < object.sounds.length; s++) {
var sound = object.sounds[s];
sprite.sounds.push({
format: sound.format,
fileUrl: 'https://cdn.assets.scratch.mit.edu/internalapi/asset/' + sound.md5 + '/get/',
rate: sound.rate,
sampleCount: sound.sampleCount,
soundID: sound.soundID,
name: sound.soundName,
md5: sound.md5
});
var soundSource = object.sounds[s];
var sound = {
name: soundSource.soundName,
format: soundSource.format,
rate: soundSource.rate,
sampleCount: soundSource.sampleCount,
soundID: soundSource.soundID,
md5: soundSource.md5,
data: null
};
loadSound(sound, runtime);
sprite.sounds.push(sound);
}
}
// If included, parse any and all scripts/blocks on the object.
@ -127,7 +133,9 @@ var parseScratchObject = function (object, runtime, topLevel) {
}
}
target.isStage = topLevel;
target.updateAllDrawableProperties();
Promise.all(costumePromises).then(function () {
target.updateAllDrawableProperties();
});
// The stage will have child objects; recursively process them.
if (object.children) {
for (var m = 0; m < object.children.length; m++) {
@ -137,6 +145,80 @@ var parseScratchObject = function (object, runtime, topLevel) {
return target;
};
/**
* Load a costume's asset into memory asynchronously.
* @param {string} md5ext - the MD5 and extension of the costume to be loaded.
* @param {!object} costume - the Scratch costume object.
* @property {int} skinId - the ID of the costume's render skin, once installed.
* @property {number} rotationCenterX - the X component of the costume's origin.
* @property {number} rotationCenterY - the Y component of the costume's origin.
* @property {number} [bitmapResolution] - the resolution scale for a bitmap costume.
* @param {!Runtime} runtime - Scratch runtime, used to access the storage module.
* @returns {Promise} - a promise which will resolve after skinId is set.
*/
var loadCostume = function (md5ext, costume, runtime) {
var idParts = md5ext.split('.');
var md5 = idParts[0];
var ext = idParts[1].toUpperCase();
var assetType = (ext === 'SVG') ? AssetType.ImageVector : AssetType.ImageBitmap;
var rotationCenter = [
costume.rotationCenterX / costume.bitmapResolution,
costume.rotationCenterY / costume.bitmapResolution
];
var promise = runtime.storage.load(assetType, md5);
if (assetType === AssetType.ImageVector) {
promise = promise.then(function (costumeAsset) {
if (runtime.renderer) {
costume.skinId = runtime.renderer.createSVGSkin(costumeAsset.decodeText(), rotationCenter);
}
});
} else {
promise = promise.then(function (costumeAsset) {
return new Promise(function (resolve, reject) {
var imageElement = new Image();
var removeEventListeners; // fix no-use-before-define
var onError = function () {
removeEventListeners();
reject();
};
var onLoad = function () {
removeEventListeners();
resolve(imageElement);
};
removeEventListeners = function () {
imageElement.removeEventListener('error', onError);
imageElement.removeEventListener('load', onLoad);
};
imageElement.addEventListener('error', onError);
imageElement.addEventListener('load', onLoad);
imageElement.src = costumeAsset.encodeDataURI();
});
}).then(function (imageElement) {
costume.skinId = runtime.renderer.createBitmapSkin(imageElement, costume.bitmapResolution, rotationCenter);
});
}
return promise;
};
/**
* Load a sound's asset into memory asynchronously.
* @param {!object} sound - the Scratch sound object.
* @property {string} md5 - the MD5 and extension of the sound to be loaded.
* @property {Buffer} data - sound data will be written here once loaded.
* @param {!Runtime} runtime - Scratch runtime, used to access the storage module.
*/
var loadSound = function (sound, runtime) {
var idParts = sound.md5.split('.');
var md5 = idParts[0];
runtime.storage.load(AssetType.Sound, md5).then(function (soundAsset) {
sound.data = soundAsset.data;
// @todo register sound.data with scratch-audio
});
};
/**
* Top-level handler. Parse provided JSON,
* and process the top-level object (the stage object).

81
src/playground/playground.js
View file

@ -1,27 +1,56 @@
var Scratch = window.Scratch = window.Scratch || {};
var ASSET_SERVER = 'https://cdn.assets.scratch.mit.edu/';
var PROJECT_SERVER = 'https://cdn.projects.scratch.mit.edu/';
var loadProject = function () {
var id = location.hash.substring(1);
if (id.length < 1 || !isFinite(id)) {
id = '119615668';
}
var url = 'https://projects.scratch.mit.edu/internalapi/project/' +
id + '/get/';
var r = new XMLHttpRequest();
r.onreadystatechange = function () {
if (this.readyState === 4) {
if (r.status === 200) {
window.vm.loadProject(this.responseText);
}
}
};
r.open('GET', url);
r.send();
Scratch.vm.downloadProjectId(id);
};
/**
* @param {Asset} asset - calculate a URL for this asset.
* @returns {string} a URL to download a project file.
*/
var getProjectUrl = function (asset) {
var assetIdParts = asset.assetId.split('.');
var assetUrlParts = [PROJECT_SERVER, 'internalapi/project/', assetIdParts[0], '/get/'];
if (assetIdParts[1]) {
assetUrlParts.push(assetIdParts[1]);
}
return assetUrlParts.join('');
};
/**
* @param {Asset} asset - calculate a URL for this asset.
* @returns {string} a URL to download a project asset (PNG, WAV, etc.)
*/
var getAssetUrl = function (asset) {
var assetUrlParts = [
ASSET_SERVER,
'internalapi/asset/',
asset.assetId,
'.',
asset.assetType.runtimeFormat,
'/get/'
];
return assetUrlParts.join('');
};
window.onload = function () {
// Lots of global variables to make debugging easier
// Instantiate the VM.
var vm = new window.VirtualMachine();
window.vm = vm;
Scratch.vm = vm;
var storage = new Scratch.Storage();
var AssetType = Scratch.Storage.AssetType;
storage.addWebSource([AssetType.Project], getProjectUrl);
storage.addWebSource([AssetType.ImageVector, AssetType.ImageBitmap, AssetType.Sound], getAssetUrl);
vm.attachStorage(storage);
// Loading projects from the server.
document.getElementById('projectLoadButton').onclick = function () {
@ -33,7 +62,7 @@ window.onload = function () {
// Instantiate the renderer and connect it to the VM.
var canvas = document.getElementById('scratch-stage');
var renderer = new window.RenderWebGL(canvas);
window.renderer = renderer;
Scratch.renderer = renderer;
vm.attachRenderer(renderer);
var audioEngine = new window.AudioEngine();
vm.attachAudioEngine(audioEngine);
@ -57,7 +86,7 @@ window.onload = function () {
dragShadowOpacity: 0.6
}
});
window.workspace = workspace;
Scratch.workspace = workspace;
// Filter available blocks
var toolbox = vm.filterToolbox(workspace.options.languageTree);
@ -95,10 +124,10 @@ window.onload = function () {
};
// Only request data from the VM thread if the appropriate tab is open.
window.exploreTabOpen = false;
Scratch.exploreTabOpen = false;
var getPlaygroundData = function () {
vm.getPlaygroundData();
if (window.exploreTabOpen) {
if (Scratch.exploreTabOpen) {
window.requestAnimationFrame(getPlaygroundData);
}
};
@ -187,7 +216,7 @@ window.onload = function () {
canvasWidth: rect.width,
canvasHeight: rect.height
};
window.vm.postIOData('mouse', coordinates);
Scratch.vm.postIOData('mouse', coordinates);
});
canvas.addEventListener('mousedown', function (e) {
var rect = canvas.getBoundingClientRect();
@ -198,7 +227,7 @@ window.onload = function () {
canvasWidth: rect.width,
canvasHeight: rect.height
};
window.vm.postIOData('mouse', data);
Scratch.vm.postIOData('mouse', data);
e.preventDefault();
});
canvas.addEventListener('mouseup', function (e) {
@ -210,7 +239,7 @@ window.onload = function () {
canvasWidth: rect.width,
canvasHeight: rect.height
};
window.vm.postIOData('mouse', data);
Scratch.vm.postIOData('mouse', data);
e.preventDefault();
});
@ -220,7 +249,7 @@ window.onload = function () {
if (e.target !== document && e.target !== document.body) {
return;
}
window.vm.postIOData('keyboard', {
Scratch.vm.postIOData('keyboard', {
keyCode: e.keyCode,
isDown: true
});
@ -229,7 +258,7 @@ window.onload = function () {
document.addEventListener('keyup', function (e) {
// Always capture up events,
// even those that have switched to other targets.
window.vm.postIOData('keyboard', {
Scratch.vm.postIOData('keyboard', {
keyCode: e.keyCode,
isDown: false
});
@ -273,7 +302,7 @@ window.onload = function () {
// Handlers to show different explorers.
document.getElementById('threadexplorer-link').addEventListener('click',
function () {
window.exploreTabOpen = true;
Scratch.exploreTabOpen = true;
getPlaygroundData();
tabBlockExplorer.style.display = 'none';
tabRenderExplorer.style.display = 'none';
@ -282,7 +311,7 @@ window.onload = function () {
});
document.getElementById('blockexplorer-link').addEventListener('click',
function () {
window.exploreTabOpen = true;
Scratch.exploreTabOpen = true;
getPlaygroundData();
tabBlockExplorer.style.display = 'block';
tabRenderExplorer.style.display = 'none';
@ -291,7 +320,7 @@ window.onload = function () {
});
document.getElementById('renderexplorer-link').addEventListener('click',
function () {
window.exploreTabOpen = false;
Scratch.exploreTabOpen = false;
tabBlockExplorer.style.display = 'none';
tabRenderExplorer.style.display = 'block';
tabThreadExplorer.style.display = 'none';
@ -299,7 +328,7 @@ window.onload = function () {
});
document.getElementById('importexport-link').addEventListener('click',
function () {
window.exploreTabOpen = false;
Scratch.exploreTabOpen = false;
tabBlockExplorer.style.display = 'none';
tabRenderExplorer.style.display = 'none';
tabThreadExplorer.style.display = 'none';

4
src/sprites/rendered-target.js
View file

@ -367,7 +367,7 @@ RenderedTarget.prototype.setCostume = function (index) {
if (this.renderer) {
var costume = this.sprite.costumes[this.currentCostume];
var drawableProperties = {
skin: costume.skin,
skinId: costume.skinId,
costumeResolution: costume.bitmapResolution
};
if (
@ -458,7 +458,7 @@ RenderedTarget.prototype.updateAllDrawableProperties = function () {
draggable: this.draggable,
scale: renderedDirectionScale.scale,
visible: this.visible,
skin: costume.skin,
skinId: costume.skinId,
costumeResolution: bitmapResolution,
rotationCenter: [
costume.rotationCenterX / bitmapResolution,

2
src/sprites/sprite.js
View file

@ -24,7 +24,7 @@ var Sprite = function (blocks, runtime) {
* List of costumes for this sprite.
* Each entry is an object, e.g.,
* {
* skin: "costume.svg",
* skinId: 1,
* name: "Costume Name",
* bitmapResolution: 2,
* rotationCenterX: 0,

31
src/virtual-machine.js
View file

@ -3,8 +3,11 @@ var util = require('util');
var filterToolbox = require('./util/filter-toolbox');
var Runtime = require('./engine/runtime');
var ScratchStorage = require('scratch-storage');
var sb2import = require('./import/sb2import');
var AssetType = ScratchStorage.AssetType;
/**
* Handles connections between blocks, stage, and extensions.
* @constructor
@ -154,6 +157,18 @@ VirtualMachine.prototype.loadProject = function (json) {
this.runtime.setEditingTarget(this.editingTarget);
};
/**
* Load a project from the Scratch web site, by ID.
* @param {string} id - the ID of the project to download, as a string.
*/
VirtualMachine.prototype.downloadProjectId = function (id) {
var vm = this;
var promise = this.runtime.storage.load(AssetType.Project, id);
promise.then(function (projectAsset) {
vm.loadProject(projectAsset.decodeText());
});
};
/**
* Add a single sprite from the "Sprite2" (i.e., SB2 sprite) format.
* @param {?string} json JSON string representing the sprite.
@ -243,6 +258,14 @@ VirtualMachine.prototype.deleteSprite = function (targetId) {
}
};
/**
* Set the audio engine for the VM/runtime
* @param {!AudioEngine} audioEngine The audio engine to attach
*/
VirtualMachine.prototype.attachAudioEngine = function (audioEngine) {
this.runtime.attachAudioEngine(audioEngine);
};
/**
* Set the renderer for the VM/runtime
* @param {!RenderWebGL} renderer The renderer to attach
@ -252,11 +275,11 @@ VirtualMachine.prototype.attachRenderer = function (renderer) {
};
/**
* Set the audio engine for the VM/runtime
* @param {!AudioEngine} audioEngine The audio engine to attach
* Set the storage module for the VM/runtime
* @param {!ScratchStorage} storage The storage module to attach
*/
VirtualMachine.prototype.attachAudioEngine = function (audioEngine) {
this.runtime.attachAudioEngine(audioEngine);
VirtualMachine.prototype.attachStorage = function (storage) {
this.runtime.attachStorage(storage);
};
/**

14
webpack.config.js
View file

@ -64,10 +64,12 @@ module.exports = [
'highlightjs/highlight.pack.min.js',
// Scratch Blocks
'scratch-blocks/dist/vertical.js',
// Audio
'scratch-audio',
// Renderer
'scratch-render',
// Audio
'scratch-audio'
// Storage
'scratch-storage'
]
},
output: {
@ -92,13 +94,17 @@ module.exports = [
test: require.resolve('scratch-blocks/dist/vertical.js'),
loader: 'expose-loader?Blockly'
},
{
test: require.resolve('scratch-audio'),
loader: 'expose-loader?AudioEngine'
},
{
test: require.resolve('scratch-render'),
loader: 'expose-loader?RenderWebGL'
},
{
test: require.resolve('scratch-audio'),
loader: 'expose-loader?AudioEngine'
test: require.resolve('scratch-storage'),
loader: 'expose-loader?Scratch.Storage'
}
]
},