First VN questions by a newbie

[ferrari355]

Hello all.

I'm in my 50s and have been toying with the idea of creating my first VN with RenPY after finding difficulty getting a new job. I'm not familiar with coding or programming but have gone through the RenPy tutorial and it seems straightforward enough. However, I'm running into a problem with the images. In many of the VNs that I've played, there is sometimes a scene where a character "slides" into a scene that already has a background. I tried doing this according to the RenPy tutorial but the background of my character's image follows into the scene and obviously it's different from the actual background. How do you guys do it such that only the outline and details of the character appears on top of the scene's background?

Sorry if I'm not clear with the description of my problem. Hope you guys get what I'm trying to describe. Both my image files are jpg/png. I didn't use any renders as I haven't tried 3D rendering yet. I just experimented with 2 simple image files, the background being an English country mansion while the character was just a woman in typical office wear with a blank, off-white background. So that white background got placed on top of the English mansion when I launched the project. Appreciate any help. Thanks.

 

[peterppp]

remove the background from the character using for instance photoshop. only the character and the rest of the image is transparent. that means you can't use jpg, so png or webp.

 

[osanaiko]

Generally the way the fixed-background + moving foreground character is done using the `scene` and `show` script commands.

Both `Scene` and `show` draws the specified "displayable" asset to the master layer, but internally they have different z-orders (which is the order in which the items are drawn, back to front).

This results in scene being the background, and the show doing the work in the foreground.

What you want is probably something like this (taken from my work in progress game):

label ch1_s4_detect_signal:

    # radio_astronomy lab room background
    scene phys_science_lab with dissolve

    mc__ "Ship, override Lab door access restrictions."
    ship "Acknowledged."

    # todo: sound effect. Beep boop
    # todo: sound effect. Door open.

    # sprite of MC. Using "at" to apply a transform to flip it to face the opposite way of the underlying image)
    show mc standing neutral at mc_left_facing_right:
        pos (-0.1 , 0.6) # overriding the transform position property so the image starts offscreen
        linear 0.4 xpos 0.1 # then use an ATL statement to animate the xpos property to slide the image into view

    pause 0.6

    show mc standing neutral talking with dissolve

    mc__ "Wow, it feels like I haven't been in this lab for ages."

    # etc dialogue
    # etc
    # etc

    hide mc with dissolve
    scene black with dissolve
    return

This part of the script relies on having the following three graphics files under the "images" tree of my game folder:

- "phys_science_lab.png": a full screen 1920x1080 image


- "mc standing neutral.png": a smaller image, using alpha transparency for the areas of the rectangle around the sprite drawing



- "mc standing neutral talking.png": as above image but with mouth open


Renpy will automatically find those images and make them available without you needing tediously to define "image" statements

One interesting/useful thing I am using is the space characters in the MC sprite image names. Renpy treats each space-separated component of the filename as a "tag". When you call "show" again, if the hierarchy of the tags of the new image name are the same as a previous shown image, the new image replaces the old (with a transition if your want, like `with dissolve`). This means you don't need to constantly use the "hide" statements on every sprite expression change.


As an aside, these are the "transform" definitions that come together to set the ATL properties that I use on the initial sprite display. Transforms are useful as they let you define a group of properties once, and re-use them over and over, or for different characters.

transform mc_base:
    anchor (0.5,0.5)
    zoom 0.55

transform mc_facing_right:
    xzoom -1.0 # flips then image

# this transform combines the two previous, then adds a default position for the sprite at left of screen
transform mc_left_facing_right:
    mc_base
    mc_facing_right
    pos (0.1 , 0.6)

 

[Egglock]

Aside from the code, you need to have an image with transparency (known as an alpha channel in 2D digital software). Using osanaiko images as an example. Take a look at the character images, you will know if the image has a transparency background by the checker pattern behind the character. Next thing is what peterppp mention. JPEG does not support alpha channel, so you'll have to save any images with alpha channel to a different format. The file formats are too technical to discuss, but the general of it is the compression algorithm apply to them. PNG, and Webp are the common file formats used if your images have alpha channel in them. If you're curious about the technical side of those format, a google search will yield better information. Key term JPEG, PNG, Webp or take a look at Ren'py documentation to see what formats are accepted and search for those keywords.

If you're looking for free tools to do image editing, I suggest using GIMP (alternative to photoshop). Explaning how to edit an image will be too long so here are some videos explaning to process. Keep in mind this is using GIMP.

What is an alpha channel?

You must be registered to see the links

Explantion of using Alpha Channel.

You must be registered to see the links

Quickly apply alpha channel using a color picker

You must be registered to see the links

These three videos should hopefully get you off on the correct foot. There's all sorts of advance topics, which I suggest you take a look at once you feel comfortable. Once you get to rendering, keep in mind to look up the documentation on the render engine of your choosing (known free ones are Daz3D and Blender), on how to apply alpha channels to your renders. Otherwise you'll end up rendering a solid color on an image you were expecting to have transparency on.

A side note, don't jump into Blender to do your renderings. You'll only confuse yourself more. Stick to Daz3D until you feel comfortable, as it already provides a lot of the tools you'll need to render. Though I do encourage you to play around with Blender just to get a feel for it. As it provides a lot of advance tools and features that Daz3D doesn't have.

A word of caution, if you ever think of using Blender as your main render engine, there's a lot of work that needs to be done to get it setup correctly in Blender.

 

[MissFortune]

there's a lot of work that needs to be done to get it setup correctly in Blender.

If the base model in Daz looks good, everything but the hair will usually look just as good as it does in Daz. But even the hair isn't a super tough fix (unless you're using pre-Omni OOT hairs).

Definitely agree with everything else, though. I started in and got experienced with Daz, which I absolutely believe made traversing into Blender a whole lot easier.

 

[ferrari355]

remove the background from the character using for instance photoshop. only the character and the rest of the image is transparent. that means you can't use jpg, so png or webp.

It worked! I had to fiddle around in photoshop though as I've never used it before and the checkered background after removing the original bg was kind of misleading me personally. But now I know how to do it. Thanks.

 

[ferrari355]

Generally the way the fixed-background + moving foreground character is done using the `scene` and `show` script commands.

Both `Scene` and `show` draws the specified "displayable" asset to the master layer, but internally they have different z-orders (which is the order in which the items are drawn, back to front).

This results in scene being the background, and the show doing the work in the foreground.

Thanks a lot for the very detailed explanation and solution, but I'm afraid it's beyond my technical knowledge and skills right now. I got lost quite early, but I'm sure as I go further in my development journey, this will come in handy. The more one learns, the more one will know, and the more one knows, the more questions one will have and the more details one will need to know how to solve problems encountered.

 

[ferrari355]

If the base model in Daz looks good, everything but the hair will usually look just as good as it does in Daz. But even the hair isn't a super tough fix (unless you're using pre-Omni OOT hairs).

Definitely agree with everything else, though. I started in and got experienced with Daz, which I absolutely believe made traversing into Blender a whole lot easier.

Yea, I remember trying Blender a couple of years back when I was trying to edit a video, and it was.......let's just say I closed the program after 20 secs having not done the editing I wanted to do. I'll take a look at Daz eventually, but right now, I'm using AI tools to help with the image generation. I'll probably do a fair bit of testing before deciding which direction to go in. Thanks for the advice.