Add support for LiveComposite character sprites

[RuolinZheng08]

Would it be possible to composite character sprites out of components such as base.png, clothes.png, expression.png as in Ren'Py?

image eileen composite = Composite(
    (300, 600),
    (0, 0), "body.png",
    (0, 0), "clothes.png",
    (50, 50), "expression.png")

This feature would also be awesome for creating blinking sprites!

[joshpowlison]

A work-around I've found is defining several characters for different layers:

"h-pose": {
	"Name": "Hikaru",
	"Color": "#5bcaff",
	"Images":{
		"normal": "hikaru/pose-1.png"
	}
},
"h-eyes": {
	"Images":{
		"normal": "hikaru/eyes/smile00.png"
	}
},
"h-mouth": {
	"Images":{
		"normal": "hikaru/mouth/smile00.png"
	}
}

Then using the following frames:

"show h-pose normal center",
"show h-eyes normal center",
"show h-mouth normal center",

An alternative that I think works a lot better is to add a class with multiple background images:

/* CSS */
.h-happy{
	background-image: url('../img/characters/hikaru/eyes/smile00.png'), url('../img/characters/hikaru/mouth/smile00.png'), url('../img/characters/hikaru/pose-1.png');
	background-size:contain;
}

Then in script.js:

const characters = {
    "h": {
	"Name": "Hikaru",
	"Color": "#5bcaff",
	"Images":{
		"normal": "hikaru/empty.png"
	}
}

let script = {
	// The game starts here.
	"Start": [
            "show h normal h-happy center",
            "h Hi! I'm so happy to be here.",
            "h Let me move left a bit...",
            "show h normal h-happy left",
           // And so on

In both methods, you need the images to be the same sizes; and empty.png is literally an empty PNG that just sets the bounds for the images set in background-image

Hopefully this helps you or another programmer coming along!

[fsvieira]

Hi,

I have been thinking on a feature like this, I am not sure if is possible, what I was thinking was to add one more way on show and scene command to be able to use css classes instead of images, something like "show .h normal center" or instead of using it on command use it on characters or scenes json definition something like

const characters = {
"h": {
"Name": "Hikaru",
"Color": "#5bcaff",
"cssImages": {
"normal": "hikaru happy" // this would be classes.
}
}

What I am not sure is if we would be able to stack images with css classes using for example the after and before, like this: https://codepen.io/ajimix/pen/aKHlh

@Hyuchia what do you think?

[imotep]

Hi,

A quick example to show why this feature is necessary for any large scale project:

• 20 characters
• 4 outfits by character
• 20 expressions by character (10 expressions with/without blush)
• 1 accessory per character (e.g. glasses that can be removed)

Without image layering, an image must exist for any combination of outfit/expression/accessory.
Number of images required: 20 x 4 x 20 x 2 = 3200 images.

With image layering, we can use separate images for outfits/expressions/accessories.
The default expression can be included in the outfit images.
Total required: 20 x (4 + 19 + 1) = 480 images

Conclusion:

• Number of images required reduced by 85%.
• Most images are much smaller (expressions, accessories), so the disk space reduction is in fact much higher than 85%.

Implementation examples in Ren'py:

• https://www.renpy.org/doc/html/layeredimage.html#automatic-attributes
• https://www.renpy.org/doc/html/displayables.html#image-like-displayables

Using this feature is very verbose.
To solve this, it is possible to use the Ren'py API to automatically build the layered images (e.g. by parsing the images directory, or a character.json file). It requires a bit of knowledge in Python though.

[LoganTann]

A work-around I've found is defining several characters for different layers:

"h-pose": {
	"Name": "Hikaru",
	"Color": "#5bcaff",
	"Images":{
		"normal": "hikaru/pose-1.png"
	}
},
"h-eyes": {
	"Images":{
		"normal": "hikaru/eyes/smile00.png"
	}
},
"h-mouth": {
	"Images":{
		"normal": "hikaru/mouth/smile00.png"
	}
}

Then using the following frames:

"show h-pose normal center",
"show h-eyes normal center",
"show h-mouth normal center",

Hello, we did this technique but thanks to custom actions, I have made an add-on to make a basic layered sprite system.
It works using multiple background-images, the cross-fade transition works only with webkit based browsers.

Maybe in some months, i'll work on another version of this custom action, that works like the composite feature we have in ren'py !

https://gist.github.com/LoganTann/df16e6a3f8600421fedd4fd400e5a686

How to use it : at the time I write this line, I didn't have the time to document the actual version of this custom action. You can try to read the code of my project here : Kagescan/fangame@de4b378#diff-0f70a2a1890079f65fd35f2130c42ed20389afd8b58ef18e5f978d92cf40ee01L287

Hyuchia is actually working in his own layered sprites feature. See more at the layered-sprites branch.