Comic Book Format

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
TheKeeper
Newbie
Posts: 9
Joined: Wed Jan 23, 2013 9:53 pm
Location: California
Contact:

Comic Book Format

#1 Post by TheKeeper »

=====
Edit: Monday, February 24, 2014, 2:17 pm (Pacific)
=====
After a lot of playing around with Ren'Py, I've found that, at this point in time, the easiest way for me to get the look and feel of a comic book is to simply draw in the word balloons and caption boxes on one layer, in Photoshop (the image-editing program I use), then use one or more additional layers, for the text. This way, I can display the panel or series of panels, first without the caption boxes/word balloons, so the player can take in the action/scene/event, then overlay the panel with the word balloons, then overlay all of that with the text I want to display. The pause statement will be used, liberally, so as to give the player all the time she needs to read through the text.

This is likely not the most elegant or time-efficient solution, but it's the solution that fits my current skill--or lack thereof--with Ren'Py. While I plan to actually learn even more, I'm eager to begin making some games, just to get used to what I've already learned from making my version of "The Question" from the Quick Start tutorial, and from making "Summer Vacation," a game made with the tutorial posted by rinrin (http://lemmasoft.renai.us/forums/viewto ... =8&t=13539). Hey, at least I'll get the results I want!

Anyhow, thanks to everyone for trying to help out!
TheKeeper

=====
Edit: Thursday, February 6, 2014, 9:11 pm (Pacific)
=====
I realized my original question was based on the assumption that I would need to create word balloon (a.k.a. text bubble) displayables, place them on the screen, then figure out a way for text to properly display itself onto those displayables, in order to create a comic book page layout with Ren'Py. But the link that Donmai gave me shows that I may actually have more options than I originally thought. While I saw, in the tutorial, that text can actually be placed anywhere on the screen, does this also hold true for the dialogue box? Can the dialogue box be placed anywhere on the screen, and can it also be made to look like word balloons? And I think a more general question, now, is what options do I have for presenting a story with a comic book appearance?

While the easiest solution would be to simply draw the panels with the text already in them, the biggest reason why I liked the idea of using Ren'Py for this is that I like to use a lot of narration. Drawing comics in the traditional way, I would often have to create new panels and layout, to make up for a lot of extra text that needed to go somewhere. Or I had to cut out parts of the narration that I really didn't want to cut out. While it worked, I wasn't a big fan of these workaround methods. Ren'Py offered the solution of being able to fit all the text I want in a particular panel, and layout, the way I originally had it in my head, as the word balloons would essentially be playing the roles of the dialogue boxes at the bottom of the screen. So the easiest solution is not quite what I wanted to accomplish, with Ren'Py. I suppose I could create multiple images of the same panel, with the continuing text, but that seems like a lot of unnecessary image files, if there are other ways of achieving the effect I'm after.

At this point, I'm thinking that another solution would be to forgo the use of actual word balloons, and instead place text within the panels, colored differently to indicate what kind of text it is (speech, though, etc.), with a line pointing to whoever happens to be involved in the dialogue displayed. This would probably be a lot easier to do, as I wouldn't have to concern myself with keeping the text perfectly positioned within a word balloon or caption box. But if there are other options, such as making the dialogue boxes look like word balloons, etc., I'd love to be made aware of them!

Thanks, again, for the help!
Much appreciated!
TheKeeper


=====
Original Post
=====
Heyla and well met!

I would like to make visual novels that look like dynamic and interactive comic books. After playing with the tutorial that comes with Ren'Py, I am thinking that panel placement and layout is no different than placing a character anywhere on the screen. However, I am unsure of how to place text in captions and word balloons. If I made the caption boxes and word balloons into separate sprite images (or is the proper term "displayable?") to be placed over the panel artwork, is there code to specifically display text within those sprite/displayable word balloon and caption images, so the lettering doesn't spill over into the rest of the artwork? (I recall seeing something in the tutorial that lets you place text at specific points on the screen, but I don't think it mentioned keeping text within a particular displayable. I apologize, if I misremembered that.)

Thank you for your help,
TheKeeper
Last edited by TheKeeper on Mon Feb 24, 2014 6:39 pm, edited 2 times in total.

User avatar
Donmai
Eileen-Class Veteran
Posts: 1958
Joined: Sun Jun 10, 2012 1:45 am
Completed: Toire No Hanako, Li'l Red [NaNoRenO 2013], The One in LOVE [NaNoRenO 2014], Running Blade [NaNoRenO 2016], The Other Question, To The Girl With Sunflowers
Projects: Slumberland
Location: Brazil
Contact:

Re: Comic Book Format

#2 Post by Donmai »

Image
No, sorry! You must be mistaking me for someone else.
TOIRE NO HANAKO (A Story About Fear)

User avatar
TheKeeper
Newbie
Posts: 9
Joined: Wed Jan 23, 2013 9:53 pm
Location: California
Contact:

Re: Comic Book Format

#3 Post by TheKeeper »

Donmai wrote:Maybe something like this?
http://lemmasoft.renai.us/forums/viewto ... 85#p258785
That might be it. I'm still really new to Ren'Py, so I need to play with it, in order to see if that does what I have in mind. Thanks for the link!

User avatar
TheKeeper
Newbie
Posts: 9
Joined: Wed Jan 23, 2013 9:53 pm
Location: California
Contact:

Re: Comic Book Format

#4 Post by TheKeeper »

Donmai wrote:Maybe something like this?
http://lemmasoft.renai.us/forums/viewto ... 85#p258785
Now that I've thought about what you had linked me, as I mentioned in an edit of my first post, I realized I had been limiting myself in terms of what my options are, for what I want to do. Thanks, again, for that link! It's given me a lot to think about! I really do need to get to know Ren'Py, better, so far as what I can actually do with it. :)

User avatar
nyaatrap
Crawling Chaos
Posts: 1824
Joined: Mon Feb 13, 2012 5:37 am
Location: Kimashi Tower, Japan
Contact:

Re: Comic Book Format

#5 Post by nyaatrap »

I think there's a future plan to make it easer in ren'py, but currently you need to program by yourself. I know it's possible and not hard, but considering amount of work I have to, I just did a thing you saw it on an above post.
Anything you said can be done programatically. You can pass arguments of "position" and "balloon image" on say character definition. Ren'py has a function to adjust balloon size automatically already. But you might have to do further work on it.
Simply said, It's possible but no one did it because of amount of work.
BTW, ren'py 6.17 has a function to get a place of displayable. If you can use this new function, you could make the feature easier. (but I failed to use it on this purpose)

User avatar
TheKeeper
Newbie
Posts: 9
Joined: Wed Jan 23, 2013 9:53 pm
Location: California
Contact:

Re: Comic Book Format

#6 Post by TheKeeper »

nyaatrap wrote:I think there's a future plan to make it easer in ren'py, but currently you need to program by yourself. I know it's possible and not hard, but considering amount of work I have to, I just did a thing you saw it on an above post.
Anything you said can be done programatically. You can pass arguments of "position" and "balloon image" on say character definition. Ren'py has a function to adjust balloon size automatically already. But you might have to do further work on it.
Simply said, It's possible but no one did it because of amount of work.
BTW, ren'py 6.17 has a function to get a place of displayable. If you can use this new function, you could make the feature easier. (but I failed to use it on this purpose)
Oh, I'm glad to hear that there are plans to make the creation of word balloons and captions much easier! But from what you say, I will still need to do what I want by hand, at this time, which is what I had originally expected. Thank you for letting me know about that function! This should reduce a lot of guessing when placing text where it belongs!

So, at this point, I will see if I can get some working examples going. I have a weird tendency to make use of more complicated solutions, so if I actually have something that does what I want, I'll post it, here. That way, hopefully, I can get some help with streamlining my results.

Onishion
Veteran
Posts: 295
Joined: Mon Apr 20, 2015 10:36 am
Contact:

Re: Comic Book Format

#7 Post by Onishion »

Sorry if I'm necroing this one, but it was the closest example to what I was looking for when I searched, and wondered if any progress has been made.

I was using relatively default communication options, but decided I might like to switch to some relatively simplistic comic word balloons. Nothing too fancy, I don't intend to have different types of balloons all over the place, I think I want them to default to the top-center of the screen at all times, and that much I can do fine, but where I've stumbled is the "tails" on the balloons, the pointy bit aimed at a given character. What I want to do is have characters at Renpy's default left right, and center locations on the screen, and for the text window to display a point coming off of it that is aimed at whichever character is speaking, in the simplest way possible.

I assume I can just layer an image of a point on top of the window that generates the appearance I'm looking for, but I'm not sure the best way to have Renpy know where to place the point based on where the talking character is on the screen. Ideally I could do this without having to manually define the target location with each line of dialog, it would just know that if Bill is speaking, and Bill is currently in the left position, then point to the left, while if Fred is speaking, and Fred is in the center, put the point in the center. Then if Bill moves over to the right, shift the pointer to the right.

User avatar
Dan_Tsukasa
Newbie
Posts: 14
Joined: Wed Jul 15, 2015 2:14 pm
Contact:

Re: Comic Book Format

#8 Post by Dan_Tsukasa »

It might be a good idea to contact TheSHADOW on #renpy irc.

I had a similar request a little while ago, to use text bubbles to convey my dialogue dynamically.

He sent me the entire implementation and some great code snippets, I've been a bit overworked and haven't had a chance to do anything with them just yet, but I'm sure if you contact him he'd do the same for you.

I'd share them but I'm not 100% if its ok for me to just share the code or not, he was really kind in sharing it, but I feel a bit uncomfortable sharing code without knowing if its consented or not, so its best to hit him up on the irc or drop him a PM through the forums.

Onishion
Veteran
Posts: 295
Joined: Mon Apr 20, 2015 10:36 am
Contact:

Re: Comic Book Format

#9 Post by Onishion »

Ok, I was dabbling around with this idea, and think I have the basic concept of my intended solution, but I'm stumbling a bit on the execution, so I'd love some help with this one.

Ok, basically what I want to do is to have all character dialog display in a word balloon, relatively in the top-center of the screen, and all narration appear in a text box along the bottom. So far, so good, I just use the "who" portion of the default options to make it so that all "whos" appear as a chat balloon, and everything else, ie narration, appears in the box.

What I want to do next, is to have three possible "tails" that are designed to line up with the bottom of the word balloon, slightly overlaying it, to give the illusion that it's coming off the text box, when in reality it's hovering above it. I want one on the right side of the balloon that it pointed right for someone in the right third of the screen, I want to rotate it vertical and shift it to just left of center if the character is in the center of the screen, and I want to shift it to the far left and flip it when the speaker is to the left side of the screen. It would default to right since that's where most of my characters end up. Ideally the top of the tail would be able to line itself up with the bottom/side of the text balloon, even if the balloon shifted size, but if that's not possible then I can just fix the balloon's vertical size and manually place the tail. Also ideally there would be a way for it to know where the character is on the screen, at least via a variable I could shift each time I moved the character around, rather than having to add a location to each line that wasn't in the default spot. Apparently I only need to set this once each time the character changes positions though, so that isn't terrible. It would be more of a hassle when dealing with multiple characters though.

Visually I can do this, coding it is another matter. I was thinking that since I won't be using side images, I could just hijack the side images system, but I'm hitting some blocks trying to get it to work right. Is there any way that I can make the location of the tail appear relative to the edges of the size-shifting text box, so that it's say, always halfway between the center and right side, and always flush with the bottom, even though the size of the balloon shifts each time the amount of text in the window changes?

Here's the code I'm using btw, the numbers aren't final yet:

Code: Select all

image side arrow = "arrow"
image side arrow center = "arrow_c"
image side arrow left = "arrow_l"
image side arrow right = "arrow_r"

image arrow:
    "images/arrow.png"
    yalign 0.35
    xalign 0.7  
    rotate 0
    
image arrow_c:
    "arrow"
    xalign 0.5
    
image arrow_l:
    "arrow"
    xzoom -1 
    xalign 0.3

image arrow_r:
    "arrow"
    xalign 0.8
    yalign .15
    rotate -90

Onishion
Veteran
Posts: 295
Joined: Mon Apr 20, 2015 10:36 am
Contact:

Re: Comic Book Format

#10 Post by Onishion »

Ok, I've been playing around with the Screens and options, and driving myself nuts trying to get it to work right. I just don't understand how styles work right. I'm poured over all the documentation on the Renpy site, and there's just something I'm missing here. Basically what I tried to do is hijack the existing two-window coding, so that when the narration is talking, it displays in a text box on one part of the screen, and when a character with two-window flagged is talking, it appears in a box on another part of the screen. That much I have working. The problem is that when the character is talking, I want it to use a custom background that looks like a balloon instead of the default one. Instead, no matter what I try to do, it always uses the default background established in style.window.background. So here's what I've got so far:

Code: Select all

#From Options.rpy:

style.window.background = Frame("images/textbox.png", 12, 12) #this is the image I use as my default text box, which always shows up whether I want it or not

# This was my first attempt at defining a custom "balloon" style to apply to the intended text box. If does not give me errors, but does not seem to do anything either. 
#    style.say_balloon = Style(style.default)
#    style.say_balloon.background = Frame("images/Wordballoon.png", 50, 50)    
#    style.say_balloon.left_padding = 25
#    style.say_balloon.right_padding = 25
#    style.say_balloon.top_padding = 25
#    style.say_balloon.bottom_padding = 25

#In the Screens.rpy

 # The two window variant.
        vbox:
            ypos .2
            xpos .5
            yanchor 0.5
            xanchor 0.5 #this all correctly places the window where I want it.
            
#            style "say_two_window_vbox" #this is the default
            style "say_balloon" #this is my attempt at using my customer version, no effect.

            if who:
                window:                 # this block is the name tag
                    style "say_who_window"

                    text who:
                        id "who"

            window:   
                id "window"
#                id "say_balloon" #I've tried replacing the default line above with this one, no impact

                has vbox:
                    style "say_balloon"  #this is one of my attempts to access my custom style
#                    style "say_vbox"   #This was the default version                 

                text what id "what" color "#000000"    #I know that it is getting at least this far in, because it is at least using this color modification, otherwise the text would be white. 

style say_balloon is frame:  #this was my second attempted method of defining the balloon as using the "Wordballoon" image, this doesn't work either. 
    background Frame("images/Wordballoon.png", 50, 50) 
    xpadding 25
    ypadding 25

Now I have gotten the word balloon to display, but only by replacing the style.window.background to use it, which changes both the intended word balloon and the narration box, which I don't want. Man, these core screens are so convoluted, can someone please help me figure this out?

Post Reply

Who is online

Users browsing this forum: Bing [Bot], Google [Bot], Ocelot, Semrush [Bot]