Jump to content

Helvetica Standard

Contributor
  • Posts

    488
  • Joined

  • Last visited

  • Days Won

    3

Reputation Activity

  1. Like
    Helvetica Standard reacted to Kosakyun in Hyperdimension Neptunia+Spin offs   
    Mana pls. Chapter 2's the only long chapter.
     
     
    I won't be getting RB3 'till late August. Money problems.
    P-Please no spoil, Veti. </3
  2. Like
    Helvetica Standard reacted to darkotakusouls in Moe Wars: Character Development Episodes (Completed)   
    Here are the 3 character development episodes I have made using Ren'py. I figured I should put them in the same thread since they go together, but you don't really have to read them in any order. I am working on the main conflict episode, which I may need help programing but I will make a thread for that later after I at least get the ruff draft done.
     
    I tagged it "Sexual Content" but it doesn't actually have any sex in it. It's just the has strong sexual styled comedy. On Ren'py I had labeled it +16 because of this, but there is no nudity or anything in the visual novels.
     
    Summary: Devil Corp is holding tournaments to test out their new nanobots known as REN. These nanobots can protect users from harm, spawn weapons, and even give them supernatural powers. These are the character development episodes that happen before the tournaments.
     
     
    Moe Wars: Crimson Salmon
     
    Summary: Hannah gets a free paid vacation to the tournaments. To make it better her best friend Maria, who she hasn’t seen in a long time, joins her.
    [5,255 words / Ages 16+]
     
    Download Links
    (ZIP / Mediafire)
    http://www.mediafire.com/download/iwwn399iijb62zh/MoeWarsCD1-1.2-all.zip

    (RAR / Ge.tt)
    Part 1: http://ge.tt/2Y2FBnB2/v/0
    Part 2: http://ge.tt/2Y2FBnB2/v/1
     
    Ren'Py Listing: http://games.renpy.org/game/moe-wars-crimson-salmon
    Download Links on Moe Wars: http://moewars.icyboards.net/showthread.php?tid=2253
     

     
     
     
    Moe Wars: Golden Daisy
     
    Summary: Nina gets a job offer from them to be a guard while they hold the tournaments. The pay is good, but she’s not sure if she wants to leave her best friend June. What if something happens to her?
    [6,375 words / Ages 16+]
     
    Download Links
    (ZIP / Mediafire)
    http://www.mediafire.com/download/vhtlakv30pmquyf/MoeWarsCD2-1.2-all.zip

    (RAR / Ge.tt)
    Part 1: http://ge.tt/9qkfLF62/v/2
    Part 2: http://ge.tt/9qkfLF62/v/3
     
    Ren'Py Listing: http://games.renpy.org/game/moe-wars-golden-daisy
    Download Links on Moe Wars: http://moewars.icyboards.net/showthread.php?tid=1949
     

     
     
    Moe Wars: Party Possums
     
    Summary: After a horrible event, Alice falls into a deep depression. But that isn't going to stop Lilly from trying to cheer her up.
    [4,087 words / Ages 16+]
     
    Download Links
     
    (ZIP / Mediafire)
    http://www.mediafire.com/download/w2q1izlxjg4aa8v/MoeWarsCD3-1.4-all.zip

    (7ZIP / Ge.tt)
    Part 1: http://ge.tt/8GAprjJ2/v/0
    Part 2: http://ge.tt/8GAprjJ2/v/1
     
    Ren'Py Listing: http://games.renpy.org/game/moe-wars-party-possums
    Download Links on Moe Wars: http://moewars.icyboards.net/showthread.php?tid=2632
     

     
    Wow this thread too a while to make... I hope you enjoy my visual novels.
    If you interested in the Moe Wars universe you can find more information about it here: http://moewars.icyboards.net/showthread.php?tid=2288
  3. Like
    Helvetica Standard reacted to RokAbiel in Galaktika Gamble [Might Need BG Artist]   
    "Life is a game of luck and chance. You win some, you lose some.
    But what do you do when the whole universe is against you?
    Some people say if you wish upon a star, your dreams will come true.
    One thing is often forgotten though. A nightmare is also a dream."
    -Neil Doune
     
    Hello! I am Rok Abiel, and as of right now, I am the Character artist, CG artist, Animator, Story writer, Script writer, and Programmer for Galaktika Gamble.  I've almost 7 years working on the story, and I've been working on making it a VN for about half a year now.
    As of right now, the only other people working with me are voice actors, and an awesome musician(Amajor). Auditions for voice acting are over for now, although another casting call may pop up later in the future for the second visual novel.
     
    Basic Plot

    Neil Doune could easily be labeled the most unlucky man in the world. He see's life as one big game of luck and chance, knowing that at anything could happen at any moment, with any choice he makes, any move he makes, or even any word he speaks. Followed constantly by death, the world is literally trying to kill him off and he doesn't know why. He's escaped many natural disasters and other deadly situations, but just barely, causing other people to die in his place. During his childhood, his mother went missing and his twin sister was murdered shortly after. However, no one was able to find his sister's killer. As for Neil's father, he never met him or heard anything about him, and everyone he's known never talked about him either. After another deadly event, leading to the death of a mother and child, Neil yells at the sky in anger. He yells that he wishes to figure out what happened to his family and how it connects to his deadly situations. By accident, he summons a Stellar named Alhena, claiming to be there to help him obtain his wish. However, Neil and Alhena, along with Neil's best friend Ivan and more friends they make along the way, soon realize there are a lot of dark secrets hidden from them, and things are a lot more serious than they realized.
     
    Stellar Info
     
     
     
     
    I don't have all character sprites drawn yet, but I'll add a short description about physical appearance too. That said, moving on.~
     
    Characters

    Neil Doune
    Age: 21
    Hair: Straight, brown, upper/mid-back length
    Eyes: Black pupil, yellow irises
     
    Often appears to be a jerk to new people he meets, but he's actually quite nice on the inside. He acts cold and standoff-ish because he's afraid of new people becoming involved with him, afraid that more innocent people will die.  He would love to have more friends and be around them, but he thinks that being a jerk and hurting someone's feelings to keep them away is better than that person dying. Neil does enjoy to be with those close to him though, but lives in fear that he'll see them die. Neil also enjoys a little humor from time to time but often leans towards sarcasm and pranks, which just make him appear to be even more of a mean guy. Though he's a bit socially awkward, he does truly care for people and will listen to them if they come to him to vent. He's been picked on before due to his name(Pronounced like "kneel down"), his long "Jesus" hair, and slightly feminine features. However, he's gotten so used to it that it doesn't really bother him anymore.

    Ivan Voronkov
    Age: 21
    Hair: Curly/wavy black hair
    Eyes: Black pupil, blue irises
     
    Ivan has known Neil for as long as they could remember, and has been with Neil every step of the way. Somehow he's survived living around Neil for so long, he's learned to laugh at situations if it just involves him and Neil without any injuries. However, Ivan is a very anxious character, and though he attempts to keep his anxiety hidden, Sometimes he fails miserably.  Even so, he's a loyal friend. Ivan enjoys video games, anime, the internet, and technology in general. During his free time, he's usually playing a game, watching online videos, or posting on his blog. He also has a fairly decent knowledge on astronomy due to his activity in the astronomy club back in high school. This proves him to be fairly useful when Stellars begin appearing in their lives. Ivan is very kind at heart, and naturally would prefer to not hurt anybody.
    Ivan also sees a "shadow" throughout the story, causing him to question his sanity.

    Alhena, "Gamma Geminorum"
    Age: ???
    Stellar type: White star - Gemini
    Hair: Ankle-length, braided white hair
    Eyes: Gray pupil, light white-gray eyes
     
    Alhena is the Stellar summoned by Neil. She usually has a fairly bubbly personality, loves making people smile, and has a strange obsession with macaroni and cheese and bells. However, this does not mean that she's all about fun and games though. She gets frustrated easily, and can become quite intimidating if pushed to that level. She used to go by the name Almeisan, but due to specific reasons(spoilers), she started going by Alhena. She is completely dedicated to seeing Neil's wish fulfilled that she is willing to turn against her own kind for his sake.

    Kion Takemoto
    Age: 19
    Hair:  Black(natural), purple(dyed), pink(dyed), and green(dyed).
    Eyes: Black pupil, brown irises
     
    Kion is a fun-loving guy, known to be the "life of the party". Unlike Neil, he summoned his Stellar(Which he calls "Narki"), at the very young age of 7 with the wish of being rich and famous. Continuing to follow that wish, he found his love for music and decided to attempt the path of a rock star. Kion is often refered to as a crazy kid with childish dreams, but he doesn't care what others say. Though he appears to be a complete spaz and full of comedic relief, he has a few secrets of his own. He can make a very good leader if put in that position, but prefers to be the follower from laziness. After he meets Neil, Alhena, and Ivan, he talks with his Stellar and they decide to help Neil with his situation.

    Shurnarkabtishashutu, "Zeta Tauri" (Narki)
    Age: 22,500,000 (Estimated)
    Stellar-type: Blue star - Taurus
    Hair: Long, blue ponytail
    Eyes: Blue pupils, light blue irises
     
    Narki takes life quite seriously. Because of this, she often treats Kion like a kid even though he's 19. She doesn't care much about what happens to people in general, but she does care about Kion's view on things. Though she is serious, she doesn't mind a good joke every once in awhile, and absolutely loves food. She finds Alhena's "happy acting" to be annoying, and has a mutual respect for Antares. She's one of the stronger Stellars in Neil's main group.
     
    Antares, "Alpha Scorpii"
    Age:12,000,000(Estimated)
    Stellar-type: Red star - Scorpio
    Hair: Red, layered, bottom layer in low ponytail
    Eyes: Red pupils, light red irises
     
    Antares first appears to kill Neil. This leaves everyone in confusion and fear, causing them to question what's really going on, as a Stellar would never harm a human for no reason. However, he was just following orders. After a lot of thinking, he decides to change his mind and help Neil instead(Even though Neil absolutely refuses to trust him). His decision may(or may not) be influenced by his guilt, and the fact that he's reaching near the end of his life anyway.

    Kullat Nunu, "Eta Piscium"
    Age:
    Stellar-type: Yellow star - Pisces
    Hair: Blonde, curly pigtails
    Eyes: Dark yellow pupils, yellow irises
     
    Kullat Nunu is Alhena's best friend, who eventually makes an appearance and joins the group in their search for answers. She's a little bit of a derp and does really weird things, but no one seems to mind as long as it isn't harmful. However, Neil notices that Nunu has blonde hair and yellow eyes(similar to his dead twin sister), and doesn't talk with her often because of this.

    Sadalmelik, "Alpha Aquarii"
    Age:53,000,000(Estimated)
    Stellar-type: Yellow star - Aquarius
    Hair: Blonde, somewhat messy
    Eyes: Dark yellow pupil, yellow iris
     
    Sadalmelik is a mysterious Stellar that joins Neil's group after hearing "rumors" about a Human-Stellar war starting over Neil's wish. He barely talks and is a tad bit socially awkward when he's around Neil, but his only interest seems to be training Neil to make him stronger. For awhile this makes Neil quite angry, but eventually he realizes that Sadalmelik is actually very helpful to him.
     
    Sadalmelik knows answers to many secrets involving Neil's situation, but doesn't reveal them to the group for specific reasons(Partially his own fear, along with thinking it might keep Neil safe).
     
    Though Sadalmelik appears to be completely emotionless and stone-cold on the exterior, it's actually quite the opposite on the inside.

    Shaula, "Lambda Scorpii"
    Age:???
    Stellar-type: Blue star - Scorpio
    Hair: Blue, long and short 
    Eyes: Blue pupils, light blue irises
     
    Another Stellar that shows up to kill Neil, bringing other Stellars with her for backup after hearing he has a few Stellars protecting him. Kion absolutely falls in love with Shaula's appearance, despite her being an enemy. Of course, that's the type of reaction Shaula enjoys, because "love-struck" enemies are fairly easy to defeat.

    Kyna Doune
    Hair: Brown, length varies
    Eyes: Black pupils, brown irises
     
    Kyna is Neil's mother, who went missing when he was 8 years old. Neil loved her very much, so he's naturally upset by her disappearance.
    She's an odd mix of traits. She likes being lazy and staying indoors, but she also enjoys going outside to play basketball if people challenge her. Her children mean everything to her, and she's very protective over them. She's very introverted, but she doesn't mind hanging out with close friends.
     

    Sally Doune
    Hair: Short, blonde
    Eyes: Black pupils, yellow irises
     
    Neil's twin sister, murdered shortly after their mother went missing(By shortly, I mean like within 24 hours after the disappearance). In a few flashbacks, she's shown to be a little bit sassy, but polite to elders. She spent most of her days playing with Neil and Ivan, and leaned a little towards the tomboy side instead of girly girl. She was also Ivan's childhood crush.
     
    There are more characters, but I can't really reveal them without revealing who is behind all the attacks. Therefore, I'll stop it there for now. If you're very curious though, more characters are listed in the casting call for auditions. I'll update the character section again once I get specific sprites done for those that are missing theirs at the moment.
     
    Visual Novel Features
    Multiple endings, including Good, Bad, True, Chaotic, "Too Early", and a hidden ending. CGs and Animated cutscenes Battle System(Hopefully with isometric elevation maps and attacks unique to each character if I'm able to figure out how to program it.)  
     
    Progress
    Sprites- 25%
    Backgrounds- 5%
    CG's- 10%
    Animation- 10%
    Writing- 95%
    Coding- 20%
    Music - ??%
     
    Here's a screenshot! I do plan on changing that text box though.
     

     
    -Extra Questions-
    1. Does the story sound interesting?
    2. Is my art okay?  Do you like it?
    3. Which character seems interesting to you so far, if any?
    4. Would you be interested in playing this game even though it isn't a dating sim kind of game?(I know being a dating sim isn't a requirement, but I know a large amount of visual novels are so I didn't know if it would have an effect on whether people want to play)
     
    Sorry if this post is too lengthy.  
     
     
  4. Like
    Helvetica Standard got a reaction from dfbreezy in How to code a VN with Ren'py, Part 2 (Comprehensive Guide)   
    Welcome back! Fellow programmers!
     
    Hello and welcome back to my 5 part guide "How to code a VN with Ren'py" 
    Today we will cover options customisation and we'll try coding a sample scene as I'm sure you're itching to begin programming your very own visual novels. Fear not as you are on the right track and if you've checked out part 1 then you'll have no problem figuring this second part out (Hopefully, since my explaining is terrible. XD) That said please bear in mind once more that this is not an infalible guide to program with python or ren'py and it will not make you an expert after you've read it. However I'll do my best to try and explain how to code a VN with Ren'py to the best of my ability and I will be with you for the entirety of this guide. So let's go fellow programmers! the sky is not the limit as your creativity is...boundless. Let's start, shall we?     Ok, let's  go ahead and configure our options before anything else. We need to have a clear idea of how we want our VN to look before delving into programing  and scripting so let's do that right now. First go to your Hub and click on "Options.rpy" to edit it. The Editra window will appear shortly: Let's see....

      config.developer =  This function will allow you to use Ren'py console, the image picker and the dev tools. Set it to "True" while developing your VN and only                                 set it to "False" when you're about to publish content.

    config.screen width/height = The default resolution of your VN. For now let's work with the new resolution norm which is 1280x720.
                                                 IMPORTANT: If you're on a netbook, 720 is too large a resolution for most netbooks. In this case set the resolution to 853x480.     Now continue scrolling down to configure more stuff.     theme. = Here you can check what default theme you're currently using. If you're planning on creating your own custom theme, then it doesn't really matter what                theme you picked. You can also change it anytime. For now leave this value as is since you already picked a theme.   widget = Color of widgets/text and other theme menus. You can change the colour with the corresponding HTML code. As shown on part 1 of this guide, you can                see the code with the help of image editing software or an HTML color picker (several of them online.) This is only for default theme, if you're planning                on creating your own custom theme you can leave this values as is for now.   mm_root = stands for Main Menu. This is a simple hook for an image. This image is going to be your Title screen background. Since we're not yet fiddling with custom                   themes let's use this hook for now. Prepare a picture that you wish to use, preferably with 1280x720 resoution for the sake of consistency with this test VN
                     and place it inside the game folder. Let's assume the name of the picture is: "menu screen.png" Put it inside "game" folder. Done? Ok now come back to the                  options script and set mm_root = "menu screen.png",     (Don't forget the comma at the end.)   gm_root = stands for Game Menu. This is a simple hook for an image. This image is going to be your sub screens background. Since we're not yet fiddling with custom                   themes let's use this hook for now. Prepare a picture that you wish to use, preferably with 1280x720 resoution for the sake of consistency with this test VN
                     and place it inside the game folder. Let's assume the name of the picture is: "sub menu screen.png" Put it inside "game" folder. Done? Ok now come back                  options script and set mm_root = "sub menu screen.png",     (Don't forget the comma at the end.)   Once that's done, let's keep scrolling down for yet more configuration.     style.window.background = Frame: The hook for your text box image. There are many ways to set up this image but the easiest one is to create a text box with predefined width and height. Since we're using 1280x720, go create a rectangular text box of 1183x138 pixels  in your favorite image editing software (like Photoshop). Once you're done save as "text frame.png" and put it inside the "game" folder. Then come back and set style.window.background = Frame ("text frame.png", 0, 0)  like in the picture.   style.window_margin: The values for textbox clipping. Like the picture says, these are for cropping your textbox and centering so it doesn't look stretched and fits the 16:9 format comfortably. Now that you know that, go set the first 2 values to "100" Done? ok, let's proceed.   style.window_padding: The values for text padding. This will center the text which will otherwise will be aligned to the left by default. Since we're not using the 4:3 format we need to change it so it is aligned to the widescreen text box. First REMEMBER TO REMOVE THE # SYMBOLS and edit the first 2 values to: "200" don't touch the third value and edit the last value to: "50." Ready? let's carry on then.   style.window.yminimum: The minimum height of the text box. Is best to leave as is for now but also good to know that it's for adjusting the height of your text box.   style.default: Text styling. This is custom code and won't appear on your scripts. As the picture says it helps your text look less plain by adding shadows and outlines. You can freely customize these later. For now copy them up exactly as shown in the picture. Once you're done, scroll down for more configuring.     style.default.font: The font that will be used for your in-game text. This spans ALL scripted/vmenu text without exception so be sure to pick a sober and readable font. Picking a cool font is a good idea too, but you need to make sure that players will be able to read it without problems. That said go to your favorite font webpage and download a font of your liking. You don't need to install it, just put it inside the "game" folder. Once you've done it, return here and type the name of the font: style.defautl.font = "your font's name.ttf"  (don't forget the .ttf at the end.) Once that's done, let's continue.   style.default.size: The default size of your font. If the font you picked is too small or too big for your textbox you can edit the size here to correct any text size issues.   style.button/imagemap.activate_sound, config.enter/exit_sound: To make your VN play sounds when you pick a choice or enter/exit a menu simply get an audio file in mp3 and place it inside the game folder, then come back to the script and type the name of the audio file as shown in the picture. Once that's done let's go on.   config.main_menu_music = the music of the main menu. This simple hook summons an audio track to play it every time you are in the title screen. Go get an audio file (preferably in mp3) and put it inside the game folder. (It's best if you rename it to "main menu.mp3") Now come back to the script and type the name of the audio file as shown in the picture. Done? ok, that's that and now we proceed to check your assets!

      This section is relatively simple. All you need to do is to check that all your assets are in place inside the "game" folder before proceeding to edit the script. You will constantly have to be checking your assets and managing them for insertion so that when you define them vpia the script, you don't have any trouble by a missing asset or a filename issue. That said, go to your hub and click on "game" to open the game folder which should look more or less like this:     As you can see here are the backgrounds, sprites, the font you will use for text, your text frame and audio files. The only things we haven't covered so far are the backgrounds and sprites. These are not 100% essential for this test script but you are welcome to add them if you want. If you want to try a test VN  without Backgrounds and sprites then scroll down to the next section, otherwise keep reading.   About sprites: Plainly speaking, sprites are the visual representation of your characters and most if not all of your favorite VN's have their own sprites for each relevant character. Sprites come as a set of several expressions which denote emotion and body poses. They add to the immersion and give more personality to each character. We will talk more about this later but for now you can open your favorite image editing software and draw 3 sprites. You can use the ones I have in this folder as reference which are a caricature of yours truly One of the sprites features no emotion, the second one is happy and the third one is up to you. It can be angry, ecstasic, playful or whatever. We just need 3 sprites with some emotion variation. Anything goes, hell it can be a circle with eyes and mouth, just as long as it depicts expressions it's a sound approach. Once you're done with your sprites, save them in png format and name them as you like. Put it inside the game folder. You'll be defining them once we get to edit the main script.   About backgrounds: Backgrounds also called BGI are visual representations of the environment your characters will interact at. Backgrounds are one of  the most aesthetic driven assets, as they set the mood and give life to the world you're creating. While the gorgeous anime style of the BGI present in your favorite VNs is by no means an easy feat, there are solid alternatives that still look good, you can for example take pictures of certain places and use those pictures as backgrounds for your VN. It is a popular method and one that is used by professional studios. Alternatively you can draw a background by yourself, even if it's simple, and if you have the talent then by all means draw a nice one. Once you're done with your background image, save it in png format with a resolution of 1280x720, since it will cover the entire game window. Name it as you like and don't forget to put it inside your game folder. You'll define it once we get to edit the main script.     Here it comes! All those painful minutes bearing with my ugly explaining and my ghastly orthography have finally paid off! We are ready for the belated creation step: "The coding and scripting process" Bear in mind that this is just a very short test script which covers the basics of what a VN is made of (code wise) so this means that there's still a lot more to learn about Ren'py before jumping headlong into a project. Don't worry though, I promise I will help you in any way I can and I'll be with you till the end of this guide and beyond! Let's dive right in; click on script.rpy and Editra should open shortly. Let's take a look at the test script which we will work with. As you remember from part 1 our script had a couple of lines and nothing more, well now the script I prepared for you is ripe with a bunch of useful stuff for you to use as a reference.  I strongly encourage you to make use of this script in order to digest the coding more easily.      1. Image definitions: You have to define your images in order to use them. Renpy uses these definitions to summon the image and display it in-game. For now, define the sprites you created earlier. don't forget to use the EXACT same filename you used for naming them, including the extension (.png, jpg, etc.) If you decided NOT to use sprites you can skip this step.   2.Image definitions cont.: You can separare the sprite definitions from the bgi ones. It's a nice trick to keep track of what is what. Follow the example and define your background image for use in the test. If you decided NOT to use background images, you may skip this step.   3.Character definitions: Here you define the characters that will star in your VN. Just follow the code and recycle if necessary. If you want a different color for  the text simply use the corresponding HTML color code. (There are plenty color pickers online.) The small letter after "define" is the  hook you're going to use for calling your character so EVERY line that you start with that letter will summon that character. (example: a "Blah blah." = Your chara: Blah blah )   4.Labels: As we discussed earlier in part 1, labels are "markers" of sorts that signal the beginning of a scene, arc, chapter, event, whatever. They are handy for keeping track of your scenes and can also be used as "warp points" between other labels by means of the "jump" command.   5."Scene" command: Always start a label with a "scene" this clears caches and layers giving you a clean slate start for summoning your images, backgrounds, sprites, music, etc. Do remember that using this command while there are assets displayed on the screen will hide them, so only use this when you plan to move into a new location/scene/time skip, etc.   6. "Music" command: The example on the picture is how you make Ren'py play a song to ambient your VN. Use the code as reference for your test script. Just make sure that the song you have prepared for this is inside your "game" folder in mp3 format.  The "fade in" instruction is to ensure that the song doesn't start playing too abruptly. you can also use the "stop music" command to end the playback. Otherwise the music will loop indefinitely.   7. "Show" and "With" : The bread and butter of your coding. Both these simple instructions are used to summon most of your graphical assets and annex a fancy transition effect to them. Remember to define every image before using the "show" command. Attempting to use an image that you have yet not defined will crash Ren'py or throw you an error. The command "with" is used to add transitions, in this case we added "dissolve" but there are many other types you can use.   8. "Character voice": As we described it earlier, using the hook to call a character's voice is the way to represent a character's speech. in this case we used "h" as a hook but you can use any other letter you like as long as your character definition has that letter assigned. If you don't use any hook the line will be rendered as narration.    9. A jump label: We will use this jump label to go back to it if we need to from any point in the script by using "jump (name of the label here)."   10. FLAGS (SUPER IMPORTANT): Unless you plan on making a kinetic novel (novel without choices) Flags are a key ingredient for any script. If you've played plenty of VNs already you know what flags are. If not, its pretty simple: Tripping flags scores you points with certain heroine or save certain data for the game to remember later (example. using a flag so the game remembers when you visited certain place or picked certain option.) In this example the flag we have is set to "False" YOU NEED TO SET A FLAG TO FALSE BEFORE SUMMONING IT LATER, OTHERWISE REN'PY WILL CRASH WITH AN ERROR READING: "xxxxx not defined" In a few minutes we will summon this flag for triggering.   11. Sound command: This is the code for summoning an audio file for a short sound effect. Bear in mind that unlike music, sounds DO NOT loop, they only play once.   12. Menu: Yet another important instruction for VNs with choices. the menu command is used to prompt a choice for the player. The choice menu can have any number of options available, provided there's enough space on the game window and enough branched script for Ren'py to follow. This is one of the most challenging aspects of VN coding but once you grasp the theory behind it, the rest is plenty easy. For now just copy the script. You will understand more as we explore the other points.   13. The Choice menu: This is the code for a typical two option choice menu. With this the player is prompted with the question of which path to take. Just as your protagonist knows there are consequences for each decision, so should you. That's why you have to write what happens depending on  the choice picked. Notice the  "$ pantsu_1 = True" ? this is the flag that we were talking about earlier. If the player picks the top choice, THIS FLAG IS TRIPPED, and the game will remember this choice.   14. If and else: Once a flag is tripped the game stores that flag as true and it can be used to summon a specific script which is otherwise inaccessible. In this bit of code we have the "if" and "else" conditionals, and ("if") the player picked the top choice, then the first line will be summoned. The opposite is true for the second line which is summoned if the player didn't pick the top choice ("else")   15. Advanced if and else: Once you get the hang of how the conditionals work you'll be able to play around with them and create interesting branched plots with various developments. In this example the script remembers the choice you picked and comments on that choice.   16. Jumping to another label: Exactly as discussed before, this is a jump point that allows you to instantly go back to a certain scene/event/script. In this example you can jump back to the choice menu should you like to pick a different option.   17. Return: This is a rather simple command that returns the player to the title screen. Don't forget this, otherwise you'll run to a crash. If for some reason you forget to include it, you can manually quit the VN  vía the sub menu.     Now that you've read all these points it's time for you to test the script we just created. Save the changes you made to the "script.rpy" file and close it. Then on the Hub window, click on "LAUNCH PROJECT"  Let's take a peek at how the test VN looks!     The main menu screen.       The sub menu/ preferences screen.       The script comes to life!       The choice menu.       Picked the right choice of course. :3       Success! The test script works!    
     
    And that's it for the second part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly
    orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together
    for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts
    will certainly pay off. Do join me next time, when I'll be covering: Detailed explanations on coding instructions and some interesting
    programming tricks. Many thanks for your time and until then. See ya 

    Kind regards. Helvetica Standard.
                           
  5. Like
    Helvetica Standard got a reaction from Ene in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Welcome back! Fellow programmers!

    Hello and welcome back to my 5 part guide "How to code a VN with Ren'py."
    Today we will have a special guide, a walkthrough on how to code an actual VN project. Last time we coded a mock
    VN however this time I'll be using a personal project as a guideline to teach you how everything's done
    straight from the drawing board! Fear not as you are on the right track and if you've checked out part 1
    and part 2 then you'll have no problem figuring this third part out. (Hopefully, since my explaining is terrible. XD)
    That said please bear in mind once more that this is not an infallible guide to program with python or ren'py and
    it will not make you an expert after you've read it. However I'll do my best to try and explain how to code a VN
    with Ren'py to the best of my ability and I will be with you for the entirety of this guide.
    So let's go fellow programmers! the sky is not the limit as your creativity is...boundless. Let's start, shall we?
     
     

     
     
     
    first off, open your HUB and go to your active projects, then launch your stub project which should look
    similar to this:


     
     
    The background is black to emphasize that we have nothing set so far, some of you might have a different color
    depending on your stock theme. The resolution you use for your VN will also be present from the moment you
    boot. In my case, I'm developing this VN in 1920x1080 resolution.
    Now, we need to get rid of this boring background and plainGUI design. Let's make a custom main menu.
    First, close your stub VN, go to your HUB and click on the "screens.rpy" link. This will open the script for screens,
    the place where we will create our very own main menu.
    Leave that open for now and then open your favourite image editing software, photoshop, SAI, illustrator, Paint studio, etc.
    Create a blank image with the resolution of your VN (for example, if the resolution of your VN is 800x600, then you make
    a blank image with those dimensions.) After that just get creative, use some flaming skulls and bleeding hearts or whatever
    you like. Alternatively you can just use text (That's what I'll do since my project has a minimalistic UI by design. xD )
    the point here is to edit the main menu to your liking. So let's go and see how it will look:
     
     

     
     
    This is my title screen. The focus of my VN is to make a reference to retro games, hence the austere 8 bit console look.
    You ought to make something different as my project is only a guideline, remember that.
    Now back on topic, as you can see, the clickable sections are displayed in this image, so you might be wondering: "can't
    you do that with Ren'py?" Yes and no. Ren'py allows custom styles but those are limited in a sense and require you to
    have more than just the basic python knowledge so we'll be going with this option because it's unconstrained and it allows
    you to make your VN look any way you like.
    So back to those clickable sections such as "new game" and "continue", what are they for? They are your mouse hotspots.
    We'll be using those to give coordinates to ren'py so it remembers where they are located and map an action to said hotspots.
    This image above will be called your "ground image." This is the way it looks when you are not hovering the mouse over any
    options. Now once you're done with this let's go and make the "hover version" which will look like this:
     
     

     
     
    As you can see I added an orange arrow to every clickable option. This will reflect each hotspot "hover" action when I pass
    the pointer over them. This will be our "hover image".
    Note that you can do whatever you want for your own hover effect, for example you can make the text grow larger or smaller,
    change colors or add a blending effect like glow or a simple transform. Once you're done with this, save both images in .png
    and place them inside the "game" folder, then let's go back to the "screens.rpy" script that we left open.
    Back in the screens script, scroll down till you reach this part:
     

    This is the default main menu that all stub VNs have. Don't worry about all that code though, we're going to completely replace it
    with our own. Let's start with making an "imagemap."
    First delete all the code shown on the image (except for the red parts, so you remember what you are changing. XD)
    Then type in this:
     
     
     
    screen main_menu:
    tag menu  (this line is very important when using custom screens, forget to add it and you will regret it.)
    imagemap:
            ground "your ground image.png" (remember to replace the filenames with your own. Also don't forget that images need to be inside the "game" folder.)
            hover "your hover image.png"
        
            
            hotspot (xxx, xxx, xx, xx) action Start()
            hotspot (xxx, xxx xx, xx) action ShowMenu("load")
            hotspot (xxx, xxx, xx, xx) action ShowMenu("preferences")
            hotspot (xxx, xxx, xx, xx) action Quit(confirm=True)
     
     
     
    There you have it. It's a basic imagemap  with the essential functions of a main menu. Pretty simple, no?
    So you might be wondering, what are those "X" symbols right next to "hotspots" Well, those are coordinates
    for the mouse. Those coordinates will tell Ren'py where your hotspots are located so let's go ahead and
    find these coordinates.
    Don't save any changes yet, instead go to your HUB and launch your project, then press SHIFT+D to enter
    the developers menu. while navigating through the menu find the "image location picker" option which will summon
    a list of all the images that are inside the "game" folder. Find your hover image and open it:
     
     
     

     
    As the image says, draw a rectangle over the area where you want your hotspot to be recognised.
    You'll get he coordinates for this hotspot on the lower left corner of the window. Input these coordinates on the screens
    script where the "X's" are. Repeat this process for each hotspot and remember to input the coordinates that match
    each section, don't go mixing them by mistake. XD
    Once you're done, your hotspot section will look smilar to this:
     
            hotspot (720, 611, 391, 70) action Start()
            hotspot (726, 691, 384, 60) action ShowMenu("load")
            hotspot (726, 758, 378, 63) action ShowMenu("preferences")
            hotspot (815, 828, 209, 59) action Quit(confirm=True)
     
    These are my coordinates by the way, don't copy/paste them because they won't work for you. Get your own coordinates. XD
    Once you're done typing the coordinates in, save your changes to screens script and close it. Then boot up your project to
    check your brand new custom title screen. If all went well you'll have a fully functional main menu, otherwise scroll back and try
    to follow the instructions to the letter.
     

     
    Previously we covered assets though briefly. This time we're focusing on the essential things to make an actual VN project, that said
    we already have the most important asset of them all. YOU. Yep you only need one person to make a VN. This in paper however is
    terribly inefficient and making your VN would take you a lot longer than if you had help. But, you can't always sit around waiting for
    help to come, you need to show something to the community to get feedback, and maybe help, later on. So you need to get some
    placeholder assets and show your idea to the world. It's what I did and what you should do if you plan on making a large scale project.
    However there's always the alternative to go solo, which is totally possible and moreso if you happen to be a really talented individual
    who has all the skills needed for making a VN, if not then there's always the "one man army method" which we will cover below.
     
    Backgrounds:
    There's 3 ways to deal with backgrounds when getting started/going solo: 1. You have the artistic skills and you draw them by yourself.
    2.You use the stock VN backgrounds readily available online (Uncle Mugen's collection is pretty solid.) just be aware that thousands of
    other people will be using them on their VNs as well. And 3. You use RL photographs. Out of all the choices for starter programmers and
    project leaders this is the most sensible option, you take a camera and venture outside to take pics of suitable locations for your VN.
    Contrary to popular belief, this method is used by professional studios, although this largely depends on the visual style of your project.
    That said you don't have to use the photos as is. You can make them look more cartoony and more suited for VN format:
     
    1. You take your photo to Photoshop and add an image filter to it. A combination of sponge+cutout gives it a painting feel for example.
    2. You take your photo to Illustrator and image trace it for "low fidelity" then crank up the paths and corners to 100% and finally export as .png
    (this is the method I'm using for this project.)
    3. You do an outline tracing by hand and then paint over the details with Photoshop or SAI and a tablet. (you need some basic art skills for this.)
     
    Out of these 3, number 1 is the fastest and simplest to do. Chances are you have Photoshop installed no matter if you dabble on art or design
    or not and filtering is just 2 clicks away. Number 2 has a nicer looking tracing effect but you require Illustrator and the 3rd one is so tedious and time
    consuming that you probably shouldn't consider it unless your VN has less than 10 backgrounds or something like that.
    Those aren't the only methods available though, you can always come up with one of your own and use it, Go wild, make that creativity explode!
    For reference, here's what I did for one of my backgrounds:
     
    Here's the RL picture:
     

     
    Here's the traced and edited version. As you can see I boosted the vibrance for added cartoony feel and even added some otaku touches to the room...
    ......I'll give a cookie to the one who identifies them all
     

     
    Of course that doesn't end there. You can always make variants for other times of the day as well
    For example late afternoon:
     

     
    Night time:
     

     
    And even artificial light:
     

     
    There's tons of things you can do with photographs, so don't feel discouraged if you are not an artist or can't find artists. Always remember:
    Creativity is boundless.
     
    Music:
    This one isn't particularly hard and it's the same deal as with art mostly. 1. You compose music yourself if you have the talent and skill for it.
    2.You use the readily available stock of P.B. (Public Domain) or R.F. (Royalty free) music. In both instances make sure to credit the composers
    properly. A good site for all things sound is freeSFX.co.uk
     
     
    Sprites:
    Here comes the big fish. One of the most important parts in any VN in existence. The graphical representations of your characters. AKA sprites.
    The lack of artistic skill shoots down many projects because there's not a "quick fix" for this. There are public use sprites but they are not very
    good and they might not suit your needs or the style of your VN. In this case if you're a one man army, you grit your teeth
    and start drawing. I had to that myself at some point. Practice makes perfect and while your sprites will not always be professional looking, you
    can only get better as you practice. If you simply cannot draw to save your life, you can always use the "rotoscope" technique.
    Don't be fooled by the word tho, It's just a mock term and you only need a camera and a PC. You get volunteers, take their pictures, transfer them
    to your PC crop and edit them the same way you do with backgrounds. You can make them look more cartoony or hell you can even go with black and white
    +stamp effect to make a Sin City style VN! If you are still inclined to make your own sprites however, you certainly can. That's what I'm doing for this project.
    Here a sample of my main heroine. Notice my Tsunako influence?
     

     
    What do you think? isn't she cute? Mind you, she went through 3 redesigns so indeed it's no easy task.
     
    And this will be all for now concerning the one man army method. If you have all your assets in order then let's get coding already! Let's get a test script
    underway. Remember that this is an actual VN project and not a mock script as before so if there's something you don't understand. Please do tell me
     
     

     
     
    With your assets handy, go to HUB and then open your stub script, then check that you have the following things in order. (Add stuff as needed.)
    REMEMBER: THESE ARE MY ASSETS, YOU NEED TO REPLACE NAMES AND FILES YOU SEE HERE WITH YOUR OWN:

    1. Image definitions: Like we covered previously, you have to define most images here in the main script:
     

     
    2. Character definitions: Same drill, follow the coding and remember what we've seen part 1 and 2:
     

     
    3. CTC animation: a click to continue animation. it will appear when a character has finished talking. It won't activate with narration unless you define the narrator as a character.
    Follow the code and replace with your own animation. All you need is a set of frames in .png (images should be 30 to 50 pixels wide.) For example: a blinking arrow.
     

     
    The x and y values at the end must be tweaked to match the position of your textbox.
     
    4.Custom position definitions: Chances are your sprites appear cut off from the screen or too low. Ren'py is not exactly intuitive so you can use this code to create a default position
    value for your sprites. Results will vary depending on the size of your sprites and the resolution of your VN. You can also use this code for custom sprite positions.
     

     
    To use this position remember what you learned in part 1 and 2:
    example: show Neru at myposition
     
    5.Custom transitions: Ever felt the fade out was too fast or the dissolve effect needed some tweaks? Worry not, as you can make custom transitions out of the existent ones. In this case this is
    a slow "drop down" but you can also make a custom dissolve, example: dissolve (0.5, 1.0, 0.5),  which is a very slow dissolve effect.
     

     
    6. Splash screen: Ren'py doesn't have stock code for splash screens. You can make a splash image appear while your game is loading, but the loading is so fast that the splash appears for
    half a second sometimes. Thankfully there's custom code to make your VN boot to a splash screen before the title screen! Follow this code replacing "mysplashscreen" and "mysplashsound"
    with your own.
     

     
     

     
    And that's it for the third part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly
    orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together
    for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts
    will certainly pay off. Do join me next time, when I'll be covering the rest of this section and UI styling in detail.
    Many thanks for your time and until then. See ya 


    Kind regards. Helvetica Standard.
  6. Like
    Helvetica Standard reacted to RokAbiel in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    I love the way you worded it as a "one man army", because I'm doing just about everything in my VN on my own(Minus voice acting and music). The quick background tutorials are very helpful! I've been doing it as #3 this whole time and it's so slow. x.x My campus has Illustrator and Photoshop, free for the art majors to use, so I'll probably start making uses of them.
  7. Like
    Helvetica Standard got a reaction from Godskrieg in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Welcome back! Fellow programmers!

    Hello and welcome back to my 5 part guide "How to code a VN with Ren'py."
    Today we will have a special guide, a walkthrough on how to code an actual VN project. Last time we coded a mock
    VN however this time I'll be using a personal project as a guideline to teach you how everything's done
    straight from the drawing board! Fear not as you are on the right track and if you've checked out part 1
    and part 2 then you'll have no problem figuring this third part out. (Hopefully, since my explaining is terrible. XD)
    That said please bear in mind once more that this is not an infallible guide to program with python or ren'py and
    it will not make you an expert after you've read it. However I'll do my best to try and explain how to code a VN
    with Ren'py to the best of my ability and I will be with you for the entirety of this guide.
    So let's go fellow programmers! the sky is not the limit as your creativity is...boundless. Let's start, shall we?
     
     

     
     
     
    first off, open your HUB and go to your active projects, then launch your stub project which should look
    similar to this:


     
     
    The background is black to emphasize that we have nothing set so far, some of you might have a different color
    depending on your stock theme. The resolution you use for your VN will also be present from the moment you
    boot. In my case, I'm developing this VN in 1920x1080 resolution.
    Now, we need to get rid of this boring background and plainGUI design. Let's make a custom main menu.
    First, close your stub VN, go to your HUB and click on the "screens.rpy" link. This will open the script for screens,
    the place where we will create our very own main menu.
    Leave that open for now and then open your favourite image editing software, photoshop, SAI, illustrator, Paint studio, etc.
    Create a blank image with the resolution of your VN (for example, if the resolution of your VN is 800x600, then you make
    a blank image with those dimensions.) After that just get creative, use some flaming skulls and bleeding hearts or whatever
    you like. Alternatively you can just use text (That's what I'll do since my project has a minimalistic UI by design. xD )
    the point here is to edit the main menu to your liking. So let's go and see how it will look:
     
     

     
     
    This is my title screen. The focus of my VN is to make a reference to retro games, hence the austere 8 bit console look.
    You ought to make something different as my project is only a guideline, remember that.
    Now back on topic, as you can see, the clickable sections are displayed in this image, so you might be wondering: "can't
    you do that with Ren'py?" Yes and no. Ren'py allows custom styles but those are limited in a sense and require you to
    have more than just the basic python knowledge so we'll be going with this option because it's unconstrained and it allows
    you to make your VN look any way you like.
    So back to those clickable sections such as "new game" and "continue", what are they for? They are your mouse hotspots.
    We'll be using those to give coordinates to ren'py so it remembers where they are located and map an action to said hotspots.
    This image above will be called your "ground image." This is the way it looks when you are not hovering the mouse over any
    options. Now once you're done with this let's go and make the "hover version" which will look like this:
     
     

     
     
    As you can see I added an orange arrow to every clickable option. This will reflect each hotspot "hover" action when I pass
    the pointer over them. This will be our "hover image".
    Note that you can do whatever you want for your own hover effect, for example you can make the text grow larger or smaller,
    change colors or add a blending effect like glow or a simple transform. Once you're done with this, save both images in .png
    and place them inside the "game" folder, then let's go back to the "screens.rpy" script that we left open.
    Back in the screens script, scroll down till you reach this part:
     

    This is the default main menu that all stub VNs have. Don't worry about all that code though, we're going to completely replace it
    with our own. Let's start with making an "imagemap."
    First delete all the code shown on the image (except for the red parts, so you remember what you are changing. XD)
    Then type in this:
     
     
     
    screen main_menu:
    tag menu  (this line is very important when using custom screens, forget to add it and you will regret it.)
    imagemap:
            ground "your ground image.png" (remember to replace the filenames with your own. Also don't forget that images need to be inside the "game" folder.)
            hover "your hover image.png"
        
            
            hotspot (xxx, xxx, xx, xx) action Start()
            hotspot (xxx, xxx xx, xx) action ShowMenu("load")
            hotspot (xxx, xxx, xx, xx) action ShowMenu("preferences")
            hotspot (xxx, xxx, xx, xx) action Quit(confirm=True)
     
     
     
    There you have it. It's a basic imagemap  with the essential functions of a main menu. Pretty simple, no?
    So you might be wondering, what are those "X" symbols right next to "hotspots" Well, those are coordinates
    for the mouse. Those coordinates will tell Ren'py where your hotspots are located so let's go ahead and
    find these coordinates.
    Don't save any changes yet, instead go to your HUB and launch your project, then press SHIFT+D to enter
    the developers menu. while navigating through the menu find the "image location picker" option which will summon
    a list of all the images that are inside the "game" folder. Find your hover image and open it:
     
     
     

     
    As the image says, draw a rectangle over the area where you want your hotspot to be recognised.
    You'll get he coordinates for this hotspot on the lower left corner of the window. Input these coordinates on the screens
    script where the "X's" are. Repeat this process for each hotspot and remember to input the coordinates that match
    each section, don't go mixing them by mistake. XD
    Once you're done, your hotspot section will look smilar to this:
     
            hotspot (720, 611, 391, 70) action Start()
            hotspot (726, 691, 384, 60) action ShowMenu("load")
            hotspot (726, 758, 378, 63) action ShowMenu("preferences")
            hotspot (815, 828, 209, 59) action Quit(confirm=True)
     
    These are my coordinates by the way, don't copy/paste them because they won't work for you. Get your own coordinates. XD
    Once you're done typing the coordinates in, save your changes to screens script and close it. Then boot up your project to
    check your brand new custom title screen. If all went well you'll have a fully functional main menu, otherwise scroll back and try
    to follow the instructions to the letter.
     

     
    Previously we covered assets though briefly. This time we're focusing on the essential things to make an actual VN project, that said
    we already have the most important asset of them all. YOU. Yep you only need one person to make a VN. This in paper however is
    terribly inefficient and making your VN would take you a lot longer than if you had help. But, you can't always sit around waiting for
    help to come, you need to show something to the community to get feedback, and maybe help, later on. So you need to get some
    placeholder assets and show your idea to the world. It's what I did and what you should do if you plan on making a large scale project.
    However there's always the alternative to go solo, which is totally possible and moreso if you happen to be a really talented individual
    who has all the skills needed for making a VN, if not then there's always the "one man army method" which we will cover below.
     
    Backgrounds:
    There's 3 ways to deal with backgrounds when getting started/going solo: 1. You have the artistic skills and you draw them by yourself.
    2.You use the stock VN backgrounds readily available online (Uncle Mugen's collection is pretty solid.) just be aware that thousands of
    other people will be using them on their VNs as well. And 3. You use RL photographs. Out of all the choices for starter programmers and
    project leaders this is the most sensible option, you take a camera and venture outside to take pics of suitable locations for your VN.
    Contrary to popular belief, this method is used by professional studios, although this largely depends on the visual style of your project.
    That said you don't have to use the photos as is. You can make them look more cartoony and more suited for VN format:
     
    1. You take your photo to Photoshop and add an image filter to it. A combination of sponge+cutout gives it a painting feel for example.
    2. You take your photo to Illustrator and image trace it for "low fidelity" then crank up the paths and corners to 100% and finally export as .png
    (this is the method I'm using for this project.)
    3. You do an outline tracing by hand and then paint over the details with Photoshop or SAI and a tablet. (you need some basic art skills for this.)
     
    Out of these 3, number 1 is the fastest and simplest to do. Chances are you have Photoshop installed no matter if you dabble on art or design
    or not and filtering is just 2 clicks away. Number 2 has a nicer looking tracing effect but you require Illustrator and the 3rd one is so tedious and time
    consuming that you probably shouldn't consider it unless your VN has less than 10 backgrounds or something like that.
    Those aren't the only methods available though, you can always come up with one of your own and use it, Go wild, make that creativity explode!
    For reference, here's what I did for one of my backgrounds:
     
    Here's the RL picture:
     

     
    Here's the traced and edited version. As you can see I boosted the vibrance for added cartoony feel and even added some otaku touches to the room...
    ......I'll give a cookie to the one who identifies them all
     

     
    Of course that doesn't end there. You can always make variants for other times of the day as well
    For example late afternoon:
     

     
    Night time:
     

     
    And even artificial light:
     

     
    There's tons of things you can do with photographs, so don't feel discouraged if you are not an artist or can't find artists. Always remember:
    Creativity is boundless.
     
    Music:
    This one isn't particularly hard and it's the same deal as with art mostly. 1. You compose music yourself if you have the talent and skill for it.
    2.You use the readily available stock of P.B. (Public Domain) or R.F. (Royalty free) music. In both instances make sure to credit the composers
    properly. A good site for all things sound is freeSFX.co.uk
     
     
    Sprites:
    Here comes the big fish. One of the most important parts in any VN in existence. The graphical representations of your characters. AKA sprites.
    The lack of artistic skill shoots down many projects because there's not a "quick fix" for this. There are public use sprites but they are not very
    good and they might not suit your needs or the style of your VN. In this case if you're a one man army, you grit your teeth
    and start drawing. I had to that myself at some point. Practice makes perfect and while your sprites will not always be professional looking, you
    can only get better as you practice. If you simply cannot draw to save your life, you can always use the "rotoscope" technique.
    Don't be fooled by the word tho, It's just a mock term and you only need a camera and a PC. You get volunteers, take their pictures, transfer them
    to your PC crop and edit them the same way you do with backgrounds. You can make them look more cartoony or hell you can even go with black and white
    +stamp effect to make a Sin City style VN! If you are still inclined to make your own sprites however, you certainly can. That's what I'm doing for this project.
    Here a sample of my main heroine. Notice my Tsunako influence?
     

     
    What do you think? isn't she cute? Mind you, she went through 3 redesigns so indeed it's no easy task.
     
    And this will be all for now concerning the one man army method. If you have all your assets in order then let's get coding already! Let's get a test script
    underway. Remember that this is an actual VN project and not a mock script as before so if there's something you don't understand. Please do tell me
     
     

     
     
    With your assets handy, go to HUB and then open your stub script, then check that you have the following things in order. (Add stuff as needed.)
    REMEMBER: THESE ARE MY ASSETS, YOU NEED TO REPLACE NAMES AND FILES YOU SEE HERE WITH YOUR OWN:

    1. Image definitions: Like we covered previously, you have to define most images here in the main script:
     

     
    2. Character definitions: Same drill, follow the coding and remember what we've seen part 1 and 2:
     

     
    3. CTC animation: a click to continue animation. it will appear when a character has finished talking. It won't activate with narration unless you define the narrator as a character.
    Follow the code and replace with your own animation. All you need is a set of frames in .png (images should be 30 to 50 pixels wide.) For example: a blinking arrow.
     

     
    The x and y values at the end must be tweaked to match the position of your textbox.
     
    4.Custom position definitions: Chances are your sprites appear cut off from the screen or too low. Ren'py is not exactly intuitive so you can use this code to create a default position
    value for your sprites. Results will vary depending on the size of your sprites and the resolution of your VN. You can also use this code for custom sprite positions.
     

     
    To use this position remember what you learned in part 1 and 2:
    example: show Neru at myposition
     
    5.Custom transitions: Ever felt the fade out was too fast or the dissolve effect needed some tweaks? Worry not, as you can make custom transitions out of the existent ones. In this case this is
    a slow "drop down" but you can also make a custom dissolve, example: dissolve (0.5, 1.0, 0.5),  which is a very slow dissolve effect.
     

     
    6. Splash screen: Ren'py doesn't have stock code for splash screens. You can make a splash image appear while your game is loading, but the loading is so fast that the splash appears for
    half a second sometimes. Thankfully there's custom code to make your VN boot to a splash screen before the title screen! Follow this code replacing "mysplashscreen" and "mysplashsound"
    with your own.
     

     
     

     
    And that's it for the third part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly
    orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together
    for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts
    will certainly pay off. Do join me next time, when I'll be covering the rest of this section and UI styling in detail.
    Many thanks for your time and until then. See ya 


    Kind regards. Helvetica Standard.
  8. Like
    Helvetica Standard got a reaction from Kururi in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Welcome back! Fellow programmers!

    Hello and welcome back to my 5 part guide "How to code a VN with Ren'py."
    Today we will have a special guide, a walkthrough on how to code an actual VN project. Last time we coded a mock
    VN however this time I'll be using a personal project as a guideline to teach you how everything's done
    straight from the drawing board! Fear not as you are on the right track and if you've checked out part 1
    and part 2 then you'll have no problem figuring this third part out. (Hopefully, since my explaining is terrible. XD)
    That said please bear in mind once more that this is not an infallible guide to program with python or ren'py and
    it will not make you an expert after you've read it. However I'll do my best to try and explain how to code a VN
    with Ren'py to the best of my ability and I will be with you for the entirety of this guide.
    So let's go fellow programmers! the sky is not the limit as your creativity is...boundless. Let's start, shall we?
     
     

     
     
     
    first off, open your HUB and go to your active projects, then launch your stub project which should look
    similar to this:


     
     
    The background is black to emphasize that we have nothing set so far, some of you might have a different color
    depending on your stock theme. The resolution you use for your VN will also be present from the moment you
    boot. In my case, I'm developing this VN in 1920x1080 resolution.
    Now, we need to get rid of this boring background and plainGUI design. Let's make a custom main menu.
    First, close your stub VN, go to your HUB and click on the "screens.rpy" link. This will open the script for screens,
    the place where we will create our very own main menu.
    Leave that open for now and then open your favourite image editing software, photoshop, SAI, illustrator, Paint studio, etc.
    Create a blank image with the resolution of your VN (for example, if the resolution of your VN is 800x600, then you make
    a blank image with those dimensions.) After that just get creative, use some flaming skulls and bleeding hearts or whatever
    you like. Alternatively you can just use text (That's what I'll do since my project has a minimalistic UI by design. xD )
    the point here is to edit the main menu to your liking. So let's go and see how it will look:
     
     

     
     
    This is my title screen. The focus of my VN is to make a reference to retro games, hence the austere 8 bit console look.
    You ought to make something different as my project is only a guideline, remember that.
    Now back on topic, as you can see, the clickable sections are displayed in this image, so you might be wondering: "can't
    you do that with Ren'py?" Yes and no. Ren'py allows custom styles but those are limited in a sense and require you to
    have more than just the basic python knowledge so we'll be going with this option because it's unconstrained and it allows
    you to make your VN look any way you like.
    So back to those clickable sections such as "new game" and "continue", what are they for? They are your mouse hotspots.
    We'll be using those to give coordinates to ren'py so it remembers where they are located and map an action to said hotspots.
    This image above will be called your "ground image." This is the way it looks when you are not hovering the mouse over any
    options. Now once you're done with this let's go and make the "hover version" which will look like this:
     
     

     
     
    As you can see I added an orange arrow to every clickable option. This will reflect each hotspot "hover" action when I pass
    the pointer over them. This will be our "hover image".
    Note that you can do whatever you want for your own hover effect, for example you can make the text grow larger or smaller,
    change colors or add a blending effect like glow or a simple transform. Once you're done with this, save both images in .png
    and place them inside the "game" folder, then let's go back to the "screens.rpy" script that we left open.
    Back in the screens script, scroll down till you reach this part:
     

    This is the default main menu that all stub VNs have. Don't worry about all that code though, we're going to completely replace it
    with our own. Let's start with making an "imagemap."
    First delete all the code shown on the image (except for the red parts, so you remember what you are changing. XD)
    Then type in this:
     
     
     
    screen main_menu:
    tag menu  (this line is very important when using custom screens, forget to add it and you will regret it.)
    imagemap:
            ground "your ground image.png" (remember to replace the filenames with your own. Also don't forget that images need to be inside the "game" folder.)
            hover "your hover image.png"
        
            
            hotspot (xxx, xxx, xx, xx) action Start()
            hotspot (xxx, xxx xx, xx) action ShowMenu("load")
            hotspot (xxx, xxx, xx, xx) action ShowMenu("preferences")
            hotspot (xxx, xxx, xx, xx) action Quit(confirm=True)
     
     
     
    There you have it. It's a basic imagemap  with the essential functions of a main menu. Pretty simple, no?
    So you might be wondering, what are those "X" symbols right next to "hotspots" Well, those are coordinates
    for the mouse. Those coordinates will tell Ren'py where your hotspots are located so let's go ahead and
    find these coordinates.
    Don't save any changes yet, instead go to your HUB and launch your project, then press SHIFT+D to enter
    the developers menu. while navigating through the menu find the "image location picker" option which will summon
    a list of all the images that are inside the "game" folder. Find your hover image and open it:
     
     
     

     
    As the image says, draw a rectangle over the area where you want your hotspot to be recognised.
    You'll get he coordinates for this hotspot on the lower left corner of the window. Input these coordinates on the screens
    script where the "X's" are. Repeat this process for each hotspot and remember to input the coordinates that match
    each section, don't go mixing them by mistake. XD
    Once you're done, your hotspot section will look smilar to this:
     
            hotspot (720, 611, 391, 70) action Start()
            hotspot (726, 691, 384, 60) action ShowMenu("load")
            hotspot (726, 758, 378, 63) action ShowMenu("preferences")
            hotspot (815, 828, 209, 59) action Quit(confirm=True)
     
    These are my coordinates by the way, don't copy/paste them because they won't work for you. Get your own coordinates. XD
    Once you're done typing the coordinates in, save your changes to screens script and close it. Then boot up your project to
    check your brand new custom title screen. If all went well you'll have a fully functional main menu, otherwise scroll back and try
    to follow the instructions to the letter.
     

     
    Previously we covered assets though briefly. This time we're focusing on the essential things to make an actual VN project, that said
    we already have the most important asset of them all. YOU. Yep you only need one person to make a VN. This in paper however is
    terribly inefficient and making your VN would take you a lot longer than if you had help. But, you can't always sit around waiting for
    help to come, you need to show something to the community to get feedback, and maybe help, later on. So you need to get some
    placeholder assets and show your idea to the world. It's what I did and what you should do if you plan on making a large scale project.
    However there's always the alternative to go solo, which is totally possible and moreso if you happen to be a really talented individual
    who has all the skills needed for making a VN, if not then there's always the "one man army method" which we will cover below.
     
    Backgrounds:
    There's 3 ways to deal with backgrounds when getting started/going solo: 1. You have the artistic skills and you draw them by yourself.
    2.You use the stock VN backgrounds readily available online (Uncle Mugen's collection is pretty solid.) just be aware that thousands of
    other people will be using them on their VNs as well. And 3. You use RL photographs. Out of all the choices for starter programmers and
    project leaders this is the most sensible option, you take a camera and venture outside to take pics of suitable locations for your VN.
    Contrary to popular belief, this method is used by professional studios, although this largely depends on the visual style of your project.
    That said you don't have to use the photos as is. You can make them look more cartoony and more suited for VN format:
     
    1. You take your photo to Photoshop and add an image filter to it. A combination of sponge+cutout gives it a painting feel for example.
    2. You take your photo to Illustrator and image trace it for "low fidelity" then crank up the paths and corners to 100% and finally export as .png
    (this is the method I'm using for this project.)
    3. You do an outline tracing by hand and then paint over the details with Photoshop or SAI and a tablet. (you need some basic art skills for this.)
     
    Out of these 3, number 1 is the fastest and simplest to do. Chances are you have Photoshop installed no matter if you dabble on art or design
    or not and filtering is just 2 clicks away. Number 2 has a nicer looking tracing effect but you require Illustrator and the 3rd one is so tedious and time
    consuming that you probably shouldn't consider it unless your VN has less than 10 backgrounds or something like that.
    Those aren't the only methods available though, you can always come up with one of your own and use it, Go wild, make that creativity explode!
    For reference, here's what I did for one of my backgrounds:
     
    Here's the RL picture:
     

     
    Here's the traced and edited version. As you can see I boosted the vibrance for added cartoony feel and even added some otaku touches to the room...
    ......I'll give a cookie to the one who identifies them all
     

     
    Of course that doesn't end there. You can always make variants for other times of the day as well
    For example late afternoon:
     

     
    Night time:
     

     
    And even artificial light:
     

     
    There's tons of things you can do with photographs, so don't feel discouraged if you are not an artist or can't find artists. Always remember:
    Creativity is boundless.
     
    Music:
    This one isn't particularly hard and it's the same deal as with art mostly. 1. You compose music yourself if you have the talent and skill for it.
    2.You use the readily available stock of P.B. (Public Domain) or R.F. (Royalty free) music. In both instances make sure to credit the composers
    properly. A good site for all things sound is freeSFX.co.uk
     
     
    Sprites:
    Here comes the big fish. One of the most important parts in any VN in existence. The graphical representations of your characters. AKA sprites.
    The lack of artistic skill shoots down many projects because there's not a "quick fix" for this. There are public use sprites but they are not very
    good and they might not suit your needs or the style of your VN. In this case if you're a one man army, you grit your teeth
    and start drawing. I had to that myself at some point. Practice makes perfect and while your sprites will not always be professional looking, you
    can only get better as you practice. If you simply cannot draw to save your life, you can always use the "rotoscope" technique.
    Don't be fooled by the word tho, It's just a mock term and you only need a camera and a PC. You get volunteers, take their pictures, transfer them
    to your PC crop and edit them the same way you do with backgrounds. You can make them look more cartoony or hell you can even go with black and white
    +stamp effect to make a Sin City style VN! If you are still inclined to make your own sprites however, you certainly can. That's what I'm doing for this project.
    Here a sample of my main heroine. Notice my Tsunako influence?
     

     
    What do you think? isn't she cute? Mind you, she went through 3 redesigns so indeed it's no easy task.
     
    And this will be all for now concerning the one man army method. If you have all your assets in order then let's get coding already! Let's get a test script
    underway. Remember that this is an actual VN project and not a mock script as before so if there's something you don't understand. Please do tell me
     
     

     
     
    With your assets handy, go to HUB and then open your stub script, then check that you have the following things in order. (Add stuff as needed.)
    REMEMBER: THESE ARE MY ASSETS, YOU NEED TO REPLACE NAMES AND FILES YOU SEE HERE WITH YOUR OWN:

    1. Image definitions: Like we covered previously, you have to define most images here in the main script:
     

     
    2. Character definitions: Same drill, follow the coding and remember what we've seen part 1 and 2:
     

     
    3. CTC animation: a click to continue animation. it will appear when a character has finished talking. It won't activate with narration unless you define the narrator as a character.
    Follow the code and replace with your own animation. All you need is a set of frames in .png (images should be 30 to 50 pixels wide.) For example: a blinking arrow.
     

     
    The x and y values at the end must be tweaked to match the position of your textbox.
     
    4.Custom position definitions: Chances are your sprites appear cut off from the screen or too low. Ren'py is not exactly intuitive so you can use this code to create a default position
    value for your sprites. Results will vary depending on the size of your sprites and the resolution of your VN. You can also use this code for custom sprite positions.
     

     
    To use this position remember what you learned in part 1 and 2:
    example: show Neru at myposition
     
    5.Custom transitions: Ever felt the fade out was too fast or the dissolve effect needed some tweaks? Worry not, as you can make custom transitions out of the existent ones. In this case this is
    a slow "drop down" but you can also make a custom dissolve, example: dissolve (0.5, 1.0, 0.5),  which is a very slow dissolve effect.
     

     
    6. Splash screen: Ren'py doesn't have stock code for splash screens. You can make a splash image appear while your game is loading, but the loading is so fast that the splash appears for
    half a second sometimes. Thankfully there's custom code to make your VN boot to a splash screen before the title screen! Follow this code replacing "mysplashscreen" and "mysplashsound"
    with your own.
     

     
     

     
    And that's it for the third part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly
    orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together
    for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts
    will certainly pay off. Do join me next time, when I'll be covering the rest of this section and UI styling in detail.
    Many thanks for your time and until then. See ya 


    Kind regards. Helvetica Standard.
  9. Like
    Helvetica Standard reacted to Weeev in Purrfectly Ever After (Kickstarter)   
    Purrfectly Ever After is an original English language visual novel (OELVN) for girls. This dating sim is filled with side-splitting comedy, over-the-top drama, and of course, heart-melting romance. This first game from Weeev aims to bridge the gap between Japanese-centric otome games told in a not-so-Japanese point of view and storyline.   Purrfectly Ever After focuses on a food-loving burglar cat who gets herself into a series of unfortunate events which ended up feeling sorry for herself. Luckily for her, she also encounters kind strangers who rescue her along the way. She wished that she could become a human so that she could earn food honestly. Her wish is overheard by a fairy godfather she didn’t even know she had. And so begins her story.   Game features 5 characters to romance Multiple endings and high replay value Japanese voice acting Available in English and Japanese Episodic content Available for iOS and Android, Windows and Mac if Greenlit Details Price: USD3.99 for main stories, USD1.99 for epilogues Release date: Tentatively October 2015   Links Video: youtu.be/asFfGXGceAM Development blog: purrfectlyeverafter.tumblr.com/ Pledge @ Kickstarter: kck.st/1H5IYst Vote @ Steam Greenlight: bit.ly/1fY3VK3  
    Register for iOS TestFlight Demo: goo.gl/KtQegc
     

     
     

     

     

      ABOUT WEEEV As an up-and-coming game developer, Weeev develops games with gasp-worthy plot twists, amazing art, and dozens of sweet moments that provide engaging experiences.   We hope for your support and feedback!
  10. Like
    Helvetica Standard reacted to Kosakyun in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Based Nepgear.
    If I could give you rep multiple times for this, I would. <3
  11. Like
    Helvetica Standard got a reaction from Gibberish in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Welcome back! Fellow programmers!

    Hello and welcome back to my 5 part guide "How to code a VN with Ren'py."
    Today we will have a special guide, a walkthrough on how to code an actual VN project. Last time we coded a mock
    VN however this time I'll be using a personal project as a guideline to teach you how everything's done
    straight from the drawing board! Fear not as you are on the right track and if you've checked out part 1
    and part 2 then you'll have no problem figuring this third part out. (Hopefully, since my explaining is terrible. XD)
    That said please bear in mind once more that this is not an infallible guide to program with python or ren'py and
    it will not make you an expert after you've read it. However I'll do my best to try and explain how to code a VN
    with Ren'py to the best of my ability and I will be with you for the entirety of this guide.
    So let's go fellow programmers! the sky is not the limit as your creativity is...boundless. Let's start, shall we?
     
     

     
     
     
    first off, open your HUB and go to your active projects, then launch your stub project which should look
    similar to this:


     
     
    The background is black to emphasize that we have nothing set so far, some of you might have a different color
    depending on your stock theme. The resolution you use for your VN will also be present from the moment you
    boot. In my case, I'm developing this VN in 1920x1080 resolution.
    Now, we need to get rid of this boring background and plainGUI design. Let's make a custom main menu.
    First, close your stub VN, go to your HUB and click on the "screens.rpy" link. This will open the script for screens,
    the place where we will create our very own main menu.
    Leave that open for now and then open your favourite image editing software, photoshop, SAI, illustrator, Paint studio, etc.
    Create a blank image with the resolution of your VN (for example, if the resolution of your VN is 800x600, then you make
    a blank image with those dimensions.) After that just get creative, use some flaming skulls and bleeding hearts or whatever
    you like. Alternatively you can just use text (That's what I'll do since my project has a minimalistic UI by design. xD )
    the point here is to edit the main menu to your liking. So let's go and see how it will look:
     
     

     
     
    This is my title screen. The focus of my VN is to make a reference to retro games, hence the austere 8 bit console look.
    You ought to make something different as my project is only a guideline, remember that.
    Now back on topic, as you can see, the clickable sections are displayed in this image, so you might be wondering: "can't
    you do that with Ren'py?" Yes and no. Ren'py allows custom styles but those are limited in a sense and require you to
    have more than just the basic python knowledge so we'll be going with this option because it's unconstrained and it allows
    you to make your VN look any way you like.
    So back to those clickable sections such as "new game" and "continue", what are they for? They are your mouse hotspots.
    We'll be using those to give coordinates to ren'py so it remembers where they are located and map an action to said hotspots.
    This image above will be called your "ground image." This is the way it looks when you are not hovering the mouse over any
    options. Now once you're done with this let's go and make the "hover version" which will look like this:
     
     

     
     
    As you can see I added an orange arrow to every clickable option. This will reflect each hotspot "hover" action when I pass
    the pointer over them. This will be our "hover image".
    Note that you can do whatever you want for your own hover effect, for example you can make the text grow larger or smaller,
    change colors or add a blending effect like glow or a simple transform. Once you're done with this, save both images in .png
    and place them inside the "game" folder, then let's go back to the "screens.rpy" script that we left open.
    Back in the screens script, scroll down till you reach this part:
     

    This is the default main menu that all stub VNs have. Don't worry about all that code though, we're going to completely replace it
    with our own. Let's start with making an "imagemap."
    First delete all the code shown on the image (except for the red parts, so you remember what you are changing. XD)
    Then type in this:
     
     
     
    screen main_menu:
    tag menu  (this line is very important when using custom screens, forget to add it and you will regret it.)
    imagemap:
            ground "your ground image.png" (remember to replace the filenames with your own. Also don't forget that images need to be inside the "game" folder.)
            hover "your hover image.png"
        
            
            hotspot (xxx, xxx, xx, xx) action Start()
            hotspot (xxx, xxx xx, xx) action ShowMenu("load")
            hotspot (xxx, xxx, xx, xx) action ShowMenu("preferences")
            hotspot (xxx, xxx, xx, xx) action Quit(confirm=True)
     
     
     
    There you have it. It's a basic imagemap  with the essential functions of a main menu. Pretty simple, no?
    So you might be wondering, what are those "X" symbols right next to "hotspots" Well, those are coordinates
    for the mouse. Those coordinates will tell Ren'py where your hotspots are located so let's go ahead and
    find these coordinates.
    Don't save any changes yet, instead go to your HUB and launch your project, then press SHIFT+D to enter
    the developers menu. while navigating through the menu find the "image location picker" option which will summon
    a list of all the images that are inside the "game" folder. Find your hover image and open it:
     
     
     

     
    As the image says, draw a rectangle over the area where you want your hotspot to be recognised.
    You'll get he coordinates for this hotspot on the lower left corner of the window. Input these coordinates on the screens
    script where the "X's" are. Repeat this process for each hotspot and remember to input the coordinates that match
    each section, don't go mixing them by mistake. XD
    Once you're done, your hotspot section will look smilar to this:
     
            hotspot (720, 611, 391, 70) action Start()
            hotspot (726, 691, 384, 60) action ShowMenu("load")
            hotspot (726, 758, 378, 63) action ShowMenu("preferences")
            hotspot (815, 828, 209, 59) action Quit(confirm=True)
     
    These are my coordinates by the way, don't copy/paste them because they won't work for you. Get your own coordinates. XD
    Once you're done typing the coordinates in, save your changes to screens script and close it. Then boot up your project to
    check your brand new custom title screen. If all went well you'll have a fully functional main menu, otherwise scroll back and try
    to follow the instructions to the letter.
     

     
    Previously we covered assets though briefly. This time we're focusing on the essential things to make an actual VN project, that said
    we already have the most important asset of them all. YOU. Yep you only need one person to make a VN. This in paper however is
    terribly inefficient and making your VN would take you a lot longer than if you had help. But, you can't always sit around waiting for
    help to come, you need to show something to the community to get feedback, and maybe help, later on. So you need to get some
    placeholder assets and show your idea to the world. It's what I did and what you should do if you plan on making a large scale project.
    However there's always the alternative to go solo, which is totally possible and moreso if you happen to be a really talented individual
    who has all the skills needed for making a VN, if not then there's always the "one man army method" which we will cover below.
     
    Backgrounds:
    There's 3 ways to deal with backgrounds when getting started/going solo: 1. You have the artistic skills and you draw them by yourself.
    2.You use the stock VN backgrounds readily available online (Uncle Mugen's collection is pretty solid.) just be aware that thousands of
    other people will be using them on their VNs as well. And 3. You use RL photographs. Out of all the choices for starter programmers and
    project leaders this is the most sensible option, you take a camera and venture outside to take pics of suitable locations for your VN.
    Contrary to popular belief, this method is used by professional studios, although this largely depends on the visual style of your project.
    That said you don't have to use the photos as is. You can make them look more cartoony and more suited for VN format:
     
    1. You take your photo to Photoshop and add an image filter to it. A combination of sponge+cutout gives it a painting feel for example.
    2. You take your photo to Illustrator and image trace it for "low fidelity" then crank up the paths and corners to 100% and finally export as .png
    (this is the method I'm using for this project.)
    3. You do an outline tracing by hand and then paint over the details with Photoshop or SAI and a tablet. (you need some basic art skills for this.)
     
    Out of these 3, number 1 is the fastest and simplest to do. Chances are you have Photoshop installed no matter if you dabble on art or design
    or not and filtering is just 2 clicks away. Number 2 has a nicer looking tracing effect but you require Illustrator and the 3rd one is so tedious and time
    consuming that you probably shouldn't consider it unless your VN has less than 10 backgrounds or something like that.
    Those aren't the only methods available though, you can always come up with one of your own and use it, Go wild, make that creativity explode!
    For reference, here's what I did for one of my backgrounds:
     
    Here's the RL picture:
     

     
    Here's the traced and edited version. As you can see I boosted the vibrance for added cartoony feel and even added some otaku touches to the room...
    ......I'll give a cookie to the one who identifies them all
     

     
    Of course that doesn't end there. You can always make variants for other times of the day as well
    For example late afternoon:
     

     
    Night time:
     

     
    And even artificial light:
     

     
    There's tons of things you can do with photographs, so don't feel discouraged if you are not an artist or can't find artists. Always remember:
    Creativity is boundless.
     
    Music:
    This one isn't particularly hard and it's the same deal as with art mostly. 1. You compose music yourself if you have the talent and skill for it.
    2.You use the readily available stock of P.B. (Public Domain) or R.F. (Royalty free) music. In both instances make sure to credit the composers
    properly. A good site for all things sound is freeSFX.co.uk
     
     
    Sprites:
    Here comes the big fish. One of the most important parts in any VN in existence. The graphical representations of your characters. AKA sprites.
    The lack of artistic skill shoots down many projects because there's not a "quick fix" for this. There are public use sprites but they are not very
    good and they might not suit your needs or the style of your VN. In this case if you're a one man army, you grit your teeth
    and start drawing. I had to that myself at some point. Practice makes perfect and while your sprites will not always be professional looking, you
    can only get better as you practice. If you simply cannot draw to save your life, you can always use the "rotoscope" technique.
    Don't be fooled by the word tho, It's just a mock term and you only need a camera and a PC. You get volunteers, take their pictures, transfer them
    to your PC crop and edit them the same way you do with backgrounds. You can make them look more cartoony or hell you can even go with black and white
    +stamp effect to make a Sin City style VN! If you are still inclined to make your own sprites however, you certainly can. That's what I'm doing for this project.
    Here a sample of my main heroine. Notice my Tsunako influence?
     

     
    What do you think? isn't she cute? Mind you, she went through 3 redesigns so indeed it's no easy task.
     
    And this will be all for now concerning the one man army method. If you have all your assets in order then let's get coding already! Let's get a test script
    underway. Remember that this is an actual VN project and not a mock script as before so if there's something you don't understand. Please do tell me
     
     

     
     
    With your assets handy, go to HUB and then open your stub script, then check that you have the following things in order. (Add stuff as needed.)
    REMEMBER: THESE ARE MY ASSETS, YOU NEED TO REPLACE NAMES AND FILES YOU SEE HERE WITH YOUR OWN:

    1. Image definitions: Like we covered previously, you have to define most images here in the main script:
     

     
    2. Character definitions: Same drill, follow the coding and remember what we've seen part 1 and 2:
     

     
    3. CTC animation: a click to continue animation. it will appear when a character has finished talking. It won't activate with narration unless you define the narrator as a character.
    Follow the code and replace with your own animation. All you need is a set of frames in .png (images should be 30 to 50 pixels wide.) For example: a blinking arrow.
     

     
    The x and y values at the end must be tweaked to match the position of your textbox.
     
    4.Custom position definitions: Chances are your sprites appear cut off from the screen or too low. Ren'py is not exactly intuitive so you can use this code to create a default position
    value for your sprites. Results will vary depending on the size of your sprites and the resolution of your VN. You can also use this code for custom sprite positions.
     

     
    To use this position remember what you learned in part 1 and 2:
    example: show Neru at myposition
     
    5.Custom transitions: Ever felt the fade out was too fast or the dissolve effect needed some tweaks? Worry not, as you can make custom transitions out of the existent ones. In this case this is
    a slow "drop down" but you can also make a custom dissolve, example: dissolve (0.5, 1.0, 0.5),  which is a very slow dissolve effect.
     

     
    6. Splash screen: Ren'py doesn't have stock code for splash screens. You can make a splash image appear while your game is loading, but the loading is so fast that the splash appears for
    half a second sometimes. Thankfully there's custom code to make your VN boot to a splash screen before the title screen! Follow this code replacing "mysplashscreen" and "mysplashsound"
    with your own.
     

     
     

     
    And that's it for the third part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly
    orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together
    for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts
    will certainly pay off. Do join me next time, when I'll be covering the rest of this section and UI styling in detail.
    Many thanks for your time and until then. See ya 


    Kind regards. Helvetica Standard.
  12. Like
    Helvetica Standard reacted to Kosakyun in Members who hide their genders   
    I just don't think it's that significant, in general. Unless you want to point out differences in experiences in relation to gender difference as well. That may be true, but some people just aren't that comfortable in giving away their genders. Of course, I'm not saying that you need to be a certain gender to be uncomfortable doing so. It's too much of a generalization if we put it that way. Let's just say that some people view it as 'too personal'.
     
    Or they just all go with 'all people in the internet are men'.
     
    ...By the way, I'm a princess.
  13. Like
    Helvetica Standard reacted to Nosebleed in Members who hide their genders   
    Because no humanly possible gender definition can showcase how much of a best grill I am.
  14. Like
    Helvetica Standard got a reaction from Narcosis in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Welcome back! Fellow programmers!

    Hello and welcome back to my 5 part guide "How to code a VN with Ren'py."
    Today we will have a special guide, a walkthrough on how to code an actual VN project. Last time we coded a mock
    VN however this time I'll be using a personal project as a guideline to teach you how everything's done
    straight from the drawing board! Fear not as you are on the right track and if you've checked out part 1
    and part 2 then you'll have no problem figuring this third part out. (Hopefully, since my explaining is terrible. XD)
    That said please bear in mind once more that this is not an infallible guide to program with python or ren'py and
    it will not make you an expert after you've read it. However I'll do my best to try and explain how to code a VN
    with Ren'py to the best of my ability and I will be with you for the entirety of this guide.
    So let's go fellow programmers! the sky is not the limit as your creativity is...boundless. Let's start, shall we?
     
     

     
     
     
    first off, open your HUB and go to your active projects, then launch your stub project which should look
    similar to this:


     
     
    The background is black to emphasize that we have nothing set so far, some of you might have a different color
    depending on your stock theme. The resolution you use for your VN will also be present from the moment you
    boot. In my case, I'm developing this VN in 1920x1080 resolution.
    Now, we need to get rid of this boring background and plainGUI design. Let's make a custom main menu.
    First, close your stub VN, go to your HUB and click on the "screens.rpy" link. This will open the script for screens,
    the place where we will create our very own main menu.
    Leave that open for now and then open your favourite image editing software, photoshop, SAI, illustrator, Paint studio, etc.
    Create a blank image with the resolution of your VN (for example, if the resolution of your VN is 800x600, then you make
    a blank image with those dimensions.) After that just get creative, use some flaming skulls and bleeding hearts or whatever
    you like. Alternatively you can just use text (That's what I'll do since my project has a minimalistic UI by design. xD )
    the point here is to edit the main menu to your liking. So let's go and see how it will look:
     
     

     
     
    This is my title screen. The focus of my VN is to make a reference to retro games, hence the austere 8 bit console look.
    You ought to make something different as my project is only a guideline, remember that.
    Now back on topic, as you can see, the clickable sections are displayed in this image, so you might be wondering: "can't
    you do that with Ren'py?" Yes and no. Ren'py allows custom styles but those are limited in a sense and require you to
    have more than just the basic python knowledge so we'll be going with this option because it's unconstrained and it allows
    you to make your VN look any way you like.
    So back to those clickable sections such as "new game" and "continue", what are they for? They are your mouse hotspots.
    We'll be using those to give coordinates to ren'py so it remembers where they are located and map an action to said hotspots.
    This image above will be called your "ground image." This is the way it looks when you are not hovering the mouse over any
    options. Now once you're done with this let's go and make the "hover version" which will look like this:
     
     

     
     
    As you can see I added an orange arrow to every clickable option. This will reflect each hotspot "hover" action when I pass
    the pointer over them. This will be our "hover image".
    Note that you can do whatever you want for your own hover effect, for example you can make the text grow larger or smaller,
    change colors or add a blending effect like glow or a simple transform. Once you're done with this, save both images in .png
    and place them inside the "game" folder, then let's go back to the "screens.rpy" script that we left open.
    Back in the screens script, scroll down till you reach this part:
     

    This is the default main menu that all stub VNs have. Don't worry about all that code though, we're going to completely replace it
    with our own. Let's start with making an "imagemap."
    First delete all the code shown on the image (except for the red parts, so you remember what you are changing. XD)
    Then type in this:
     
     
     
    screen main_menu:
    tag menu  (this line is very important when using custom screens, forget to add it and you will regret it.)
    imagemap:
            ground "your ground image.png" (remember to replace the filenames with your own. Also don't forget that images need to be inside the "game" folder.)
            hover "your hover image.png"
        
            
            hotspot (xxx, xxx, xx, xx) action Start()
            hotspot (xxx, xxx xx, xx) action ShowMenu("load")
            hotspot (xxx, xxx, xx, xx) action ShowMenu("preferences")
            hotspot (xxx, xxx, xx, xx) action Quit(confirm=True)
     
     
     
    There you have it. It's a basic imagemap  with the essential functions of a main menu. Pretty simple, no?
    So you might be wondering, what are those "X" symbols right next to "hotspots" Well, those are coordinates
    for the mouse. Those coordinates will tell Ren'py where your hotspots are located so let's go ahead and
    find these coordinates.
    Don't save any changes yet, instead go to your HUB and launch your project, then press SHIFT+D to enter
    the developers menu. while navigating through the menu find the "image location picker" option which will summon
    a list of all the images that are inside the "game" folder. Find your hover image and open it:
     
     
     

     
    As the image says, draw a rectangle over the area where you want your hotspot to be recognised.
    You'll get he coordinates for this hotspot on the lower left corner of the window. Input these coordinates on the screens
    script where the "X's" are. Repeat this process for each hotspot and remember to input the coordinates that match
    each section, don't go mixing them by mistake. XD
    Once you're done, your hotspot section will look smilar to this:
     
            hotspot (720, 611, 391, 70) action Start()
            hotspot (726, 691, 384, 60) action ShowMenu("load")
            hotspot (726, 758, 378, 63) action ShowMenu("preferences")
            hotspot (815, 828, 209, 59) action Quit(confirm=True)
     
    These are my coordinates by the way, don't copy/paste them because they won't work for you. Get your own coordinates. XD
    Once you're done typing the coordinates in, save your changes to screens script and close it. Then boot up your project to
    check your brand new custom title screen. If all went well you'll have a fully functional main menu, otherwise scroll back and try
    to follow the instructions to the letter.
     

     
    Previously we covered assets though briefly. This time we're focusing on the essential things to make an actual VN project, that said
    we already have the most important asset of them all. YOU. Yep you only need one person to make a VN. This in paper however is
    terribly inefficient and making your VN would take you a lot longer than if you had help. But, you can't always sit around waiting for
    help to come, you need to show something to the community to get feedback, and maybe help, later on. So you need to get some
    placeholder assets and show your idea to the world. It's what I did and what you should do if you plan on making a large scale project.
    However there's always the alternative to go solo, which is totally possible and moreso if you happen to be a really talented individual
    who has all the skills needed for making a VN, if not then there's always the "one man army method" which we will cover below.
     
    Backgrounds:
    There's 3 ways to deal with backgrounds when getting started/going solo: 1. You have the artistic skills and you draw them by yourself.
    2.You use the stock VN backgrounds readily available online (Uncle Mugen's collection is pretty solid.) just be aware that thousands of
    other people will be using them on their VNs as well. And 3. You use RL photographs. Out of all the choices for starter programmers and
    project leaders this is the most sensible option, you take a camera and venture outside to take pics of suitable locations for your VN.
    Contrary to popular belief, this method is used by professional studios, although this largely depends on the visual style of your project.
    That said you don't have to use the photos as is. You can make them look more cartoony and more suited for VN format:
     
    1. You take your photo to Photoshop and add an image filter to it. A combination of sponge+cutout gives it a painting feel for example.
    2. You take your photo to Illustrator and image trace it for "low fidelity" then crank up the paths and corners to 100% and finally export as .png
    (this is the method I'm using for this project.)
    3. You do an outline tracing by hand and then paint over the details with Photoshop or SAI and a tablet. (you need some basic art skills for this.)
     
    Out of these 3, number 1 is the fastest and simplest to do. Chances are you have Photoshop installed no matter if you dabble on art or design
    or not and filtering is just 2 clicks away. Number 2 has a nicer looking tracing effect but you require Illustrator and the 3rd one is so tedious and time
    consuming that you probably shouldn't consider it unless your VN has less than 10 backgrounds or something like that.
    Those aren't the only methods available though, you can always come up with one of your own and use it, Go wild, make that creativity explode!
    For reference, here's what I did for one of my backgrounds:
     
    Here's the RL picture:
     

     
    Here's the traced and edited version. As you can see I boosted the vibrance for added cartoony feel and even added some otaku touches to the room...
    ......I'll give a cookie to the one who identifies them all
     

     
    Of course that doesn't end there. You can always make variants for other times of the day as well
    For example late afternoon:
     

     
    Night time:
     

     
    And even artificial light:
     

     
    There's tons of things you can do with photographs, so don't feel discouraged if you are not an artist or can't find artists. Always remember:
    Creativity is boundless.
     
    Music:
    This one isn't particularly hard and it's the same deal as with art mostly. 1. You compose music yourself if you have the talent and skill for it.
    2.You use the readily available stock of P.B. (Public Domain) or R.F. (Royalty free) music. In both instances make sure to credit the composers
    properly. A good site for all things sound is freeSFX.co.uk
     
     
    Sprites:
    Here comes the big fish. One of the most important parts in any VN in existence. The graphical representations of your characters. AKA sprites.
    The lack of artistic skill shoots down many projects because there's not a "quick fix" for this. There are public use sprites but they are not very
    good and they might not suit your needs or the style of your VN. In this case if you're a one man army, you grit your teeth
    and start drawing. I had to that myself at some point. Practice makes perfect and while your sprites will not always be professional looking, you
    can only get better as you practice. If you simply cannot draw to save your life, you can always use the "rotoscope" technique.
    Don't be fooled by the word tho, It's just a mock term and you only need a camera and a PC. You get volunteers, take their pictures, transfer them
    to your PC crop and edit them the same way you do with backgrounds. You can make them look more cartoony or hell you can even go with black and white
    +stamp effect to make a Sin City style VN! If you are still inclined to make your own sprites however, you certainly can. That's what I'm doing for this project.
    Here a sample of my main heroine. Notice my Tsunako influence?
     

     
    What do you think? isn't she cute? Mind you, she went through 3 redesigns so indeed it's no easy task.
     
    And this will be all for now concerning the one man army method. If you have all your assets in order then let's get coding already! Let's get a test script
    underway. Remember that this is an actual VN project and not a mock script as before so if there's something you don't understand. Please do tell me
     
     

     
     
    With your assets handy, go to HUB and then open your stub script, then check that you have the following things in order. (Add stuff as needed.)
    REMEMBER: THESE ARE MY ASSETS, YOU NEED TO REPLACE NAMES AND FILES YOU SEE HERE WITH YOUR OWN:

    1. Image definitions: Like we covered previously, you have to define most images here in the main script:
     

     
    2. Character definitions: Same drill, follow the coding and remember what we've seen part 1 and 2:
     

     
    3. CTC animation: a click to continue animation. it will appear when a character has finished talking. It won't activate with narration unless you define the narrator as a character.
    Follow the code and replace with your own animation. All you need is a set of frames in .png (images should be 30 to 50 pixels wide.) For example: a blinking arrow.
     

     
    The x and y values at the end must be tweaked to match the position of your textbox.
     
    4.Custom position definitions: Chances are your sprites appear cut off from the screen or too low. Ren'py is not exactly intuitive so you can use this code to create a default position
    value for your sprites. Results will vary depending on the size of your sprites and the resolution of your VN. You can also use this code for custom sprite positions.
     

     
    To use this position remember what you learned in part 1 and 2:
    example: show Neru at myposition
     
    5.Custom transitions: Ever felt the fade out was too fast or the dissolve effect needed some tweaks? Worry not, as you can make custom transitions out of the existent ones. In this case this is
    a slow "drop down" but you can also make a custom dissolve, example: dissolve (0.5, 1.0, 0.5),  which is a very slow dissolve effect.
     

     
    6. Splash screen: Ren'py doesn't have stock code for splash screens. You can make a splash image appear while your game is loading, but the loading is so fast that the splash appears for
    half a second sometimes. Thankfully there's custom code to make your VN boot to a splash screen before the title screen! Follow this code replacing "mysplashscreen" and "mysplashsound"
    with your own.
     

     
     

     
    And that's it for the third part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly
    orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together
    for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts
    will certainly pay off. Do join me next time, when I'll be covering the rest of this section and UI styling in detail.
    Many thanks for your time and until then. See ya 


    Kind regards. Helvetica Standard.
  15. Like
    Helvetica Standard got a reaction from Tay in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Kind reminder for those confused. I apologise if I wasn't clear enough but this 3rd part of the guide is not standalone.
    This entry assumes you have read and understood both part 1 and 2 which covers several stuff mentioned there.
    Any doubts or questions, don't hesitate to contact me, I'll personally help you out.
  16. Like
    Helvetica Standard got a reaction from LinovaA in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Welcome back! Fellow programmers!

    Hello and welcome back to my 5 part guide "How to code a VN with Ren'py."
    Today we will have a special guide, a walkthrough on how to code an actual VN project. Last time we coded a mock
    VN however this time I'll be using a personal project as a guideline to teach you how everything's done
    straight from the drawing board! Fear not as you are on the right track and if you've checked out part 1
    and part 2 then you'll have no problem figuring this third part out. (Hopefully, since my explaining is terrible. XD)
    That said please bear in mind once more that this is not an infallible guide to program with python or ren'py and
    it will not make you an expert after you've read it. However I'll do my best to try and explain how to code a VN
    with Ren'py to the best of my ability and I will be with you for the entirety of this guide.
    So let's go fellow programmers! the sky is not the limit as your creativity is...boundless. Let's start, shall we?
     
     

     
     
     
    first off, open your HUB and go to your active projects, then launch your stub project which should look
    similar to this:


     
     
    The background is black to emphasize that we have nothing set so far, some of you might have a different color
    depending on your stock theme. The resolution you use for your VN will also be present from the moment you
    boot. In my case, I'm developing this VN in 1920x1080 resolution.
    Now, we need to get rid of this boring background and plainGUI design. Let's make a custom main menu.
    First, close your stub VN, go to your HUB and click on the "screens.rpy" link. This will open the script for screens,
    the place where we will create our very own main menu.
    Leave that open for now and then open your favourite image editing software, photoshop, SAI, illustrator, Paint studio, etc.
    Create a blank image with the resolution of your VN (for example, if the resolution of your VN is 800x600, then you make
    a blank image with those dimensions.) After that just get creative, use some flaming skulls and bleeding hearts or whatever
    you like. Alternatively you can just use text (That's what I'll do since my project has a minimalistic UI by design. xD )
    the point here is to edit the main menu to your liking. So let's go and see how it will look:
     
     

     
     
    This is my title screen. The focus of my VN is to make a reference to retro games, hence the austere 8 bit console look.
    You ought to make something different as my project is only a guideline, remember that.
    Now back on topic, as you can see, the clickable sections are displayed in this image, so you might be wondering: "can't
    you do that with Ren'py?" Yes and no. Ren'py allows custom styles but those are limited in a sense and require you to
    have more than just the basic python knowledge so we'll be going with this option because it's unconstrained and it allows
    you to make your VN look any way you like.
    So back to those clickable sections such as "new game" and "continue", what are they for? They are your mouse hotspots.
    We'll be using those to give coordinates to ren'py so it remembers where they are located and map an action to said hotspots.
    This image above will be called your "ground image." This is the way it looks when you are not hovering the mouse over any
    options. Now once you're done with this let's go and make the "hover version" which will look like this:
     
     

     
     
    As you can see I added an orange arrow to every clickable option. This will reflect each hotspot "hover" action when I pass
    the pointer over them. This will be our "hover image".
    Note that you can do whatever you want for your own hover effect, for example you can make the text grow larger or smaller,
    change colors or add a blending effect like glow or a simple transform. Once you're done with this, save both images in .png
    and place them inside the "game" folder, then let's go back to the "screens.rpy" script that we left open.
    Back in the screens script, scroll down till you reach this part:
     

    This is the default main menu that all stub VNs have. Don't worry about all that code though, we're going to completely replace it
    with our own. Let's start with making an "imagemap."
    First delete all the code shown on the image (except for the red parts, so you remember what you are changing. XD)
    Then type in this:
     
     
     
    screen main_menu:
    tag menu  (this line is very important when using custom screens, forget to add it and you will regret it.)
    imagemap:
            ground "your ground image.png" (remember to replace the filenames with your own. Also don't forget that images need to be inside the "game" folder.)
            hover "your hover image.png"
        
            
            hotspot (xxx, xxx, xx, xx) action Start()
            hotspot (xxx, xxx xx, xx) action ShowMenu("load")
            hotspot (xxx, xxx, xx, xx) action ShowMenu("preferences")
            hotspot (xxx, xxx, xx, xx) action Quit(confirm=True)
     
     
     
    There you have it. It's a basic imagemap  with the essential functions of a main menu. Pretty simple, no?
    So you might be wondering, what are those "X" symbols right next to "hotspots" Well, those are coordinates
    for the mouse. Those coordinates will tell Ren'py where your hotspots are located so let's go ahead and
    find these coordinates.
    Don't save any changes yet, instead go to your HUB and launch your project, then press SHIFT+D to enter
    the developers menu. while navigating through the menu find the "image location picker" option which will summon
    a list of all the images that are inside the "game" folder. Find your hover image and open it:
     
     
     

     
    As the image says, draw a rectangle over the area where you want your hotspot to be recognised.
    You'll get he coordinates for this hotspot on the lower left corner of the window. Input these coordinates on the screens
    script where the "X's" are. Repeat this process for each hotspot and remember to input the coordinates that match
    each section, don't go mixing them by mistake. XD
    Once you're done, your hotspot section will look smilar to this:
     
            hotspot (720, 611, 391, 70) action Start()
            hotspot (726, 691, 384, 60) action ShowMenu("load")
            hotspot (726, 758, 378, 63) action ShowMenu("preferences")
            hotspot (815, 828, 209, 59) action Quit(confirm=True)
     
    These are my coordinates by the way, don't copy/paste them because they won't work for you. Get your own coordinates. XD
    Once you're done typing the coordinates in, save your changes to screens script and close it. Then boot up your project to
    check your brand new custom title screen. If all went well you'll have a fully functional main menu, otherwise scroll back and try
    to follow the instructions to the letter.
     

     
    Previously we covered assets though briefly. This time we're focusing on the essential things to make an actual VN project, that said
    we already have the most important asset of them all. YOU. Yep you only need one person to make a VN. This in paper however is
    terribly inefficient and making your VN would take you a lot longer than if you had help. But, you can't always sit around waiting for
    help to come, you need to show something to the community to get feedback, and maybe help, later on. So you need to get some
    placeholder assets and show your idea to the world. It's what I did and what you should do if you plan on making a large scale project.
    However there's always the alternative to go solo, which is totally possible and moreso if you happen to be a really talented individual
    who has all the skills needed for making a VN, if not then there's always the "one man army method" which we will cover below.
     
    Backgrounds:
    There's 3 ways to deal with backgrounds when getting started/going solo: 1. You have the artistic skills and you draw them by yourself.
    2.You use the stock VN backgrounds readily available online (Uncle Mugen's collection is pretty solid.) just be aware that thousands of
    other people will be using them on their VNs as well. And 3. You use RL photographs. Out of all the choices for starter programmers and
    project leaders this is the most sensible option, you take a camera and venture outside to take pics of suitable locations for your VN.
    Contrary to popular belief, this method is used by professional studios, although this largely depends on the visual style of your project.
    That said you don't have to use the photos as is. You can make them look more cartoony and more suited for VN format:
     
    1. You take your photo to Photoshop and add an image filter to it. A combination of sponge+cutout gives it a painting feel for example.
    2. You take your photo to Illustrator and image trace it for "low fidelity" then crank up the paths and corners to 100% and finally export as .png
    (this is the method I'm using for this project.)
    3. You do an outline tracing by hand and then paint over the details with Photoshop or SAI and a tablet. (you need some basic art skills for this.)
     
    Out of these 3, number 1 is the fastest and simplest to do. Chances are you have Photoshop installed no matter if you dabble on art or design
    or not and filtering is just 2 clicks away. Number 2 has a nicer looking tracing effect but you require Illustrator and the 3rd one is so tedious and time
    consuming that you probably shouldn't consider it unless your VN has less than 10 backgrounds or something like that.
    Those aren't the only methods available though, you can always come up with one of your own and use it, Go wild, make that creativity explode!
    For reference, here's what I did for one of my backgrounds:
     
    Here's the RL picture:
     

     
    Here's the traced and edited version. As you can see I boosted the vibrance for added cartoony feel and even added some otaku touches to the room...
    ......I'll give a cookie to the one who identifies them all
     

     
    Of course that doesn't end there. You can always make variants for other times of the day as well
    For example late afternoon:
     

     
    Night time:
     

     
    And even artificial light:
     

     
    There's tons of things you can do with photographs, so don't feel discouraged if you are not an artist or can't find artists. Always remember:
    Creativity is boundless.
     
    Music:
    This one isn't particularly hard and it's the same deal as with art mostly. 1. You compose music yourself if you have the talent and skill for it.
    2.You use the readily available stock of P.B. (Public Domain) or R.F. (Royalty free) music. In both instances make sure to credit the composers
    properly. A good site for all things sound is freeSFX.co.uk
     
     
    Sprites:
    Here comes the big fish. One of the most important parts in any VN in existence. The graphical representations of your characters. AKA sprites.
    The lack of artistic skill shoots down many projects because there's not a "quick fix" for this. There are public use sprites but they are not very
    good and they might not suit your needs or the style of your VN. In this case if you're a one man army, you grit your teeth
    and start drawing. I had to that myself at some point. Practice makes perfect and while your sprites will not always be professional looking, you
    can only get better as you practice. If you simply cannot draw to save your life, you can always use the "rotoscope" technique.
    Don't be fooled by the word tho, It's just a mock term and you only need a camera and a PC. You get volunteers, take their pictures, transfer them
    to your PC crop and edit them the same way you do with backgrounds. You can make them look more cartoony or hell you can even go with black and white
    +stamp effect to make a Sin City style VN! If you are still inclined to make your own sprites however, you certainly can. That's what I'm doing for this project.
    Here a sample of my main heroine. Notice my Tsunako influence?
     

     
    What do you think? isn't she cute? Mind you, she went through 3 redesigns so indeed it's no easy task.
     
    And this will be all for now concerning the one man army method. If you have all your assets in order then let's get coding already! Let's get a test script
    underway. Remember that this is an actual VN project and not a mock script as before so if there's something you don't understand. Please do tell me
     
     

     
     
    With your assets handy, go to HUB and then open your stub script, then check that you have the following things in order. (Add stuff as needed.)
    REMEMBER: THESE ARE MY ASSETS, YOU NEED TO REPLACE NAMES AND FILES YOU SEE HERE WITH YOUR OWN:

    1. Image definitions: Like we covered previously, you have to define most images here in the main script:
     

     
    2. Character definitions: Same drill, follow the coding and remember what we've seen part 1 and 2:
     

     
    3. CTC animation: a click to continue animation. it will appear when a character has finished talking. It won't activate with narration unless you define the narrator as a character.
    Follow the code and replace with your own animation. All you need is a set of frames in .png (images should be 30 to 50 pixels wide.) For example: a blinking arrow.
     

     
    The x and y values at the end must be tweaked to match the position of your textbox.
     
    4.Custom position definitions: Chances are your sprites appear cut off from the screen or too low. Ren'py is not exactly intuitive so you can use this code to create a default position
    value for your sprites. Results will vary depending on the size of your sprites and the resolution of your VN. You can also use this code for custom sprite positions.
     

     
    To use this position remember what you learned in part 1 and 2:
    example: show Neru at myposition
     
    5.Custom transitions: Ever felt the fade out was too fast or the dissolve effect needed some tweaks? Worry not, as you can make custom transitions out of the existent ones. In this case this is
    a slow "drop down" but you can also make a custom dissolve, example: dissolve (0.5, 1.0, 0.5),  which is a very slow dissolve effect.
     

     
    6. Splash screen: Ren'py doesn't have stock code for splash screens. You can make a splash image appear while your game is loading, but the loading is so fast that the splash appears for
    half a second sometimes. Thankfully there's custom code to make your VN boot to a splash screen before the title screen! Follow this code replacing "mysplashscreen" and "mysplashsound"
    with your own.
     

     
     

     
    And that's it for the third part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly
    orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together
    for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts
    will certainly pay off. Do join me next time, when I'll be covering the rest of this section and UI styling in detail.
    Many thanks for your time and until then. See ya 


    Kind regards. Helvetica Standard.
  17. Like
    Helvetica Standard got a reaction from Darklord Rooke in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Welcome back! Fellow programmers!

    Hello and welcome back to my 5 part guide "How to code a VN with Ren'py."
    Today we will have a special guide, a walkthrough on how to code an actual VN project. Last time we coded a mock
    VN however this time I'll be using a personal project as a guideline to teach you how everything's done
    straight from the drawing board! Fear not as you are on the right track and if you've checked out part 1
    and part 2 then you'll have no problem figuring this third part out. (Hopefully, since my explaining is terrible. XD)
    That said please bear in mind once more that this is not an infallible guide to program with python or ren'py and
    it will not make you an expert after you've read it. However I'll do my best to try and explain how to code a VN
    with Ren'py to the best of my ability and I will be with you for the entirety of this guide.
    So let's go fellow programmers! the sky is not the limit as your creativity is...boundless. Let's start, shall we?
     
     

     
     
     
    first off, open your HUB and go to your active projects, then launch your stub project which should look
    similar to this:


     
     
    The background is black to emphasize that we have nothing set so far, some of you might have a different color
    depending on your stock theme. The resolution you use for your VN will also be present from the moment you
    boot. In my case, I'm developing this VN in 1920x1080 resolution.
    Now, we need to get rid of this boring background and plainGUI design. Let's make a custom main menu.
    First, close your stub VN, go to your HUB and click on the "screens.rpy" link. This will open the script for screens,
    the place where we will create our very own main menu.
    Leave that open for now and then open your favourite image editing software, photoshop, SAI, illustrator, Paint studio, etc.
    Create a blank image with the resolution of your VN (for example, if the resolution of your VN is 800x600, then you make
    a blank image with those dimensions.) After that just get creative, use some flaming skulls and bleeding hearts or whatever
    you like. Alternatively you can just use text (That's what I'll do since my project has a minimalistic UI by design. xD )
    the point here is to edit the main menu to your liking. So let's go and see how it will look:
     
     

     
     
    This is my title screen. The focus of my VN is to make a reference to retro games, hence the austere 8 bit console look.
    You ought to make something different as my project is only a guideline, remember that.
    Now back on topic, as you can see, the clickable sections are displayed in this image, so you might be wondering: "can't
    you do that with Ren'py?" Yes and no. Ren'py allows custom styles but those are limited in a sense and require you to
    have more than just the basic python knowledge so we'll be going with this option because it's unconstrained and it allows
    you to make your VN look any way you like.
    So back to those clickable sections such as "new game" and "continue", what are they for? They are your mouse hotspots.
    We'll be using those to give coordinates to ren'py so it remembers where they are located and map an action to said hotspots.
    This image above will be called your "ground image." This is the way it looks when you are not hovering the mouse over any
    options. Now once you're done with this let's go and make the "hover version" which will look like this:
     
     

     
     
    As you can see I added an orange arrow to every clickable option. This will reflect each hotspot "hover" action when I pass
    the pointer over them. This will be our "hover image".
    Note that you can do whatever you want for your own hover effect, for example you can make the text grow larger or smaller,
    change colors or add a blending effect like glow or a simple transform. Once you're done with this, save both images in .png
    and place them inside the "game" folder, then let's go back to the "screens.rpy" script that we left open.
    Back in the screens script, scroll down till you reach this part:
     

    This is the default main menu that all stub VNs have. Don't worry about all that code though, we're going to completely replace it
    with our own. Let's start with making an "imagemap."
    First delete all the code shown on the image (except for the red parts, so you remember what you are changing. XD)
    Then type in this:
     
     
     
    screen main_menu:
    tag menu  (this line is very important when using custom screens, forget to add it and you will regret it.)
    imagemap:
            ground "your ground image.png" (remember to replace the filenames with your own. Also don't forget that images need to be inside the "game" folder.)
            hover "your hover image.png"
        
            
            hotspot (xxx, xxx, xx, xx) action Start()
            hotspot (xxx, xxx xx, xx) action ShowMenu("load")
            hotspot (xxx, xxx, xx, xx) action ShowMenu("preferences")
            hotspot (xxx, xxx, xx, xx) action Quit(confirm=True)
     
     
     
    There you have it. It's a basic imagemap  with the essential functions of a main menu. Pretty simple, no?
    So you might be wondering, what are those "X" symbols right next to "hotspots" Well, those are coordinates
    for the mouse. Those coordinates will tell Ren'py where your hotspots are located so let's go ahead and
    find these coordinates.
    Don't save any changes yet, instead go to your HUB and launch your project, then press SHIFT+D to enter
    the developers menu. while navigating through the menu find the "image location picker" option which will summon
    a list of all the images that are inside the "game" folder. Find your hover image and open it:
     
     
     

     
    As the image says, draw a rectangle over the area where you want your hotspot to be recognised.
    You'll get he coordinates for this hotspot on the lower left corner of the window. Input these coordinates on the screens
    script where the "X's" are. Repeat this process for each hotspot and remember to input the coordinates that match
    each section, don't go mixing them by mistake. XD
    Once you're done, your hotspot section will look smilar to this:
     
            hotspot (720, 611, 391, 70) action Start()
            hotspot (726, 691, 384, 60) action ShowMenu("load")
            hotspot (726, 758, 378, 63) action ShowMenu("preferences")
            hotspot (815, 828, 209, 59) action Quit(confirm=True)
     
    These are my coordinates by the way, don't copy/paste them because they won't work for you. Get your own coordinates. XD
    Once you're done typing the coordinates in, save your changes to screens script and close it. Then boot up your project to
    check your brand new custom title screen. If all went well you'll have a fully functional main menu, otherwise scroll back and try
    to follow the instructions to the letter.
     

     
    Previously we covered assets though briefly. This time we're focusing on the essential things to make an actual VN project, that said
    we already have the most important asset of them all. YOU. Yep you only need one person to make a VN. This in paper however is
    terribly inefficient and making your VN would take you a lot longer than if you had help. But, you can't always sit around waiting for
    help to come, you need to show something to the community to get feedback, and maybe help, later on. So you need to get some
    placeholder assets and show your idea to the world. It's what I did and what you should do if you plan on making a large scale project.
    However there's always the alternative to go solo, which is totally possible and moreso if you happen to be a really talented individual
    who has all the skills needed for making a VN, if not then there's always the "one man army method" which we will cover below.
     
    Backgrounds:
    There's 3 ways to deal with backgrounds when getting started/going solo: 1. You have the artistic skills and you draw them by yourself.
    2.You use the stock VN backgrounds readily available online (Uncle Mugen's collection is pretty solid.) just be aware that thousands of
    other people will be using them on their VNs as well. And 3. You use RL photographs. Out of all the choices for starter programmers and
    project leaders this is the most sensible option, you take a camera and venture outside to take pics of suitable locations for your VN.
    Contrary to popular belief, this method is used by professional studios, although this largely depends on the visual style of your project.
    That said you don't have to use the photos as is. You can make them look more cartoony and more suited for VN format:
     
    1. You take your photo to Photoshop and add an image filter to it. A combination of sponge+cutout gives it a painting feel for example.
    2. You take your photo to Illustrator and image trace it for "low fidelity" then crank up the paths and corners to 100% and finally export as .png
    (this is the method I'm using for this project.)
    3. You do an outline tracing by hand and then paint over the details with Photoshop or SAI and a tablet. (you need some basic art skills for this.)
     
    Out of these 3, number 1 is the fastest and simplest to do. Chances are you have Photoshop installed no matter if you dabble on art or design
    or not and filtering is just 2 clicks away. Number 2 has a nicer looking tracing effect but you require Illustrator and the 3rd one is so tedious and time
    consuming that you probably shouldn't consider it unless your VN has less than 10 backgrounds or something like that.
    Those aren't the only methods available though, you can always come up with one of your own and use it, Go wild, make that creativity explode!
    For reference, here's what I did for one of my backgrounds:
     
    Here's the RL picture:
     

     
    Here's the traced and edited version. As you can see I boosted the vibrance for added cartoony feel and even added some otaku touches to the room...
    ......I'll give a cookie to the one who identifies them all
     

     
    Of course that doesn't end there. You can always make variants for other times of the day as well
    For example late afternoon:
     

     
    Night time:
     

     
    And even artificial light:
     

     
    There's tons of things you can do with photographs, so don't feel discouraged if you are not an artist or can't find artists. Always remember:
    Creativity is boundless.
     
    Music:
    This one isn't particularly hard and it's the same deal as with art mostly. 1. You compose music yourself if you have the talent and skill for it.
    2.You use the readily available stock of P.B. (Public Domain) or R.F. (Royalty free) music. In both instances make sure to credit the composers
    properly. A good site for all things sound is freeSFX.co.uk
     
     
    Sprites:
    Here comes the big fish. One of the most important parts in any VN in existence. The graphical representations of your characters. AKA sprites.
    The lack of artistic skill shoots down many projects because there's not a "quick fix" for this. There are public use sprites but they are not very
    good and they might not suit your needs or the style of your VN. In this case if you're a one man army, you grit your teeth
    and start drawing. I had to that myself at some point. Practice makes perfect and while your sprites will not always be professional looking, you
    can only get better as you practice. If you simply cannot draw to save your life, you can always use the "rotoscope" technique.
    Don't be fooled by the word tho, It's just a mock term and you only need a camera and a PC. You get volunteers, take their pictures, transfer them
    to your PC crop and edit them the same way you do with backgrounds. You can make them look more cartoony or hell you can even go with black and white
    +stamp effect to make a Sin City style VN! If you are still inclined to make your own sprites however, you certainly can. That's what I'm doing for this project.
    Here a sample of my main heroine. Notice my Tsunako influence?
     

     
    What do you think? isn't she cute? Mind you, she went through 3 redesigns so indeed it's no easy task.
     
    And this will be all for now concerning the one man army method. If you have all your assets in order then let's get coding already! Let's get a test script
    underway. Remember that this is an actual VN project and not a mock script as before so if there's something you don't understand. Please do tell me
     
     

     
     
    With your assets handy, go to HUB and then open your stub script, then check that you have the following things in order. (Add stuff as needed.)
    REMEMBER: THESE ARE MY ASSETS, YOU NEED TO REPLACE NAMES AND FILES YOU SEE HERE WITH YOUR OWN:

    1. Image definitions: Like we covered previously, you have to define most images here in the main script:
     

     
    2. Character definitions: Same drill, follow the coding and remember what we've seen part 1 and 2:
     

     
    3. CTC animation: a click to continue animation. it will appear when a character has finished talking. It won't activate with narration unless you define the narrator as a character.
    Follow the code and replace with your own animation. All you need is a set of frames in .png (images should be 30 to 50 pixels wide.) For example: a blinking arrow.
     

     
    The x and y values at the end must be tweaked to match the position of your textbox.
     
    4.Custom position definitions: Chances are your sprites appear cut off from the screen or too low. Ren'py is not exactly intuitive so you can use this code to create a default position
    value for your sprites. Results will vary depending on the size of your sprites and the resolution of your VN. You can also use this code for custom sprite positions.
     

     
    To use this position remember what you learned in part 1 and 2:
    example: show Neru at myposition
     
    5.Custom transitions: Ever felt the fade out was too fast or the dissolve effect needed some tweaks? Worry not, as you can make custom transitions out of the existent ones. In this case this is
    a slow "drop down" but you can also make a custom dissolve, example: dissolve (0.5, 1.0, 0.5),  which is a very slow dissolve effect.
     

     
    6. Splash screen: Ren'py doesn't have stock code for splash screens. You can make a splash image appear while your game is loading, but the loading is so fast that the splash appears for
    half a second sometimes. Thankfully there's custom code to make your VN boot to a splash screen before the title screen! Follow this code replacing "mysplashscreen" and "mysplashsound"
    with your own.
     

     
     

     
    And that's it for the third part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly
    orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together
    for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts
    will certainly pay off. Do join me next time, when I'll be covering the rest of this section and UI styling in detail.
    Many thanks for your time and until then. See ya 


    Kind regards. Helvetica Standard.
  18. Like
    Helvetica Standard got a reaction from dfbreezy in How to code a VN with Ren'py (Comprehensive Guide)   
    This is a long comprehesive guide 
    It has now been moved to the mainsite.
    to read it click the  chapter images for the individual parts:





     
    note: part 4-5 not made yet. but hopefully will be added in future
     

     
     
     
  19. Like
    Helvetica Standard got a reaction from Ketirs in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Welcome back! Fellow programmers!

    Hello and welcome back to my 5 part guide "How to code a VN with Ren'py."
    Today we will have a special guide, a walkthrough on how to code an actual VN project. Last time we coded a mock
    VN however this time I'll be using a personal project as a guideline to teach you how everything's done
    straight from the drawing board! Fear not as you are on the right track and if you've checked out part 1
    and part 2 then you'll have no problem figuring this third part out. (Hopefully, since my explaining is terrible. XD)
    That said please bear in mind once more that this is not an infallible guide to program with python or ren'py and
    it will not make you an expert after you've read it. However I'll do my best to try and explain how to code a VN
    with Ren'py to the best of my ability and I will be with you for the entirety of this guide.
    So let's go fellow programmers! the sky is not the limit as your creativity is...boundless. Let's start, shall we?
     
     

     
     
     
    first off, open your HUB and go to your active projects, then launch your stub project which should look
    similar to this:


     
     
    The background is black to emphasize that we have nothing set so far, some of you might have a different color
    depending on your stock theme. The resolution you use for your VN will also be present from the moment you
    boot. In my case, I'm developing this VN in 1920x1080 resolution.
    Now, we need to get rid of this boring background and plainGUI design. Let's make a custom main menu.
    First, close your stub VN, go to your HUB and click on the "screens.rpy" link. This will open the script for screens,
    the place where we will create our very own main menu.
    Leave that open for now and then open your favourite image editing software, photoshop, SAI, illustrator, Paint studio, etc.
    Create a blank image with the resolution of your VN (for example, if the resolution of your VN is 800x600, then you make
    a blank image with those dimensions.) After that just get creative, use some flaming skulls and bleeding hearts or whatever
    you like. Alternatively you can just use text (That's what I'll do since my project has a minimalistic UI by design. xD )
    the point here is to edit the main menu to your liking. So let's go and see how it will look:
     
     

     
     
    This is my title screen. The focus of my VN is to make a reference to retro games, hence the austere 8 bit console look.
    You ought to make something different as my project is only a guideline, remember that.
    Now back on topic, as you can see, the clickable sections are displayed in this image, so you might be wondering: "can't
    you do that with Ren'py?" Yes and no. Ren'py allows custom styles but those are limited in a sense and require you to
    have more than just the basic python knowledge so we'll be going with this option because it's unconstrained and it allows
    you to make your VN look any way you like.
    So back to those clickable sections such as "new game" and "continue", what are they for? They are your mouse hotspots.
    We'll be using those to give coordinates to ren'py so it remembers where they are located and map an action to said hotspots.
    This image above will be called your "ground image." This is the way it looks when you are not hovering the mouse over any
    options. Now once you're done with this let's go and make the "hover version" which will look like this:
     
     

     
     
    As you can see I added an orange arrow to every clickable option. This will reflect each hotspot "hover" action when I pass
    the pointer over them. This will be our "hover image".
    Note that you can do whatever you want for your own hover effect, for example you can make the text grow larger or smaller,
    change colors or add a blending effect like glow or a simple transform. Once you're done with this, save both images in .png
    and place them inside the "game" folder, then let's go back to the "screens.rpy" script that we left open.
    Back in the screens script, scroll down till you reach this part:
     

    This is the default main menu that all stub VNs have. Don't worry about all that code though, we're going to completely replace it
    with our own. Let's start with making an "imagemap."
    First delete all the code shown on the image (except for the red parts, so you remember what you are changing. XD)
    Then type in this:
     
     
     
    screen main_menu:
    tag menu  (this line is very important when using custom screens, forget to add it and you will regret it.)
    imagemap:
            ground "your ground image.png" (remember to replace the filenames with your own. Also don't forget that images need to be inside the "game" folder.)
            hover "your hover image.png"
        
            
            hotspot (xxx, xxx, xx, xx) action Start()
            hotspot (xxx, xxx xx, xx) action ShowMenu("load")
            hotspot (xxx, xxx, xx, xx) action ShowMenu("preferences")
            hotspot (xxx, xxx, xx, xx) action Quit(confirm=True)
     
     
     
    There you have it. It's a basic imagemap  with the essential functions of a main menu. Pretty simple, no?
    So you might be wondering, what are those "X" symbols right next to "hotspots" Well, those are coordinates
    for the mouse. Those coordinates will tell Ren'py where your hotspots are located so let's go ahead and
    find these coordinates.
    Don't save any changes yet, instead go to your HUB and launch your project, then press SHIFT+D to enter
    the developers menu. while navigating through the menu find the "image location picker" option which will summon
    a list of all the images that are inside the "game" folder. Find your hover image and open it:
     
     
     

     
    As the image says, draw a rectangle over the area where you want your hotspot to be recognised.
    You'll get he coordinates for this hotspot on the lower left corner of the window. Input these coordinates on the screens
    script where the "X's" are. Repeat this process for each hotspot and remember to input the coordinates that match
    each section, don't go mixing them by mistake. XD
    Once you're done, your hotspot section will look smilar to this:
     
            hotspot (720, 611, 391, 70) action Start()
            hotspot (726, 691, 384, 60) action ShowMenu("load")
            hotspot (726, 758, 378, 63) action ShowMenu("preferences")
            hotspot (815, 828, 209, 59) action Quit(confirm=True)
     
    These are my coordinates by the way, don't copy/paste them because they won't work for you. Get your own coordinates. XD
    Once you're done typing the coordinates in, save your changes to screens script and close it. Then boot up your project to
    check your brand new custom title screen. If all went well you'll have a fully functional main menu, otherwise scroll back and try
    to follow the instructions to the letter.
     

     
    Previously we covered assets though briefly. This time we're focusing on the essential things to make an actual VN project, that said
    we already have the most important asset of them all. YOU. Yep you only need one person to make a VN. This in paper however is
    terribly inefficient and making your VN would take you a lot longer than if you had help. But, you can't always sit around waiting for
    help to come, you need to show something to the community to get feedback, and maybe help, later on. So you need to get some
    placeholder assets and show your idea to the world. It's what I did and what you should do if you plan on making a large scale project.
    However there's always the alternative to go solo, which is totally possible and moreso if you happen to be a really talented individual
    who has all the skills needed for making a VN, if not then there's always the "one man army method" which we will cover below.
     
    Backgrounds:
    There's 3 ways to deal with backgrounds when getting started/going solo: 1. You have the artistic skills and you draw them by yourself.
    2.You use the stock VN backgrounds readily available online (Uncle Mugen's collection is pretty solid.) just be aware that thousands of
    other people will be using them on their VNs as well. And 3. You use RL photographs. Out of all the choices for starter programmers and
    project leaders this is the most sensible option, you take a camera and venture outside to take pics of suitable locations for your VN.
    Contrary to popular belief, this method is used by professional studios, although this largely depends on the visual style of your project.
    That said you don't have to use the photos as is. You can make them look more cartoony and more suited for VN format:
     
    1. You take your photo to Photoshop and add an image filter to it. A combination of sponge+cutout gives it a painting feel for example.
    2. You take your photo to Illustrator and image trace it for "low fidelity" then crank up the paths and corners to 100% and finally export as .png
    (this is the method I'm using for this project.)
    3. You do an outline tracing by hand and then paint over the details with Photoshop or SAI and a tablet. (you need some basic art skills for this.)
     
    Out of these 3, number 1 is the fastest and simplest to do. Chances are you have Photoshop installed no matter if you dabble on art or design
    or not and filtering is just 2 clicks away. Number 2 has a nicer looking tracing effect but you require Illustrator and the 3rd one is so tedious and time
    consuming that you probably shouldn't consider it unless your VN has less than 10 backgrounds or something like that.
    Those aren't the only methods available though, you can always come up with one of your own and use it, Go wild, make that creativity explode!
    For reference, here's what I did for one of my backgrounds:
     
    Here's the RL picture:
     

     
    Here's the traced and edited version. As you can see I boosted the vibrance for added cartoony feel and even added some otaku touches to the room...
    ......I'll give a cookie to the one who identifies them all
     

     
    Of course that doesn't end there. You can always make variants for other times of the day as well
    For example late afternoon:
     

     
    Night time:
     

     
    And even artificial light:
     

     
    There's tons of things you can do with photographs, so don't feel discouraged if you are not an artist or can't find artists. Always remember:
    Creativity is boundless.
     
    Music:
    This one isn't particularly hard and it's the same deal as with art mostly. 1. You compose music yourself if you have the talent and skill for it.
    2.You use the readily available stock of P.B. (Public Domain) or R.F. (Royalty free) music. In both instances make sure to credit the composers
    properly. A good site for all things sound is freeSFX.co.uk
     
     
    Sprites:
    Here comes the big fish. One of the most important parts in any VN in existence. The graphical representations of your characters. AKA sprites.
    The lack of artistic skill shoots down many projects because there's not a "quick fix" for this. There are public use sprites but they are not very
    good and they might not suit your needs or the style of your VN. In this case if you're a one man army, you grit your teeth
    and start drawing. I had to that myself at some point. Practice makes perfect and while your sprites will not always be professional looking, you
    can only get better as you practice. If you simply cannot draw to save your life, you can always use the "rotoscope" technique.
    Don't be fooled by the word tho, It's just a mock term and you only need a camera and a PC. You get volunteers, take their pictures, transfer them
    to your PC crop and edit them the same way you do with backgrounds. You can make them look more cartoony or hell you can even go with black and white
    +stamp effect to make a Sin City style VN! If you are still inclined to make your own sprites however, you certainly can. That's what I'm doing for this project.
    Here a sample of my main heroine. Notice my Tsunako influence?
     

     
    What do you think? isn't she cute? Mind you, she went through 3 redesigns so indeed it's no easy task.
     
    And this will be all for now concerning the one man army method. If you have all your assets in order then let's get coding already! Let's get a test script
    underway. Remember that this is an actual VN project and not a mock script as before so if there's something you don't understand. Please do tell me
     
     

     
     
    With your assets handy, go to HUB and then open your stub script, then check that you have the following things in order. (Add stuff as needed.)
    REMEMBER: THESE ARE MY ASSETS, YOU NEED TO REPLACE NAMES AND FILES YOU SEE HERE WITH YOUR OWN:

    1. Image definitions: Like we covered previously, you have to define most images here in the main script:
     

     
    2. Character definitions: Same drill, follow the coding and remember what we've seen part 1 and 2:
     

     
    3. CTC animation: a click to continue animation. it will appear when a character has finished talking. It won't activate with narration unless you define the narrator as a character.
    Follow the code and replace with your own animation. All you need is a set of frames in .png (images should be 30 to 50 pixels wide.) For example: a blinking arrow.
     

     
    The x and y values at the end must be tweaked to match the position of your textbox.
     
    4.Custom position definitions: Chances are your sprites appear cut off from the screen or too low. Ren'py is not exactly intuitive so you can use this code to create a default position
    value for your sprites. Results will vary depending on the size of your sprites and the resolution of your VN. You can also use this code for custom sprite positions.
     

     
    To use this position remember what you learned in part 1 and 2:
    example: show Neru at myposition
     
    5.Custom transitions: Ever felt the fade out was too fast or the dissolve effect needed some tweaks? Worry not, as you can make custom transitions out of the existent ones. In this case this is
    a slow "drop down" but you can also make a custom dissolve, example: dissolve (0.5, 1.0, 0.5),  which is a very slow dissolve effect.
     

     
    6. Splash screen: Ren'py doesn't have stock code for splash screens. You can make a splash image appear while your game is loading, but the loading is so fast that the splash appears for
    half a second sometimes. Thankfully there's custom code to make your VN boot to a splash screen before the title screen! Follow this code replacing "mysplashscreen" and "mysplashsound"
    with your own.
     

     
     

     
    And that's it for the third part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly
    orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together
    for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts
    will certainly pay off. Do join me next time, when I'll be covering the rest of this section and UI styling in detail.
    Many thanks for your time and until then. See ya 


    Kind regards. Helvetica Standard.
  20. Like
    Helvetica Standard got a reaction from Rose in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Welcome back! Fellow programmers!

    Hello and welcome back to my 5 part guide "How to code a VN with Ren'py."
    Today we will have a special guide, a walkthrough on how to code an actual VN project. Last time we coded a mock
    VN however this time I'll be using a personal project as a guideline to teach you how everything's done
    straight from the drawing board! Fear not as you are on the right track and if you've checked out part 1
    and part 2 then you'll have no problem figuring this third part out. (Hopefully, since my explaining is terrible. XD)
    That said please bear in mind once more that this is not an infallible guide to program with python or ren'py and
    it will not make you an expert after you've read it. However I'll do my best to try and explain how to code a VN
    with Ren'py to the best of my ability and I will be with you for the entirety of this guide.
    So let's go fellow programmers! the sky is not the limit as your creativity is...boundless. Let's start, shall we?
     
     

     
     
     
    first off, open your HUB and go to your active projects, then launch your stub project which should look
    similar to this:


     
     
    The background is black to emphasize that we have nothing set so far, some of you might have a different color
    depending on your stock theme. The resolution you use for your VN will also be present from the moment you
    boot. In my case, I'm developing this VN in 1920x1080 resolution.
    Now, we need to get rid of this boring background and plainGUI design. Let's make a custom main menu.
    First, close your stub VN, go to your HUB and click on the "screens.rpy" link. This will open the script for screens,
    the place where we will create our very own main menu.
    Leave that open for now and then open your favourite image editing software, photoshop, SAI, illustrator, Paint studio, etc.
    Create a blank image with the resolution of your VN (for example, if the resolution of your VN is 800x600, then you make
    a blank image with those dimensions.) After that just get creative, use some flaming skulls and bleeding hearts or whatever
    you like. Alternatively you can just use text (That's what I'll do since my project has a minimalistic UI by design. xD )
    the point here is to edit the main menu to your liking. So let's go and see how it will look:
     
     

     
     
    This is my title screen. The focus of my VN is to make a reference to retro games, hence the austere 8 bit console look.
    You ought to make something different as my project is only a guideline, remember that.
    Now back on topic, as you can see, the clickable sections are displayed in this image, so you might be wondering: "can't
    you do that with Ren'py?" Yes and no. Ren'py allows custom styles but those are limited in a sense and require you to
    have more than just the basic python knowledge so we'll be going with this option because it's unconstrained and it allows
    you to make your VN look any way you like.
    So back to those clickable sections such as "new game" and "continue", what are they for? They are your mouse hotspots.
    We'll be using those to give coordinates to ren'py so it remembers where they are located and map an action to said hotspots.
    This image above will be called your "ground image." This is the way it looks when you are not hovering the mouse over any
    options. Now once you're done with this let's go and make the "hover version" which will look like this:
     
     

     
     
    As you can see I added an orange arrow to every clickable option. This will reflect each hotspot "hover" action when I pass
    the pointer over them. This will be our "hover image".
    Note that you can do whatever you want for your own hover effect, for example you can make the text grow larger or smaller,
    change colors or add a blending effect like glow or a simple transform. Once you're done with this, save both images in .png
    and place them inside the "game" folder, then let's go back to the "screens.rpy" script that we left open.
    Back in the screens script, scroll down till you reach this part:
     

    This is the default main menu that all stub VNs have. Don't worry about all that code though, we're going to completely replace it
    with our own. Let's start with making an "imagemap."
    First delete all the code shown on the image (except for the red parts, so you remember what you are changing. XD)
    Then type in this:
     
     
     
    screen main_menu:
    tag menu  (this line is very important when using custom screens, forget to add it and you will regret it.)
    imagemap:
            ground "your ground image.png" (remember to replace the filenames with your own. Also don't forget that images need to be inside the "game" folder.)
            hover "your hover image.png"
        
            
            hotspot (xxx, xxx, xx, xx) action Start()
            hotspot (xxx, xxx xx, xx) action ShowMenu("load")
            hotspot (xxx, xxx, xx, xx) action ShowMenu("preferences")
            hotspot (xxx, xxx, xx, xx) action Quit(confirm=True)
     
     
     
    There you have it. It's a basic imagemap  with the essential functions of a main menu. Pretty simple, no?
    So you might be wondering, what are those "X" symbols right next to "hotspots" Well, those are coordinates
    for the mouse. Those coordinates will tell Ren'py where your hotspots are located so let's go ahead and
    find these coordinates.
    Don't save any changes yet, instead go to your HUB and launch your project, then press SHIFT+D to enter
    the developers menu. while navigating through the menu find the "image location picker" option which will summon
    a list of all the images that are inside the "game" folder. Find your hover image and open it:
     
     
     

     
    As the image says, draw a rectangle over the area where you want your hotspot to be recognised.
    You'll get he coordinates for this hotspot on the lower left corner of the window. Input these coordinates on the screens
    script where the "X's" are. Repeat this process for each hotspot and remember to input the coordinates that match
    each section, don't go mixing them by mistake. XD
    Once you're done, your hotspot section will look smilar to this:
     
            hotspot (720, 611, 391, 70) action Start()
            hotspot (726, 691, 384, 60) action ShowMenu("load")
            hotspot (726, 758, 378, 63) action ShowMenu("preferences")
            hotspot (815, 828, 209, 59) action Quit(confirm=True)
     
    These are my coordinates by the way, don't copy/paste them because they won't work for you. Get your own coordinates. XD
    Once you're done typing the coordinates in, save your changes to screens script and close it. Then boot up your project to
    check your brand new custom title screen. If all went well you'll have a fully functional main menu, otherwise scroll back and try
    to follow the instructions to the letter.
     

     
    Previously we covered assets though briefly. This time we're focusing on the essential things to make an actual VN project, that said
    we already have the most important asset of them all. YOU. Yep you only need one person to make a VN. This in paper however is
    terribly inefficient and making your VN would take you a lot longer than if you had help. But, you can't always sit around waiting for
    help to come, you need to show something to the community to get feedback, and maybe help, later on. So you need to get some
    placeholder assets and show your idea to the world. It's what I did and what you should do if you plan on making a large scale project.
    However there's always the alternative to go solo, which is totally possible and moreso if you happen to be a really talented individual
    who has all the skills needed for making a VN, if not then there's always the "one man army method" which we will cover below.
     
    Backgrounds:
    There's 3 ways to deal with backgrounds when getting started/going solo: 1. You have the artistic skills and you draw them by yourself.
    2.You use the stock VN backgrounds readily available online (Uncle Mugen's collection is pretty solid.) just be aware that thousands of
    other people will be using them on their VNs as well. And 3. You use RL photographs. Out of all the choices for starter programmers and
    project leaders this is the most sensible option, you take a camera and venture outside to take pics of suitable locations for your VN.
    Contrary to popular belief, this method is used by professional studios, although this largely depends on the visual style of your project.
    That said you don't have to use the photos as is. You can make them look more cartoony and more suited for VN format:
     
    1. You take your photo to Photoshop and add an image filter to it. A combination of sponge+cutout gives it a painting feel for example.
    2. You take your photo to Illustrator and image trace it for "low fidelity" then crank up the paths and corners to 100% and finally export as .png
    (this is the method I'm using for this project.)
    3. You do an outline tracing by hand and then paint over the details with Photoshop or SAI and a tablet. (you need some basic art skills for this.)
     
    Out of these 3, number 1 is the fastest and simplest to do. Chances are you have Photoshop installed no matter if you dabble on art or design
    or not and filtering is just 2 clicks away. Number 2 has a nicer looking tracing effect but you require Illustrator and the 3rd one is so tedious and time
    consuming that you probably shouldn't consider it unless your VN has less than 10 backgrounds or something like that.
    Those aren't the only methods available though, you can always come up with one of your own and use it, Go wild, make that creativity explode!
    For reference, here's what I did for one of my backgrounds:
     
    Here's the RL picture:
     

     
    Here's the traced and edited version. As you can see I boosted the vibrance for added cartoony feel and even added some otaku touches to the room...
    ......I'll give a cookie to the one who identifies them all
     

     
    Of course that doesn't end there. You can always make variants for other times of the day as well
    For example late afternoon:
     

     
    Night time:
     

     
    And even artificial light:
     

     
    There's tons of things you can do with photographs, so don't feel discouraged if you are not an artist or can't find artists. Always remember:
    Creativity is boundless.
     
    Music:
    This one isn't particularly hard and it's the same deal as with art mostly. 1. You compose music yourself if you have the talent and skill for it.
    2.You use the readily available stock of P.B. (Public Domain) or R.F. (Royalty free) music. In both instances make sure to credit the composers
    properly. A good site for all things sound is freeSFX.co.uk
     
     
    Sprites:
    Here comes the big fish. One of the most important parts in any VN in existence. The graphical representations of your characters. AKA sprites.
    The lack of artistic skill shoots down many projects because there's not a "quick fix" for this. There are public use sprites but they are not very
    good and they might not suit your needs or the style of your VN. In this case if you're a one man army, you grit your teeth
    and start drawing. I had to that myself at some point. Practice makes perfect and while your sprites will not always be professional looking, you
    can only get better as you practice. If you simply cannot draw to save your life, you can always use the "rotoscope" technique.
    Don't be fooled by the word tho, It's just a mock term and you only need a camera and a PC. You get volunteers, take their pictures, transfer them
    to your PC crop and edit them the same way you do with backgrounds. You can make them look more cartoony or hell you can even go with black and white
    +stamp effect to make a Sin City style VN! If you are still inclined to make your own sprites however, you certainly can. That's what I'm doing for this project.
    Here a sample of my main heroine. Notice my Tsunako influence?
     

     
    What do you think? isn't she cute? Mind you, she went through 3 redesigns so indeed it's no easy task.
     
    And this will be all for now concerning the one man army method. If you have all your assets in order then let's get coding already! Let's get a test script
    underway. Remember that this is an actual VN project and not a mock script as before so if there's something you don't understand. Please do tell me
     
     

     
     
    With your assets handy, go to HUB and then open your stub script, then check that you have the following things in order. (Add stuff as needed.)
    REMEMBER: THESE ARE MY ASSETS, YOU NEED TO REPLACE NAMES AND FILES YOU SEE HERE WITH YOUR OWN:

    1. Image definitions: Like we covered previously, you have to define most images here in the main script:
     

     
    2. Character definitions: Same drill, follow the coding and remember what we've seen part 1 and 2:
     

     
    3. CTC animation: a click to continue animation. it will appear when a character has finished talking. It won't activate with narration unless you define the narrator as a character.
    Follow the code and replace with your own animation. All you need is a set of frames in .png (images should be 30 to 50 pixels wide.) For example: a blinking arrow.
     

     
    The x and y values at the end must be tweaked to match the position of your textbox.
     
    4.Custom position definitions: Chances are your sprites appear cut off from the screen or too low. Ren'py is not exactly intuitive so you can use this code to create a default position
    value for your sprites. Results will vary depending on the size of your sprites and the resolution of your VN. You can also use this code for custom sprite positions.
     

     
    To use this position remember what you learned in part 1 and 2:
    example: show Neru at myposition
     
    5.Custom transitions: Ever felt the fade out was too fast or the dissolve effect needed some tweaks? Worry not, as you can make custom transitions out of the existent ones. In this case this is
    a slow "drop down" but you can also make a custom dissolve, example: dissolve (0.5, 1.0, 0.5),  which is a very slow dissolve effect.
     

     
    6. Splash screen: Ren'py doesn't have stock code for splash screens. You can make a splash image appear while your game is loading, but the loading is so fast that the splash appears for
    half a second sometimes. Thankfully there's custom code to make your VN boot to a splash screen before the title screen! Follow this code replacing "mysplashscreen" and "mysplashsound"
    with your own.
     

     
     

     
    And that's it for the third part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly
    orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together
    for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts
    will certainly pay off. Do join me next time, when I'll be covering the rest of this section and UI styling in detail.
    Many thanks for your time and until then. See ya 


    Kind regards. Helvetica Standard.
  21. Like
    Helvetica Standard got a reaction from SakamotoX in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Welcome back! Fellow programmers!

    Hello and welcome back to my 5 part guide "How to code a VN with Ren'py."
    Today we will have a special guide, a walkthrough on how to code an actual VN project. Last time we coded a mock
    VN however this time I'll be using a personal project as a guideline to teach you how everything's done
    straight from the drawing board! Fear not as you are on the right track and if you've checked out part 1
    and part 2 then you'll have no problem figuring this third part out. (Hopefully, since my explaining is terrible. XD)
    That said please bear in mind once more that this is not an infallible guide to program with python or ren'py and
    it will not make you an expert after you've read it. However I'll do my best to try and explain how to code a VN
    with Ren'py to the best of my ability and I will be with you for the entirety of this guide.
    So let's go fellow programmers! the sky is not the limit as your creativity is...boundless. Let's start, shall we?
     
     

     
     
     
    first off, open your HUB and go to your active projects, then launch your stub project which should look
    similar to this:


     
     
    The background is black to emphasize that we have nothing set so far, some of you might have a different color
    depending on your stock theme. The resolution you use for your VN will also be present from the moment you
    boot. In my case, I'm developing this VN in 1920x1080 resolution.
    Now, we need to get rid of this boring background and plainGUI design. Let's make a custom main menu.
    First, close your stub VN, go to your HUB and click on the "screens.rpy" link. This will open the script for screens,
    the place where we will create our very own main menu.
    Leave that open for now and then open your favourite image editing software, photoshop, SAI, illustrator, Paint studio, etc.
    Create a blank image with the resolution of your VN (for example, if the resolution of your VN is 800x600, then you make
    a blank image with those dimensions.) After that just get creative, use some flaming skulls and bleeding hearts or whatever
    you like. Alternatively you can just use text (That's what I'll do since my project has a minimalistic UI by design. xD )
    the point here is to edit the main menu to your liking. So let's go and see how it will look:
     
     

     
     
    This is my title screen. The focus of my VN is to make a reference to retro games, hence the austere 8 bit console look.
    You ought to make something different as my project is only a guideline, remember that.
    Now back on topic, as you can see, the clickable sections are displayed in this image, so you might be wondering: "can't
    you do that with Ren'py?" Yes and no. Ren'py allows custom styles but those are limited in a sense and require you to
    have more than just the basic python knowledge so we'll be going with this option because it's unconstrained and it allows
    you to make your VN look any way you like.
    So back to those clickable sections such as "new game" and "continue", what are they for? They are your mouse hotspots.
    We'll be using those to give coordinates to ren'py so it remembers where they are located and map an action to said hotspots.
    This image above will be called your "ground image." This is the way it looks when you are not hovering the mouse over any
    options. Now once you're done with this let's go and make the "hover version" which will look like this:
     
     

     
     
    As you can see I added an orange arrow to every clickable option. This will reflect each hotspot "hover" action when I pass
    the pointer over them. This will be our "hover image".
    Note that you can do whatever you want for your own hover effect, for example you can make the text grow larger or smaller,
    change colors or add a blending effect like glow or a simple transform. Once you're done with this, save both images in .png
    and place them inside the "game" folder, then let's go back to the "screens.rpy" script that we left open.
    Back in the screens script, scroll down till you reach this part:
     

    This is the default main menu that all stub VNs have. Don't worry about all that code though, we're going to completely replace it
    with our own. Let's start with making an "imagemap."
    First delete all the code shown on the image (except for the red parts, so you remember what you are changing. XD)
    Then type in this:
     
     
     
    screen main_menu:
    tag menu  (this line is very important when using custom screens, forget to add it and you will regret it.)
    imagemap:
            ground "your ground image.png" (remember to replace the filenames with your own. Also don't forget that images need to be inside the "game" folder.)
            hover "your hover image.png"
        
            
            hotspot (xxx, xxx, xx, xx) action Start()
            hotspot (xxx, xxx xx, xx) action ShowMenu("load")
            hotspot (xxx, xxx, xx, xx) action ShowMenu("preferences")
            hotspot (xxx, xxx, xx, xx) action Quit(confirm=True)
     
     
     
    There you have it. It's a basic imagemap  with the essential functions of a main menu. Pretty simple, no?
    So you might be wondering, what are those "X" symbols right next to "hotspots" Well, those are coordinates
    for the mouse. Those coordinates will tell Ren'py where your hotspots are located so let's go ahead and
    find these coordinates.
    Don't save any changes yet, instead go to your HUB and launch your project, then press SHIFT+D to enter
    the developers menu. while navigating through the menu find the "image location picker" option which will summon
    a list of all the images that are inside the "game" folder. Find your hover image and open it:
     
     
     

     
    As the image says, draw a rectangle over the area where you want your hotspot to be recognised.
    You'll get he coordinates for this hotspot on the lower left corner of the window. Input these coordinates on the screens
    script where the "X's" are. Repeat this process for each hotspot and remember to input the coordinates that match
    each section, don't go mixing them by mistake. XD
    Once you're done, your hotspot section will look smilar to this:
     
            hotspot (720, 611, 391, 70) action Start()
            hotspot (726, 691, 384, 60) action ShowMenu("load")
            hotspot (726, 758, 378, 63) action ShowMenu("preferences")
            hotspot (815, 828, 209, 59) action Quit(confirm=True)
     
    These are my coordinates by the way, don't copy/paste them because they won't work for you. Get your own coordinates. XD
    Once you're done typing the coordinates in, save your changes to screens script and close it. Then boot up your project to
    check your brand new custom title screen. If all went well you'll have a fully functional main menu, otherwise scroll back and try
    to follow the instructions to the letter.
     

     
    Previously we covered assets though briefly. This time we're focusing on the essential things to make an actual VN project, that said
    we already have the most important asset of them all. YOU. Yep you only need one person to make a VN. This in paper however is
    terribly inefficient and making your VN would take you a lot longer than if you had help. But, you can't always sit around waiting for
    help to come, you need to show something to the community to get feedback, and maybe help, later on. So you need to get some
    placeholder assets and show your idea to the world. It's what I did and what you should do if you plan on making a large scale project.
    However there's always the alternative to go solo, which is totally possible and moreso if you happen to be a really talented individual
    who has all the skills needed for making a VN, if not then there's always the "one man army method" which we will cover below.
     
    Backgrounds:
    There's 3 ways to deal with backgrounds when getting started/going solo: 1. You have the artistic skills and you draw them by yourself.
    2.You use the stock VN backgrounds readily available online (Uncle Mugen's collection is pretty solid.) just be aware that thousands of
    other people will be using them on their VNs as well. And 3. You use RL photographs. Out of all the choices for starter programmers and
    project leaders this is the most sensible option, you take a camera and venture outside to take pics of suitable locations for your VN.
    Contrary to popular belief, this method is used by professional studios, although this largely depends on the visual style of your project.
    That said you don't have to use the photos as is. You can make them look more cartoony and more suited for VN format:
     
    1. You take your photo to Photoshop and add an image filter to it. A combination of sponge+cutout gives it a painting feel for example.
    2. You take your photo to Illustrator and image trace it for "low fidelity" then crank up the paths and corners to 100% and finally export as .png
    (this is the method I'm using for this project.)
    3. You do an outline tracing by hand and then paint over the details with Photoshop or SAI and a tablet. (you need some basic art skills for this.)
     
    Out of these 3, number 1 is the fastest and simplest to do. Chances are you have Photoshop installed no matter if you dabble on art or design
    or not and filtering is just 2 clicks away. Number 2 has a nicer looking tracing effect but you require Illustrator and the 3rd one is so tedious and time
    consuming that you probably shouldn't consider it unless your VN has less than 10 backgrounds or something like that.
    Those aren't the only methods available though, you can always come up with one of your own and use it, Go wild, make that creativity explode!
    For reference, here's what I did for one of my backgrounds:
     
    Here's the RL picture:
     

     
    Here's the traced and edited version. As you can see I boosted the vibrance for added cartoony feel and even added some otaku touches to the room...
    ......I'll give a cookie to the one who identifies them all
     

     
    Of course that doesn't end there. You can always make variants for other times of the day as well
    For example late afternoon:
     

     
    Night time:
     

     
    And even artificial light:
     

     
    There's tons of things you can do with photographs, so don't feel discouraged if you are not an artist or can't find artists. Always remember:
    Creativity is boundless.
     
    Music:
    This one isn't particularly hard and it's the same deal as with art mostly. 1. You compose music yourself if you have the talent and skill for it.
    2.You use the readily available stock of P.B. (Public Domain) or R.F. (Royalty free) music. In both instances make sure to credit the composers
    properly. A good site for all things sound is freeSFX.co.uk
     
     
    Sprites:
    Here comes the big fish. One of the most important parts in any VN in existence. The graphical representations of your characters. AKA sprites.
    The lack of artistic skill shoots down many projects because there's not a "quick fix" for this. There are public use sprites but they are not very
    good and they might not suit your needs or the style of your VN. In this case if you're a one man army, you grit your teeth
    and start drawing. I had to that myself at some point. Practice makes perfect and while your sprites will not always be professional looking, you
    can only get better as you practice. If you simply cannot draw to save your life, you can always use the "rotoscope" technique.
    Don't be fooled by the word tho, It's just a mock term and you only need a camera and a PC. You get volunteers, take their pictures, transfer them
    to your PC crop and edit them the same way you do with backgrounds. You can make them look more cartoony or hell you can even go with black and white
    +stamp effect to make a Sin City style VN! If you are still inclined to make your own sprites however, you certainly can. That's what I'm doing for this project.
    Here a sample of my main heroine. Notice my Tsunako influence?
     

     
    What do you think? isn't she cute? Mind you, she went through 3 redesigns so indeed it's no easy task.
     
    And this will be all for now concerning the one man army method. If you have all your assets in order then let's get coding already! Let's get a test script
    underway. Remember that this is an actual VN project and not a mock script as before so if there's something you don't understand. Please do tell me
     
     

     
     
    With your assets handy, go to HUB and then open your stub script, then check that you have the following things in order. (Add stuff as needed.)
    REMEMBER: THESE ARE MY ASSETS, YOU NEED TO REPLACE NAMES AND FILES YOU SEE HERE WITH YOUR OWN:

    1. Image definitions: Like we covered previously, you have to define most images here in the main script:
     

     
    2. Character definitions: Same drill, follow the coding and remember what we've seen part 1 and 2:
     

     
    3. CTC animation: a click to continue animation. it will appear when a character has finished talking. It won't activate with narration unless you define the narrator as a character.
    Follow the code and replace with your own animation. All you need is a set of frames in .png (images should be 30 to 50 pixels wide.) For example: a blinking arrow.
     

     
    The x and y values at the end must be tweaked to match the position of your textbox.
     
    4.Custom position definitions: Chances are your sprites appear cut off from the screen or too low. Ren'py is not exactly intuitive so you can use this code to create a default position
    value for your sprites. Results will vary depending on the size of your sprites and the resolution of your VN. You can also use this code for custom sprite positions.
     

     
    To use this position remember what you learned in part 1 and 2:
    example: show Neru at myposition
     
    5.Custom transitions: Ever felt the fade out was too fast or the dissolve effect needed some tweaks? Worry not, as you can make custom transitions out of the existent ones. In this case this is
    a slow "drop down" but you can also make a custom dissolve, example: dissolve (0.5, 1.0, 0.5),  which is a very slow dissolve effect.
     

     
    6. Splash screen: Ren'py doesn't have stock code for splash screens. You can make a splash image appear while your game is loading, but the loading is so fast that the splash appears for
    half a second sometimes. Thankfully there's custom code to make your VN boot to a splash screen before the title screen! Follow this code replacing "mysplashscreen" and "mysplashsound"
    with your own.
     

     
     

     
    And that's it for the third part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly
    orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together
    for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts
    will certainly pay off. Do join me next time, when I'll be covering the rest of this section and UI styling in detail.
    Many thanks for your time and until then. See ya 


    Kind regards. Helvetica Standard.
  22. Like
  23. Like
    Helvetica Standard got a reaction from Tay in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Welcome back! Fellow programmers!

    Hello and welcome back to my 5 part guide "How to code a VN with Ren'py."
    Today we will have a special guide, a walkthrough on how to code an actual VN project. Last time we coded a mock
    VN however this time I'll be using a personal project as a guideline to teach you how everything's done
    straight from the drawing board! Fear not as you are on the right track and if you've checked out part 1
    and part 2 then you'll have no problem figuring this third part out. (Hopefully, since my explaining is terrible. XD)
    That said please bear in mind once more that this is not an infallible guide to program with python or ren'py and
    it will not make you an expert after you've read it. However I'll do my best to try and explain how to code a VN
    with Ren'py to the best of my ability and I will be with you for the entirety of this guide.
    So let's go fellow programmers! the sky is not the limit as your creativity is...boundless. Let's start, shall we?
     
     

     
     
     
    first off, open your HUB and go to your active projects, then launch your stub project which should look
    similar to this:


     
     
    The background is black to emphasize that we have nothing set so far, some of you might have a different color
    depending on your stock theme. The resolution you use for your VN will also be present from the moment you
    boot. In my case, I'm developing this VN in 1920x1080 resolution.
    Now, we need to get rid of this boring background and plainGUI design. Let's make a custom main menu.
    First, close your stub VN, go to your HUB and click on the "screens.rpy" link. This will open the script for screens,
    the place where we will create our very own main menu.
    Leave that open for now and then open your favourite image editing software, photoshop, SAI, illustrator, Paint studio, etc.
    Create a blank image with the resolution of your VN (for example, if the resolution of your VN is 800x600, then you make
    a blank image with those dimensions.) After that just get creative, use some flaming skulls and bleeding hearts or whatever
    you like. Alternatively you can just use text (That's what I'll do since my project has a minimalistic UI by design. xD )
    the point here is to edit the main menu to your liking. So let's go and see how it will look:
     
     

     
     
    This is my title screen. The focus of my VN is to make a reference to retro games, hence the austere 8 bit console look.
    You ought to make something different as my project is only a guideline, remember that.
    Now back on topic, as you can see, the clickable sections are displayed in this image, so you might be wondering: "can't
    you do that with Ren'py?" Yes and no. Ren'py allows custom styles but those are limited in a sense and require you to
    have more than just the basic python knowledge so we'll be going with this option because it's unconstrained and it allows
    you to make your VN look any way you like.
    So back to those clickable sections such as "new game" and "continue", what are they for? They are your mouse hotspots.
    We'll be using those to give coordinates to ren'py so it remembers where they are located and map an action to said hotspots.
    This image above will be called your "ground image." This is the way it looks when you are not hovering the mouse over any
    options. Now once you're done with this let's go and make the "hover version" which will look like this:
     
     

     
     
    As you can see I added an orange arrow to every clickable option. This will reflect each hotspot "hover" action when I pass
    the pointer over them. This will be our "hover image".
    Note that you can do whatever you want for your own hover effect, for example you can make the text grow larger or smaller,
    change colors or add a blending effect like glow or a simple transform. Once you're done with this, save both images in .png
    and place them inside the "game" folder, then let's go back to the "screens.rpy" script that we left open.
    Back in the screens script, scroll down till you reach this part:
     

    This is the default main menu that all stub VNs have. Don't worry about all that code though, we're going to completely replace it
    with our own. Let's start with making an "imagemap."
    First delete all the code shown on the image (except for the red parts, so you remember what you are changing. XD)
    Then type in this:
     
     
     
    screen main_menu:
    tag menu  (this line is very important when using custom screens, forget to add it and you will regret it.)
    imagemap:
            ground "your ground image.png" (remember to replace the filenames with your own. Also don't forget that images need to be inside the "game" folder.)
            hover "your hover image.png"
        
            
            hotspot (xxx, xxx, xx, xx) action Start()
            hotspot (xxx, xxx xx, xx) action ShowMenu("load")
            hotspot (xxx, xxx, xx, xx) action ShowMenu("preferences")
            hotspot (xxx, xxx, xx, xx) action Quit(confirm=True)
     
     
     
    There you have it. It's a basic imagemap  with the essential functions of a main menu. Pretty simple, no?
    So you might be wondering, what are those "X" symbols right next to "hotspots" Well, those are coordinates
    for the mouse. Those coordinates will tell Ren'py where your hotspots are located so let's go ahead and
    find these coordinates.
    Don't save any changes yet, instead go to your HUB and launch your project, then press SHIFT+D to enter
    the developers menu. while navigating through the menu find the "image location picker" option which will summon
    a list of all the images that are inside the "game" folder. Find your hover image and open it:
     
     
     

     
    As the image says, draw a rectangle over the area where you want your hotspot to be recognised.
    You'll get he coordinates for this hotspot on the lower left corner of the window. Input these coordinates on the screens
    script where the "X's" are. Repeat this process for each hotspot and remember to input the coordinates that match
    each section, don't go mixing them by mistake. XD
    Once you're done, your hotspot section will look smilar to this:
     
            hotspot (720, 611, 391, 70) action Start()
            hotspot (726, 691, 384, 60) action ShowMenu("load")
            hotspot (726, 758, 378, 63) action ShowMenu("preferences")
            hotspot (815, 828, 209, 59) action Quit(confirm=True)
     
    These are my coordinates by the way, don't copy/paste them because they won't work for you. Get your own coordinates. XD
    Once you're done typing the coordinates in, save your changes to screens script and close it. Then boot up your project to
    check your brand new custom title screen. If all went well you'll have a fully functional main menu, otherwise scroll back and try
    to follow the instructions to the letter.
     

     
    Previously we covered assets though briefly. This time we're focusing on the essential things to make an actual VN project, that said
    we already have the most important asset of them all. YOU. Yep you only need one person to make a VN. This in paper however is
    terribly inefficient and making your VN would take you a lot longer than if you had help. But, you can't always sit around waiting for
    help to come, you need to show something to the community to get feedback, and maybe help, later on. So you need to get some
    placeholder assets and show your idea to the world. It's what I did and what you should do if you plan on making a large scale project.
    However there's always the alternative to go solo, which is totally possible and moreso if you happen to be a really talented individual
    who has all the skills needed for making a VN, if not then there's always the "one man army method" which we will cover below.
     
    Backgrounds:
    There's 3 ways to deal with backgrounds when getting started/going solo: 1. You have the artistic skills and you draw them by yourself.
    2.You use the stock VN backgrounds readily available online (Uncle Mugen's collection is pretty solid.) just be aware that thousands of
    other people will be using them on their VNs as well. And 3. You use RL photographs. Out of all the choices for starter programmers and
    project leaders this is the most sensible option, you take a camera and venture outside to take pics of suitable locations for your VN.
    Contrary to popular belief, this method is used by professional studios, although this largely depends on the visual style of your project.
    That said you don't have to use the photos as is. You can make them look more cartoony and more suited for VN format:
     
    1. You take your photo to Photoshop and add an image filter to it. A combination of sponge+cutout gives it a painting feel for example.
    2. You take your photo to Illustrator and image trace it for "low fidelity" then crank up the paths and corners to 100% and finally export as .png
    (this is the method I'm using for this project.)
    3. You do an outline tracing by hand and then paint over the details with Photoshop or SAI and a tablet. (you need some basic art skills for this.)
     
    Out of these 3, number 1 is the fastest and simplest to do. Chances are you have Photoshop installed no matter if you dabble on art or design
    or not and filtering is just 2 clicks away. Number 2 has a nicer looking tracing effect but you require Illustrator and the 3rd one is so tedious and time
    consuming that you probably shouldn't consider it unless your VN has less than 10 backgrounds or something like that.
    Those aren't the only methods available though, you can always come up with one of your own and use it, Go wild, make that creativity explode!
    For reference, here's what I did for one of my backgrounds:
     
    Here's the RL picture:
     

     
    Here's the traced and edited version. As you can see I boosted the vibrance for added cartoony feel and even added some otaku touches to the room...
    ......I'll give a cookie to the one who identifies them all
     

     
    Of course that doesn't end there. You can always make variants for other times of the day as well
    For example late afternoon:
     

     
    Night time:
     

     
    And even artificial light:
     

     
    There's tons of things you can do with photographs, so don't feel discouraged if you are not an artist or can't find artists. Always remember:
    Creativity is boundless.
     
    Music:
    This one isn't particularly hard and it's the same deal as with art mostly. 1. You compose music yourself if you have the talent and skill for it.
    2.You use the readily available stock of P.B. (Public Domain) or R.F. (Royalty free) music. In both instances make sure to credit the composers
    properly. A good site for all things sound is freeSFX.co.uk
     
     
    Sprites:
    Here comes the big fish. One of the most important parts in any VN in existence. The graphical representations of your characters. AKA sprites.
    The lack of artistic skill shoots down many projects because there's not a "quick fix" for this. There are public use sprites but they are not very
    good and they might not suit your needs or the style of your VN. In this case if you're a one man army, you grit your teeth
    and start drawing. I had to that myself at some point. Practice makes perfect and while your sprites will not always be professional looking, you
    can only get better as you practice. If you simply cannot draw to save your life, you can always use the "rotoscope" technique.
    Don't be fooled by the word tho, It's just a mock term and you only need a camera and a PC. You get volunteers, take their pictures, transfer them
    to your PC crop and edit them the same way you do with backgrounds. You can make them look more cartoony or hell you can even go with black and white
    +stamp effect to make a Sin City style VN! If you are still inclined to make your own sprites however, you certainly can. That's what I'm doing for this project.
    Here a sample of my main heroine. Notice my Tsunako influence?
     

     
    What do you think? isn't she cute? Mind you, she went through 3 redesigns so indeed it's no easy task.
     
    And this will be all for now concerning the one man army method. If you have all your assets in order then let's get coding already! Let's get a test script
    underway. Remember that this is an actual VN project and not a mock script as before so if there's something you don't understand. Please do tell me
     
     

     
     
    With your assets handy, go to HUB and then open your stub script, then check that you have the following things in order. (Add stuff as needed.)
    REMEMBER: THESE ARE MY ASSETS, YOU NEED TO REPLACE NAMES AND FILES YOU SEE HERE WITH YOUR OWN:

    1. Image definitions: Like we covered previously, you have to define most images here in the main script:
     

     
    2. Character definitions: Same drill, follow the coding and remember what we've seen part 1 and 2:
     

     
    3. CTC animation: a click to continue animation. it will appear when a character has finished talking. It won't activate with narration unless you define the narrator as a character.
    Follow the code and replace with your own animation. All you need is a set of frames in .png (images should be 30 to 50 pixels wide.) For example: a blinking arrow.
     

     
    The x and y values at the end must be tweaked to match the position of your textbox.
     
    4.Custom position definitions: Chances are your sprites appear cut off from the screen or too low. Ren'py is not exactly intuitive so you can use this code to create a default position
    value for your sprites. Results will vary depending on the size of your sprites and the resolution of your VN. You can also use this code for custom sprite positions.
     

     
    To use this position remember what you learned in part 1 and 2:
    example: show Neru at myposition
     
    5.Custom transitions: Ever felt the fade out was too fast or the dissolve effect needed some tweaks? Worry not, as you can make custom transitions out of the existent ones. In this case this is
    a slow "drop down" but you can also make a custom dissolve, example: dissolve (0.5, 1.0, 0.5),  which is a very slow dissolve effect.
     

     
    6. Splash screen: Ren'py doesn't have stock code for splash screens. You can make a splash image appear while your game is loading, but the loading is so fast that the splash appears for
    half a second sometimes. Thankfully there's custom code to make your VN boot to a splash screen before the title screen! Follow this code replacing "mysplashscreen" and "mysplashsound"
    with your own.
     

     
     

     
    And that's it for the third part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly
    orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together
    for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts
    will certainly pay off. Do join me next time, when I'll be covering the rest of this section and UI styling in detail.
    Many thanks for your time and until then. See ya 


    Kind regards. Helvetica Standard.
  24. Like
    Helvetica Standard got a reaction from Kosakyun in How to code a VN with Ren'py, Part 3 (Comprehensive Guide)   
    Welcome back! Fellow programmers!

    Hello and welcome back to my 5 part guide "How to code a VN with Ren'py."
    Today we will have a special guide, a walkthrough on how to code an actual VN project. Last time we coded a mock
    VN however this time I'll be using a personal project as a guideline to teach you how everything's done
    straight from the drawing board! Fear not as you are on the right track and if you've checked out part 1
    and part 2 then you'll have no problem figuring this third part out. (Hopefully, since my explaining is terrible. XD)
    That said please bear in mind once more that this is not an infallible guide to program with python or ren'py and
    it will not make you an expert after you've read it. However I'll do my best to try and explain how to code a VN
    with Ren'py to the best of my ability and I will be with you for the entirety of this guide.
    So let's go fellow programmers! the sky is not the limit as your creativity is...boundless. Let's start, shall we?
     
     

     
     
     
    first off, open your HUB and go to your active projects, then launch your stub project which should look
    similar to this:


     
     
    The background is black to emphasize that we have nothing set so far, some of you might have a different color
    depending on your stock theme. The resolution you use for your VN will also be present from the moment you
    boot. In my case, I'm developing this VN in 1920x1080 resolution.
    Now, we need to get rid of this boring background and plainGUI design. Let's make a custom main menu.
    First, close your stub VN, go to your HUB and click on the "screens.rpy" link. This will open the script for screens,
    the place where we will create our very own main menu.
    Leave that open for now and then open your favourite image editing software, photoshop, SAI, illustrator, Paint studio, etc.
    Create a blank image with the resolution of your VN (for example, if the resolution of your VN is 800x600, then you make
    a blank image with those dimensions.) After that just get creative, use some flaming skulls and bleeding hearts or whatever
    you like. Alternatively you can just use text (That's what I'll do since my project has a minimalistic UI by design. xD )
    the point here is to edit the main menu to your liking. So let's go and see how it will look:
     
     

     
     
    This is my title screen. The focus of my VN is to make a reference to retro games, hence the austere 8 bit console look.
    You ought to make something different as my project is only a guideline, remember that.
    Now back on topic, as you can see, the clickable sections are displayed in this image, so you might be wondering: "can't
    you do that with Ren'py?" Yes and no. Ren'py allows custom styles but those are limited in a sense and require you to
    have more than just the basic python knowledge so we'll be going with this option because it's unconstrained and it allows
    you to make your VN look any way you like.
    So back to those clickable sections such as "new game" and "continue", what are they for? They are your mouse hotspots.
    We'll be using those to give coordinates to ren'py so it remembers where they are located and map an action to said hotspots.
    This image above will be called your "ground image." This is the way it looks when you are not hovering the mouse over any
    options. Now once you're done with this let's go and make the "hover version" which will look like this:
     
     

     
     
    As you can see I added an orange arrow to every clickable option. This will reflect each hotspot "hover" action when I pass
    the pointer over them. This will be our "hover image".
    Note that you can do whatever you want for your own hover effect, for example you can make the text grow larger or smaller,
    change colors or add a blending effect like glow or a simple transform. Once you're done with this, save both images in .png
    and place them inside the "game" folder, then let's go back to the "screens.rpy" script that we left open.
    Back in the screens script, scroll down till you reach this part:
     

    This is the default main menu that all stub VNs have. Don't worry about all that code though, we're going to completely replace it
    with our own. Let's start with making an "imagemap."
    First delete all the code shown on the image (except for the red parts, so you remember what you are changing. XD)
    Then type in this:
     
     
     
    screen main_menu:
    tag menu  (this line is very important when using custom screens, forget to add it and you will regret it.)
    imagemap:
            ground "your ground image.png" (remember to replace the filenames with your own. Also don't forget that images need to be inside the "game" folder.)
            hover "your hover image.png"
        
            
            hotspot (xxx, xxx, xx, xx) action Start()
            hotspot (xxx, xxx xx, xx) action ShowMenu("load")
            hotspot (xxx, xxx, xx, xx) action ShowMenu("preferences")
            hotspot (xxx, xxx, xx, xx) action Quit(confirm=True)
     
     
     
    There you have it. It's a basic imagemap  with the essential functions of a main menu. Pretty simple, no?
    So you might be wondering, what are those "X" symbols right next to "hotspots" Well, those are coordinates
    for the mouse. Those coordinates will tell Ren'py where your hotspots are located so let's go ahead and
    find these coordinates.
    Don't save any changes yet, instead go to your HUB and launch your project, then press SHIFT+D to enter
    the developers menu. while navigating through the menu find the "image location picker" option which will summon
    a list of all the images that are inside the "game" folder. Find your hover image and open it:
     
     
     

     
    As the image says, draw a rectangle over the area where you want your hotspot to be recognised.
    You'll get he coordinates for this hotspot on the lower left corner of the window. Input these coordinates on the screens
    script where the "X's" are. Repeat this process for each hotspot and remember to input the coordinates that match
    each section, don't go mixing them by mistake. XD
    Once you're done, your hotspot section will look smilar to this:
     
            hotspot (720, 611, 391, 70) action Start()
            hotspot (726, 691, 384, 60) action ShowMenu("load")
            hotspot (726, 758, 378, 63) action ShowMenu("preferences")
            hotspot (815, 828, 209, 59) action Quit(confirm=True)
     
    These are my coordinates by the way, don't copy/paste them because they won't work for you. Get your own coordinates. XD
    Once you're done typing the coordinates in, save your changes to screens script and close it. Then boot up your project to
    check your brand new custom title screen. If all went well you'll have a fully functional main menu, otherwise scroll back and try
    to follow the instructions to the letter.
     

     
    Previously we covered assets though briefly. This time we're focusing on the essential things to make an actual VN project, that said
    we already have the most important asset of them all. YOU. Yep you only need one person to make a VN. This in paper however is
    terribly inefficient and making your VN would take you a lot longer than if you had help. But, you can't always sit around waiting for
    help to come, you need to show something to the community to get feedback, and maybe help, later on. So you need to get some
    placeholder assets and show your idea to the world. It's what I did and what you should do if you plan on making a large scale project.
    However there's always the alternative to go solo, which is totally possible and moreso if you happen to be a really talented individual
    who has all the skills needed for making a VN, if not then there's always the "one man army method" which we will cover below.
     
    Backgrounds:
    There's 3 ways to deal with backgrounds when getting started/going solo: 1. You have the artistic skills and you draw them by yourself.
    2.You use the stock VN backgrounds readily available online (Uncle Mugen's collection is pretty solid.) just be aware that thousands of
    other people will be using them on their VNs as well. And 3. You use RL photographs. Out of all the choices for starter programmers and
    project leaders this is the most sensible option, you take a camera and venture outside to take pics of suitable locations for your VN.
    Contrary to popular belief, this method is used by professional studios, although this largely depends on the visual style of your project.
    That said you don't have to use the photos as is. You can make them look more cartoony and more suited for VN format:
     
    1. You take your photo to Photoshop and add an image filter to it. A combination of sponge+cutout gives it a painting feel for example.
    2. You take your photo to Illustrator and image trace it for "low fidelity" then crank up the paths and corners to 100% and finally export as .png
    (this is the method I'm using for this project.)
    3. You do an outline tracing by hand and then paint over the details with Photoshop or SAI and a tablet. (you need some basic art skills for this.)
     
    Out of these 3, number 1 is the fastest and simplest to do. Chances are you have Photoshop installed no matter if you dabble on art or design
    or not and filtering is just 2 clicks away. Number 2 has a nicer looking tracing effect but you require Illustrator and the 3rd one is so tedious and time
    consuming that you probably shouldn't consider it unless your VN has less than 10 backgrounds or something like that.
    Those aren't the only methods available though, you can always come up with one of your own and use it, Go wild, make that creativity explode!
    For reference, here's what I did for one of my backgrounds:
     
    Here's the RL picture:
     

     
    Here's the traced and edited version. As you can see I boosted the vibrance for added cartoony feel and even added some otaku touches to the room...
    ......I'll give a cookie to the one who identifies them all
     

     
    Of course that doesn't end there. You can always make variants for other times of the day as well
    For example late afternoon:
     

     
    Night time:
     

     
    And even artificial light:
     

     
    There's tons of things you can do with photographs, so don't feel discouraged if you are not an artist or can't find artists. Always remember:
    Creativity is boundless.
     
    Music:
    This one isn't particularly hard and it's the same deal as with art mostly. 1. You compose music yourself if you have the talent and skill for it.
    2.You use the readily available stock of P.B. (Public Domain) or R.F. (Royalty free) music. In both instances make sure to credit the composers
    properly. A good site for all things sound is freeSFX.co.uk
     
     
    Sprites:
    Here comes the big fish. One of the most important parts in any VN in existence. The graphical representations of your characters. AKA sprites.
    The lack of artistic skill shoots down many projects because there's not a "quick fix" for this. There are public use sprites but they are not very
    good and they might not suit your needs or the style of your VN. In this case if you're a one man army, you grit your teeth
    and start drawing. I had to that myself at some point. Practice makes perfect and while your sprites will not always be professional looking, you
    can only get better as you practice. If you simply cannot draw to save your life, you can always use the "rotoscope" technique.
    Don't be fooled by the word tho, It's just a mock term and you only need a camera and a PC. You get volunteers, take their pictures, transfer them
    to your PC crop and edit them the same way you do with backgrounds. You can make them look more cartoony or hell you can even go with black and white
    +stamp effect to make a Sin City style VN! If you are still inclined to make your own sprites however, you certainly can. That's what I'm doing for this project.
    Here a sample of my main heroine. Notice my Tsunako influence?
     

     
    What do you think? isn't she cute? Mind you, she went through 3 redesigns so indeed it's no easy task.
     
    And this will be all for now concerning the one man army method. If you have all your assets in order then let's get coding already! Let's get a test script
    underway. Remember that this is an actual VN project and not a mock script as before so if there's something you don't understand. Please do tell me
     
     

     
     
    With your assets handy, go to HUB and then open your stub script, then check that you have the following things in order. (Add stuff as needed.)
    REMEMBER: THESE ARE MY ASSETS, YOU NEED TO REPLACE NAMES AND FILES YOU SEE HERE WITH YOUR OWN:

    1. Image definitions: Like we covered previously, you have to define most images here in the main script:
     

     
    2. Character definitions: Same drill, follow the coding and remember what we've seen part 1 and 2:
     

     
    3. CTC animation: a click to continue animation. it will appear when a character has finished talking. It won't activate with narration unless you define the narrator as a character.
    Follow the code and replace with your own animation. All you need is a set of frames in .png (images should be 30 to 50 pixels wide.) For example: a blinking arrow.
     

     
    The x and y values at the end must be tweaked to match the position of your textbox.
     
    4.Custom position definitions: Chances are your sprites appear cut off from the screen or too low. Ren'py is not exactly intuitive so you can use this code to create a default position
    value for your sprites. Results will vary depending on the size of your sprites and the resolution of your VN. You can also use this code for custom sprite positions.
     

     
    To use this position remember what you learned in part 1 and 2:
    example: show Neru at myposition
     
    5.Custom transitions: Ever felt the fade out was too fast or the dissolve effect needed some tweaks? Worry not, as you can make custom transitions out of the existent ones. In this case this is
    a slow "drop down" but you can also make a custom dissolve, example: dissolve (0.5, 1.0, 0.5),  which is a very slow dissolve effect.
     

     
    6. Splash screen: Ren'py doesn't have stock code for splash screens. You can make a splash image appear while your game is loading, but the loading is so fast that the splash appears for
    half a second sometimes. Thankfully there's custom code to make your VN boot to a splash screen before the title screen! Follow this code replacing "mysplashscreen" and "mysplashsound"
    with your own.
     

     
     

     
    And that's it for the third part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly
    orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together
    for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts
    will certainly pay off. Do join me next time, when I'll be covering the rest of this section and UI styling in detail.
    Many thanks for your time and until then. See ya 


    Kind regards. Helvetica Standard.
  25. Like
    Helvetica Standard got a reaction from sanahtlig in Windows 10 Visual Novel Compatiblity   
    to clarify: Win 10 will launch on July 29th globally.
    to clarify #2: Win 10 is now on consumer build phase. I know this because I'm an insider myself. Latest build is quite polished and the issues are minimal.
    I exported my VN collection to my win 10 partition and so far 100% of them are working. Here's the list:

    * Chaos Head - flawless
    * Da Capo - Flawless
    * Da Capo 2 - Flawless + better performance than on 8
    * ef the first tale - Flawless + audio no longer gives problems
    * ef the latter tale - Flawless
    * Fate Stay Night - Flawless
    * Go Go Nippon! - Flawless
    * Muv Luv (Series) - Flawless
    * I/0 - Flawless
    * Kanon - Flawless
    * Clannad - Flawless
    * Air - Needs running as admin
    * Ever 17 - Needs running in compat mode for win 7
    * Little Busters - Flawless
    * Little Busters EX/ME - Flawless
    * Da Capo 3 - Flawless
    * Koisuru Nasu Love Resort - Flawless
    * To Heart2 - Needs running in compat mode for win 7
    * Hoshisora e kakaru Hashi - Flawless
    * Noble Works - Flawless
    * Majikoi - Flawless
    * Majikoi S - Flawless
    * Majikoi A-1 - Flawless
    * Hoshimemo - Flawless
    * Hoshimemo EH - Same issues as other OS's (requires changing time zone to JP) fast fix = AlphaROMdiE
    * Osadai - Flawless, (no longer needs win8 patch)
    * Osadai FD - Flawless
    * Rewrite - Flawless
    * Harvest festa - Flawless
    * Shuffle! - Flawless
    * Really! Really? - Flawless
    * Imouto Paradise - Flawless + better performance than on 8
    * Boob wars (series) - Flawless + better performance than on 8
    * Princess evangile - Flawless + better performance than on 8
    * Yu-No - Flawless
    * Duel Savior - Requires running in compat mode win xp
    * Come see me tonight (series) - flawless
    * Sharin no Kuni - NoDVD fix no longer works, requires ISO to be mounted when playing
    * Sharin no Kuni FD - Same as above
    * Dengeki Stryker - Flawless
    * Snow Sakura - Flawless
    * Stein's Gate - Flawless
    * Grisaia (series) - Flawless + better performance than on 8

    This is my personal collection, there may be more VN's that are compatible  but I will add them when I test them again for core release of win 10.
×
×
  • Create New...