Design game-over transition

When the player runs out of lives, we should show a more dramatic transition than the regular “StoryWeaver unravels; screen fades out; level fades back in”.

Design how this transition should work, and determine what assets (if any) will be needed to implement it.

The transition would play when the player loses their final life; after it is complete, the player will respawn at the start of the current challenge, potentially losing some progress. It should probably be around 5-15 seconds: long enough to feel dramatic but not long enough to be a drag if the player repeatedly encounters it.

XP Summary (total 275)

Subdomain	Skill	XP
Game Design: Game Feel & UX	Problem Solving	50
Game Design: Game Feel & UX	Creativity & Design Thinking	150
Game Design: Game Feel & UX	Technical Literacy	75

Hello! I want to take this issue, please. 🫡

https://docs.google.com/document/d/19zgCiZYMO4AjNTerHJvbgyprASVk7U8n4DCcbRDerJM/edit?usp=sharing

Hi! This is my issue planning document. My progress is there (I'm also uploading that here!). It's everything ok? Or I do need to do something else?

Animation:

Anim.heart.mp4

Ideas:

Music:

https://drive.google.com/file/d/1As8QwuGnhDqKKBa9Eh1NFW4war3ZKztV/view?usp=sharing
https://drive.google.com/file/d/1Y3s-YZqr1if9aQYwhbpFPYHYMMEahD4D/view?usp=sharing

@tef1cita

@tef1cita ¡buenas ideas y lindos conceptos! hay alguna en particular en la que quieras profundizar? Para completar la tarea deberías presentar una especificación de la transición (duración, qué assets usar). Idealmente acompañada con imágenes o con un video animado como el de arriba.

Music:

https://drive.google.com/file/d/1As8QwuGnhDqKKBa9Eh1NFW4war3ZKztV/view?usp=sharing https://drive.google.com/file/d/1Y3s-YZqr1if9aQYwhbpFPYHYMMEahD4D/view?usp=sharing

El primero es el tema principal del juego y ya está en el repositorio, ninguna necesidad de ponerlo en un Drive. El segundo sonido ¿fue creado por vos o fue obtenido de internet? En el segundo caso hay que especificar la autoría y la licencia.

@tef1cita

Hi @tef1cita, huge thanks for undertaking this task for us. Really nice work here so far. The storyboard panels (which I encourage across all work in game development) show how you're thinking, and in beats too (title card, break, respawn cue, back to gameplay, etc), and the fact that you're asking about asset ownership and music licensing is important and tells me you're really thinking about this beyond just "I made a thing". Keep asking those questions throughout your life and career.

One observation before you go further - let's anchor this transition to Threadbare's existing visuals rather than introduce a new one. Right now the normal transition is 'StoryWeaver unravels, screen fades.' My early vision for the game-over screen was the screen fade, and then we see a spool of thread unravel and run empty. The dramatic escalation of a moment players are told they've run out of....thread...luck...life. I had this vision of a spool of thread as the health bar also, and so these tow things would make sense when presented together.
Keep in mind that we don't have 'death' in Threadbare. Things are either (re)woven, or unwoven. It's part of our gentle, cosy, cute aesthetic. A philosophy of existence in Threadbare.

I actually really love the stuffed heart concept though - complete with the ripping sound - and it does definitely suggest "you lost a life" to the player, but we have to be careful as the suggestion of a heart makes an explicit reference to an organ, and so biology - blood, flesh, etc - and so life. Nothing in Threadbare is made like that. Maybe the heart needs to be more obviously made of fabric, explicitly patchwork perhaps? Obvious signs of sewing, different patterns. Like the Threadbare Trees. Actually, The the Hushroom is a great example of what a red patchwork thing with differing fabric patterns and sewing lines looks like.

Another idea...could it be a woven heart? - A heart-shaped knot of threads that unravel and collapse like the StoryWeaver does when caught by Storyvores? That animation already exists. It could be borrowed for this?

If the heart doesn;t feel right after this feedback, have a think about the unraveling spool (the symbol/logo of Threadbare). Could be another idea worth looking for.

With that in mind: A few concrete next steps:

Duration - the issue asks for 5–15 seconds. Pick an actual number and break it down, e.g. ~2s fade out, ~5-6s spool unravel/thread runs out, ~2s fade back in. Having a real number makes it much easier for whoever builds Implement game-over transition #1391.
Asset list - for the spool version, that's roughly: a patchwork heart sprite/animation, the heart tearing and unstuffing, and the "heart fully unstuffed" end state, plus the spotlight or vignette treatment from your spiral panel if we keep it.
Sketch these with more fabric detail. That storyboard style was clear and easy to follow.
On "do I make final assets or does Implement game-over transition #1391?" - yes, please take a pass at the assets. They don't need to be final game-ready art, but the more finished your storyboard/animatic, the less guessing the implementer has to do.
Music - you don't need the Drive link for the main theme, it's already in the repo. For the second track, can you confirm exactly what tool you used and check its license terms for use in an open-source game? Once you know that, add a one-line attribution note in the planning doc so it's documented for whoever ships this.

Really glad you're on this one. Thx.

@manuq

@PlayMatters @manuq Thank you very much for your contribution, it helped me a lot! This is my update.

It will appear immediately once the player loses all three lives. When the player is attacked and is about to lose THIRD LIFE, the animation described below will be applied:

Final View:
Almost the same, but without the heart. It is replaced by:

Threadbare\threadbare\scenes\game_elements\characters\player\components\storyweaver_blue_idle

Threadbare\threadbare\scenes\game_elements\characters\player\components\storyweaver_blue_defeated

Black framing rectangles appear (1 second).
The stand animation appears right in the center (2 seconds and 10FPS or “frames per second”), the background becomes blurred or white.
The blurred or white background desaturates or turns black when the death animation starts + applying Rip sound (starting from second 2 of Rip).
A light appears falling on the character. (From the start of the death animation).
The light flashes (Periodically) and the music starts when the death animation ends.
6.Text appears “Cheer up, adventurer” (0.5 seconds after the music starts).
Everything fades together once the player exits the screen by pressing any key.

Notes:
The death animation must last the same as it appears in the game (Approx. 3 seconds and 10 FPS or frames per second), with the last frame being the one that will remain until the player decides to exit.

The light that falls on the character is the same that the enemies have to track your position (they are nodes).

And so, about the license of the second sound. Mentors tell me it's totally free to use!
Librería/Herramienta base: Melody Loom
Licencia: Creative Commons Atribución 4.0 Internacional (CC BY 4.0)

I think this would be all, but if there is anything else missing, let me know.

@manuq

@manuq @PlayMatters so, it's everything ok?? 🥹

@tef1cita

@tef1cita please go ahead and make a mockup design! Keep in mind that the player unraveling animation will play in-game, at the moment the player is defeated. So to me adding a separate player sprite in the center of the screen (where the in-game player sprite may be) would feel odd. Maybe you can record footage of the existing defeated animation and do the mockup on top? For instance try playing https://play.threadbare.game/branches/endlessm/main/#quests/lore_quests/quest_001/3_stealth_level/stealth_level . You can be defeated infinite times now, so there is no game over. Currently, as the description above says the transition is a:

regular “StoryWeaver unravels; screen fades out; level fades back in”.

Record that and design the transition over the last time you get defeated to make it less regular.

Keep in mind that the player unraveling animation will play in-game, at the moment the player is defeated. So to me adding a separate player sprite in the center of the screen (where the in-game player sprite may be) would feel odd.

Hades does this really well, in my opinion: when the player-character Zagreus is defeated, the rest of the screen fades quickly to black and the Zagreus death animation plays in the same position that Zagreus was in in the scene a moment before: https://www.youtube.com/watch?v=5NOwo-hQieU

As I watch this recording slowed down I see that it's "fake", in the sense that the cutscene is just a video where the character happens to be in the same position on screen as they were during gameplay. But it looks seamless to the player. In that game it's "easy" because, from memory, the camera always centres Zagreus in the viewport! :)

@wjt

Here the mockup! @wjt @manuq @PlayMatters
If there is anything else to correct... before uploading it to the planning sheet + assets, let me know! I took Hades as inspiration, I made the focus animation and added a last frame in death so that they don't look like flying threads. I would have liked it to look neater but Clipchamp is a bit tedious... 🥺

(I upload it to Drive because for some reason it won't let me attach it directly).
https://drive.google.com/file/d/1kEpFJqu2yrnGAgRQsL392nE09DYaU4lO/view?usp=sharing

@manuq

so ummm, I think I have two ideas !!

(again, I can't upload the files here. I don't know why...)
https://drive.google.com/file/d/14ZK_FbhVh6g6n_k9F8uE_kaO8cEeItsz/view?usp=sharing
https://drive.google.com/file/d/1vn8q_4uuCJqElxQyn8Afewl_ZhcpAHH3/view?usp=sharing

@manuq @PlayMatters @wjt

@tef1cita

@tef1cita I think this is great and already actionable!

Here the mockup! @wjt @manuq @PlayMatters If there is anything else to correct... before uploading it to the planning sheet + assets, let me know! I took Hades as inspiration, I made the focus animation and added a last frame in death so that they don't look like flying threads. I would have liked it to look neater but Clipchamp is a bit tedious... 🥺

(I upload it to Drive because for some reason it won't let me attach it directly).

The maximum file size is 10 MB, maybe is that? Also check the file format: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/attaching-files#image-and-media-files

If you are recording from Godot editor directly, check: https://github.com/endlessm/threadbare/wiki/Record-a-playthrough

Although I don't think that's your case.

https://drive.google.com/file/d/1kEpFJqu2yrnGAgRQsL392nE09DYaU4lO/view?usp=sharing

Let's call this one option A.

so ummm, I think I have two ideas !!

(again, I can't upload the files here. I don't know why...)
https://drive.google.com/file/d/14ZK_FbhVh6g6n_k9F8uE_kaO8cEeItsz/view?usp=sharing

Let's call this one option B.

https://drive.google.com/file/d/1vn8q_4uuCJqElxQyn8Afewl_ZhcpAHH3/view?usp=sharing

Let's call this one option C.

For future reference, it would be nice to add a small description to each alternative. I think the timing works best in option A:

In option B you removed the letterboxing and added a layer of vignette. I think that the light spot works better with the vignette than with the letterboxing. I would only make sure that the vignette reaches the whole screen:

In option C you removed the zoom effect. I guess that you found out that zooming pixel art too much can be problematic. Although to some extent, zooming is fine and gives a dramatic effect, (check Threadbare take on pixel art)[https://github.com/endlessm/threadbare/wiki/Visual-Style-Guide#threadbares-take-on-pixel-art]. As in B, I would avoid cutting the light spot and the vignette effects:

So my final feedback would be:

Decide to use letterboxing or vignette
Avoid cropping the vignette or light spot effects
Decide the final timing (A feels best when I watch it)
Decide the zoom amount. I recommend something between AB (too much zoom) and C (no zoom at all).

Also if you come up with more alternatives, please describe it. I was guessing the differences between A, B and C so I may have missed something.

@manuq

Hi, hi! I’ve been a bit busy (I blinked and suddenly it’s time to deliver this issue! 😔), but I managed to finish this new mockup today!
@manuq

I wanted to keep things simple, so I tweaked a few elements based on my initial ideas and the feedback I received:

I used this dark space because I feel it centers the player's focus on the animation.
About the light spots effects... I couldn't see them while recording, so I'm guessing it might just be an issue with my phone's screen 🥹...
I wasn't entirely sure about the timing, sooo I just sped up the animation a bit!
I decided not to zoom in at all because I think the essence of Threadbare is letting things unfold naturally on-site.

New! new!:

I checked issue Create damage-received animation for player-character #1743 and thought, "Hey, if that's the animation for when the player takes damage, why not include it in the game over?" So I added it!
I added the "Storyweaver" text. I really wanted to animate it like the game’s opening intro, but time is running a bit short...

note: I would have also liked to add a brief anticipation light with sound right before the spotlight appears, but that would make it too long... To be honest, I had a lot of ideas, but I think this mockup is my favorite out of all of them!

https://drive.google.com/file/d/1cNnvrauTXx-2kLFL076oS9RfLRyGqdmy/view?usp=sharing

@tef1cita

@tef1cita thank you, this is perfect!

Here I am attaching the video you provided by Google Drive:

Mockup.please.accept.thisss.mp4

Next time, consider attaching here directly as explained now in the Contributions page.

I wanted to keep things simple, so I tweaked a few elements based on my initial ideas and the feedback I received:

I used this dark space because I feel it centers the player's focus on the animation.

About the light spots effects... I couldn't see them while recording, so I'm guessing it might just be an issue with my phone's screen 🥹...

I wasn't entirely sure about the timing, sooo I just sped up the animation a bit!

I decided not to zoom in at all because I think the essence of Threadbare is letting things unfold naturally on-site.

New! new!:

I checked issue Create damage-received animation for player-character #1743 and thought, "Hey, if that's the animation for when the player takes damage, why not include it in the game over?" So I added it!

I added the "Storyweaver" text. I really wanted to animate it like the game’s opening intro, but time is running a bit short...

note: I would have also liked to add a brief anticipation light with sound right before the spotlight appears, but that would make it too long... To be honest, I had a lot of ideas, but I think this mockup is my favorite out of all of them!

Thanks for explaining all the changes! I love that you incorporated the new damage effect. Is the "Storyweaver" text hand-drawn? If not which font did you use?

It looks more than a mockup, have you implemented this in the game too? If so please open a pull request. Or at least attach the assets used here! Anything that will be useful for someone wanting to implement this.

If this wasn't implemented in-game, I'm curious, can you explain a bit what was your process? Did you record the game and then added the transition in a video editor software? Which one? Thanks!

Added this to Contributed Artwork.

@manuq

Hi, hi! @manuq

Next time, consider attaching here directly as explained now in the Contributions page.

Okie dokie. 🫡

Thanks for explaining all the changes! I love that you incorporated the new damage effect. Is the "Storyweaver" text hand-drawn? If not which font did you use?

YUPP! It's handmade, I was inspired by Threadbare's intro. I have never found a font that looks so similar and I had to figure it out... As I mentioned, I would have loved to animate it.

It looks more than a mockup, have you implemented this in the game too? If so please open a pull request. Or at least attach the assets used here! Anything that will be useful for someone wanting to implement this.

Omg, reading this makes me very happy. Not at all! I never implemented it in the game.

And of course! Assets here:

(I didn't use this but under the spotlight the light is not as noticeable.)

And that's all! about sounds effects... I used "loop main intro", a sound I made on melody loom and is attached above and regarding the final sound, I used the first note in "threadbare_bed", it is edited a little in the same app to make it sound deeper.

If this wasn't implemented in-game, I'm curious, can you explain a bit what was your process? Did you record the game and then added the transition in a video editor software? Which one? Thanks!

Oh right! Yes, first I recorded the game on my PC, I made the assets and... although at the beginning I edited it in Clipchamp, it is a fairly simple editor, so the result was just as simple... then I started to transfer everything to my phone by email. Which when editing it in "YouCut" made it better for me. Of course... editing on a cell phone is tedious, I had to get really close to the screen to see if it fit or not! Worse being shortsighted, haha.

Other than that, it was fun to play with the editing options, sometimes creating the same effect, that's how I replicated the damage animation from issue #1743 , with pure effects and imagination. Same with vignette and flicker.

I'm quite happy with the result. ^_^

Navigation Menu

Repository navigation

Design game-over transition #1390

XP Summary (total 275)

2 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Design game-over transition #1390

Description

XP Summary (total 275)

Activity

tef1cita commented on Aug 18, 2026

tef1cita commented on Aug 25, 2026

tef1cita commented on Aug 25, 2026

tef1cita commented on Aug 25, 2026

tef1cita commented on Aug 25, 2026

manuq commented on Aug 26, 2026

2 remaining items

StephenReidEdu commented on Aug 27, 2026

tef1cita commented on Aug 27, 2026

tef1cita commented on Sep 1, 2026

manuq commented on Sep 2, 2026

wjt commented on Sep 2, 2026

tef1cita commented on Sep 4, 2026

tef1cita commented on Sep 7, 2026

manuq commented on Sep 7, 2026

tef1cita commented on Sep 19, 2026

manuq commented on Sep 22, 2026

manuq commented on Sep 22, 2026

tef1cita commented on Sep 22, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions