[Technical] Dev update. (Patreon)

Hey guys! I'm trying out something a bit different.

I keep finding out I have many developers and technical supporters, so I figured I'd make a technical update.

If you aren't one of those or these things bore you, feel free to ignore this post.

Currently, my goal is to be able to layer animations on top of each other to give the player the ability to customize Ann's (and maybe more) look.

Preview:

If you don't know, I built LSS's engine using React-native-web + Electron (using typescript).

Even though Electron is known to have a huge build size and other flaws, I chose this engine because it ensures everyone runs the game on the same browser (Chromium), so I won't have to worry about browser compatibility.

It also allows me to code using my knowledge as a front web developer without needing to learn anything new.

The Goal:

Trying to layer animations started with some failed tests.

The way I'm currently showing animations is by using normal HTML5 Video on the browser, and it works great.

Tests:

Attempt #0:

So first, I tried to put the main animation as the base animation and the partial animation I wanted to display on top.

It shows them both perfectly fine, but they quickly went out of sync.

No matter what I tried to do to keep them both in sync, it just didn't work.

And even if I did manage to sync them up, once I tried to put 5-6 videos at once, the engine started lagging, so I quickly realized I needed to get back to the drawing board.

Attempt #1:

If we take a step back, basically, I need to render my animations twice, once with "normal Ann" and the second time with her "corrupted look,"

then I need to crop everything into parts because not everyone would like to change her hair or add tattoos, for example.

So I planned that once I cropped all the animations, I could make a script that would assemble all the choices on the player's PC and will show him the animations he chose.

A few problems with that.

It will make my build larger. Even partial animation has the same size as the original (because of the aspect ratio)

If there are many animations, it can cause a big loading time while starting up the game.

Some PCs aren't that strong, and I didn't know how long it may take.

Attempt #2:

Even though I work as a full-time web developer, HTML5 videos and canvas isn't something I worked with before.

I learned that I could draw the video on canvas, which gives me much more control over what I can do with the video.

I saw that I could "paint" green (green screen method) on parts of the original video I want to replace and then paint the partial animations I over it.

It worked, but again, I had a problem with the build size.

If I draw on the original video, I also need an additional backup of the original animation.

And also, saving the entire partial animations in the build didn't solve the problem I had in my #attemp1.

Attempt #3:

I gave up on the idea of saving the partial animations as WebM, and I went on a different approach of storing the pixels in an array in my post build as JSON files.

Since there are a lot of blank spaces, I can store the pixels that "are in use," which will reduce the size significantly.

I tried it on one animation, and a new problem occurred.

When I convert the video from Pngs to WebM, it reduces the animation size and also changes the RGB values.

So my "green screen," which is Red = 0 Blue = 0 Green =255, changed to different values. This causes a weird green frame around the parts I want to change.

Attempt #4:

I realized that instead of painting "Green screen" on the parts I want to change, I could store the partial animations in a map, using the frame number as a key and the colors as the values, and change the parts I wanted.

This method seems to work.

I've yet to test it out thoroughly to see how much size the JSONS of the partial animations takes, but it looks promising!

I already have a POC of this, and I will share it with you once I have something worth showing!

If you reached this part, you are brave soldiers!

Thank you for your patience, and I hope you understand that I do this not only to feed my own coding itch. But also to give you guys the best experience I can with the tools I have!

Till next time,

TTrick 🍻.