Custom made GUI questions

[Aspie]

I'm making a game and decided to get custom gui art going for it, but have some questions to make sure it will work once I replace the default assets.

https://i.imgur.com/JWF4Iuo.png
This for example would it be possible to set something like this up for tyranobuilder where above the chatbox it has the skip/auto/log/etc button areas?

Also does it matter if the textbox and namebox are attached as one image? Or should they be separated? Same question for for the added button choices above the textbox if they should be separate or attached to textbox?

[Shimmersoft]

Definitely possible - you'll just need to get comfortable with tyranoscript buttons. You would want all elements to be separate - so textbox is its own thing, and needs to likely be set on layer=1 so that it's above character sprites (or higher as needed). The buttons need to be set to the fix layer and they'll automatically appear above other elements.

I can provide more guidance as needed, so just let me know.

[Aspie]

Originally posted by Shimmersoft:

Definitely possible - you'll just need to get comfortable with tyranoscript buttons. You would want all elements to be separate - so textbox is its own thing, and needs to likely be set on layer=1 so that it's above character sprites (or higher as needed). The buttons need to be set to the fix layer and they'll automatically appear above other elements.

I can provide more guidance as needed, so just let me know.

Thank you! :) I've got someone making custom gui elements for the game but they're not experienced with tyranobuilder and I'm not too great with understanding gui elements in general myself.

In theory if I sent them the game project's folders that have all the default gui images, would they be able to look at those assets for gui and make their custom ones based on how those look in the folders? Just to help them make the custom gui stuff?

[Shimmersoft]

You could do that, although really, you're not limited by what the default GUI looks like. It's all just graphic files, anyway, so your buttons can take whatever shape and size you want for them. I would say you could just have them mock-up a general design, as you would want it, and then that can be broken into its separate pieces and then we can worry about getting those into TB.

[jay_rab]

For the simple setup that your looking to add, if those are the only buttons your wishing to show you can use the built in User Interface editor found under the Project tab (so you dont have to worry about buttons or layers or any code)

Shimmer is correct that you are not bound to any fixed size, if you want to use them as reference you can but honestly go with what looks best, not what matches the default size. You can always adjust the width and height of the image within the User Interface Editor.

here is an example of the editor: https://i.ibb.co/wWtjwZH/user-interface.png

[Aspie]

Originally posted by jay_rab:

For the simple setup that your looking to add, if those are the only buttons your wishing to show you can use the built in User Interface editor found under the Project tab (so you dont have to worry about buttons or layers or any code)

Shimmer is correct that you are not bound to any fixed size, if you want to use them as reference you can but honestly go with what looks best, not what matches the default size. You can always adjust the width and height of the image within the User Interface Editor.

here is an example of the editor: https://i.ibb.co/wWtjwZH/user-interface.png

Thank you both very much! :) I haven't began adding the custom gui yet, but I'm looking to get it started once the person doing the art for it is done.

My gui artist was wondering how CG gallery is set up for tyranobuilder (they're used to Ren'py). I think they mean how to do the gui elements for that sort of menu screen? I know there might need to be some scripts going on, like having a button on the title screen that's labeled "CG gallery" that once clicked leads to the menu. (That's more of the script side) But I think they're looking for some examples of a project that uses tyranobuilder engine and has a cg gallery menu to see how it's set up.

(I'd assume it's like shimmer mentioned about the other gui elements, just make sure any frames, buttons, images , etc. are separate from each other?)

[jay_rab]

Originally posted by Vensus:

Originally posted by jay_rab:

For the simple setup that your looking to add, if those are the only buttons your wishing to show you can use the built in User Interface editor found under the Project tab (so you dont have to worry about buttons or layers or any code)

Shimmer is correct that you are not bound to any fixed size, if you want to use them as reference you can but honestly go with what looks best, not what matches the default size. You can always adjust the width and height of the image within the User Interface Editor.

here is an example of the editor: https://i.ibb.co/wWtjwZH/user-interface.png

Thank you both very much! :) I haven't began adding the custom gui yet, but I'm looking to get it started once the person doing the art for it is done.

My gui artist was wondering how CG gallery is set up for tyranobuilder (they're used to Ren'py). I think they mean how to do the gui elements for that sort of menu screen? I know there might need to be some scripts going on, like having a button on the title screen that's labeled "CG gallery" that once clicked leads to the menu. (That's more of the script side) But I think they're looking for some examples of a project that uses tyranobuilder engine and has a cg gallery menu to see how it's set up.

(I'd assume it's like shimmer mentioned about the other gui elements, just make sure any frames, buttons, images , etc. are separate from each other?)

I believe your GUI artist is getting confused thinking that it is a fixed image that is needed, since Ren'py requires you to script out the gallery in code. In TyranoBuilder you have a built in visual editor that helps you manage the GUI elements and reshape them to fit the project.. all you have to do is provide the image and then you can adjust it as needed using the visual editor in TyranoBuilder

To create a Gallery its as simple as going into your game settings, naming a gallery, and clicking create, then opening it in the editor adding as many thumbnails for the gallery as you like, assigning a image to each thumbnail, and your good to go after you save it.

Here is a sample view(The process goes Red, Blue, Purple): https://i.ibb.co/dMd6Bjm/gallery-editor.png

[Aspie]

Originally posted by jay_rab:

Originally posted by Vensus:

Thank you both very much! :) I haven't began adding the custom gui yet, but I'm looking to get it started once the person doing the art for it is done.

My gui artist was wondering how CG gallery is set up for tyranobuilder (they're used to Ren'py). I think they mean how to do the gui elements for that sort of menu screen? I know there might need to be some scripts going on, like having a button on the title screen that's labeled "CG gallery" that once clicked leads to the menu. (That's more of the script side) But I think they're looking for some examples of a project that uses tyranobuilder engine and has a cg gallery menu to see how it's set up.

(I'd assume it's like shimmer mentioned about the other gui elements, just make sure any frames, buttons, images , etc. are separate from each other?)

I believe your GUI artist is getting confused thinking that it is a fixed image that is needed, since Ren'py requires you to script out the gallery in code. In TyranoBuilder you have a built in visual editor that helps you manage the GUI elements and reshape them to fit the project.. all you have to do is provide the image and then you can adjust it as needed using the visual editor in TyranoBuilder

To create a Gallery its as simple as going into your game settings, naming a gallery, and clicking create, then opening it in the editor adding as many thumbnails for the gallery as you like, assigning a image to each thumbnail, and your good to go after you save it.

Here is a sample view(The process goes Red, Blue, Purple): https://i.ibb.co/dMd6Bjm/gallery-editor.png

Thank you! Sorry for the late reply, the gui artist finally finished all the assets needed. I'm having some trouble though still trying to fully wrap my head around certain things. I take it there isn't any video guides that give some basic breakdowns for the gui aspects? More of a visual learner, so the images linked are helping give me an idea of things.

I think I have a good idea on how to get the chat textbox replaced with the new gui and add the buttons needed above that chat (save, load, etc, etc.) But I'm having trouble figuring out how to add an item/box that over lays the textbox for where names show up. https://i.imgur.com/ifTNdXp.png (here's a layout example mock up made from the gui artist) It gives the idea for how the textbox elements should end up looking at least I'm trying to start with just the textbox stuff first before I begin moving into the other gui areas.

So I can easily replace the old textbox image with the new. I believe adding an item (save, load, etc, etc.) for the buttons seen will let me add the text images for those where they need to sit on the textbox. The only part that I can't figure out is the box where "protagonist" is seen.

I don't know what to do in order to get that box image as an item or what not.

[Aspie]

Still having some issues with the above problem, but I do have a understanding for the rest of what to do with that given screen gui elements. Just that one thing for the name area, trying to figure where I'm looking to find or place things for that.

[Shimmersoft]

Originally posted by Vensus:

Still having some issues with the above problem, but I do have a understanding for the rest of what to do with that given screen gui elements. Just that one thing for the name area, trying to figure where I'm looking to find or place things for that.

So am I understanding you right that what you're missing is the "name box" from your mock-up? If so, my first question would be: Can that not just be integrated into the main UI box (so it's all just one graphic)? Or are you referring to something else?

[Aspie]

Originally posted by Shimmersoft:

Originally posted by Vensus:

Still having some issues with the above problem, but I do have a understanding for the rest of what to do with that given screen gui elements. Just that one thing for the name area, trying to figure where I'm looking to find or place things for that.

So am I understanding you right that what you're missing is the "name box" from your mock-up? If so, my first question would be: Can that not just be integrated into the main UI box (so it's all just one graphic)? Or are you referring to something else?

Yes, sorry for any misunderstandings. I didn't think about trying that, adding the name box onto the actual textbox. Then just resize the whole thing as one graphic. I'll give that a try and hopefully it'll be just what I needed to get those screen elements finished. :)

Thank you for that suggestion, I don't know why something so simple like that slipped my mind to try.

[Shimmersoft]

Originally posted by Vensus:

Originally posted by Shimmersoft:

So am I understanding you right that what you're missing is the "name box" from your mock-up? If so, my first question would be: Can that not just be integrated into the main UI box (so it's all just one graphic)? Or are you referring to something else?

Yes, sorry for any misunderstandings. I didn't think about trying that, adding the name box onto the actual textbox. Then just resize the whole thing as one graphic. I'll give that a try and hopefully it'll be just what I needed to get those screen elements finished. :)

Thank you for that suggestion, I don't know why something so simple like that slipped my mind to try.

Ha, no problem. Damn brains, always trying to overcomplicate things.

[Aspie]

Originally posted by Shimmersoft:

Originally posted by Vensus:

Yes, sorry for any misunderstandings. I didn't think about trying that, adding the name box onto the actual textbox. Then just resize the whole thing as one graphic. I'll give that a try and hopefully it'll be just what I needed to get those screen elements finished. :)

Thank you for that suggestion, I don't know why something so simple like that slipped my mind to try.

Ha, no problem. Damn brains, always trying to overcomplicate things.

Good news! I believe I'm able to get the message/text box elements all figured out! I have just 2 small questions related to this stuff right now.

(1) I added new font to use, but I can't figure out if there's something special I need to do in order to give it an outline effect? https://i.imgur.com/ifTNdXp.png The text seen here has the actual text as white color, but outline around it is a darker pink. I was just wondering if there's something in the engine that lets me do this or would it be purely having to get a different font? (I was given the text fonts the gui artist used, but when put into the engine they don't have that outline effect.)

(2) It's not seen in the above imgur link, but since I now have the menu as a button on the message/text box. I noticed I still have the default engine cog wheel icon (menu button) on the bottom right of the screen. Since there's no use in in being there anymore, is there a way to safely remove it without messing up anything?

Thank you again for the help.

[Shimmersoft]

Originally posted by Vensus:

Originally posted by Shimmersoft:

Ha, no problem. Damn brains, always trying to overcomplicate things.

Good news! I believe I'm able to get the message/text box elements all figured out! I have just 2 small questions related to this stuff right now.

(1) I added new font to use, but I can't figure out if there's something special I need to do in order to give it an outline effect? https://i.imgur.com/ifTNdXp.png The text seen here has the actual text as white color, but outline around it is a darker pink. I was just wondering if there's something in the engine that lets me do this or would it be purely having to get a different font? (I was given the text fonts the gui artist used, but when put into the engine they don't have that outline effect.)

(2) It's not seen in the above imgur link, but since I now have the menu as a button on the message/text box. I noticed I still have the default engine cog wheel icon (menu button) on the bottom right of the screen. Since there's no use in in being there anymore, is there a way to safely remove it without messing up anything?

Thank you again for the help.

1) Those are branch buttons, I assume? If so, you can try going into your data > scenario folder, finding the branch button in the code (search for "glink"), and then add edge="0xFFFFF" to any point in the tag. You would just replace the material after "0x" with the HEX code you desire, and then see if that changes the outline color. I know this works on [ptext], but I haven't tested it on branch buttons, so you get to be the guinea pig, ha.

2) I expect there's a way to hide that menu button across all scenes in the code (the system effectively does this if you elect to remove the menu button when creating a game), but I'm not sure where that's at. But you can add [hidemenubutton] to the beginning of your scene(s) in order to get rid of it.

[Aspie]

Originally posted by Shimmersoft:

1) Those are branch buttons, I assume? If so, you can try going into your data > scenario folder, finding the branch button in the code (search for "glink"), and then add edge="0xFFFFF" to any point in the tag. You would just replace the material after "0x" with the HEX code you desire, and then see if that changes the outline color. I know this works on [ptext], but I haven't tested it on branch buttons, so you get to be the guinea pig, ha.

2) I expect there's a way to hide that menu button across all scenes in the code (the system effectively does this if you elect to remove the menu button when creating a game), but I'm not sure where that's at. But you can add [hidemenubutton] to the beginning of your scene(s) in order to get rid of it.

(1) Okay, sorry. I'm a little confused on if I'm mistyping things wrong, but this is what I did for the select scene to test out for the branch buttons. https://i.imgur.com/UkdAsye.png If that is correctly labeled right and in the correct area, then I'm afraid I couldn't get it to work. How would I set up a scene or the whole game for [ptext] to be seen with a colored outline? I sadly am not too bright when it comes to getting these tags in the right spots or working right, if you have a visual example to use that would be greatly helpful. :)

(2) [hidemenubutton] works! :) At least that's one down thing down! I don't think it'll break anything, but in the title scene I removed the iscript "@showmenubutton" which is right after when you choose "new game" (so if I didn't remove that, on the title screen after hitting "new game" button. It would flash the little cog wheel menu icon for a second before staying gone. Just to keep the visuals looking nice.

(3) I'm starting to piece together and replace other gui screens. For some reason my config screen c_set image buttons aren't in the right locations when paired up with the config bg image. I've tried making sure sizes of the c_set image is exact as the default. I have also tried downsizing the config bg image to 960x640 (default). That didn't work either sadly, I noticed there's two image files for the config bg images (one is jpg and other is png). I have tried making sure to replace both of them with the exact file type, sizing, etc. https://i.imgur.com/1CfAiXK.png

I did replace the config bg image in both Project name>data>image>config. and also Project name>tyrano>images>system.


Sorry about the on going questions, I feel like I nearly have everything working about 80% or so. Just a few minor issues standing in the way.

[Aspie]

Still can't seem to figure out the above stuff. >.<

Making really good progress with everything else that I've been replacing and testing out so far.