Questions about side images

[arlj11]

I would like to have side images in my game. The documentation is a bit confusing to me. So I have a few questions about them.

What's the best practices for implementing them?

What is a good size for them? Or how do I define the size and position?
Edit: found the answer to this on my own.

Can I use sprite a sheet? If so, how?

What are some good emotions to use as tags?

[_ticlock_]

Hi, arlj11,

Side images are often used as:

• an additional character image/sprite to emphasize the speaking character (basically used as a character name but visual representation of the speaking character). In this case, the image is typically small and shown in the corner next to the dialogue textbox. The position of the side images is defined in the say screen in screens.rpy:

Code: Select all

add SideImage() xalign 0.0 yalign 1.0

• as a primary sprite image of the character. In this case, you can minimize using show/hide statements for the character sprites (obviously, it is not a replacement for show/hide statements). The image size is the same as the normal sprite image. For example instead of:

Code: Select all

show character_1_sprite
character_1 "character_1 dialogue with default mood"
hide character_1_sprite
show character_2_sprite happy
character_2 "character_2 dialogue with happy mood"
hide character_2_sprite happy

You can reduce to:

Code: Select all

character_1 "character_1 dialogue with default mood"
character_2 happy "character_2 dialogue with happy mood"

Depending on the use of side images you might consider using just the default side image or more sprites images for different mood/emotions. For example, the typical implementation for the default and happy mood side image:

Defining the images:

Code: Select all

define e = Character("Eileen", image="eileen")
# Normal sprites
image eileen = "eileen.png"  
image eileen happy = "eileen_happy.png"
# Side sprites
image side eileen = "side_eileen.png"
image side eileen happy = "side_eileen_happy.png"

PS: Alternatively, you can use the naming of images in a similar manner as in the above example (image tags + mood tags). Check the documentation - Images directory

[arlj11]

I don't think you really answered any of my questions. Most of what you said was explained in the documentation.

[_ticlock_]

I don't think you really answered any of my questions. Most of what you said was explained in the documentation.

Huh?
Your questions are quite general and you said that "the documentation is a bit confusing". Based on that, to my belief, I mostly answered to the 1st and 2nd questions. If not, try to be more specific. Also I am not sure what you meant in 3rd question about how to "use sprite a sheet".

[arlj11]

Best practice questions tend general in nature. They can be open to debate because everyone has different ways of doing things.

A sprite sheet is where you have several sprites in one image layout in a way that the game just looks at one area of the image when called. it uses crop sections. it saves space because everything is in one file.

This cookbook is the only one I found that may help. viewtopic.php?f=51&t=23546#p294271

[_ticlock_]

A sprite sheet is where you have several sprites in one image layout in a way that the game just looks at one area of the image when called. it uses crop sections. it saves space because everything is in one file.

This cookbook is the only one I found that may help. viewtopic.php?f=51&t=23546#p294271

Now, I got it. Interesting, although it is confusing for me. As far as I know, a bigger image is not efficient in terms of memory usage. I am not sure but I believe that for RenPy engine this additional cropping should result in higher processor usage. I am also hesitant about "usability" since it slightly complicate the image definition. So, it seems to me that this concept of the sprite sheet is not efficient.

I only know about CSS sprites for webpages, which reduces the number of HTTP requests to load the page. I am not sure if it is applicable to RenPy for HTML5/Web.

I will be happy to learn something about the benefits of using the sprite sheet.

Best practice questions tend general in nature. They can be open to debate because everyone has different ways of doing things.

I agree. Actually, I did not imply that your question should be more specific. Based on your reply, it seemed to me you were asking something more specific. Or, I just did not get the questions.

[arlj11]

The sprite sheet efficiency come in the storage area more than processor. One sprite sheet can be smaller than several image files that the sprite sheet replaces. It also means you load one file into memory and not several. If you keep your game script simple, like a basic VN should be, then the processor should be able keep up with the additional load that come with the cropping.

I don't know how else to phrase my question. I want to use side images, but I don't know what the best tags are or how to organize them. I'm looking for people who use them so I can get an idea of what to do.

[shin.e.d]

Hello. :3 I use side images in all my games for both the main character's portraits and other character's dialog. (Though none of my games are finished yet...)

It's easiest for me to use side images in Ren'py as separate images, inside maybe a separate folder inside the images folder to better organize it. For example, I have "images/portraits/side name emotion.png" for every emotion change.
It's important to remember to put "side" in front of the image name or Ren'py won't use it as a side image.

Also you're going to have to decide how Ren'py should behave when the full-sized sprite and portrait are on-screen together at the same time.
Because Ren'py has different behavior depending on what the image tag is:
(1) define e =Character(None, image="e") ## Side images will change the full-sized sprite...
Or (2) define e =Character(None, image="port_e") ## Side images won't change the full-sized sprite...

I prefer number 2 because it offers more freedom to design the game how I like, although it's not as convenient and might use more up lines. (All this doesn't matter if you won't be showing both the sprite and portrait at the same time though...)
Note that this also affects if you use Ren'py's ability to change sprites with a one-liner in dialog:
e happy "Hello." ## This normally would change the full-body sprite on-screen if image is defined for the character.


Sprite Sheets
Sprite sheets are great for animations, like blinking for instance, I wouldn't wanna scroll past 20 extra images of people half-blink.
I have some examples of using Ren'py crop to make what would be called a sprite sheet below.

Sprite Sheet Example #1 - A simple image Crop()
Crop an image with no animation.

Code: Select all

image side pikachu smile = Crop((0, 0, 40, 40),"images/spritesheet.png") ## The numbers are: (X, Y, Width, Height)
image side pikachu happy = Crop((40, 0, 40, 40),"images/spritesheet.png") ## Crop moves 40 pixels on the x axis to the next emotion.

Sprite Sheet Example #2 - ATL Animated image sprite sheet.
This one is animated. It crops by pixels, unlike example 3 which is explained below. It can be tedious to animate this way.

Code: Select all

image side pikachu blink:
    "images/spritesheet.png" ## Remember to put the image location name here. Or else it's invisible. I forget it so often.
    crop (0, 0, 40, 40) ## Crop by (X, Y, Width, Height)
    pause 2.0
    crop (40, 0, 40, 40) ## Crop moves 40 pixels on the x axis.
    pause 1.0
    repeat

Sprite Sheet Example #3 - ATL Animated image with crop_relative (Same as above, but uses percentages instead of pixels.)
The benefit of crop_relative is that it can easily be copy & pasted to other images with the same number of frames. Since the size of the image frames are calculated automatically. Crop_relative can be used by images that aren't animated too.
This sheet has 2 frames so %50 is how much crop should move, and since it's horizontal it moves by the X-axis.
The height is 1.0 so basically %100 the height of the image. %50 the height would leave room for another row of frames beneath it, but this image has only 1 row.

Code: Select all

image side pikachu blink2:
    crop_relative True ## Tells Ren'py to use floats (percentages) instead of pixels.
    "images/spritesheet.png"
    crop (0.0, 0.0, .50, 1.0) ## Crop by (X, Y, Width, Height)
    pause 2.0
    crop (.50, 0.0, .50, 1.0) ## Make crop move 50% on the x axis.
    pause 1.0
    repeat

Sprite Sheet Example #4 - Uses a Transform to make animated images with less code.
This makes every character blink using just one animation code.

Code: Select all

transform blink:
    crop_relative True
    crop (0.0, 0.0, .25, 1.0) ## Eyes open
    pause 0.2
    ## Chooses a random time before blinking...
    choice:
        pause 2.0
    choice:
        pause 4.0
    choice:
        pause 6.0
    choice:
        pause 8.0
    crop (.25, 0.0, .25, 1.0) ## Blink graphic
    pause 0.2
    repeat

## Define all the images that use the same blink animation.
image side pikachu smile_blink = At("images/spritesheet.png", blink)
image side bulbasaur smile_blink = At("images/spritesheet_bulbasaur.png", blink)
image side charmander smile_blink = At("images/spritesheet_charmander.png", blink)
image side squirtle smile_blink = At("images/spritesheet_squirtle.png", blink)

Edit: I forgot to mention what program I use to make sprite sheets! Personally I use GraphicsGale because it's free and easy, but there are probably other programs out there that can do the job better. (GraphicsGale doesn't handle large large images or transparency very well.) If you search for sprite sheet programs online there seems to be some good ones.


As for which emotions to use I'd say the big ones for my VNs are these 4... serious, smile, happy, and additionally blushing for the love interests. ^///^
I think these are good for main character dialogs, but side characters could get away with just 1 side picture with no different emotions. And games with fighting in them might need additional emotions like fear, yelling, hurt graphics, etc.

I use the serious emotion as a kind of "normal" emotion too, when they aren't smiling, but also for sad moments.

I just make quick sketches of portraits according to the story, but fully intending on it being rewritten later. So I don't put much time into them until the story is mostly completed in-game, beginning to end. (Though I don't post screenshots online so it's not neccessary for my game's art to be totally finished.)

Others might make separate eyebrows/eyes/mouths and combine them into alot of different emotions, but that's alot of work for me when the character's design (and even the game's design) keeps changing throughout development...

[arlj11]

@ shin.e.d

Thank you!

That helped out a lot.