Comments (4)
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!
from monogatari.
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?
from monogatari.
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.
from monogatari.
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.
from monogatari.
Related Issues (20)
- Default Expression Does Not Work The Way The Docs Indicate HOT 3
- Move Transition Doesn't Work
- Jquery shouldn't be shipped with Monogatari dist folder, here is why : HOT 2
- particles [Particle_Name] doesn't work HOT 3
- Spritesheet and other animations that dont have an ugly video player frame? HOT 6
- Indentation and line feed HOT 1
- How to use Monogatari as a ES6 module. HOT 1
- Hovering or clicking on the Volume Slider in the settings menu in game overrides script specified music volume completely. HOT 1
- dragonbones skeleton animation runtime support
- Trying to load monogatari inside a react project - works on first load, fails on every next load HOT 3
- Ability to load assets from memory instead of a static folder HOT 4
- Use WebAudio API to loop music (to guarantee gapless loop) HOT 1
- Current status HOT 3
- Particles aren't cleared when loading a save
- Distraction free mode messes up the css style of text-box
- Can't show videos via show keyword
- Stop video on user interaction
- Screenreader Optimization
- parcelRequire is not defined HOT 1
- Undefined dataset on language select in Settings-Screen
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from monogatari.