#howsitdone

[marieschlo13]

...

Well hi.

[renpyhelpdesk]

Oh yes, there's actually something else I wanted to ask; how can I change the icon -- the one that you click on to open the whole game? I know by default it should be the icon of the renpy programme, but let's say I wanted to put a new icon... (Sorry if this sounds a little confusing!!)

Hey there! Thanks for phoning in!

I'm not actually at this part in my game design so I had to do some research, this is what I found out.

I assume  you are talking about two things, the symbol for the game itself in both the window(upper left hand corner) when opened and the one for the exe file.(and the resulting shortcut)

So I'm going to give two answers, the first question is simple enough to do, it just involves adding some things to your option.rpy file. The second one is a little more difficult, since it involves converting things into different formats, but we'll get to that in a second.

First things first, you need to open your option.rpy file with your editor. That's the second option in the right most column at the top. Then in the very first section, you need to *add* some things. These customizations don't come automatically with a new project, but you can find them here. 

You are looking for this:

config.window_icon = Noneconfig.windows_icon = None

The first one creates the window icon(in the upper left corner of the game window) for Linux and Mac, and the second one is for the Windows icon. They have different requirements though both should be in .PNG format. The one for Linux/Mac should be a large image so 48x48+ and the one for Windows should be 32x32 exactly. They can not be in .jpeg/.jpg format, that won't work. Lots of photo editors have .jpeg and .png format, it's really common, so it should be easy to make and save an icon in that format.

To implement it all you have to do is copy:

config.windows_icon = "myicon.png"config.window_icon = "myiconmac.png"

Just replace the stuff in the quotes with your real icon image(two versions for each platform type) and you're golden.

But you also asked me about how to change the .exe icon, and that's going to require some work. First things first, you need an image you want to turn into an icon. I'll assume you already have one or can get one, so let's move to the harder part. You can move to a Resource Editor to make the icons, but a lot of those aren't freeware. I'll assume you want something free and easy, so let's go over your second option.

Your other option is to take the image you have created and upload or drag and drop it at iconverticons here. Use the free online version to create a 256x256 sized image, which is what you're going to need for your desktop shortcut. The website creates .icon .icns and .png formats, SO all you have to do is upload the picture you want to use for either the window or the .exe icon and you can get it here. You can download the .png format pictures you need for the first set, AND you can download the .icon and .icns formats they create.

Then go into renpy and click the base directory for your project. That's on the left hand top column second one from the top. Copy the .icon and .icns files into the base directory, and when you build your distributions the current version of Ren'Py will create the icons for you. No other futzing required.

I hope that answers all your questions, and if anything is unclear, ring me back.

Thanks you've been a wonderful audience, and remember. If your code won't compile, and you don't know why? Who ya gonna call? The Ren'Py Help Desk!

[renpyhelpdesk]

Hello! I would like to ask, how can I shift the text more to the right to fit into my text box? I’m not too familiar with all the coding… ;v; Is it a probem with the textbox? I was hoping to make a textbox like those shiny professional-looking ones (eg the one for (P)lanets!). If it’s not too much to ask, could I ask you how to make the textbox as well? I’ve already used the one on the renpy website, but my textbox ended up being too small [the one in the picture is my second draft]. i’m still trying to understand the whole GUI thing as well tbh ;v; I’m sorry for bombarding you with so many questions… orz

___________________END ORIGINAL MESSAGE_________________

Ren'Py reply:

Hey there all you kooky cats and dogs, we interrupt your regular programming to bring you a Q all the way from a foxy dev in need of some assistance.

They are trying to customize their text box and are running into some trouble! Don't worry though, I'm going to walk you through the whole process of basic customization. 

So, to get to this point, our gutsy little dev has replaced the background for the "say" window with an image. This is much easier than it sounds! First things first, go into your Options.rpy file. If you open your Ren'Py launcher and look on the left hand side, it's the button below the script. 

Ok cats and dogs got it open? Fantastic! Next thing you need to do is scroll down until you see this:  "#########################################

    ## These settings let you customize the window containing the

    ## dialogue and narration, by replacing it with an image."

Everything is this section is going to let you customize your "say screen" aka dialogue window. The first thing this dev did was change this:

"# style.window.background = Frame("frame.png", 12, 12)"

This little piece of code is the styling for the background of everything with a "window" ID. If you looked in your Screens.rpy file you'd notice that the dialogue screen(called the say screen over there) has a "window" ID. That's why changing this, and everything below it, chances the "say" screen.The first thing they did was change the Frame.

To do that you have to have a replacement picture for the automatic screen generated with your theme. You have to create one yourself, preferably in a photo editor like Photoshop or Gimp, just so it's easier. Then you save the png file. Make sure you place it into the game directory, or Ren'Py won't be able to find it!

Then you replace "frame.png" with the name of your created text box. Not done yet though. You see those two numbers? Those are the size of the corners of your png file in pixels. The system uses this to stretch the box to its needed proportions in game so be sure to add that in. How big to make the corners? Well it depends on the shape and size of your image. Play around with it until it looks right to you.

So they did that, but gosh, the text isn't in the right place! Stay cool cats and dogs, because there's a solution to that right in the options file just commented out.

"# style.window.left_padding = 6

    # style.window.right_padding = 6

    # style.window.top_padding = 6

    # style.window.bottom_padding = 6"

This controls how far from the edges the text inside the window appears.

"# style.window.left_margin = 6

    # style.window.right_margin = 6

    # style.window.top_margin = 6

    # style.window.bottom_margin = 6"

This controls how far from the edges of the entire game window the dialogue box appears.

I'll do the second set first. Change the values there(in pixels) to add a space between the edge of the say box and the edge of the game window. Doing this moves the edges of the window away from the edges of the game screen, leaving space beside it that shows the background image of the game instead of the Say Screen.

Here's a good example with a large margin.

But our dev is having problems inside the box, not outside. No problemo! That's what the "padding" style section is for. That tells Ren'Py how far away from the edge of the Say Screen to place the text inside. All you have to do is un-comment and tell the system how many pixels in you want the text from the sides.

With those options you can customize it so it's closer to the right than left, or top than bottom, but if you just want to place them equidistant:

style.window.ymargin = 6

style.window.xmargin = 6

style.window.xpadding = 6

style.window.ypadding = 6

The ymargin tells the system to have both the top and bottom margin be this number, and the xmargin tells the system to have both the left and right margin be this number. It's equivalent to setting the right and left or top and bottom margins to the same number. The same is true for the xpadding and ypadding. The stuff at the beginning is to tell the system what style these custom setting are for. 

The last thing you need is tell the system the minimum height the Say Screen will take, no matter how little is placed on it. Think of it as the automatic default size.

 # style.window.yminimum = 250

This number includes the padding and margins automatically, so keep that in mind.

The best way to make the best looking custom text box is to fool around with it until it looks like something you want. You can design the entire look in GIMP or on a sketch pad, and then replicate it in Ren'Py so you know what you're going for. This takes time and planning, so don't fret if it doesn't come out right the first go around. Just keep tinkering, and you'll get it right.

This only covers if you want your speaker name and their words in the same box. If you want to know how to work a two-window system, tune in again. I'll be covering it in a tutorial outside of an ask.

For additional reading and examples go here and here.

See you next time you cool cats and dogs and remember: If your code won't compile and you don't know why? Who ya gonna call? The Ren'Py help desk!