Animation Simulation 2D

This content originally appeared on DEV Community and was authored by Slobi

Genesis

I wanted to give life to this little guy:

I have years of experience making games and simulations, but I never had a chase to play with characters except for the ones that are in sprite sheets, plain dead images that go trough fast carousel and BaM! illusion of motion is there.

So I set my course to make something kind of lively and kind of real. I had some previous work done that was not very promising, just look:

It was a result of me wanting to make a Ninja, the task turned to be too big. So I decided to reborn it into something that I can realistically do in time I have and not to get bored doing it.

Few rules had to be broken

I have two dragons that fight, one wants to leverage all the libraries I have and return the fruits of work to base library, the other one wants to slash and dash all fresh baked code with a whip of the best current practices I adopted yesterday.

I decided to go to third route, I copied only the code I relay needed for this project. The copied code gets shredded with new code that is one off for this endeavor. And the code I can’t find a place for… I just paste it into main.js, yeah sue me!

The result

My feel good was off the charts, I created one system for tracking two ententes with sprites that are independent. I tested adaptability of my ECS system, and was delighted. Got to play with my favorite math. Updated the collision system, shall I ever return it to the source?!

Don’t lock back

I almost scraped this project in order try making my system warp one big sprite image, but I decided to leave that for some next time. And after falling on my face with energy once in doubt and fighting with scope creep I got some results:

The results were promising but it was not live, so I used some cursed code like:

        const rez = {}
        Object.defineProperty(rez, 'distance', {
            get() {
                return chainLink1.distance;
            },
            set(value) {
                chainLink1.distance = value
                chainLink2 && (chainLink2.distance = value)
            }
        });
        return rez
// ----- SO I CAN DO
        function animation(){
            const newDistance = lowPinDistance0 + lowPinDistance0 * Math.sin(t)/3.0
            lowPinConnection0.distance = newDistance
            lowPinConnection1.distance = newDistance
            t+=0.075
        } 

And it finally started to act like real live puctuation sign:

Conclusion

Some games are there for players the wast majority is for the creators of those games. Some projects are hard by nature, we don’t need to make them even harder with fake walls that are not even there. If this idea lives I will come around and invest my proper energy and time, but at least I seen the result early and can get feedback early.

Thank you for reading, I hope that someone will find this article helpful or at least amusing!

This content originally appeared on DEV Community and was authored by Slobi