[Features IDEA ]charging a DIV not an Image in assets declaration

alepinay

Let's say for a project that I do not use any image but, I would produce my Side Images or my Characters images using only some DIV and some CSS. It will be great to declare in script.je some html code snippet in place of an image path.

By example, why if I need my side image to display this little guy: https://codepen.io/vladisslawww/pen/GRpgzQp ?
What do you think ? Is it possible to achieve this with the current engine version ?

ShinProg

SVG images are supported with Monogatari (however I didn't tried SVG with side images). You just have to convert the HTML file into an SVF file.

The link you provided is totally an SVG file, with JS and CSS.
You can make that animation using SVG's CSS but you'll need to program the animations by hands.

ShinProg

Here is an example I use :
https://github.com/LoganTann/kagepro2/blob/master/assets/images/enePop.svg

alepinay

Great!
So basically you tell me that I can convert any pieces of HTML+CSS like the Codepen frog posted before and get a SVF or a SVG file to use in Monogatari ? Is that correct ?
The frog is SVG I agree, but what if there was no SVG at all at first. I mean if it was just css animated shapes. I did'nt get if convert mean refactoring the code, or using a tool to convert automatically. 🙂

ShinProg

So basically you tell me that I can convert any pieces of HTML+CSS like the Codepen frog

More or less. You'll need to understand how the HTML is coded to convert to svg. There is no tool to convert perfectly an HTML to SVG. All you need is experience.

I use the software Inkscape to create shapes (or you can use adobe illustrator), then I do my best to reduce the number of elements and group things.

For example, if I want to reproduce the iguana, the eye of the iguana is a large circle and a rectangle. I group them (<g>) and make an css keyframe animation (pseudo code, not the real code):

0% = translation-X: 0px
50% = translation-X: 20px
100% = translation-X: 0px

Fun fact: the codepen snippet uses JS for animation but here, It's totally possible to animate using CSS only like the previous example
I create a clone of the animated group to make the second eye, and reverse it horizontally.
I create the face, then the mouth and I animate it again using css (15px up and down).
And voilà !

I edited the pen to be SVG only : https://codepen.io/shinprog/pen/VwvPorE
I just had to adapt the JS code to animations.
Copy paste the html code and save it as svg file. Import it to monogatari and see if it works.

get a SVF or a SVG file t

Just svg. SVF was a typing error.