Hello fellow witches!
The weather may be getting colder, and the days shorter and darker, but the team has been as busy as ever crafting content for you to get stuck into during your time in Witchbrook. In case you missed our last Dev Blogs, so far we’ve discussed the simulation of Mossport, as well as the design and inspirations of the College. This time, we’re sitting down with Senior Artist Jade Evans to focus on one of our favourite ways to express your unique identity: character customisation.
But before we were able to get into the threads and textures of player customisation, we had to ask ourselves some very important questions. How is this system used throughout the game for various characters? How detailed can we get with our pixel art clothing? Will everything look good when animated? What rules do we need to put in place to stop this from ballooning!? Can we wear scarves?! (yes, but they’ve now been designated as 'evil')
Here’s Jade with her perspective…
Hi everybody! Across Witchbrook’s development, I’ve had the pleasure to have worked within many different fields, from concept art to character animation, and everything in between. In this dev blog, I’m going to hone in on the fundamentals of our character customisation and how we’ve been tackling balancing freedom for the player without creating huge production headaches.
I’ve had the fun but challenging task of deep diving into worldbuilding via its citizens: including design and animation, and spearheading how these all come together in a town as big as Mossport! As a team, we’re pushing the boundaries of the medium through constant experimentation. Not just with art, but the tech behind it, to redefine what character design can look like in a pixel art game..
As an animator and a self-professed fashionista myself, I’m obsessed with the little details that bring personality to the forefront, and in our case, clothing is one of the critical and immediate ways to make a game world feel alive. Witchbrook is often compared to Habbo Hotel for its isometric pixel art aesthetic, but one of my influences lie elsewhere in other 00s browser games. When I was younger, I would play pixel art dress up doll games for hours, so it’s been really satisfying to tap into those experiences with our own in-game fashion. Not only am I drawing from my own tastes, experiences and countless hours of research, I often find myself coming back to the question of ‘what would young me find fun?’.
Character Creator Variety
Fashion plays a large role in life-sims, and we wanted to provide the player with a tonne of options so they could make their witch really feel their own.
Variety is key when considering the designs for clothing. We wanted to explore different silhouettes, palettes and styles to avoid falling into the trap of everybody looking the same or restricting player expression - whilst there’s nothing wrong with t-shirts and jeans, it’s always nice to have more choice! Mossport is also a living, breathing town with hundreds of pedestrians going about their lives - if the clothes don’t feel seasonal or weather-appropriate, they’re going to look out of place and break immersion.
Players should be able to see themselves in the game, so we’ve included a variety of skin tones and hairstyles covering a range of different hair textures. The system we’ve created includes different fringe options (or ‘bangs’ for those of you across the pond) that can be mixed and matched. Mossport’s salon will let you change up your style any time from hairstyle and colour, to trimming (or growing) your facial hair!
We don’t believe in setting any limitations for what the player can wear, regardless of gender. Any hairstyle, clothing type, facial hair is up for grabs for the player.
Character Animation
Witchbrook may look like it involves 3D due to its fidelity, but it’s entirely an illusion - everything in this game is 2D, including our characters!
For an isometric perspective like Witchbrook’s, 8 directions is necessary to believe you’re traversing through the gameworld. To make things more efficient for production, we animate 5 rotations and then the engine flips the remaining 3 angles to make 8. To do the maths on just walking alone, there are technically 5 directional walk cycles with 6 animation frames each. That’s 48 hand-painted animation frames!
Believability in how the player character reacts to specific scenarios was very important to us. For example with broom riding, there are tons of forces at play such as gravity, the wind, your speed and we wanted to reflect those. There’s a subtle animation of your legs swaying in the air and your hair streaming behind you. If you speed up, your character leans closer to the broom and your hair billows even faster! All these “what-if” scenarios and how we would expect a real person to react means that animations can start to stack up quick. As of writing, the player character has over 1,300 frames of animation that have all been drawn by hand!
The Clothing System
We know players (myself included) love to accessorise, so we’ve pushed to allow as much layering as possible. Players are able to wear 11 layers at a time (not counting hair, fringes and facial hair) and we’re so excited to see how you style your witch!
A crucial part of my work includes ensuring all clothing options work seamlessly with the player character’s 1000+ frames of animation. Since each frame of clothing is hand-painted, this quickly adds up to a wild amount of work, especially when we start becoming more adventurous with clothing options. It quickly became apparent that we would need a bespoke system that could be flexible enough to support multiple variations of clothes, without adding too much production overhead. This became the Clothes Mapping System.
Similarly to 3D games, a texture is designed and then projected onto a mask that’s shaped like a piece of clothing - such as a shirt or a pair of trousers. However, these presented big challenges:
Challenge #1: Our sprites are tiny! Texture projection works best when you have larger models so there’s more room for detailed designs to fit within the mask. Early on, we noticed that complex shapes and patterns were simply unable to squeeze into a mask that’s less than 20 pixels wide.
Challenge #2: Our masks sit on top of our player character’s body and need to react every time the body moves, so each mask would still need to be designed for every rotation, and for every unique frame of animation.
The first image is the greyscale mask that we animate across all the player character frames. The second image is our tester texture for positioning of the clothes mapping.
Take our cropped cardigan design as an example. While it starts as a flat design, our system dynamically adjusts how it is mapped on the character based on the mapping nodes. This happens for every animation frame in every direction. Put plainly, it means that whenever we add any new clothing textures, they are automatically projected across all of our frames without a manual rework.
All of our clothing textures are designed using RGB base colours, which allows for separate colour assignment in our palette system. This allows us to have nearly unlimited colour customisation options so players can mix and match to their heart’s content.
Currently, we have 5 masks for clothing - a “dress” top, a shirt, a pair of trousers, a long skirt and a short skirt. Using only these 5 masks we’ve already created 60+ unique clothing items, from vests to corsets, to biker jackets and much more. And this is before factoring in colour variations and accessories!
Calico & Brands
The final touch for our clothing system was to design Calico (Mossport’s clothing shop, first shown in Hana’s reveal) and its fashion brands. We tried to make clothes shopping feel like a relaxing experience, where finding the right piece of clothing feels more like browsing a curated boutique, rather than scrolling through an endless inventory.
Calico sells a number of distinct brands, each with their own aesthetic and personality! My personal favourite is Labyrinthe, our gothic line featuring corsets, dip-dyed jeans, layered oversized tops, and chunky boots. Every brand offers something unique so that players can find themselves amongst the racks.
For me, character animation has always been a true labour of love. An immense amount of work, but incredibly rewarding. Seeing how much freedom players have to express themselves through fashion, or noticing pedestrians bundled up in winter coats or students in uniform, has made it all worthwhile. It truly feels like magic when it all comes together.
Meet Cormac
Previously we’ve introduced you to the bright and bubbly Hana, and since then you’ve met the ever-curious Eli, editor of the Oracle. Keen eyed witches will have seen that another of Mossport’s eligible bachelors, Cormac, has entered the fray!
A gifted artist and the self-proclaimed black sheep of his family, Cormac is a witch who would rather be capturing the hues of Mossport in art form, than sat in a stuffy old classroom. With a perpetually paint-streaked persona, he will find a kindred spirit in those who can appreciate and find beauty in the unconventional. You’ll often find him hunched over a canvas at The Briny Brush, an art shop down by Parasol Sands.
The Witchbrook Oracle subscribers amongst you may also have spotted another character we’ve yet to formally introduce… More about her next time!
Got any burning questions for the development team, or want to share your excitement with our buzzing community? Join our official Discord or find us on your preferred socials and become part of our Coven. And don’t forget, we also have The Witchbrook Oracle - an in-world newspaper, for those of you looking to dive a little deeper in the daily lives of those in Mossport.
Until the next one!
Alexis & Jade
