How to transition into starting scene background? and miscellaneous questions

[fsharpn00b]

1. The skeleton has you set the background for the initial scene roughly like this:

export const day_1 = new Scene("day_1", {
    background: "/bg/forest/day.jpg",
});

I'd like to fade in on the background for the initial scene. As far as I can tell, the Scene constructor doesn't support using a transform.

I've tried these actions:

// This does fade in the background...
    day_1.setBackground("/bg/forest/day.jpg", new FadeIn(5000)),
// But then the background suddenly disappears as I fade in this character. I'm able to use the same character elsewhere without that happening.
    chars.laura_images.happy.show({
        duration : 1000,
        ease : "easeInOut",
    }),

// This does not show the background at all.
    day_1.background.char("/bg/forest/day.png", new FadeIn(5000)),

For now, I'm working around this by starting with an empty scene and then jumping to day_1:

import { FadeIn } from "narraleaf-react"
const day_0 = new Scene("day_0")
day_0.action([
    day_0.jumpTo(day_1, new FadeIn(5000)),
]);

1. Is there an open source project that uses this framework? I feel like that would give me a much quicker handle on the idiomatic usage.

2. Minor documentation nits:

   1. The image transition list links to the old Fade instead of the new FadeIn.
   2. In the Store data page, it would be helpful to note that you must register the Persistent object with the story, as noted here.
   3. From Ren'py links to Image which 404s - should be Image.

Thank you!

[helloyork]

Thanks for letting me know about the documentation issues! I'll fix them as soon as possible.

Yes, there's an open-source project called NarraLeaf-Demo based on NarraLeaf. You can find the story scripts for that project here, though I believe they're a bit out of date.

About the initial entrance animation, please try using a white background as the initial background:

export const day_1 = new Scene("day_1", {
    background: "#ffffff",
});

day_1.action([
    day_1.background.char("/bg/forest/day.jpg", new FadeIn(5000))
]);

This should work, and if it doesn't, it's a bug. Thanks again for your feedback!

[fsharpn00b]

Thank you! The method you described worked. It wasn't working for me because I stupidly put .png instead of .jpg in my image path.

That said, using Scene.setBackground still causes the background image to disappear as soon as I draw a character. I don't know if that's intended for a particular use case.

export const day_1 = new Scene("day_1", {
    background: "#000000",
});

day_1.action([
    day_1.background.char("/bg/forest/day.jpg", new FadeIn(5000)),
// Background reverts to #000000.
    chars.laura_images.happy.show({
        duration : 1000,
        ease : "easeInOut",
    }),

setBackground says it's an alias of scene.background.char, but it looks like setBackground just calls Image._setSrc while Image.char has a bit more logic involved.

[helloyork]

It appears this is a legacy issue: scene.setBackground originally acted on the scene's backgroundSrc field, but later changed to use an Image instance as a wrapper.

Thank you very much for helping me understand this issue! Your feedback is very helpful!