lyf/001code-html--cocos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit of 001code-html Scratch frontend project.

Browse Source 
Includes scratch-gui, scratch-vm, scratch-blocks, scratch-render, scratch-l10n, and deployment config.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
刘宇飞
2026-06-16 15:37:45 +08:00
commit 6e0a1fbcbb
11350 changed files with 965674 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
scratch-render/test/fixtures/MockSkin.js vendored Normal file
View File

@@ -0,0 +1,23 @@
const Skin = require('../../src/Skin');
class MockSkin extends Skin {
set size (dimensions) {
this.dimensions = dimensions;
}
get size () {
return this.dimensions || [0, 0];
}
set rotationCenter (center) {
this._rotationCenter[0] = center[0];
this._rotationCenter[1] = center[1];
this.emitWasAltered();
}
get rotationCenter () {
return this._rotationCenter;
}
}
module.exports = MockSkin;

54
scratch-render/test/helper/page-util.js Normal file
View File

@@ -0,0 +1,54 @@
/* global VirtualMachine, ScratchStorage, ScratchSVGRenderer */
/* eslint-env browser */
// Wait for all SVG skins to be loaded.
// TODO: this is extremely janky and should be removed once vm.loadProject waits for SVG skins to load
// https://github.com/LLK/scratch-render/issues/563
window.waitForSVGSkinLoad = renderer => new Promise(resolve => {
// eslint-disable-next-line prefer-const
let interval;
const waitInner = () => {
let numSVGSkins = 0;
let numLoadedSVGSkins = 0;
for (const skin of renderer._allSkins) {
if (skin.constructor.name !== 'SVGSkin') continue;
numSVGSkins++;
if (skin._svgImage.complete) numLoadedSVGSkins++;
}
if (numSVGSkins === numLoadedSVGSkins) {
clearInterval(interval);
resolve();
}
};
interval = setInterval(waitInner, 1);
});
window.loadFileInputIntoVM = (fileInput, vm, render) => {
const reader = new FileReader();
return new Promise(resolve => {
reader.onload = () => {
vm.start();
vm.loadProject(reader.result)
.then(() => window.waitForSVGSkinLoad(render))
.then(() => {
resolve();
});
};
reader.readAsArrayBuffer(fileInput.files[0]);
});
};
window.initVM = render => {
const vm = new VirtualMachine();
const storage = new ScratchStorage();
vm.attachStorage(storage);
vm.attachRenderer(render);
vm.attachV2SVGAdapter(ScratchSVGRenderer.V2SVGAdapter);
vm.attachV2BitmapAdapter(new ScratchSVGRenderer.BitmapAdapter());
return vm;
};

69
scratch-render/test/integration/cpu-render.html Normal file
View File

@@ -0,0 +1,69 @@
<body>
<script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
<script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
<script src="../../node_modules/@turbowarp/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
<script src="../helper/page-util.js"></script>
<!-- note: this uses the BUILT version of scratch-render! make sure to npm run build -->
<script src="../../dist/web/scratch-render.js"></script>
<canvas id="test" width="480" height="360"></canvas>
<canvas id="cpu" width="480" height="360"></canvas>
<br/>
<canvas id="merge" width="480" height="360"></canvas>
<input type="file" id="file" name="file">
<script>
// These variables are going to be available in the "window global" intentionally.
// Allows you easy access to debug with `vm.greenFlag()` etc.
window.devicePixelRatio = 1;
const gpuCanvas = document.getElementById('test');
var render = new ScratchRender(gpuCanvas);
var vm = initVM(render);
const fileInput = document.getElementById('file');
const loadFile = loadFileInputIntoVM.bind(null, fileInput, vm, render);
fileInput.addEventListener('change', e => {
loadFile()
.then(() => {
vm.greenFlag();
setTimeout(() => {
renderCpu();
}, 1000);
});
});
const cpuCanvas = document.getElementById('cpu');
const cpuCtx = cpuCanvas.getContext('2d');
const cpuImageData = cpuCtx.getImageData(0, 0, cpuCanvas.width, cpuCanvas.height);
function renderCpu() {
cpuImageData.data.fill(255);
const drawBits = render._drawList.map(id => {
const drawable = render._allDrawables[id];
if (!(drawable._visible && drawable.skin)) {
return;
}
drawable.updateCPURenderAttributes();
return { id, drawable };
}).reverse().filter(Boolean);
const color = new Uint8ClampedArray(3);
for (let x = -239; x <= 240; x++) {
for (let y = -180; y< 180; y++) {
render.constructor.sampleColor3b([x, y], drawBits, color);
const offset = (((179-y) * 480) + 239 + x) * 4
cpuImageData.data.set(color, offset);
}
}
cpuCtx.putImageData(cpuImageData, 0, 0);
const merge = document.getElementById('merge');
const ctx = merge.getContext('2d');
ctx.drawImage(gpuCanvas, 0, 0);
const gpuImageData = ctx.getImageData(0, 0, 480, 360);
for (let x=0; x<gpuImageData.data.length; x++) {
gpuImageData.data[x] = 255 - Math.abs(gpuImageData.data[x] - cpuImageData.data[x]);
}
ctx.putImageData(gpuImageData, 0, 0);
}
</script>
</body>

28
scratch-render/test/integration/index.html Normal file
View File

@@ -0,0 +1,28 @@
<body>
<script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
<script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
<script src="../../node_modules/@turbowarp/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
<script src="../helper/page-util.js"></script>
<!-- note: this uses the BUILT version of scratch-render! make sure to npm run build -->
<script src="../../dist/web/scratch-render.js"></script>
<canvas id="test" width="480" height="360" style="width: 480px"></canvas>
<input type="file" id="file" name="file">
<script>
// These variables are going to be available in the "window global" intentionally.
// Allows you easy access to debug with `vm.greenFlag()` etc.
window.devicePixelRatio = 1;
var canvas = document.getElementById('test');
var render = new ScratchRender(canvas);
var vm = initVM(render);
var mockMouse = data => vm.runtime.postIOData('mouse', {
canvasWidth: canvas.width,
canvasHeight: canvas.height,
...data,
});
const loadFile = loadFileInputIntoVM.bind(null, document.getElementById('file'), vm, render);
</script>
</body>

111
scratch-render/test/integration/pick-tests.js Normal file
View File

@@ -0,0 +1,111 @@
/* global vm, render */
const {chromium} = require('playwright-chromium');
const test = require('tap').test;
const path = require('path');
const indexHTML = path.resolve(__dirname, 'index.html');
const testDir = (...args) => path.resolve(__dirname, 'pick-tests', ...args);
const runFile = async (file, action, page, script) => {
// start each test by going to the index.html, and loading the scratch file
await page.goto(`file://${indexHTML}`);
const fileInput = await page.$('#file');
await fileInput.setInputFiles(testDir(file));
await page.evaluate(() =>
// `loadFile` is defined on the page itself.
// eslint-disable-next-line no-undef
loadFile()
);
return page.evaluate(`(function () {return (${script})(${action});})()`);
};
// immediately invoked async function to let us wait for each test to finish before starting the next.
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
const testOperation = async function (name, action, expect) {
await test(name, async t => {
const results = await runFile('test-mouse-touch.sb2', action, page, boundAction => {
vm.greenFlag();
const sendResults = [];
const idToTargetName = id => {
const target = vm.runtime.targets.find(tar => tar.drawableID === id);
if (!target) {
return `[Unknown drawableID: ${id}]`;
}
return target.sprite.name;
};
const sprite = vm.runtime.targets.find(target => target.sprite.name === 'Sprite1');
boundAction({
sendResults,
idToTargetName,
render,
sprite
});
return sendResults;
});
t.plan(expect.length);
for (let x = 0; x < expect.length; x++) {
t.deepEqual(results[x], expect[x], expect[x][0]);
}
t.end();
});
};
const tests = [
{
name: 'pick Sprite1',
action: ({sendResults, render, idToTargetName}) => {
sendResults.push(['center', idToTargetName(render.pick(360, 180))]);
},
expect: [['center', 'Sprite1']]
},
{
name: 'pick Stage',
action: ({sendResults, render, idToTargetName}) => {
sendResults.push(['left', idToTargetName(render.pick(320, 180))]);
},
expect: [['left', 'Stage']]
},
{
name: 'touching Sprite1',
action: ({sprite, sendResults, render}) => {
sendResults.push(['over', render.drawableTouching(sprite.drawableID, 360, 180)]);
},
expect: [['over', true]]
},
{
name: 'pick Stage through hidden Sprite1',
action: ({sprite, sendResults, render, idToTargetName}) => {
sprite.setVisible(false);
sendResults.push(['hidden sprite pick center', idToTargetName(render.pick(360, 180))]);
},
expect: [['hidden sprite pick center', 'Stage']]
},
{
name: 'touching hidden Sprite1',
action: ({sprite, sendResults, render}) => {
sprite.setVisible(false);
sendResults.push(['hidden over', render.drawableTouching(sprite.drawableID, 360, 180)]);
},
expect: [['hidden over', true]]
}
];
for (const {name, action, expect} of tests) {
await testOperation(name, action, expect);
}
// close the browser window we used
await browser.close();
})().catch(err => {
// Handle promise rejections by exiting with a nonzero code to ensure that tests don't erroneously pass
// eslint-disable-next-line no-console
console.error(err.message);
process.exit(1);
});

BIN
scratch-render/test/integration/pick-tests/test-mouse-touch.sb2 Normal file
View File

Binary file not shown.

136
scratch-render/test/integration/scratch-tests.js Normal file
View File

@@ -0,0 +1,136 @@
/* global vm */
const {chromium} = require('playwright-chromium');
const test = require('tap').test;
const path = require('path');
const fs = require('fs');
const allGpuModes = ['ForceCPU', 'ForceGPU', 'Automatic'];
const indexHTML = path.resolve(__dirname, 'index.html');
const testDir = (...args) => path.resolve(__dirname, 'scratch-tests', ...args);
const checkOneGpuMode = (t, says) => {
// Map string messages to tap reporting methods. This will be used
// with events from scratch's runtime emitted on block instructions.
let didPlan = false;
let didEnd = false;
const reporters = {
comment (message) {
t.comment(message);
},
pass (reason) {
t.pass(reason);
},
fail (reason) {
t.fail(reason);
},
plan (count) {
didPlan = true;
t.plan(Number(count));
},
end () {
didEnd = true;
t.end();
}
};
// loop over each "SAY" we caught from the VM and use the reporters
says.forEach(text => {
// first word of the say is going to be a "command"
const command = text.split(/\s+/, 1)[0].toLowerCase();
if (reporters[command]) {
return reporters[command](text.substring(command.length).trim());
}
// Default to a comment with the full text if we didn't match
// any command prefix
return reporters.comment(text);
});
if (!didPlan) {
t.comment('did not say "plan NUMBER_OF_TESTS"');
}
// End must be called so that tap knows the test is done. If
// the test has a SAY "end" block but that block did not
// execute, this explicit failure will raise that issue so
// it can be resolved.
if (!didEnd) {
t.fail('did not say "end"');
t.end();
}
};
const testFile = async (file, page) => {
// start each test by going to the index.html, and loading the scratch file
await page.goto(`file://${indexHTML}`);
const fileInput = await page.$('#file');
await fileInput.setInputFiles(testDir(file));
await page.evaluate(() =>
// `loadFile` is defined on the page itself.
// eslint-disable-next-line no-undef
loadFile()
);
const says = await page.evaluate(async useGpuModes => {
// This function is run INSIDE the integration chrome browser via some
// injection and .toString() magic. We can return some "simple data"
// back across as a promise, so we will just log all the says that happen
// for parsing after.
// this becomes the `says` in the outer scope
const allMessages = {};
const TIMEOUT = 5000;
vm.runtime.on('SAY', (_, __, message) => {
const messages = allMessages[vm.renderer._useGpuMode];
messages.push(message);
});
for (const useGpuMode of useGpuModes) {
const messages = allMessages[useGpuMode] = [];
vm.renderer.setUseGpuMode(useGpuMode);
vm.greenFlag();
const startTime = Date.now();
// wait for all threads to complete before moving on to the next mode
while (vm.runtime.threads.some(thread => vm.runtime.isActiveThread(thread))) {
if ((Date.now() - startTime) >= TIMEOUT) {
// if we push the message after end, the failure from tap is not very useful:
// "not ok test after end() was called"
messages.unshift(`fail Threads still running after ${TIMEOUT}ms`);
break;
}
await new Promise(resolve => setTimeout(resolve, 50));
}
}
return allMessages;
}, allGpuModes);
for (const gpuMode of allGpuModes) {
test(`File: ${file}, GPU Mode: ${gpuMode}`, t => checkOneGpuMode(t, says[gpuMode]));
}
};
// immediately invoked async function to let us wait for each test to finish before starting the next.
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
const files = fs.readdirSync(testDir())
.filter(uri => uri.endsWith('.sb2') || uri.endsWith('.sb3'));
for (const file of files) {
await testFile(file, page);
}
// close the browser window we used
await browser.close();
})().catch(err => {
// Handle promise rejections by exiting with a nonzero code to ensure that tests don't erroneously pass
// eslint-disable-next-line no-console
console.error(err.message);
process.exit(1);
});

BIN
scratch-render/test/integration/scratch-tests/cat-touches-box.sb2 Normal file
View File

Binary file not shown.

BIN
scratch-render/test/integration/scratch-tests/cat-touches-pen.sb2 Normal file
View File

Binary file not shown.

BIN
scratch-render/test/integration/scratch-tests/clear-color.sb3 Normal file
View File

Binary file not shown.

BIN
scratch-render/test/integration/scratch-tests/color-touching-tests.sb2 Normal file
View File

Binary file not shown.

BIN
scratch-render/test/integration/scratch-tests/disappearing-pen.sb3 Normal file
View File

Binary file not shown.

BIN
scratch-render/test/integration/scratch-tests/doesnt-touch-say-bubble.sb2 Normal file
View File

Binary file not shown.

BIN
scratch-render/test/integration/scratch-tests/fencing-bounds.sb3 Normal file
View File

Binary file not shown.

BIN
scratch-render/test/integration/scratch-tests/ghost-hidden-collide.sb2 Normal file
View File

Binary file not shown.

BIN
scratch-render/test/integration/scratch-tests/pixelate-touching.sb3 Normal file
View File

Binary file not shown.

BIN
scratch-render/test/integration/scratch-tests/sprite-goes-off-stage.sb2 Normal file
View File

Binary file not shown.

BIN
scratch-render/test/integration/scratch-tests/tippy-toe-collision.sb2 Normal file
View File

Binary file not shown.

61
scratch-render/test/integration/skin-size-tests.js Normal file
View File

@@ -0,0 +1,61 @@
/* global render, ImageData */
const {chromium} = require('playwright-chromium');
const test = require('tap').test;
const path = require('path');
const indexHTML = path.resolve(__dirname, 'index.html');
// immediately invoked async function to let us wait for each test to finish before starting the next.
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto(`file://${indexHTML}`);
await test('SVG skin size set properly', async t => {
t.plan(1);
const skinSize = await page.evaluate(() => {
const skinID = render.createSVGSkin(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>`);
return render.getSkinSize(skinID);
});
t.same(skinSize, [50, 100]);
});
await test('Bitmap skin size set correctly', async t => {
t.plan(1);
const skinSize = await page.evaluate(() => {
// Bitmap costumes are double resolution, so double the ImageData size
const skinID = render.createBitmapSkin(new ImageData(100, 200), 2);
return render.getSkinSize(skinID);
});
t.same(skinSize, [50, 100]);
});
await test('Pen skin size set correctly', async t => {
t.plan(1);
const skinSize = await page.evaluate(() => {
const skinID = render.createPenSkin();
return render.getSkinSize(skinID);
});
const nativeSize = await page.evaluate(() => render.getNativeSize());
t.same(skinSize, nativeSize);
});
await test('Text bubble skin size set correctly', async t => {
t.plan(1);
const skinSize = await page.evaluate(() => {
const skinID = render.createTextSkin('say', 'Hello', false);
return render.getSkinSize(skinID);
});
// The subtleties in font rendering may cause the size of the text bubble to vary, so just make sure it's not 0
t.notSame(skinSize, [0, 0]);
});
// close the browser window we used
await browser.close();
})().catch(err => {
// Handle promise rejections by exiting with a nonzero code to ensure that tests don't erroneously pass
// eslint-disable-next-line no-console
console.error(err.message);
process.exit(1);
});

48
scratch-render/test/unit/ColorConversionTests.js Normal file
View File

@@ -0,0 +1,48 @@
const {test, Test} = require('tap');
const {rgbToHsv, hsvToRgb} = require('../../src/util/color-conversions');
Test.prototype.addAssert('colorsAlmostEqual', 2, function (found, wanted, message, extra) {
/* eslint-disable no-invalid-this */
message += `: found ${JSON.stringify(Array.from(found))}, wanted ${JSON.stringify(Array.from(wanted))}`;
// should always return another assert call, or
// this.pass(message) or this.fail(message, extra)
if (found.length !== wanted.length) {
return this.fail(message, extra);
}
for (let i = 0; i < found.length; i++) {
// smallest meaningful difference--detects changes in hue value after rounding
if (Math.abs(found[i] - wanted[i]) >= 0.5 / 360) {
return this.fail(message, extra);
}
}
return this.pass(message);
/* eslint-enable no-invalid-this */
});
test('RGB to HSV', t => {
const dst = [0, 0, 0];
t.colorsAlmostEqual(rgbToHsv([255, 255, 255], dst), [0, 0, 1], 'white');
t.colorsAlmostEqual(rgbToHsv([0, 0, 0], dst), [0, 0, 0], 'black');
t.colorsAlmostEqual(rgbToHsv([127, 127, 127], dst), [0, 0, 0.498], 'grey');
t.colorsAlmostEqual(rgbToHsv([255, 255, 0], dst), [0.167, 1, 1], 'yellow');
t.colorsAlmostEqual(rgbToHsv([1, 0, 0], dst), [0, 1, 0.00392], 'dark red');
t.end();
});
test('HSV to RGB', t => {
const dst = new Uint8ClampedArray(3);
t.colorsAlmostEqual(hsvToRgb([0, 1, 1], dst), [255, 0, 0], 'red');
t.colorsAlmostEqual(hsvToRgb([1, 1, 1], dst), [255, 0, 0], 'red (hue of 1)');
t.colorsAlmostEqual(hsvToRgb([0.5, 1, 1], dst), [0, 255, 255], 'cyan');
t.colorsAlmostEqual(hsvToRgb([1.5, 1, 1], dst), [0, 255, 255], 'cyan (hue of 1.5)');
t.colorsAlmostEqual(hsvToRgb([0, 0, 0], dst), [0, 0, 0], 'black');
t.colorsAlmostEqual(hsvToRgb([0.5, 1, 0], dst), [0, 0, 0], 'black (with hue and saturation)');
t.colorsAlmostEqual(hsvToRgb([0, 1, 0.00392], dst), [1, 0, 0], 'dark red');
t.end();
});

148
scratch-render/test/unit/DrawableTests.js Normal file
View File

@@ -0,0 +1,148 @@
const test = require('tap').test;
// Mock `window` and `document.createElement` for twgl.js.
global.window = {};
global.document = {
createElement: () => ({getContext: () => {}})
};
const Drawable = require('../../src/Drawable');
const MockSkin = require('../fixtures/MockSkin');
const Rectangle = require('../../src/Rectangle');
/**
* Returns a Rectangle-like object, with dimensions rounded to the given number
* of digits.
* @param {Rectangle} rect The source rectangle.
* @param {int} decimals The number of decimal points to snap to.
* @returns {object} An object with left/right/top/bottom attributes.
*/
const snapToNearest = function (rect, decimals = 3) {
return {
left: rect.left.toFixed(decimals),
right: rect.right.toFixed(decimals),
bottom: rect.bottom.toFixed(decimals),
top: rect.top.toFixed(decimals)
};
};
const mockRenderer = drawable => ({
skinWasAltered: () => {
drawable._skinWasAltered();
}
});
test('translate by position', t => {
const expected = new Rectangle();
const drawable = new Drawable(null, {});
drawable.skin = new MockSkin(0, mockRenderer(drawable));
drawable.skin.size = [200, 50];
expected.initFromBounds(0, 200, -50, 0);
t.same(snapToNearest(drawable.getAABB()), expected);
drawable.updateProperties({position: [1, 2]});
expected.initFromBounds(1, 201, -48, 2);
t.same(snapToNearest(drawable.getAABB()), expected);
t.end();
});
test('translate by costume center', t => {
const expected = new Rectangle();
const drawable = new Drawable(null, {});
drawable.skin = new MockSkin(0, mockRenderer(drawable));
drawable.skin.size = [200, 50];
drawable.skin.rotationCenter = [1, 0];
expected.initFromBounds(-1, 199, -50, 0);
t.same(snapToNearest(drawable.getAABB()), expected);
drawable.skin.rotationCenter = [0, -2];
expected.initFromBounds(0, 200, -52, -2);
t.same(snapToNearest(drawable.getAABB()), expected);
t.end();
});
test('translate and rotate', t => {
const expected = new Rectangle();
const drawable = new Drawable(null, {});
drawable.skin = new MockSkin(0, mockRenderer(drawable));
drawable.skin.size = [200, 50];
drawable.updateProperties({position: [1, 2], direction: 0});
expected.initFromBounds(1, 51, 2, 202);
t.same(snapToNearest(drawable.getAABB()), expected);
drawable.updateProperties({direction: 180});
expected.initFromBounds(-49, 1, -198, 2);
t.same(snapToNearest(drawable.getAABB()), expected);
drawable.skin.rotationCenter = [100, 25];
drawable.updateProperties({direction: 270, position: [0, 0]});
expected.initFromBounds(-100, 100, -25, 25);
t.same(snapToNearest(drawable.getAABB()), expected);
drawable.updateProperties({direction: 90});
t.same(snapToNearest(drawable.getAABB()), expected);
t.end();
});
test('rotate by non-right-angles', t => {
const expected = new Rectangle();
const drawable = new Drawable(null, {});
drawable.skin = new MockSkin(0, mockRenderer(drawable));
drawable.skin.size = [10, 10];
drawable.skin.rotationCenter = [5, 5];
expected.initFromBounds(-5, 5, -5, 5);
t.same(snapToNearest(drawable.getAABB()), expected);
drawable.updateProperties({direction: 45});
expected.initFromBounds(-7.071, 7.071, -7.071, 7.071);
t.same(snapToNearest(drawable.getAABB()), expected);
t.end();
});
test('scale', t => {
const expected = new Rectangle();
const drawable = new Drawable(null, {});
drawable.skin = new MockSkin(0, mockRenderer(drawable));
drawable.skin.size = [200, 50];
drawable.updateProperties({scale: [100, 50]});
expected.initFromBounds(0, 200, -25, 0);
t.same(snapToNearest(drawable.getAABB()), expected);
drawable.skin.rotationCenter = [0, 25];
expected.initFromBounds(0, 200, -12.5, 12.5);
t.same(snapToNearest(drawable.getAABB()), expected);
drawable.skin.rotationCenter = [150, 50];
drawable.updateProperties({scale: [50, 50]});
expected.initFromBounds(-75, 25, 0, 25);
t.same(snapToNearest(drawable.getAABB()), expected);
t.end();
});
test('rotate and scale', t => {
const expected = new Rectangle();
const drawable = new Drawable(null, {});
drawable.skin = new MockSkin(0, mockRenderer(drawable));
drawable.skin.size = [100, 1000];
drawable.skin.rotationCenter = [50, 50];
expected.initFromBounds(-50, 50, -950, 50);
t.same(snapToNearest(drawable.getAABB()), expected);
drawable.updateProperties({scale: [40, 60]});
drawable.skin.rotationCenter = [50, 50];
expected.initFromBounds(-20, 20, -570, 30);
t.same(snapToNearest(drawable.getAABB()), expected);
t.end();
});