My text-layout testing sheet filled with all sorts of random test samples.
The past few months I’ve been rewriting the text layout engine used by Krita’s text tool. This is not the same as the text tool itself, which is still a super small rich text editor, but it is a prerequisite to getting any kind of new features into the text shape. We haven’t done any real improvements to text since the work for the last fundraiser we had for it, and that is because this needed to be done, it is a lot of work, an we had vowed to take care of resource management first, which, uh, took us so long and was so intensive that it covered the whole development cycle from 4.0 to 5.0, or a span of 5~ years. I’m not the only developer who can finally tackle a sore point, there’s work being done on audio, lots of file format updates, work on assistants, technology upgrades and more… But this blog is about text.
Like most online manuals, the Krita manual has a contributor’s guide. It’s filled with things like “who is our assumed audience?”, “what is the dialect of English we should use?”, etc. It’s not a perfect guide, outdated in places, definitely, but I think it does its job.
So, sometimes I, who officially maintains the Krita manual, look at other project’s contributor’s guides. And usually what I find there is…
So, back in the day, I had posted 100 sketches I had made between 2014 and 2016. I kept continuing into a next folder called 200+, in the hopes that I would get to the next 200…
So, we had a Krita sprint last week, a gathering of contributors of Krita. I’ve been at all sprints since 2015, which was roughly the year I became a Krita contributor. This is in part because I don’t have to go abroad, but also because I tend to do a lot of administrative side things.
This sprint was interesting in that it was an attempt to have more if not as much artists as developers there. The idea being that the previous sprint was very much focused on bugfixing and getting new contributors familiar with the code base(we fixed 40 bugs back then), this sprint would be more about investigating workflow issues, figuring out future goals, and general non-technical things like how to help people, how to engage people, how to make people feel part of the community.
Unfortunately, it seems I am not really built for sprints. I was already somewhat tired when I arrived, and was eventually only able to do half days most of the time because there were just too many people …
I occasionally make tiles following the Liberated Pixel Cup style guide for relaxation. Given that I just handed in my bachelor thesis, I was in need of some relaxation.
One of the things that had been bothering me is that the default water for this style didn’t animated, nor really felt like it would get my characters wet. There were also very few people who’d made an attempt at animating the water. I myself tried, but I failed. So I suspect very few people know how to animate water properly. With that in mind, I decided to do a ton of experiments and document them so that others might learn from it as well.
I set up a thread on OpenGameArt.org, to see what others think, or to see what kind of things people have been trying. For this post, I am documenting all the ways to animated the edges of water tiles, with the aim of creating a nice transparent mountain brook.
Types of Edge Animation
So, the first thing you can try to animate is the border between the edge and the land. There’s several types here.
Expand/Contract
So, the most common edge animation is the expand and contract. Frame order is as follows:
Outline at rest
Outline contracted 1 pixel on all sides.
Outline at rest (copy of 1)
Outline expanded 1 pixel on all sides.
You can see variations of this in most games, as it is a really easy way to animate using few colors. The animation should be adjusted to the environment, so for example below there is a pebble texture that the animation is adjusted to. Then some outlines are added, and the whole thing is made semi-transparent. Of note here is that the outline is a little bit aligned to the texture as well, leading to a nice effect when made semi-transparent.
Basic expand and contract animation.
Edges adjusted to the underlying pebbles.
Some outlines animated in.
And then, semi-transparent at 50%
One of the posters on OGA, Evert, pointed out it’s a bit odd though: the surface area increases.
Undulate
To tackle that, one of the solutions is to make the water undulate. That is, the water pixels just circle around, being 1 pixel up, 1 pixel left, 1 pixel down and finally 1 pixel right, without any rest.
Basic Undulation Animation
Adjusted to the pebbles below.
And with an outline. The outline is a little messy here because I lost concentration due the heat, but it should work for demonstration purposes.
Waves on the side.
The other solution was proposed by Evert: A little wave that goes by the side. This can be done by contracting 1/4th of the tile and expanding 1/4th of the tile, and then moving those areas 1/4th over a frame, leading to 4 frames where the 1st and 2nd frames as well as the 3rd and 4th of mirrored tiles are mirrors of each other. So if you have the topleft corner on frame 0, it is a mirror image of the topright corner on frame 1.
There’s several variations of these, one with a single pixel wave, one with two pixels on each side, one where the pixels on the sides are a little bigger than the transitional pixel, so the result feels a bit rounded, and one where the pixels don’t travel. Frame 0 and 2 are resting frames here, and frames 1 and 3 are mirrored as described above, this one rather looks like the water is a blob receiving a shock.
You can then adjust the outlines to the rock below, but sometimes this may end up so noisy that it might be better to avoid it, especially when combining with other animations
Single pixel wave, with a proportion of 1 to 4
Double pixel waves, with 1/4th inwards, and 1/4th outwards
double pixel wave, with 3/8 inwards and 3/8th outwards, except near the corners.
Waves that look like a blob receiving a shock.
Double pixel wave with outline blended at 50% transparency.
Single pixel wave with rocks cut out, 75% transparency.
Double pixel wave without rocks
Other double pixel water without rocks.
Ocean Waves
The ocean wave is a little tricky. It first most is much like an expand/contract one, with the main wave expanding, and then an underlying wave contracting or slowly becoming transparent to indicate evaporation. Furthermore, there’s a lot of timing tweaks necessary, you can for example make the contraction a lot slower than the expansion to get a more natural ocean-rhythm. Also of note is that because so many pixels get covered with water, these need to be 8 fps, or it will look choppy.
This one will need a lot more experimentation, but for now these little examples to demonstrate this type of edge animation.
Expanding ocean wave with more and more transparent underwave.
Also an expanding ocean wave, but this time the contraction is slower than the expansion.
Animating the inner outline
The second thing you can animate is the inner outline. These are often a lot more soothing.
Animating like the borders above but not animating the border.
This is basically, you animate the inner outline like above. Because you don’t animate the outer outline, the result is a lot smoother.
Expanding and contracting only the inside border
Undulating only the inside border
Circling Flickers.
This one is basically little dots that move about, aligned to the underlying pebble texture. By itself it doesn’t look fantastic, but once you start blending it becomes a very easy to control refraction effect.
Raw Flickers
Blended flickers, here with multiply and the edges copied onto a second layer and accentuated.
Inner Waves
A very simple style where a single pixel border is animated inwards from the sides. The border is made more transparent as the wave gets closer to the center, fading it out.
Waves going from and to the sides.
Waves going outwards to the sides.
Waves going from the sides inwards.
Waves going from the sides inwards, without blending.
Animating the brightness.
These were demonstrated on the OGA thread by both BenCreating and MedicineStorm, and they do show up on many commercial examples.
Basically, animate the outer outline from cyan to bright white. I also tried replacing the wave animation from the edge animation section with a brighter wave in this style:
Simple brighter/darker loop on the edges.
Brighter darker loop, but then in the style of the waves above.
Another example of the waves, but then flickering between 2 frames, back and forth.
Blending the whole thing.
I’d also been playing with blending modes, the examples here using a water layer separated from the rocks, duplicated twice, both layers set to transparency, and the lower layer set to multiply while the higher is set to overlay. This increases the contrast of the water tiles, which is something wet objects are known to do in real life.
Flickers with multiply+overlay both layers at 50% The flickers here look like some kind of refraction effect.
Contract and expand with multiply+overlay both layers at 50%
And other ideas.
Fading the center
These faded the centers a little, making the borders more distinct and adherent to the LPC style guide. It has a little bit the downside that these don’t make for good RPGmaker mv tiles, but for LPC and Wang it works just fine.
75% opacity, flickers, and faded centers
Waves+faded centers, opacity of 75%
Expand/Contract+Blending+faded centers
Flickers+Blending+Faded Outlines+ Wave animation on the side.
Animating the flow
This was an attempt at seeing how to handle water flow. General concensus was that it looked weird because the water came out of nothing.
Tiny flickers of waves streaming down. The waves pop a little here, which makes it more suitable for rain falling off something…
Smoothing animated waves going up.
Wave animation rotated to animate to the right.
waves going down, and blended with multiply+overlay.
The waves are animated around.
And further…
There’s still other parts to animating water, but I hope this gives some inspiration for how to tackle your own water. I myself will continue with experimenting till I have some satisfying tiles to share 🙂
I’ve only recently become anywhere decent at crochet. That is, making fabric stuff from yarn with a crochet needle. My stepmother taught me how to do the basic slipknot and chain stitch in finger crochet when I was a little girl, but my attempts at getting any better at it failed for the longest time.
The issue was that whenever I would try to learn how to do crochet from a book, the instructions were always incredibly vague. To the point that when I finally learned a stitch beyond the chain stitch, it was not the single/double stitch I was trying to learn, but instead ended up being a sort of weird slip stitch that lead to a very stretchy fabric resembling knitted work rather than crochet.
Videos on the other hand tend to have a little bit too much information going on for me. Like the tutor’s voice, anything wrong with the video lighting wise, any blurriness.
So I really wanted to do some animations that show how a given stitch is done, without too much noise surrounding it.
First, I made a sketch in Krita at 1600×900 pixels. The sketch is super rough as you can see. The idea is to get the motion down first.
I then cleaned it up a little and started playing with aspect ratios.
Here’s one that’s more zoomed in, giving more attention to the actual important part of the image. I do feel that this decreased the sense of how the hands move, which is why I decided against using this one for the final animation.
Another option was a square ratio that was super-zoomed in. This was somewhat inspired by the gifsets on tumblr and cooking videos.
And then shared that on mastodon.art, as I had done when I made a turntable of Kiki:
The general feedback was that the square images were nicest for actually getting the stitch. Because of my worries about the hands, I ended up deciding to continue with the full view version, and make smaller square ones for social media. The idea being that the full version can be viewed full screen and the stitch should be easy to read then.
The Second Day
I spend the second day firstly, building Krita with Address Sanitizer enabled, so that I could catch memory related bugs. The Address Sanitizer allows me to find bugs, in particular we’ve been implementing a lockless hashmap for Krita’s canvas tiles, and this could have some scary bugs that the address sanitizer might be able to find. Basically, the Address Sanitizer will crash as soon as it finds a memory-related bug.
I didn’t find hashmap bugs, but I did find the following bugs:
As well as several other bugs. The big downside to the Address Sanitizer(and GDB as well, really) is that Krita will take up twice as much ram, which was a little bit of an issue, as discussed later.
When animating, I spend more time looking at my hands and the motion I did, and I noticed that I was missing the almost natural first step of making a loop with my fingers. So I added that. I also tried to make the hand motion at the end a little more natural, letting the yarn hand pull at the knot as well.
There’s also pauses now, letting people identify the separate steps, and I colored the thread red.
The feedback I got on mastodon was that the pauses helped a surprising lot. The other feedback I got was that it was still hard to tell what was going on with twisting the loop or the pulling of the yarn into a knot at the end. I decided then that I should add text, as well as try to make the animation smoother so the motion is easier to follow.
Third day.
So, then I started inking the image. I first decided to increase the size from 1600 × 900 to 3840 × 2160, which is the 4k definition. The idea being that if I got it that high res, then I wouldn’t have to worry about the inking lines looking awful. You see, video codecs tend to be optimized for gradients and smooth areas, so images with a lot of contrast, such as traditional raster animation tend to be disadvantaged when converted to video. Having a high resolution offsets this issue as well as other compression errors.
I also doubled the frame count to smoothen it out. The thumbs and rest of the hand are separated. For the crochet needle I made one basic frame and then copied and rotated it all over the place. This part, as well as the hook hand made me wish for tweening on transformation masks, but that’s something that requires a smarter person than me to finish it.
At the end, I tried colouring the hands so it wouldn’t be a mess of lines. I ended up with too much ram usage, so I tried to reduce my ram usage by reducing the layer type or color space used. After all, the line art didn’t need to have 4 channels when all it needed was alpha, so I converted those to greyscale. This had the side effect of turning the onion skins grey too… I also tried using animated fill layers for the hands, but it seemed that upon playback there was a single frame lag for the fill layers but nothing else, which was a bit of a letdown.
Eventually I scaled the canvas down to 3200 × 1600, which is still quite huge, but at these sizes it made a full gig of difference. Anyway, at the end of the day, I had this:
The turntable of Kiki, the Krita mascot was a previous animation project I did which allowed me to practice my knowledge of orthographic projection, which I then could reuse for the hands here.
And the next day, I also animated the yarn, coloured everything, and used transparency masks to ensure that the needle and yarn were masked at the correct moments. There’s a little bit of stretch and squash happening on the yarn in the pulling moment that I hope really sells the motion.
The final animation as screenshotted in Krita. The file is 2.2 gib, my ram and swap(8gib and 4gib respectively) are almost full. The blue frames are the inbetweens and frames that only contain color. The yellow, purple, green and orange frames represent the different steps. The red frames are frames that are the most extreme of a motion. I can’t tell left from right without thinking, so I just named the two hands the yarn and hook hand 🙂
Editing the video
Because Krita was having so much trouble, and I still wanted to add text, I decided to finish this in KDENLive. I couldn’t get anything rendered from Krita’s side even, because I had earlier that week installed earlyoom to prevent my whole desktop locking up indefinitely as it is wont to do due to me doing a little bit too much with my computer. So I basically had to render the frames, but then Krita refused to render the frames and gave no feedback why, but I suspect it was because of running out of memory. So what I did was I just tried to render out frames, and then when Krita errored out, rendering again, but then starting from the last frame Krita rendered. This is sort of what that feature was designed for.
I brought the animation into KDENLive. I Have KDENLive 18.12.3 on this device.
KDENLive, while it can import frame sequences doesn’t seem to like them much. It didn’t allow smooth playback for them, filter effects didn’t seem to work(I wanted to get the animation slowed down to have it playback at 16 fps instead of 24), nor did it have a menu option to transcode. So I had to go into the commandline and convert the different steps into mp4s. When using the log docker or a terminal, Krita will spit out the ffmpeg commandline entry into it before rendering, so I could copy-paste that and use it as a base.
KDENLive also had some other issues, like an issue where it would just kinda, ‘error’ when resizing clips or moving them around, complete with error noise. Afterwards it would refuse to do anything until I restarted it. Another issue was that there was this ‘ghost’ clip somewhere that didn’t show up in the timeline, but it was affecting the render, making it a 19sec animation instead of 11. I had to work around it by defining a zone and only rendering that. Then, later, KDENLive upon startup would just randomly have said clip appear. The final issue is that sometimes when playing back, KDENLive will just have a memory spike or will slowly consume all memory meaning that I couldn’t preview the animation correctly, as earlyoom would kick in and kill KDENLive.
Adding the text was painless, however, and KDENLive’s list of render settings are a blessing. So I rendered the file to webm, and uploaded it.
Of course, 10 hours afterwards, someone goes: ‘well, that last step is too short’. The reason the last step feels too short is because the text for it is too long. If I hadn’t put in any text, this wouldn’t have been an issue. I did this again this morning(that’s a full day afterwards) because someone else had the same issue, and I suspect that each time a line ends there’s a significant lag while our eyes do a ‘carriage return’, so that’s something that ought to be taken into account.
Webvtt
Because I am dyslexic, and also Dutch(we’re a little language obsessed in the Netherlands), I value captions and subtitles a lot, and try to always make them for my videos.
Webvtt is the official webfriendly format, but the typical subtitle creation software like Aegissub don’t support it. So to test this, I made a very simple html file with a reference to a webvtt file:
I then made that file, using KDENLive as a reference to determine the timings. KDENLive’s timestamps go mm:ss:frames instead of hh:mm:ss:miliss, this was a little bit of a surprise.
WEBVTT
REGION
id:title
width:24%
lines:1
regionanchor:0%,0%
viewportanchor:6%,9%
REGION
id:instructions
width:24%
lines:5
regionanchor:0%,0%
viewportanchor:6%,57%
STYLE
::cue {
background-color:#ddd49f;
color:black;
}
STYLE
::cue-region(instructions) {
align:left;
color:black;
}
STYLE
::cue-region(title) {
font-size:200%;
}
00:00:00.000 --> 00:00:03.125 region:title
Crochet
Slipknot
00:00:03.125 --> 00:00:05.333 region:instructions
Step 1:
Make a loop between your fingers.
00:00:05.333 --> 00:00:06.625 region:instructions
Step 2:
Put your hook through the loop.
00:00:06.625 --> 00:08.625 region:instructions
Step 3:
Turn your hook so the loop will twist.
00:00:08.625 --> 00:00:12.375 region:instructions
Step 4:
Now push the hook down and pull up the yarn through the twisted loop.
00:00:12.375 --> 00:00:15.000 region:instructions
Done!
You're ready to start your project.
You can then open the html file in Firefox, and it’ll allow you to select the subtitle track for preview. Firefox despite everything still doesn’t support styling in webvtt files, which is kinda annoying. Chromium also didn’t. VideoLan does support styling, but video lan’s then doesn’t support alignment of the text, which is a little weird.
All of them, however, support regions, which is more than I expected, to be honest… Sadly, peertube, where I uploaded the video to, has a player which does not support regions.
But none the less, here’s the final result:
The final video.
And the square ones of each step:
I made these in Krita eventually, because I couldn’t figure out how to get KDENLive make me a 1:1 project. It was just a case of importing the frames and cropping them and then copy-pasting the layers containing the title.
While doing this I noticed I had masked out the crochet needle in the last step incorrectly so it showed the needle always in front of the yarn instead of briefly behind it to indicate a turn…
Step 1: Make a loop between your fingers.Step 2: Put your hook through the loop.Step 3: Turn your hook so the loop will twist.Step 4: Now push the hook down and pull up the yarn through the twisted loop.
Afterthoughts
Generally, while animating was fun, I always just kinda… lose all motivation when having to deal with the video editing part.
Video editing mistakes tend to haunt me more than anything, and I am not sure why. Maybe it is because my videos actually get comments unlike my writing and my art. Maybe it is because having to fix a mistake in a video, unlike writing, always leads to having to open the video editor, deal with potential bugs, and then you always have to delete the previous video, copy over all your comments, reupload the video, and then have to anticipate the next set of people going ‘oh, hey there’s this mistake over here’ and I have to delete the video, open up the editor, deal with the editors bugginess as I fix the issue, rerender the video, reupload it, just so I can wait for the next set of comment that…
And I also just kind of have the feeling that because I am an experienced artist and have a good sense of rhythm, I am cursed with the ability to see all the ways in which the video is wrong, but not the experience to fix it with confidence.
Other than that, I would like to share the source files for this one, but the issue is that git isn’t very binary-files friendly(which all video and image files are, as far as git cares), so I am not sure how to go about sharing the source files. In total, I think I ended up about 15~ hours on this, of which 10 were the actual animation.
I do kind of want to continue animating these stitches, but there will be a little bit of a pause in between, I think. Hopefully the reported bugs and address sanitizer backtraces mean that others who animate in Krita will have a smoother experience, but I think people will always have to watch their ram usage.
After finally having dealt with school, I wanted to spend some time on getting the other comics exporters up to snuff, after getting the ACBF exporter so far as I did.
This was partially motivated by me finding some extra information on ComicBookInfo and ComicInfo.xml, as well as discovering that both main catalogueing software that used either(ComicBookLovers and ComicBookRack respectively) are dead. Callibre, as to be expected, acknowledges neither these or CoMet or ACBF as metadata files, though there is a plugin that supports the ComicBookInfo json and the ComicInfo.xml files (Ideally someone would add CoMet and ACBF to that, but I am not really interested in installing the monster that is Callibre on my device right now).
I just went and modified the exporters for these two files so they’d be a bit more correct and left it at that. But, that leaves one more exporter…
Those who know me, or at the least know my history with Krita is that one of the prime things I personally want to use Krita for is making comics. So back in the day one of the things I did was make a big forum post discussing the different parts of making a comic and how different software solves it.
One of the things about making a comic is that is a project. Meaning, it is big and unwieldy, with multiple files and multiple disciplines. You need to be able to write, to draw, to ink, to color. And you need to be able to do this consistently.
The big thing I was missing in Krita was the ability to quickly get to my selection of pages. In real life, I can lay down pages next to one another, and always have them in my minds eye. In Krita, getting the next or previous page is always a matter of digging through folders and finding the correct page number.
Adding to this, I am also a bit of a perfectionist, so I have been training myself to start drawing scenes or writing as soon as I have an idea, because any idea is way more useful when you’ve got it down on page. You can append it to an existing story, or just work it in and reuse the drawings and compositions. And this was also a bit difficult to do, because how does one organise and tag those ideas?
So hence I spend the last few weeks on writing a comics manager for Krita.
