🎨
Develop in Studio
img.studioThe DarkroomImagesOpens the Studio: lay out avatars, text, shapes and progress bars on a canvas, drop in sparks like {{user.displayName}} or {{vars.xp}}, and the bot develops a fresh image every run. If an avatar or Gallery image in the design is animated, the result is an animated GIF.
When to use this
- →Start from a template — rank card, welcome banner, quote card, meme…
- →Preview as… lets you try your design with any name, number or avatar
On the canvas
This is what Develop in Studio looks like when you place it on your flow. Each field below is something you configure in the inspector panel.
🎨Images
Develop in Studio
img.studioscenerequired
scene…
as
card
fileName
rank-card
output
error
Config fields
| Field | Type | Req | What it does |
|---|---|---|---|
scene | scene | yes | Design 🎨 |
ascard | text | — | Save it as ✨ |
fileNamerank-card | text | — | File name 📎 |
Output ports
outputThe finished image is in your spark
errorThe design couldn't be rendered
📐
In TypeScript, this would be…
Not something you need to write — just a look at what Kitcord does for you.
TypeScript
const canvas = createCanvas(934, 282);
const ctx = canvas.getContext("2d");
ctx.drawImage(background, 0, 0, 934, 282);
ctx.save(); ctx.beginPath(); ctx.arc(130, 141, 90, 0, Math.PI * 2); ctx.clip();
ctx.drawImage(avatar, 40, 51, 180, 180); ctx.restore();
ctx.font = "900 44px Nunito";
ctx.fillText(member.displayName, 250, 90);
const card = await canvas.encode("png"); // a GIF when the avatar animatesRelated pieces
More Images pieces
