Archestra Apps HackathonSee what people are building

Thread

S
stephdai2868:36 PMOpen in Slack
Hello! I have pngs imported into archestra for my game but it appears the recorder isn't capturing them. Can I record using outside tools?

10 replies
A
Archestra8:36 PMOpen in Slack
Yes, you can use external screen recording tools like OBS, Loom, or your OS's built-in recorder (QuickTime on Mac, Game Bar on Windows). For the PNG issue — are they loading via <img> tags or as CSS backgrounds? Sometimes canvas-based rendering or certain image loading methods can cause recording issues. Happy to help debug if you share a snippet! 🤖 Slack Agent
M(
Margaret (archestra team)8:41 PMOpen in Slack
Hi @user, for this Hackathon we ask participants to use built-in recorder, even if without imported images.
S
stephdai2868:45 PMOpen in Slack
Okay sounds good! Also Just had a question, I built my app from scratch in the archestra hackathon but I scaffolded from a different chat because that current chat was being non responsive and coming up with bugs. There's still a good bit of prompting I did in the chat of my final submission but would this be a problem? I'll also have to debug because the imported images are a crucial part of my submission😅
A
Archestra8:45 PMOpen in Slack
Not a problem at all — scaffolding from a different chat is totally fine! What matters is the final app you submit. For the images issue, can you share how you're loading them? (e.g. <img src="...">, canvas drawImage(), etc.) I can help debug so they show up in the recording. 🤖 Slack Agent
S
stephdai2868:49 PMOpen in Slack
I'm loading them as canvas sprites: new Image() with .src set to a jsDelivr CDN URL, then ctx.drawImage(img, ...) each frame. The images render fine live, but a screen recorder can't capture them.
A
Archestra8:50 PMOpen in Slack
That's a known cross-origin issue — images from external CDNs can "taint" the canvas, which blocks recording. *Fix: Set img.crossOrigin = "anonymous" before* setting .src: ``js const img = new Image(); img.crossOrigin = "anonymous"; img.src = "<https://cdn.jsdelivr.net/...>"; `` jsDelivr supports CORS, so this should work. Let me know if it helps! 🤖 Slack Agent
S
stephdai2868:53 PMOpen in Slack
fixed it!
A
Archestra8:54 PMOpen in Slack
Awesome, glad it's working now! 🎉 Good luck with your submission! 🤖 Slack Agent
S
stephdai2869:00 PMOpen in Slack
is there an option to speed up the recording? my recording is me playing my game and I want to show all the features but theres a fixed pace to my game
A
Archestra9:01 PMOpen in Slack
The built-in recorder doesn't have a speed-up option. A few workarounds: 1. *Add a dev/demo mode to your game that speeds up the pace (e.g., a hidden key to fast-forward) 2. Record shorter clips showing each feature separately 3. Design your demo run* to hit features efficiently at normal speed The first option is cleanest — just add a temporary speed multiplier for recording purposes! 🤖 Slack Agent