[DevLog] Spider Webs

(Automatically translated from Korean)

Hello! Today, we would like to share the process of creating spider webs for our game. Spider webs are obstacles placed on the map that hinder players, but can be easily destroyed.

Initial Version

This is the initial version of the spider web.

This is a version with slightly improved visuals.

We created it out of necessity for level design, but it didn't look very good. Rather than a spider web, it felt like an unidentified sticky substance. So we decided that a fundamental improvement beyond simple image changes was needed.

Spider Webs in 'Webbed'

Around the time we were pondering over this, a game called 'Webbed' became a hot topic for its amazing visuals and gameplay.

An acquaintance even demonstrated a similar spider web implementation inspired by the game.

Inspired by this, we came up with the idea of implementing a spider web similar to 'Webbed' in a top-down view. First, we took the source code created by our acquaintance, analyzed it, and modified it to fit our game.

Making Spider Webs - Part 1

What we wanted to fix from the old spider web was its appearance. So we started working on the visuals first. We created a tool to place them in the game and made them snap under player attacks.

This is the tool used for placing spider webs.

This was the first implemented version, but we weren't satisfied with how the web shattered into pieces.

Here is a more polished version. Changing it so that the web thins out as it disappears looked much more natural.

Making Spider Webs - Part 2

Since we were satisfied with the new look of the spider web, this time we made objects stick to the web.

It looked somewhat unnatural. To make the implementation as easy as possible, we tried using a physics engine first. However, the results were even worse.

The spider web shook unstably, and fragments of the web pulled objects towards themselves. So we ultimately abandoned the physics engine and decided to modify the spider web algorithm itself.

Final Look

Here is the completed version below.

Compare it with the very first version!

Thank you for reading.