Customizable Character Tutorial

playerOptions.png

One of the parts of Pinewood Island and As We Know It that I am very proud of are the protagonists that the characters can customize. I’ve seen a few other visual novels do this, and I think it’s great! If you’re reading this you would probably like to do it too, but aren’t sure how. First, let’s talk about the pros and cons of incorporating a customizable sprite into your game.

Pros:

  1. Allows for your players to model the character after themselves. This is especially nice for POC since so many visual novel protagonists default to white/pale skin.
  2. Will make the player feel more attached to the main character. If the player has spent some time getting their character to look exactly how they want, it’ll help them build a connection to the protagonist because it is ‘their’ protagonist.
  3. It’s fun. A lot of players really enjoy the ‘dress-up’ aspect, they get to play around with the different options and it can just be a nice feature to add.

Cons:

  1. It costs more. You’ll be spending more money on art assets, and more time programming. This is especially hard if you plan to feature them in any CG/Illustrations in the game. It means that the artist has to draw several layers whenever the protagonist is featured. Then you have to program that all in. (I’ll discuss how to do this in this tutorial though!)
  2. Promotional material will be tricky. I get around this by only featuring the other characters. If you ever do showcase the protagonist players will likely consider that version ‘canon’ and it can deter them from changing it.
  3. Some players prefer to have a fully fleshed out protagonist and really don’t like ‘blank slates’. Even if your customizable protagonist has a determined personality it will still conflict with this mindset.
  4. On the flip side if players spend a lot of time making their own character, and then if that character acts in a way that they don’t agree with it can be very upsetting. This seems to be more prevalent in RPG/MMORPG games but it is a concern I have read about so it might be good to keep it in mind.

So now you’ve considered your options, looked at your budget, and you’re ready to do it! So let’s get into the actual tutorial.

delilah_options.png

The Art

The first thing you’ll need is the character sprite. If you’re an artist, that’s just a matter of you drawing it. If you’re not you’ll need to contact an artist and pay them for the sprite! The sprites from Pinewood Island were done by the super talented Johan Faulstich. If you’re working with an artist make sure you communicate that you’ll need the final, layered image! This is important for programming purposes. I use Photoshop CC, but I believe GIMP, or SAI might be comparable. This is what you’ll want:

layers_sample.PNG

Each of those folders contain the different aspects that make up Delilah. For example the base folder contains each possible skin option.

base_options.PNG

This is very important! You’ll need these so that you can layer them into the game easily. They should be exactly the same, but colored differently, so that they will layer with all of the other options seamlessly. Here is an example of just the base (including an underwear layer for modesty):

base_one.png

 

For anything you want the player to be able to customize you’ll need separate layers to do so. Once you have these you’ll want to export each individual layer into renpy. To do this you’ll need to open the images file in your game and export PNG images in the size that you want.

It’s also important to organize your folder, this is roughly how I had mine set up for Pinewood Island. You will also need to know these folder names for the image code in renpy.

image organization.PNG

So Delilah’s sprite folder looked like this:

delilah_folder

Obviously I can’t show the entire folder, because there were just so many options! But as you can see each version of every outfit, skin color, hair color, and highlights were each separately exported in. Make sure they are all sized perfectly, or you’ll get some weird glitches in your game! Also pay extra attention to how you name the files, that’ll be important later.

The Code

Now for the actual renpy code! For this I’ll show you the newer LayeredImage. For Pinewood Island and As We Know It I used the old method of ConditionSwitch and LiveComposite.  LayeredImage is much nicer to work with so I highly recommend it! I’ll be using it for all future sprites. If you need a tutorial specifically on Layered Image then I highly recommend this (FREE) download on itch.io!I learned a lot of the newer techniques from this tutorial and it’s a good source of information.

This is how you’ll want to define the image:

new code.PNG

 

The reason why there are ‘default’ options is so that the game doesn’t freak out when you get to the dollmaker screen, and so that there will be some kind of image present. Let me break down the above code with a few important things.

First, you’ll notice this is a very trimmed down version of Delilah from the game. This is because she was originally coded the old way, and I’m just doing this new way for the tutorial.

The next thing I want you to notice is the order which I’ve layered the image. If you get the order wrong the sprite will look….. odd. You want to think top down. This may be different for you. Don’t be afraid to change the order if things look weird.

With this code Delilah looks like this at the start of the game:

screenshot0173.png

So you have a sprite that you can now customize!

Now you need to allow the player to customize them! A good way to do this is by creating a screen that will allow the player to change the variables. Renpy screens can be a bit tricky, so I strongly suggest getting familiar with Renpy’s documentation. If you have problems you can always ask questions on the Lemmasoft forum.

Quick disclaimer, I am not a professional programmer. I’m self taught, and honestly there might be more efficient ways to do what I do! So don’t be afraid to reach out to other people if you have problems.

On with the code!

You’ll want to create a dollmaker screen. This will be what you call when you want the player to change the character. For the tutorial this screen will be quick and ugly. I’ll try to break it down so that you can take the code and customize it to fit your needs.

Here is an overall shot of the code. I’ll break it down next!

dollmaker screen.PNG

 

hbox puts all of the elements within it into a horizontal box

vbox puts all of the elements within it into a vertical box

xalign, yalign, and spacing just made the screen appear at the center of the screen, and add a bit of padding between the buttons and the image of Delilah.

The “Done” button tells the screen that you are done and it can go away now. If you don’t have this the screen will stay there, and you don’t want that!

This is what the above code looks like inside of renpy:

screenshot0175gfa.png

 

Like I said, quick and ugly!

In the code you’ll see I did every option a different way. This is to help you see that there are lots of ways to accomplish what you want, based on the amount or variables and the type of screen you’re working with. I’ll go through and explain each section now.

first one.PNG

This is the way I like best, because it’s smoother. The function manages the amounts and can be used for all options. It does require writing a function, but I’ll go into that at the end.

second one.PNG

This one directly changes the variable, and requires the max/min function to keep the values in check. That way you don’t define your variable into an amount that doesn’t exist! In this case there are only 3 possible options so you want to keep the numbers between 1-3.

screenshot01755.png

This is what happens when you don’t use the min/max properly!! Oh no!

third one.PNG

This third option could be nice if you wanted several buttons to showcase each option. In this case you can change the variable with a string. It still uses SetVariable, and would require a button for each option.

fourth one.PNG

The fourth way also uses SetVariable but works with True/False values. This is good for options like the sweater which you either want on the sprite or you don’t.

Back to the first option I mentioned!

first one.PNG

This option uses the screen function Function. Function(function name, parameters). It requires that you write a function which is easier than you might think! Here is the function this references:

function.PNG

you have to make sure functions are defined under init python!

def change_delilah is telling renpy that you are defining a function named ‘change_delilah’.

All functions need to be followed by ( )’s even if it’s empty.

The ( )’s contain any parameters which help tell the function what to do.

In the above example ‘aspect’ refers to which part of Delilah we want to change. I could then go on to have this function work for outfit, skin, and so on. the second parameter is ‘way’ and tells it where I want it to go forward or backward. Below are if statements which should be fairly simple to understand!

the line that reads ‘global hair’ tells the function that the variable ‘hair’ exists outside of the function and that it should be changing it!

Now you have your screen, so all you need to do is call it when it’s time to let the player mess with the character! In the script just write: call screen dollmaker

Super easy! Now for the more complicated part ^^;

The CGs

If you want a customizable character AND CG illustrations in your game you have a few options.

  1. Never feature the protagonist in any of the CGs.
  2. Pick a ‘canon’ version of the character to show each time – though this may upset the player.
  3. Have customizable CGs! The more complicated and expensive option.

If you want to choose option 3 then I can at least help you a bit with the code! First let’s discuss the artwork.

You’ll need to layer it in a similar way to the sprite. If you go this route I strongly advise that you only allow the player to adjust the coloring of things. If you also let them adjust something such as ‘hairstyles’ remember you’ll need to have several different versions of each CG!

Once you have the art you’ll want to layer it within the code:

cg code.PNG

As you can see for these I use layered image again! Of course in the original game I used LiveComposite, but Layered image works well for this too. So you have the CG, and it reflects the character’s sprite! That’s great!

Oh, but the CG Gallery….

If the player goes through multiple routes, each with a unique character, they’ll want the CG gallery to reflect that! This is where it gets a bit tricky. I recommend using persistent variables to accomplish this.

So when you call the CG during play you’ll want to do something like this:

cg snippet.PNG

$ remember_cg(1) is another function! Yay! Using a function when you call the CG will make it remember what the character looked like for the gallery. Let’s look at the function:

new function.PNG

Remember when creating a function to write them below init python!

This function can handle several CGs, which is why I use the number 1. In the above code I tell the function that the parameter is 1, and then the function knows which code to apply. That way you only need a single function for all of your CGs!

‘persistent.hair_cg_1’ is the variable that will control the hair color of the protagonist in the CG gallery. If you have a different persistent variable for each CG then you can maintain the value throughout multiple play throughs.

Then when it comes time for the CG in the gallery you’ll want to layer the image something like this:

fahgahtsht.PNG

Then it’s important to name your files to match the persistent values. so that for hair color the files would be named “flashbackHair_01.png” and so on for each value.

str() is a function that converts values into strings, and is very useful for this example.

Then you’re done!

A couple of notes:

  • Do not copy/paste the code I wrote into your game! You’ll need to write it to reflect your own variables/files and so on. Writing it yourself might also help you learn it better, anyway!
  • If you really struggle with code I recommend the free python course at Code Academy. That’ll help you learn the basics, the jargon, and you may come up with better ways to do what I’ve done above!
  • Always run/test your code often as you write it. That way if something goes wrong you’re more likely to catch the right thing.
  • Don’t be afraid to ask for help, a lot of this code I got from other tutorials or people helping me.
  • These methods work right now, but Renpy is always changing. A few years from now there might be a different or better way so if you’re reading this beyond 2019 keep in mind the code may no longer work.
  • The best way to learn Renpy is to familiarize yourself with programming jargon, and reading the documentation.

Thank you for reading! I hope this helped someone. I might try to do more tutorials in the future.

 

 

 

 

 

 

Pinewood Island Steam Giveaway!

Since I missed Valentines Day I have decided to have a Giveaway! Get a free steam key of Pinewood Island! More information below the image!

pinewood island giveaway.png


Rules:

1. Must follow me on Twitter

2. Must reply to the giveaway tweet with your favorite character (the tweet will be pinned at the top!)

3. Must like/retweet the giveaway tweet!


The Winner:

1. Will receive a free Steam Key for Pinewood Island

2. Will be chosen using random number generator

3. Will be chosen March 1st at 2pm EST


Good Luck!

capsule_lg

Pinewood Island is a romance and horror visual novel and the first game from Jaime Scribbles Games.

A group of students, their Professor and his T.A. arrive on a secluded island for a 4 week long science program. The plan is to study the natural flora on the island while earning double the credit.

This is interrupted when the Professor is killed after an impromptu beach party. When they try to call for help they find that the phones do not work. There is no boat, and no way to contact the mainland.

A charter boat isn’t set to arrive for them until the 4 weeks are over.

You must decide where to focus your energy, and who to focus it on. Mistakes can be deadly.

Some of the students start to crack under the pressure. Try to survive and solve the murder while potentially indulging in romance.


Features:

  • 20+ endings
  • 10 Achievements
  • 55,000+ words
  • 16 Illustrations
  • Original Music

Credits

  • Developer/Writer/Programmer: Jaime Barhill AKA Scribbles
  • Additional Programmer: Teeth
  • Character Art: Johan Faulstich
  • CG Art: Tanya Bobrowski
  • UI Art and Logo: Potouto Graphic Design
  • Proofreader: Jackie “Gamerbum” Maillet
  • Music: Solo Acapello
  • Background Art: Bunny Void

Content Warning:

  • adult situations
  • mild sexual content
  • violence
  • potentially upsetting situations and content

Visual Novel Recommendations

Whenever I come across someone who doesn’t know of visual novels, I always want to recommend some, but struggle to think of some on the spot. So here is a list I can link to later!

This is NOT a comprehensive list, and instead I’d like to point you here for a more in depth list of games!

These are mainly romantic/otome style games, because those are what I tend to play. I’ve also left off Japanese titles, and the bigger ones that everyone is talking about- because people tend to already know of those.

Mine, which I’ll just list here and then move on

FREE GAMES!

These games are free (not freemium, but actually FREE) – some of these are short jam games, but again…. free

  • Whale’s Waldo – (romance sea creatures and travel the world)
  • XOXO Droplets – college romance with a bunch of jerks – a comedy (there is a deluxe version for cost, but the core game is free)
  • Cinderella Phenomenon – Super popular and cute with lots of fairy tale inspirations. Fantasy/Romance
  • Seduce Me – old but good, has full English VA, incubus invade your house (I don’t fully remember why…) but it’s all in good fun
  • Pairs – Sci-fi romance with aliens and cute art
  • Tailor Tales – Not out yet, but I believe the full game will be free. There is a playable demo. Dress up game with romance!
  • The Lady’s choice – If you like that Jane Austen style you’ll like this!
  • Nachtigal – Vampires!
  • RE: Alistair++ – Cute game about gamers and romance!
  • a(t)rium – I haven’t played this one yet but It’s on my to-do list! Flower shop and secrets, what’s not to love. (DEMO)
  • The Bare Escape – cute comedy with shirtless dudes!

Now for the paid games, I tried to link to ichio when available since it’s more dev friendly- BUT most of these are also available on Steam.
Fantasy

  • Demonheart – I love this one, but it’s very dark and has some rape-y content so be warned.
  • Cinders – Another old classic, a new take on the cinderella tale with pretty art and effects!
  • Hustle Cat – Cat cafe romance with magic?? What’s not to love! Also features a protag you can make m/f/n
  • Along the Edge – Pretty art and mature story, Witchy elements and lots of endings.
  • Mizari Loves Company – Not out yet, but I really enjoyed the demo and am excited to see it some out!
  • Vicboys – It’s got a cute steampunk aesthetic, and lots of cute guys, only demo is out right now

Horror

  • Lake Of Voices – Something terrifying lurks in the water! I haven’t fully played it yet, but it’s great so far. (*** actually a free game!)
  • SoulSet– Haven’t played but heard really good things, more of a mystery than horror
  • Dead Wishes – Haven’t played yet, but am planning to!

Slice of Life

  • Backstage Pass – Stat raising, make up artist to the starts, cute and worth checking out
  • Let’s not stay friends – looks really cute, but I haven’t played it yet
  • Saucy Suitors – Haven’t played, and only a demo is available but I’ve heard good things

Drama

  • Unmoor – Historical-ish life at sea, with pirates and captains, cute art but I haven’t played enough to say more yet
  • These night’s in Cairo – Egypt, archeologists, and lots of drama!
  • Love on the peacock express – Lesbians on trains! I have not played but have heard good things.

As We Know It

AWKI_icon.png

A heavily branching visual novel, featuring love, friendship and life-sim elements in a future destroyed by the sun.

When the world gets too hot humanity finds sanctuary underground. After a
long waiting list you finally score a spot in the local underground
city of Camden, run by Mayor Rick Davidson. You and your mother move in
and begin to acclimate to this wonderful new life. As time passes,
however, things start to go wrong. Unravel what’s going on, and face
some hard choices that will impact your relationships and fate.

Get a job, find romance, and meet the other residents of Camden- your new home.

all_char_sm_final

Features:

  • Customize your name and appearance (different skin tones and hair colors).
  • 4 career options with independent story lines.
  • 4 potential love interests.
  • 3 potential friends and several people to interact with.
  • Branching paths from day one, making each play through unique. Every path promises different sides of the story, encouraging replay!
  • Spend time with any- and everyone, no matter who you romance, or which job you pick.
  • Several endings.

Camden:

bgs

An underground utopia with fresh food, filtered air, and the coldest water you’ll ever taste. Enjoy your spacious living quarters with enough room for the whole family! We have all the amenities you could ever dream of: a gym for your fitness, a library for your mind, and a bar for socializing. Our community center is a hub of activity. Stop by in the mornings for affordable coffee and a friendly chat with your neighbors. All events and meetings are held there as well!

Our massive space is taken up mostly by an impressive collection of greenhouses that provide a wealth of resources for Camden. From clothing to medicine, if we can grow it then it’s here. Never worry about fatal power outages again. We use an advanced Geothermal energy system that is as safe as it is efficient. Our impressive security and medical departments keep us protected and healthy.

Camden welcomes you to your new, better life.

Music:

Characters:

You play as Ashlynn Phillips. Ashlynn is suspicious, but desperate to make this new life work. Her life on the surface was hard. She spent most of it fighting for everything and going without. Now she’s safe. Her mother is safe. They have food, water, and shelter. Nothing will get in the way of that ever again, if she has anything to say about it. Or will she change her mind when she sees just what living in Camden can mean?

Camila Phillips – Your mother, despite her airy optimistic nature you know she’s seen some very dark times. You can hear her whimper in her sleep, though she’ll vehemently deny it. Shes content to read romantic stories and daydream until reality catches her attention.

Mayor Rick Davidson – The man in charge. Will do whatever it takes to ensure Camden’s future success and prosperity. Many of the residents are enamored with the charming mayor, but he seems to have finally taken a personal interest in the doe-eyed Camila Phillips.

Romance Options:

gloria_sitejude_sitemicah_siteeva_site

Friend Options:

Sam – Bad-ass bartender who’s been to hell and back. Runs Icarus. Took a young Jude in when she was 17 and they have been family ever since. Don’t steal from her or she will stab you. No really. A lot of attitude and sass. Protective of her loved ones.

Trevor – Grumpy librarian, not a people-person, may like Bryan more than he seems to, likes books and hates people, would prefer if you just never went to the library ever, dislikes Gloria Miller.

Tabby – Sweet little Tabby, likes to study in the gym. 8 years old. Lonely. Smarter than other kids her age. She may think you’re a bit dumb, but is happy to tutor you.

And more!

Vince – Head of security, strict at work, but a caring and sensitive father and friend. Adores his daughter, single but not looking (Sorry Iris), acts as a father figure to Eva, good sense of humor

Bryan – Handsome, charming, friendly, and utterly useless at his job. Has a huge crush on the grumpy librarian, and spends his time at the library when he isn’t napping at work.

Iris – A man crazy flirt with a big smile and a lot of sass. Fun, outgoing, likes just about everyone but her ex. Acts like the southern-belle of Camden.