Ren'Py Tutorial Image Buttons

hello everyone i am back at long last with another rimpai tutorial um sorry i missed one of these last week i've been busy kind of getting my other series off the ground but i'm going to try to start doing weekly rem pi tutorial updates again and today we are jumping in with kind of an involved topic that i really enjoy doing we are going to look into doing image maps so basically this will allow us to click on different parts of the screen in order to jump to different parts of our code and so what i'm going to do is i'm going to set up a scene in our bar scene that we've been using but i'm going to have it to where we can click on the bartender in order to talk to him or click on one of the bar patrons in order to talk to him so this way we can again click on different areas of our um of our background image in order to jump to different areas of our code jump into different dialogue sections or entirely different parts of the game pretty much whatever you want to do the possibilities with this are endless the way that we're going to accomplish this is by using something called image buttons i think that this isn't technically an image map setting up an image map is a little bit different however i much prefer using image buttons the way that we're going to do here it's a lot faster to do a lot easier to do and a lot easier to grasp as well i used to use true image maps but in order to do that you had to know the exact pixel point of every single image button on this screen and even then you can only do it with perfect squares so the way that we're going to do it we're going to be able to do it with irregular shapes so i'll show kind of show you what that means as we go along if you're a little confused with my explanation don't worry about it everything will become clear so i've got photoshop open so you all know that i'm a huge fan of using open source software um however photoshop is the only image manipulation software that i'm even a little bit knowledgeable with if there's enough interest in this kind of thing then i may look into learning and doing some tutorials but for now this isn't really an image manipulation tutorial i'm just using photoshop as a means to an end so i'm just going to show you how to accomplish this in photoshop alright so i've got my uh bar open my bar image and so i've got my bartender there in the middle and then a patron there just to the right and so i'm going to make it where you can either click on the bartender or click on the patron in order to to talk to them all right so the first thing that i need to do is i need to create a couple of extra images so if you've never used photoshop before they use a concept called layers where basically you can layer images on top of one another in order to kind of do different manipulations independently that allows you to focus on just a specific part of the image and not affect the the image as a whole so what we're going to do is we need to create two images for each of our image buttons we need to create one image that is going to be that image when it's just sitting by itself we're not interacting with it then we need to create another image for what it's going to look like when we hover over it so basically what this is going to do is when we're just sitting looking at the image it's going to look just like this but when we hover our mouse cursor over one of these images it's going to shine it's going to like have a white light over it which is going to let our player know that that is an object that they can interact with that should be really really obvious so the first thing that we need to do is create our images so we already have our background image we don't need to do anything with it but we got to create our other images so the first thing i'm going to do is i'm going to zoom way in by using uh control and the plus key so we need to get some really fine control not quite that fine that should be good and what i'm going to do is i'm going to basically cut out this figure and put it on its own layer and i'm going to use that with the polygonal lasso tool so this might have uh just the regular lasso tool the freehand lasso tool selected by default um if you have a really steady hand or if you have a drawing tablet i have one but i very rarely use it you might want to use that where you can actually draw around the image in order to select it however i'm going to go ahead and use the polygonal lasso tool so if you right click it'll give you either the lasso tool which is the freehand version or the polygonal lasso tool and right now i've got that one selected i'm going to go ahead and click on it anyway so every time i left click it's going to create a point connecting it's kind of like connecting the dots it's going to create a line from the last point to the current point and i'm going to do that all the way around this image so you can start anywhere you want and it doesn't have to be perfect we're just going to get it kind of sort of pretty close and like i said if it's not perfect you won't be able to tell we're zoomed in really close right now so we're going to be able to see the pixels don't exactly line up we're going to be able to see kind of the imperfections right now we're zoomed in close enough we can actually see all of the individual pixels but again as we zoom out all those imperfections are going to disappear and it's going to look for all intents and purposes it's going to look pretty well perfect all right a little more than halfway there and again just every time i click it's creating another point and i'm just doing that just to create an outline around this character and then the last point is going to be where our first point is and you can see that kind of circle icon pop up that lets us know that we're about to close the loop and that creates our selection and oh i just realized i messed up and i accidentally missed part of his body there i went around his arm so i'm going to um i'm going to do that one more time i'll get this part out so you don't have to watch me do that all over again take me just a moment there we go so once we have our bartender selected we're going to right click and select layer via copy so that is basically going to copy that bartender to a new layer and again it's going to copy it so it still exists in our background image if i hide that layer then nothing happens it actually hides that layer but it's a copy so you can't really tell if i hide our background layer then we can view that one independently and i can turn it on and off as well so now you can see again that those are on two separate layers there we go all right i'm going to go ahead and do the same thing with our other uh with our other bar patron there we go so now i've got that guy selected i'm going to do the same thing that i did with him i'm going to right click by the way sometimes when you right click this to create a new layer the layer via copy and layer via cut might be grayed out i might not let you do those so you might have to just say new layer which will create a blank layer then go back right click them it again and those two should be there and they might not happen with you but sometimes it does it's a weird quirk of photoshop i'm not really sure why all right so we're gonna do new layer via copy oops and okay so right now it says that layer is empty because i have layer two selected let me make sure i have layer one selected now i'm gonna create layer via copy there we go and now we have our other bar patron there selected so what we're going to do is we're going to create buttons out of these they're going to be image buttons literally a button made out of an image so each of these images are going to be buttons that we can click on and do different things to to interact with them all right so we're not done with these images quite yet so we have to create like i said two images for each one so we've got what we call our idle images so this is when the buttons are idle we're not interacting with them they're going to look just like this so now we have to create what they're going to look like when we hover our mouse over them and this is pretty simple and this you can kind of play around with a little bit and get an effect that you like but i like to make just kind of like a glowing white effect so i'm going to select layer 2 which is our bartender and right click and i'm going to go to blending options and i like to do an inner glow and if i click that you can see he highlights in white and you can mess around with the opacity functions noise different things like that i like to leave the noise really low usually at zero like maybe a good medium opacity and i'm just going to leave that one there then i'm going to go down to outer glue so it gives them kind of an outline and this one as well you can play around with a little bit i'm going to make that spread a little bit more there we go so it's kind of like a soft glow on the outside just letting him know that we can interact with him there we go and then i can click the eye icon next to effects to turn that on and off we're going to use that in a moment and in order to make sure that we have some consistency in our style i'm going to right click that again i'm going to say copy layer style right click layer 3 and paste layer style so now he looks exactly like that guy did and the same way i did before i can turn that on and off so right now i'm going to leave both of these off i've already got this bar image um i think i already have that in the folder but uh let me double check real quick i've got bg bar yep it's already in there i think this is going to have a it's gonna have a transparent background that's okay for now uh i'm not gonna go and put in another background in there it'll be all right we're just gonna have transparent pixels we'll do it with it it'll be fine all right um so next thing i'm going to do is oh uh also in that folder by the way i have my other two images that we're going to use when we're actually talking to those characters so those could be done a little bit better but i'm going to leave them the way they are for right now again they'll be fine for for illustrative purposes all right so the next thing i'm going to do is i'm going to create my buttons so here we have to name our files very very specific things so the first thing i'm going to do is i'm going to do my bartender button so i'm going to hide layer 1 by clicking the i and i'm going to hide layer 3 so this is going to be our idle image so i'm going to go to file let's go to export export as sometimes it takes us a moment to pull up all right so we've got a png file that is good uh 1920x1080 resolution that is also good all right i'm going to click the export button then i'm going to navigate to my file and now again we have to name these things very very specifically all right so this first one i'm going to call it background bar or bg underscore bar i'm going to do a another underscore and let's call this one bartender another underscore and then idle so the important part is that first of all both of these images both the hover and the idle image have to be named the same thing and the idle image has to have idle at the end and the hover image is going to have hover at the end so they both have to be bg underscore bar underscore bartender underscore then either idle or hover so you can name these anything you want as long as they have idle or hover at the end for their respective image and they both have to be named the same thing except for that last except for that last part all right so i'm going to call this one bg bar underscore idle all right and let's save that there we go now i'm going to turn on the effects and you can't really tell that the glow is there uh you can trust me it's there you can kind of see the inner glow but outer glow gets lost in the transparent pixels you can kind of see it a little bit we're going to do the same thing we're going to go to export export as there we go hit the export button and then this one i'm just going to click on that so it automatically pulls up that file name it's less of a chance of error and then we're going to call this one bartender hover and then export that one all right we're going to bring everything else back up now we're going to get rid of our bartender get rid of our other layers so now we just have our bar patron and this is without effects so we're going to go to export export as export and this one is going to be bg underscore bar underscore patron idol and then just like with the other one turn on effects oops i accidentally did a quick export but i think this will work though you can use the quick export function or a feature rather okay this one we're going to go there's my patron and instead of idle we're going to call that hover there we go and that's all the setup that we have to do so give me just one moment and i'm going to pull up renpi and we're going to get into our coding there we go all right so now i've got adam pulled up and sorry oh goodness there's fire and rescue parked outside my house and they're taking my neighbor off in an ambulance oh my god so i hope everything's okay that just kind of caught my attention there for a second oh well alrighty then we will press on i guess i hope everything's all right over there all right so now i've got my entire game script cleared out all i have is label start and then c bg underscore bar with dissolve and so what we're going to do is we're going to get into the basics of what's called screen language and this is what we use to customize screen and customize menus i'm not going to go too in depth in screen language i'm only going to use the parts that we're going to use right now but basically whenever you create a screen that's going to be like an in an image map like we're about to do or a menu screen as far as i know you can place these screens anywhere there's actually a screen dot rpy file that's automatically created that has all of your menu screens and your dialog screens that are automatically called whenever you do menu and dialog options so you can create your own and you can customize those you can put them in screens if you want or you can just put them in line in your code wherever you're going to use them so the best practice is if there's a screen that you're going to be using a whole lot like the same image map then you should probably put that in your screens uh in your your screens.rpy file however if there's one that you're only going to call once you can just put it in line in your code so that's what we're going to do so the first thing i'm going to to do is define my screen so we're going to say screen space so the screen is the keyword that lets us know we're about to define a screen and we're going to call this bar nav that stands for bar navigation it's going to let us navigate around the bar and that's it and oh one thing i forgot is this is technically a function so we have to put parentheses after it um so you don't really have to understand what that means right now but i do have another python series that's ongoing i will link to the video above that explains kind of what functions are um but for now whenever you call a screen just know that you have to have those parentheses then we're going to put a colon after it and go into a coding block and the next thing we're going to do is add our background screen so we're going to say add bg bar and i don't i think the dot png the file extension is optional so we're going to try this i'm just going to say bar and then we're going to say modal true so this modal keyword is going to something that we have to put in our image maps um i think this should work without it but i always tend to put it in there it's basically going to make sure that whenever we click on anything it prevents you from interacting with screen displayables that are under it or or below it but for now just make sure you have that in there again you don't have it in there i think it'll still work but we're just going to go ahead and put it in there just in case and then the next thing that we're going to do is we're going to define our image buttons so we're going to say image button auto so this is going to automatically create our image button for us so we don't have to define exactly what the pixel location is and then we're going to put in the base name of our image so this is our image without the hover or idle under it so let me double check that and see what our file name is there we go so we'll do the bartender first so it's going to be bg bar bartender so bg bar bartender and then the final underscore so this is where we have either idle or hover and so we're going to put in percent s percent s is just a placeholder so it's automatically going to use the idle or the hover image wherever it needs to so again that percent s is just a placeholder that's where the idle or hover would normally go in the file name and this is just so that the image button knows which one to use in which case all right after that we're going to do another colon we're going to say focus mask true and this makes it so that if there are any transparent pixels in our our image map there shouldn't be but if there are it's going to make it where everything inside that box is clickable if you don't have focus mask if there are any transparent pixels and you click on them it won't work um so again that just makes it so if there are any transparent pixels it'll still work all right after that we're going to say hovered set variable make sure set variable is all one word but set as capitalize and variable is capitalized and this is going to set our tooltip which is just going to be a thing that tells us like what we're hovering over honestly i always put the tool tips in there in the hopes that i'm going to use them later but i never really do but again like i said i always use them just in case so ideally you'd be able to hover over that and then it'll tell you that you're hovering over the bartender but like i said i typically don't use those let me look into that i'll have to research that a little bit all right and we're going to say unhovered set variable so if we hover over it it should say bartender again it's not going to the way we're going to do it today but we might add that later then if it's unhovered we're going to put in an empty string again some of this might be a little bit confusing but i just started a couple of different series on python programming so if you need a refresher on variables and string formatting um or or anything like that uh syntax be sure to check out those videos i'll link to one to the playlist above um but for now as long as you just type things in pretty much exactly as i'm doing them or you know just just uh replace your own image names or whatever these are everything should work fine all right so for that one we're going to put an empty string so it won't say anything whenever it's uh whenever you're not hovering over it and then we're going to say action so action is whatever you want to happen whenever you click on it so our action is going to be jump and we're going to jump to a label called talk to bartender which we haven't created yet we're going to create that in just a moment and that's it that's our first image button for the second image button we're going to do pretty much the same thing image button auto i'm going to go through this one pretty quickly this is going to be bar patron percent s focus ma spell there we go focus mask true hovered set variable screen tool tip patron all right then an empty string and then action jump oops oh i forgot to close my string up there there we go talk to patron all right after that i'm going to go down here and create my two labels that we're going to jump to label uh talk to bartender and label talk to patron and that's going to put a pass in there right now so they won't do anything we're going to fix that in just a moment all right so that is how we create our image button screen that's pretty much all we have to do there's only one thing we have to do and that's that we have to call the screen so this is part has to go in our code when we want this screen to be used so everything here can go pretty much in any file i would recommend putting that in your screens.rpy if you're going to be reusing that but for now we can just put it right here inline but we have to call the screen and we're just going to say call screen and then put in the name of the screen which is bar nav and that's it that's all we have to do and that's going to call our screen when we use it all right and i'm going to go ahead and put in just some quick placeholder code for when we for when we click on those buttons and talk to our people all right so on this one we're going to say scene we're going to do bg um i think what i name these bartender with dissolve and okay i didn't haven't defined the bartender or anything yet so here i'm just gonna pause for like two seconds and then jump back to the start there we go so all it's going to do is going to show the bartender for a few seconds then it's going to jump back to the start i'm going to do the same thing here seeing just to show you what happens when we click on these all right scene bg underscore bar patron is what i call this image oops all right and same thing we're going to pause for two seconds then jump back to the start all right everything should be working let's go ahead and run this and check it out all right home screen menu is working just fine let's go to start so it brings up our bar and now oh there it goes so when we hover over our uh image buttons they do highlight let's see if our click works we're going to click on it my resolution is wrong but i don't care there we go two seconds then it jumps back same thing with this guy two seconds and then it jumps back so yeah apparently i had my resolution set wrong on these which is why it zoomed in really close i thought i thought i had everything at 1920x2 1080 but i could be wrong but at any rate that is how we do image maps believe it or not this is the easy way of doing it it is a little bit involved um but you don't have to understand everything i like to try to explain everything as best i can some of this stuff i don't fully explain i don't fully understand quite yet like the modal true um not 100 sure what that does i think that just makes it where if there's a button under that image button it makes it where you don't click on that one like you just make sure that you click on the image button i think is what that does um but again as long as you just understand the syntax and know what to put in that's all you really have to understand but if you want to get more under the hood with this code and really understand the syntax and things check out my aforementioned tutorial series that i just started i've got one there's a very slow moving basic python tutorial that i'm doing with my daughter e and the other one is moving a little bit quicker and it is specifically geared towards creating games with python so as of this recording i've got a couple i think i've got uh two videos out i've got another two that are going to be on the way very shortly and this one we're going to do more like kind of action games like we're going to get it first into like text based games guess the number and hangman and things like that then we're going to get into some some actual uh visual games so it'll be really cool and i'm really excited about that one but if you learned something today or if you enjoyed this video don't forget to hit the like button subscribe if you haven't already and hit the notification bell so you never miss one of my new videos of course i have lots of great stuff coming up and with that we will see you in the next one thanks for watching goodbye

Channel: Coding With B and E

Views: 24,865

Keywords: renpy, ren'py, tutorial, basic, imagemap, image map, python, coding, intermediate, image button, screen language, renpy tutorial, renpy tutorial for beginners, renpy games, renpy screens, renpy visual novel tutorial, visual novel, visual novel maker, visual novel creation, game making, game dev, game development, game design

Id: BJ3pqhQf2Rw

Length: 25min 57sec (1557 seconds)

Published: Thu Jun 17 2021