I've been playing around with using screens/making screens for a while and I want to share a bit of what I've learned for the purpose of making simple games. By no means do I completely understand this stuff, so once again I must preface with this example is the result of trial and error.
I spent a lot of my time scratching my head about this thing called screens when I wanted to start making a short game for fun/a hobby a few months ago. However, I couldn't really find anything that explained what they were in the terms for inept people like me. Sure, there's some in dept explanations of this stuff out there, but I got so bogged down in the jargon of it all none of it made any sense. Cue so much trial and error it made my brain hurt and I wasted a lot of hours reading things that made no sense to me.
Anyway, to the actual meat of this post = a couple of examples of screens that can be used/modified for making games!
First, a screen = something that will display over the main game that doesn't have anything to do with the storyline progression. What is in the screen might be important to the story, but it won't make the story go forward when it's brought up.
Examples = an inventory, character stats, affection stats, phone/message systems, etc etc along these lines
How do you make one? All you have to do is name it and then put the code in either the screens.rpy or in a new .rpy you've created. For example, if you're making an inventory you could make one called --> screen inventory: --> and your coding would go under this!
Example 1: Simple Inventory Screen
There's a lot of different codes you can use for an on screen inventory (some simple, some complicated) and some great systems you can download the code for and put them into your game. If you're going for simple, like I did, there's a code from the ren'py cookbook that gets the job done with minimal headaches. This can be found at CLICK HERE.
Take the code for the simple onscreen inventory and put it in your script.rpy. You can also take the code for the money system, which will come in handy if you want to also include how much money your person has in the inventory screen. Follow the instructions in the code and items will be added/removed. To show whoever is playing what they have on hand at any time = why screens are useful.
Look at it! It must be some form of voodoo magic! It's also simple as hell and not exciting/cool, but it gets the job done for me.
Now, for the how to do this code wise for the cookbook stuff, here's thanks to code I've found from wise people on the Internet with some tweaking by me to get what I want for my game.
link to picture of code
Some explanations
add "gui/frame.png" xalign 0.5 yalign 0.4
This business is the box image I made to put the inventory in. The vbox business creates a box where upon the items will be listed vertically one after and the parts going along with the viewport is what creates a scroll bar (since the box I made is small, I need a scroll bar).
This part is a simple screen I made to put the imagebutton I made to call up the actual inventory. It features an idle/hover and is aligned to the spot on the screen I want it to be on. The Show("inventory") part is the action that actually brings up the inventory.
label "**Money**"
text("$ %d" %money)
I added this to my inventory to show how much money my character has as well.
It's simple and it can be edited to fit lots of different layouts, or even accompany images, or be displayed in various ways!
Example 2: Making Some Kind of a Cell Phone Screen
Cell phones are cool things and I'm working on putting one in the game I'm making. In another post I rambled about editing the Basic Message System to fit onto a phone screen image. I'm going to expand on what I did there with more screens!! More screens = more fun.
Here's an image example of what I mean. The small image of the phone to the right is an imagemap that uses the Basic Message System coding to show the # of new messages. I have edited the code further and rerouted the code from screen mailbox: to a new screen that calls up a shitty simple phone image with 3 options. I will explain further:
I wanted 3 options the player could choose: 1. Messages = goes to the basic message system screen. 2. Contacts = goes to a screen that gives descriptions of the characters. 3. A button to exit the screen and go back to game play.
These 3 options are all imagebuttons.
Lots of screens \o/!
Now, how to make something like this. First, if using the Basic Message System code, you need to reroute to the new screen you're going to create. Find this part in the code under screen mailbox_overlay: --> action Show("mailbox"): and change mailbox to whatever you name your new screen (in messages.rpy)
NOTE: I also went back into the messages,rpy and changed the location of the exit textbutton to go back to the new screen that calls up the 3 option menu thing.
Then go into the screens.rpy or where ever you're making your new screen and make your screen. I called my screen 'main_phone.' Here's a picture
link to picture of code
Under screen main_phone: I have my imagebuttons coded and aligned where I want them. They each have an action that bring the result I want.
Hide("main_phone") = closes the screen and brings us back to gameplay
Show("contact") = brings up the contacts screen
Show("mailbox") = goes to the basic message system
Cool, easy enough. Now, here's some example code to show a bit about making a character description screen. Everything I've done so far is still on the same phone image background I've been using, so it will all fit on the phone.
Here's a rough image example of how this can look. It's still a work in progress in my game (which....is obvious lol).
I called my character description screen --> screen contact --> you can see that I put some code under it to 1. just make sure my phone image doesn't disappear bc i'm paranoid and 2. align it up good.
I created a hbox to align up my textbuttons that will call upon each character description horizontally on the bottom on the phone image. For the textbuttons, there is some trickery that must be done to do multiple actions at once. I'll explain this madness:
For character Bam Bam, I want to show Bam Bam's profile but I also don't want to see any of the other characters! I don't want to click Bam Bam and see Mark underneath him or over him or anywhere on the screen. So to accomplish this, that is why there are all the Hide(BLAH)'s in the brackets. This will ensure only Bam Bam is on the screen.
When the person is done looking at the screen, we also don't want Mark or Jackson's or whoever's mother flipping face/description to be stuck on the screen forever. We ensure that won't happen by all the Hide(BLAH) for each character and ending with the action Show("main_phone") to call back the original phone screen.
Each character from the contacts list has their own screen! Yipee!
link to picture of code
Short explanation of this:
add "gui/jkpop.png" xalign 0.25 yalign 0.45 --> is the code that's adding the floating head image I have for each character
The vbox I'm using is the same as I'm always using.... bc yes. I've aligned it to the right of the head, sized it with area for the scroll bar to be happy as a clam. I'm using text: to place my description writing.
/phew/ this is the end! It's just a bit about what I've learned about how to use screens in a simple fashion to get the job done. To those reading, hopefully it inspires you to butcher what I've done here and make it better or make your own screens!
(Ren'py) A Modified Basic Message System Code Example
I want to share my code manipulation of this really great and useful basic message system made by saguaro @ lemmasoft forums. I want to preface this with I don't know what I'm doing half the time there's probably much better and easier ways to do everything I do, but yolo! Throwing this out there in case someone gets something out of my long process of trial and error.
This is more or less a rambling story of my adventure in figuring this out.
First, the basic message system is great and I'm looking forward to figuring out where & how to use it in my pet project only for fun timez game. However, my aim in using it is to make the thing look like it's messages on a phone and make everything pretty to fit in with the look of my game so far (original code = too blocky looking for what I need). In the end, I came up with something that looks like this: it's not perfectly what I wanted, but I'm no whiz at this so it'll do pig.
Now this boils down to how I did this: Thanks to tips and changes on the forum link (thanks!), I made the coding modification of using an imagemap instead of a textbutton to call up the Message System screen (which is in this case the phone screen). Cool that was easy enough. (Note: make sure the variable is new_message_count() to get that working right).
To do all the other changes and manipulate it onto the phone image I made some changes (after doing many random changes to figure out how the original code worked bc I'm inept and not ashamed to say it).
Under the --> screen mailbox I put in my phone image and aligned it:
add "phonescreen.png" xalign 0.45 yalign 0.4
Okay cool, but there's still the vbox/hbox to manipulate so it will resize and fit on the image. Under vbox the area needs to be changed to fit the size of the box I want. I changed mine to area (0,0,560,93) --> playing around with width and height here. For hbox I changed it to area (0,0,560,180). That takes care of the pesky boxes.
I also fiddled with the screen mailbox_commands and added in area (0,0,400,0). I can't remember why I used 400 in specific it was all just trial and error to make it fit. I wanted to figure out how to just align the screen, but I flopped at that and well.......this gets the job done good enough for me.
Things still don't look nice and dandy until the init -2 python block has some fixes under it.
First, the style.mailbox_vbox.xfill and style.mailbox_label.xfill have to be changed from True to False to get rid of the overflow to the edge of the screen.
Next, I don't want the background color from my theme in options.rpy going over the 2 minutes I spent in photoshop making a gradient in my phone image!!! No I will not settle for that! To fix that, a simple image file that's completely transparent can be set as the frame background. I made one that was 20x20px's called transparent.png and called it a day. To fix that style: style.mailbox_frame.background = "transparent.png" is added to the list.
The frame itself has to be aligned so everything will go where it should go on the phone image where it belongs. I had to change this part: style.mailbox_frame.xalign = 0.46 & style.mailbox_frame.yalign = 0.44 to my new numbers get things where I wanted it.
EDIT: I did some further tweaking and want to put this in as well. I edited the screen contacts: because what I have going on here makes it transparent and words over words is hard to read. I added style_group "contacts" under frame: in the contacts screen in order to make a new style and give back a colored box background.
I had to put this type of thing in the init -2 python: block
And to finish it all off, I had to go back into options.rpy and do my style customizations for the text and buttons in the box since I now made a new style for 'contacts.'
Yes! Success! I did it! The only other things I did was to tweak my styles in the options.rpy to get the text looking as I wanted for the screen (which the shift+i key did well to identify what changes needed to be made).
Thanks to all the crazy shit I think I learned in this process I was able to fix my very simply done inventory's vbox (essentially just a box with words in it lol) to having a scroll bar after staring at this code for long enough. Also thanks to the different people who worked on this code and helped people like me who have little background knowledge and just want to have fun and make a neato simple game :)!
discoholicmusic
pixelskylines
stormborns
romaincrisis
blakekathryn