102 lines
2.7 KiB
JavaScript
102 lines
2.7 KiB
JavaScript
class TextSpriteExtension {
|
|
id = "textSprite";
|
|
|
|
registerCategory() {
|
|
return {
|
|
name: "Text Sprite",
|
|
color: "#8E44AD",
|
|
};
|
|
}
|
|
|
|
registerBlocks() {
|
|
return [
|
|
{
|
|
type: "statement",
|
|
id: "createTextSprite",
|
|
text: "create text sprite [text] font [font] size [size] color [color]",
|
|
tooltip: "Create a new sprite rendered from text",
|
|
fields: {
|
|
text: { kind: "value", type: "String", default: "Hello!" },
|
|
font: {
|
|
kind: "menu",
|
|
items: [
|
|
"Arial",
|
|
"Verdana",
|
|
"Courier New",
|
|
"Times New Roman",
|
|
"Comic Sans MS",
|
|
],
|
|
},
|
|
size: { kind: "value", type: "Number", default: "48" },
|
|
color: { kind: "value", type: "String", default: "#000000" },
|
|
},
|
|
},
|
|
];
|
|
}
|
|
|
|
registerCode() {
|
|
return {
|
|
createTextSprite: (inputs) => {
|
|
if (!window.app || !window.PIXI) return;
|
|
|
|
const text = String(inputs.text ?? "");
|
|
const font = inputs.font || "Arial";
|
|
const size = Number(inputs.size || 48);
|
|
const color = String(inputs.color || "#000000");
|
|
|
|
/* ---------- Canvas ---------- */
|
|
const canvas = document.createElement("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
ctx.font = `${size}px ${font}`;
|
|
const metrics = ctx.measureText(text);
|
|
|
|
canvas.width = Math.ceil(metrics.width) + 20;
|
|
canvas.height = size + 20;
|
|
|
|
ctx.font = `${size}px ${font}`;
|
|
ctx.fillStyle = color;
|
|
ctx.textBaseline = "top";
|
|
ctx.fillText(text, 10, 10);
|
|
|
|
/* ---------- PIXI Texture ---------- */
|
|
const baseTexture = new PIXI.BaseTexture(canvas);
|
|
const texture = new PIXI.Texture(baseTexture);
|
|
baseTexture.update();
|
|
|
|
/* ---------- Create Sprite (same as addSprite) ---------- */
|
|
const pixiSprite = new PIXI.Sprite(texture);
|
|
pixiSprite.anchor.set(0.5);
|
|
pixiSprite.x = 0;
|
|
pixiSprite.y = 0;
|
|
pixiSprite.scale._parentScaleEvent = pixiSprite;
|
|
|
|
app.stage.addChild(pixiSprite);
|
|
|
|
const id = "text-sprite-" + Date.now();
|
|
|
|
const spriteData = {
|
|
id,
|
|
pixiSprite,
|
|
code: "",
|
|
costumes: [{ name: "text", texture }],
|
|
sounds: [],
|
|
};
|
|
|
|
sprites.push(spriteData);
|
|
|
|
// Register globally
|
|
if (!window.projectCostumes.includes("text")) {
|
|
window.projectCostumes.push("text");
|
|
}
|
|
|
|
// Select it
|
|
setActiveSprite(spriteData);
|
|
renderSpritesList(true);
|
|
},
|
|
};
|
|
}
|
|
}
|
|
|
|
registerExtension(TextSpriteExtension);
|