Popular Post

Popular Posts

Recent post

[Week 90]


*:....:*・゜Table of contents *:....:*・゜
  • Gloom
  • Kinetic Lines
  • Shine
  • Sparkle
  • Flashback
*:....:*・゜*:....:*・゜*:....:*・゜*:....:*・゜*:....:*・゜


In the first part of this tutorial for rookie programmers, I've summarized a few quick tips that come in handy when enhancing the expressiveness of the narration of a visual novel.

This week I'd like to continue and list some other gimmicks that are easy to code and use, and serve the same purpose. I've used them for the coding of the demo of Pitch Black Serenade and since they worked fine with me I thought to share. I hope you'll be able to find some good inspiration this way too! 🌟

Gloom.

The method I used to show depressed feelings in a character during a comedy scene is to have a layer of purple shade and black lines going up and down in the background.


I prepared a transparent image with such design, equal in height to the size of the visual novel screen (720p) and code it with the ATL language.


My picture is called gaan_animated. I'll have it shown at the same position of my character but behind him. Then in 0.6 seconds the picture is moving up and in another 0.6 seconds is returning to the original position. I'll have the animation repeated.

Kinetic lines.

Kinetic lines can help enhance dramatic dialogue lines, situation or characters.


All you need for this animation is one transparent frame with the lines.


kinetic.png

A quick way to have animations with Ren'py ATL is to mirror the picture you already have. In my script.rpy doc I define the animation I want.

First, I want to give it an abbreviation to use it quickly. I choose ol (="overlay", since it's going to be layer on top).


My image is called "ol kinetic_animated". First it shows the "kinetic" picture, then, after 0.2 seconds it shows it again mirrored. The animation is set on repeat and it won't stop until I type "hide ol" in the script for the actual scene.



Shine.

Making objects shine to express beauty or luxury may be a good way to improve expressiveness.


kirakira.png
I prepare a transparent picture with the sparkles I need. I made a generic one that I can use for many occasions. 



I define the animation in the script.rpy doc similarly as I did for the kinetic lines.



The animation is finally placed in the right location and rotated. It will glitter until I tell it to hide.

Sparkle.

A classic way to show a character while fascinated.

 

I prepare two transparent pictures. The sparkles in the second one are smaller. Pay attention to two details: both pictures have the same size, therefore they will appear in the same position on screen; the smaller sparkles have to be centered in the bigger ones, like in this picture:


As always, I define my animation in the script.rpy file.


And with that, I can use it by placing it in the same position as my character.


Flashback.

This is one of the many ways the "flashback effect" can be achieved.


I use a white frame to enclose the screen within. As for the effects to start the flashback, I use both pixellate and dissolve.


I also have a sound to introduce the flashback. I haven't mentioned it for the other effects, but I always use a sound for each of them. I think that it communicates the atmosphere even more.

★━━━━━━━━━━━━━━━━━━━━★

This tutorial ends here. There are a lot of things yet I'd like to share so I'm going to continue it one day. In the meanwhile I hope that it's going to be helpful to someone! 


Next week, the usual updates for the production of PBS will resume.

Thank you for reading, see ya next week! 🙌💜





Visual Novel tutorial: effects in Ren'py.


This blog has been running for two whole years without stop! And I could say the same for the demo production which has been constant.

As many probably know, I'm a solo game developer. Back in March I quit my day job and have been living off savings and commissions in order to work full time on Pitch Black Serenade. I was able to handle my "survival" like this, but buying assets for the game is extremely difficult.

Therefore, I thought about launching a small campaign to collect some money for a few expenses:
  • The yearly fee for this blog. 
  • Programming for part of the demo.
★━━━━━━━━━━━━━━━━━━━━★
If you'd like to help PBS demo production and this blog, please consider commissioning me a small artwork of one of PBS's characters that will be delivered to your house! 🚁💨
★━━━━━━━━━━━━━━━━━━━━★


I'm happy to introduce the Pitch Black Serenade's inked portraits with serial number. series!



One portrait's price is 10€ and will be shipped to your house with no additional costs.
Every additional portrait costs 10€. 
Be sure you're willing to share your shipping address. Your commissioned artwork will be delivered anywhere in the world.

★━━━━━━━━━━━━━━━━━━━━★

How to order?
Choose the character you prefer among Fujisa, Teru, Isahai, Cry and Kairi. I will draw a portrait of them for you!

There's a limit of 20 commission slots for this campaign. 10 will be made in September and 10 in October.

Each artwork is signed and has a unique serial number that shows its chronological value. September artworks will be the very first, therefore they will have the lowest numbers!

This 20-slots campaign is unique to the release of the demo.
All who will commission an artwork for this first batch of portraits is going to have their name listed in the credits of the demo that's going to be released shortly. 

All the money collected with this campaign will be split among the website's yearly fee, the demo's programming and the shipping fee for the portraits. 

Reserve a slot for a portrait by direct message on Twitter: @pbserenade

Or by writing to kuna@97circle.com
Payment is upfront with Paypal.

★━━━━━━━━━━━━━━━━━━━━★
Would you like to have the logo of your brand/game appearing in the demo? Consider buying a sponsorship! 🌟
★━━━━━━━━━━━━━━━━━━━━★
The starting screen of PBS demo can show your logo or/and the address of your website. If you'd like to support Pitch Black Serenade this way, consider buying a sponsorship!

Write to kuna@97circle.com, sending the logo you'd like to have featured in .png format (high quality). I'll show it in the initial screens of the game.

Prices:
20€. Your logo will appear alongside others'.
30€. Your logo will appear alone.

All money collected this way will be invested in further development of the full game.

※(PBS demo has age restriction +12.)

★━━━━━━━━━━━━━━━━━━━━★
Thank you for reading! I hope you'll consider supporting PBS or just spread the word! I can't wait for everyone to play the demo! 😁

PBS demo support campaign.

[Week 89]


*:....:*・゜Table of contents *:....:*・゜
  • Enhance Dialogues
  • Useful Effects
  • Mid-sentence Flash/Sound
  • Black Fog
  • Layers
  • Window Hide/Show
*:....:*・゜*:....:*・゜*:....:*・゜*:....:*・゜*:....:*・゜


After finishing coding the demo for PBS, I thought that some other programmer rookies like me could have found useful a tutorial about basic programming with Ren'py! 

My aim is to summarize what I've learnt after coding a 35k-word script, focusing on those functions that allow a programmer to improve the narrative with expressiveness in order to stage a visual novel beautifully! 🌟

So if you're already familiar with the basic of Ren'py (writing dialogues, showing backgrounds and sprites, etc.), I hope that here you'll be able to find some useful tips to further polish your game! 

Enhance dialogues.
I think that writing the script for a visual novel is somewhere in between a novel and a game. To best express the narrative and the dialogues, you may need to use common tools as italic font as well as colored text.

I always find useful to write a list of the gimmicks I frequently use at the top of the script file. This way I can copy paste any of them in the dialogue/narrative any moment. (With the # I can basically use the script document as a notebook too!)



Be sure to have all the special characters you may need ready, like long-accented vowels, as well as the italic text code {i}{/i}. I personally use {w=0.2} to break dialogues after periods, {cps=10}{/cps} to slow down the text when a character is hesitant and {size=+04}{/size} when they're screaming. I also use {outlinecolor=#FA4389}{/outlinecolor} to enhance in pink the words the player must pay attention too.

Useful effects.
Shake effect "vpunch".
As for the text, there are a few, quick gimmicks to enhance the visuals as well. For example, having the screen shaking when a character is surprised can improve the immersion for the player. In Ren'py you can use the hpunch (=horizontal punch) and the vpunch (=vertical punch) functions to achieve this.



Just attach the with vpunch right after the dialogue line. Most of the time I also like to accompany the shaking with a deep sound, like a DOON, but, yeah, this depends on the atmosphere!


Flashing effect "Flash".
Maybe you remember how games like Ace Attorney or Danganronpa have a flashing effect to accentuate revelation-like moments. Rendering that in Ren'py is very easy.


Once again, attach the with Flash at the end of your line and to achieve a similar result to Ace Attorney one, use a bell ring sfx just before the dialogue!

Mid-sentence flash/sound.

What if you want to be even more accurate and have the flashing effect happening mid-sentence? What if you want to have the sfx playing in that same moment too?



Let's have a first line "Not that I..." and then, let's replicate it in the next dialogue while setting the character-per-second (cps) count at zero. This way, only the "Not that I..." part will appear instantly as it had stayed there. Let's attach the with Flash and we can play a sound right before the second line to enhance the flashing effect.

Instead, if we simply want to have a sound or a music track starting playing in the middle of a line of dialogue or in the middle of an animation, we can go about it differently.



Just by using brackets and setting the time of the silence with can have a pause before the track starts playing. 

Black fog.

One of the effects I've been frequently using while coding PBS is having the screen getting darker to make the reader focusing on the text only and enhance Kairi's inner monologues.

Just as Kairi was wandering off for a moment, I'm having this black layer wrapping the background while staying transparent.


I defined bblack as a simple layer of black color:



Then I just show it with transparency alpha whenever the scene requires it.

Layers.

We can also have the black layer appearing behind a character.


Since I named Fujisa's sprite fu I will have the black layer being shown behind fu.


It's useful to keep layers in mind for all kinds of scenes. This time it's Fujisa's turn to stay behind (the lines) for example. The other way would have looked odd, wouldn't it?


Window hide/show.
Window show and window hide are useful commands that we can input to show and hide the textbox. It comes in handy when we want to perform transitions or show animations for example.

Ren'py make the textbox appear and disappear with a dissolve effect by default, but if we want to make that faster or slower we need to pay attention to the "grammar":


★━━━━━━━━━━━━━━━━━━━━★

We reached the end of the tutorial! 💥 Once again, this was meant to help tiding up the archive of effects Ren'py allows and to help programmer rookies finding their way into visual novel coding!

I believe that half of a visual novel's programming is narrative, and the other half is expressiveness through visuals. That's why I thought about having this kind of tutorial!

I hope it helped! 😉
If it's well received I may consider making a second part!

Thank you for reading, see ya next week! 🙌💜





- Copyright © Pitch Black Serenade - Theme - Powered by Blogger - Designed by Johanes Djogan -