Reply to topic  [ 1 post ] 
 Coding with Renpy, Part 3 
Author Message
Level 39
Level 39
User avatar

Cash on hand:
2,187.55

Bank:
5,250.50
Posts: 21063
Joined: Sat Feb 14, 2009 11:44 pm
Group: Sysop
Post Coding with Renpy, Part 3
Part 3: Graphical effects, audio and stuff

OR

You just wasn't satisfied with just dem pictures, huh?

What you'll need for this tutorial
1) You really should read Parts 1 and 2 before reading this. Cmon.
2) Comprehension of english.
3) Understanding numbers (shit be getting intense, buwoy).

In the last episode of this nonsensical tutorial, we made a sample game with a menu and basic visuals (background and sprites). No audio, no graphical effects; just a demonstration of the code needed to create a simple scene (with two choices/ different events that happens if you choose a certain option).

HOWEVER, since you're out to create a space opera, world-spanning epic, mine feels in a diabolical attempt to rule the world or just keep improving your game making skills, you must realize that this is not the end of the capabilities of the Renpy Engine. That's right, we have barely scratched the surface and this shit's gonna go DEEP.

In this lesson, we'll learn a few tricks with text, and how to augument your visuals and add music and sound effects to your game. We won't be learning how to export your game yet. Sorry.

Text Tricks

In our sample game, we only used basic text, with no formatting. While this may be fine for most simple games, there are some tricks and skills you need to know about.

{b}text{/b} renders the enclosed text in a bold font. Useful when writing dialogue for a heated argument.

{color=spec}text{/color} changes the color of the enclosed text. The color may be a hex triple or a hex sextuple, optionally preceded by a hash mark. (The same format that color() accepts. f00, ff0000, #f00, and #ff0000 are all valid representations of red.) So many uses for this sort of thing exist, that it isn't even funny.

{p} causes the display of text to be paused until the user clicks to continue, or until an auto-forward occurs. This allows text to be displayed incrementally. {p} does not take closing tags, and causes a new line to be inserted after the given text.

example code
Code:
show y yputtingpanties
y "Ok! Lemme put my pants on...{p}... I'm ready, mister!"
hide y yputtingpanties
show y yreadyforadventure


{nw}, at the end of a block of text, causes the current interaction to terminate immediately once the text is fully shown. It only makes sense to use this in dialogue text, where the effect is to cause slow text to dismiss the interaction once it has been fully displayed... or to make a motormouth character.

Code:
"Tomo" "THE SKY IS BLUE! AAAAAAAAAAAAAAAAAAHHHH! {nw}"
"Tomo" "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHHHH! {nw}"
"Tomo" "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHHHH! {nw}"
"Tomo" "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHHHH! {nw}"
"Tomo" "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHHHH! {nw}"
"Tomo" "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHHHH! {nw}"
"Tomo" "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHHHH! {nw}"   
"You" "Stop that."


We'll discuss advanced text augumentation in our next lesson. Let us move on to Augumenting our visuals!

Augmenting your visuals

In our sample game, we moved around pretty fast through the scenes, right? It felt sloppy, and quite alien to the VNs you played so far. So for a basic visual augument, we'll use this command.

with fade

We insert the 'with fade' after the first instance of 'scene bg street'.

Code:
scene bg street
with fade


Now give your game a spin - and you'll notice how the background faded in gradually. That's pretty cool, right? The default settings of the with fade function is set to 0.5 seconds. You can change that... if you feel like it. How?

Code:
scene bg street
with Dissolve(10.0)
#dissolve effect lasts for 10 seconds


The dissolve command works similarly to the fade command - and it's great to demonstrate a recovery from you slipping on a banana peel.

BUT WAIT, THERE'S MORE!! Did you know you can define custom effects?

All you gotta do is add this line at the init block

Code:
define normaldissolve = Dissolve(1.0)


and call it in the maingame block
Code:
show bg yotsubaroom
with normaldissolve


You can even do this for character images too.

Code:
show y adventurous
with normaldissolve


Defining and using custom effects is Way easier than having to type in commands and numbers all the time, don'tcha think?

NOTE:
Dissolve fades out a single image. This could be a background or a character, but if you say "with dissolve" then only that image will fade in/out.

Fade turns the entire screen black before dissolving into the image you called. So if you call a character "with fade", expect the entire screen to disappear!

In our next lesson, we'll study how to play around with these images and arts, moving them around, shiftin' them left and right or some shit.

Adding music and sound effects to your game

Renpy uses a system of 'channels' to play music. Channels are preconfigured settings that determine whether the sound loops, and is saved or restored with the game.

The 2 channels
Music channel: It loops, and it is saved when the game is saved. (Music)
Named sound: The sound is played once, and then stopped. It is not saved. (Sound effects)

Renpy uses .ogg by default. You can convert your mp3s to .ogg's here.

Renpy is also compatible with .mp3's and uncompressed .wav files, but it's not as super-effective as .ogg

Code:
play music 'dailylife.ogg' fadeout1
queue music 'dailylife.ogg'


The play music command replaces the currently playing music, and replaces it with the named filename. if you choose the currently playing song, it will be restarted. The added fadeout 1 makes it so that the music ends by fading out in one second.

The queue music also adds the target music to the named channel, and will wait until the currently playing music ends before starting.

NOTE: Remember to ensure that the file you called exists in the target folder. I really recommend you start sorting images, sounds, music, character art and background graphics into their seperate folders now.

Remember to alter your code, too. For example,

Code:
play music 'dailylife.ogg' fadeout1
queue music 'dailylife.ogg'


becomes

Code:
play music '/BGM/dailylife.ogg' fadeout1
queue music '/BGM/dailylife.ogg'


Onwards... to STOPPING music!

Code:
stop music fadeout 1


The next statement is the stop statement. It stops any and all musics from playing. It too accepts the fadeout parameters. You can exclude that if you want a SUDDEN DRAMATIC AND AWKWARD SILENCE.

Code:
play sound 'bigcrash.ogg'


Like we mentioned before, playing a sound on the sound channel causes it to play only once. This is how we insert sound effects.

Code:
queue sound 'gunshot.ogg'
queue sound 'scream.ogg'
queue sound 'collapse.ogg'


You can also queue up multiple sounds on the sound channel. It's useful if you have stock sounds, and can actually be fun to set up. Each sounds plays one after the another.

That's all for this lesson.

-

I LIED! MWAHAHAHHAHA! *twirls moustache Snidely Whiplash style, while tyPing the extra stuff to the railwa- post.*
Image

Preparing your game for distribution.

So, you've managed to create your game that will strip-mine all the feels in the universe to power the Feelsimation Device that will cause all humans to be turned into LCL, or something like that - but ALACK, ALAS! You have no idea how to make it a playable game, right?

Allright, first off - play (BUGTEST) your creation by launching it. Try to find ways to break your game, and write down errors you come across in a notepad file. This way, you now have a checklist of problems to solve before you can export your game. Done? Now select your project on the launcher, and order it to run a final check on your game script.

Click Check Script (Lint) on your launcher. Please ensure that your project is selected first (In our case, it's Test2)

Image
Yeah, click that and the self-test will run.
You should get a report, and a summary of your game. If no errors are reported, your game is ready for launch!

Now select "Build Distribution" (also on that menu), and wait until the engine finishes scanning your script. Once it's done, select the platform you want to output to. I'm gonna use Windows x86 as an example.

Sometimes, Ren'Py not being able to locate a file can be one of several problems when building a distribution file.

Here's a checklist:

Q: Did you point the code in the correct location?
A: When you define a file in Ren'Py in quotes ("trees.jpg") it will look for the file inside the game folder only. If you've created another folder and placed the file in that, you need to show that when you point to it. For example, if you placed your image in a folder called "BG", your definition would look like "BG/trees.jpg"

Althought I placed the background files in the main game folder, you should work to organize your backgrounds, sprites, etc properly. You'll thank yourself later for it.

Q: Is the file name exactly the same in the code as in the folder?
A: Copy and paste the file name into the code, don't just eyeball it. This will make sure that no human errors are to blame. Ren'Py is case-sensitive. This goes for folders and files alike, the same capitalization must be used (this is especially important when playing the game on multiple operating systems/platforms).

Once the zip file's created, move it and unzip it. Key in a readme.txt and a license.txt and run your executable and DANANANA, you have officially exported your first game!.

NOTE: You cannot rename the executable. Remember; this has to be done at the project design level - ya know, you get to name your project?. You can label the folder your game is in and then zip up the folder.

In the next lesson, we'll learn how to use an installer maker to make your game distribution look somewhat professional. We'll also learn how to further customize the graphics, menus and text of your game.

BONUS DLC. CLICK show TO DOWNLOAD.
Spoiler: show
Customizing your game icon files.

In our sample game, you must've noticed that the game executable is a teeny bit different from your exported sample games.

It has a custom icon - of Yotsuba!

Interested in knowing how I did it? Okay then, Lissen up!

First, we prepare our picture! I recommend using a 128x128 png image!

Next up, we convert it into an .ico file!

You can convert your images to icons here.

Download the Yotsuba icon I made here!

Next up, acquire Resource Hacker!

Install that thing, and then open it up!

Image
We open the test2.exe...

Action>Replace icon
Image

And select the icon we provided... and VOILA~
Image
Replace the icon of the executable with yotsuba.ico...

...and there we go - your game now has a custom icon - and that's EXCELLENT! *air guitar*

EXTRA:
To change the icon in the upper-left corner of the window (this is called the "window icon"), you set the following code equal to your image's location in options.rpy:

Code:
config.window_icon = "yourgameicon.png".
#Where "yourgameicon.png" is your icon image.

The image should be in the graphics library with the other pictures. To target a folder, type..

Code:
config.window_icon = "img/yourgameicon.png".
#Where img is the name of the directory where your image is stored in the game.


This is also the image that appears in the Dock and application switcher in OS X, so consider making it at least 128x128 with a transparent background.

Okay, I'm really done now. =]

_________________
Image
Yeap.

_________________
Click the icon to see the image in fullscreen mode  
1 pcs.
Click the icon to see the image in fullscreen mode  
4 pcs.


Sat May 25, 2013 3:41 pm
Profile E-mail WWW
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 
 

Similar topics

 
Electro-convulsive therapy, part one
Forum: ./General Spam
Author: 「H A N Z O」
Replies: 2
Electro-convulsive therapy, part one
Forum: ./General Spam
Author: 「H A N Z O」
Replies: 2
I've finished coding the event for Prison Bitch.
Forum: ./General Spam
Author: Pantsman
Replies: 3
Electro-convulsive therapy, part one
Forum: ./General Spam
Author: 「H A N Z O」
Replies: 2
Top


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Mods Database :: Imprint :: Crawler Feeds :: Reset blocks
Designed by STSoftware for PTF.

Portal XL 5.0 ~ Premod 0.3 phpBB SEO