Steam Spell Welders - [Turn Based RPG]

[aereddia]

Hey Everyone, Welcome to Spell Welders!
This is a game a few friends and I have been working on for a little over a year three and a half years and it's finally time to display it for you all update this page as we gear up for release! It has been a very long journey and we've made a ton of progress in the last two years and I wanted to share it with you all and do some updates each month before we launch on Steam.

The Plot:
You and your fellow cohorts journey to Gladstein for glory at the annual wizard tournament. You wipe the floor with your opponents and win the tournament! Huzzah! But afterwards, you are pulled aside and given a special job. You see, there was one town that was missing from the tournament, Voralnor. Not a single soul from the tournament was there, in fact, all communication with them has evaporated into nothingness! It is your job to travel under the mountain of Mynart to Voralnor and investigate their sudden silence. What could've stricken this proud town? Only you can find out.



The Combat:
Here's the flow:

• You start each round with the options to choose from your magic tomes, some basic spells, or some items
• After selecting your tome, you choose the spell you want to cast. You could alter someone's stats, deal damage, heal. All of these are tailored to the selected tome.
• After choosing the spell, you choose HOW you want to cast it. It could be normal, powerful, fast, accurate, or cast 3x. Each option here has some drawback to account for its bonus.

Then the round plays out, and you do it all over again. There are a ton of combinations here, and I like to think of it like a "Build-a-spell" system.
Speaking of a "Build-a-spell" system:

• After casting a spell, you get a token of the specified element
• When you get 3 tokens, you can consume them to cast a powerful Weld Spell
• Well Spells can only be cast with your specific set of tokens, so in a sense you are building towards your big spell

Spoiler: The Zones of Mount Mynart

The first area you explore is the Mouth of Mynart. It is your standard rocky area with bandits and vagabonds roaming around. Be careful though, something dangerous stirs in the deep...


This is the second area you explore, the Gut of Mynart. This is a relaxed watery zone with some glowing blue and pink crystals to light your way. I think it is our best-looking area and I'll share some more gifs of it later.


The final zone on your trek through Mount Mynart is the Bowels of Mynart. Here we have rivers of lava blocking your path and glowing webs that dim when you get close. This area is still a little bare, but we'll beef it up before launch.

 

[aereddia]

Update #1: Death Animations

In most RPG's the enemies just kind of fade away into nothingness, and we certainly had that going on for a little while. But since I got involved in shaders a while back, I decided I wanted to spiff up some of the death animations for our guys. It all started with having a simple dissolve shader for the wraith and things spiraled out from there, so now they all have (sort of) cool death animations.

They'll each have their own section where I break them down if you want to take a look.

Spoiler: Wraiths

This is a simple dissolve shader. I just coat the sprite in some perlin noise at varying angles and sizes. Then I run a single value from 0 to 2 to erase the alpha of each pixel. When it hits 2, the sprite should be fully dissolved and I can move on from there. The shader code looks something like this:

void main()
{
    //This will return the x and y % through each sprite.
    //The top left is (0,0), and the bottom right is (1,1)
    vec2 pos = getPositionThroughSprite();
    
    //Standard perlin noise function. Random values from 0 to 1
    float n = (noise(pos*blobs));
    
    //Increase the density of the noise for smaller blobs
    n += noise(pos*blobs*10.0);
    
    //cutoff is a uniform I pass in to cut off the alpha
    n = step(cutoff,n);
    
    gl_FragColor = (v_vColour * texture2D( gm_BaseTexture , v_vTexcoord));
    
    //If either alpha is 0, erase the sprite
    gl_FragColor.a = min(gl_FragColor.a, n);
}

Spoiler: Bandit

The bandit doesn't run any shaders and is pretty close to the standard death animation for most RPGs. I just fade it away and have some dust for leaving. As far as I'm concerned, they ran away. This is a kids game, after all.

Spoiler: Ghost Knights

This was another fun shader I built for the Ghost Knights. The code is a little more complicated here so I'm not going to share it, but I'll try and explain it to the best of my abilities.
So here I'm just moving one variable from 0 to 1 that denotes how far down the sprite I am. Think of it like a horizontal line moving down the sprite. The farther the pixel is above this line, the more I move it up, to the side, and fade it out. I also nudge each pixel slightly to the right so the horizontal movement isn't completely random.

Spoiler: Dark Mages

This was the most complicated death animation I built and really took a while. The code is pretty complicated, but I'll give you a brief explanation here. First, it is a fade to black done with a simple mix shader. Then the explosion releases some black particle effects, but the fun part is the dissolve. I'm turning her sprite into a cellular grid, basically just a bunch of black dots that fade out the closer you get from the center. Then I warp the sprite by changing the x and y position using some perlin noise and gently fade out. The end result is what you see below. Click on the gif to go to gfycat where you can pause it if you want to see it in better detail.

Spoiler: Mech Leeches

The leeches were pretty simple because I just wanted them to power down. What does that look like? It looks like a greyscale shader to me. Nothing fancy, but hey, how else are they supposed to die?
This is a standard greyscale shader, nothing new here. The fadeout here is handled by the code, which is true for *most* of the death animations.

uniform float degree;

float clamp(float num)
{
    return max(0.0, min(num, 1.0));
}

void main()
{
    vec4 color = texture2D( gm_BaseTexture, v_vTexcoord );
    vec3 lum = vec3(0.299, 0.587, 0.114);
    
    //I'm clamping num here because I'm passing in values
    //above and below 0 and 1. That'll mess up the output
    float d = clamp(degree);
    
    color.rgb = mix(color.rgb, vec3(dot( color.rgb, lum)), d);
    gl_FragColor = color;
}

Spoiler: Masks

It just made intuitive sense to have these guys crack like a mirror, so that's exactly what I went for. I'm using a simple voroni shader to get the straight edges between the cells. The next step obviously would've been to have the whole thing shatter, but since I'm already running a shader on the inside of these guys, I couldn't wrap my head around how that would be possible. Also with a random crack pattern, it would've been impossible anyway.

Spoiler: Spiders

The spiders were tricky. I couldn't think of any shader to run that would look like a dying spider, and I wanted this thing to explode into bits and pieces. I had to go into the sprite and create 5 different images for each body part. Then on death, I place each part individually and have them blast off in a flurry of particles. I think it's a fun effect

Spoiler: Blobs

This is another one I'm running through the code. When he dies, just squeeze yourself up before slowly increasing your x_scale and decreasing your y_scale. For the motions, I'm using this asset, but the GMS1.4 version. It is my favorite purchase for this project and has made animating things 100x easier. I highly recommend it.
Don't worry about him changing colors. That is something that only this special blob does.

Spoiler: Machines

Last, but not least, we have the machines. Something about them just told me their head should fall off and explode, so that's what I did. I had to separate the sprites and have a little mini explosion particle effect, but you get the idea. Again, I'm using this asset for the animation, super useful.

Anyway, hopefully they add some flavor to each enemy. They were all done with shaders or code because the sprites were just too big and unwieldy to animate themselves. Next month I'll probably show off the cool cloud shader I added to the intro town that gives it a cool pseudo-3D effect. Cheers!

 

[aereddia]

Update #2: Clouds



This is a not-so-simple shader I built a while back for the town. You can click on the gif to make it bigger and less grainy, but I do wish it was clearer here. I have a simple scrolling noise texture going over the screen to simulate clouds, but I shift the position of them depending on the height of certain objects. The overall flow of that looks something like this:

1. First I have to create special sprites for each object that interacts with the shader I'm using. I use the RGB values in the shader, so they have to be very specific. The R value holds the elevation of the sprite, the B the slope, and G for generic shadows. Most of my sprites are vertical, so they all have a B value of 255, but the R goes up by 1 for each pixel until you hit a flat surface. You can see the shadow effect on trees, but unfortunately, I just have to guess how to draw that part in.


2. I draw each sprite to a surface I'm using. I use the room coordinates - view_xview and view_yview so I'm only drawing the parts that are on the screen and in the correct position. I have to clear the surface with c_black every frame so I can reset the pixels, otherwise, as you walk around the "elevation" of the screen would change when there aren't any objects to interact with.

3. Then I turn on the shader and draw the surface to the screen at view_xview and view_yview. This is, of course, the easy part.

I could explain how the shader works, but that'd take a while so I'm only going to do that if someone asks. Theoretically, this could work with any sprite you want and any animation you want, but I'm going to keep it as static objects for now so I don't make a million custom sprites. Just the tall objects, and I think you'll get the picture.


Anyways, that's about it for the clouds. Next month I'll be back showing off some of the battle animations I did. There are about 60 I did for the game, but I'll only be showing off the coolest ones. Cheers!

 

[Newmember20222222]

maybe it's been too long since you updated, do you still do it?

 

[aereddia]

maybe it's been too long since you updated, do you still do it?

I do still do this, I just haven't updated recently because I've been playing a lot of games. I still plan on making a post for the battle animations, I just need to beat Phoenix Point first and it keeps on going onnnnnnnnnnnnn

 

[aereddia]

Update #3: Battle Animations

Ok, so this update is all about the many, many battle animations in the game. There's about 64, give or take one or two, and they're about half-n-half shaders vs proper sprites. I'll be showing off 20 here and breaking down the general thought process for each of them. I hope you like perfect looping gifs, because you're going to see a lot of them.

Heads up for the animations. I draw all my sprites on a surface before turning on the shader so I can use multiple shaders (like a Palette swap shader) at once.

Pyrolysis

Spoiler: How it's done

Pyrolysis is some weird complicated process, but as I understand it, it is kinda like making charcoal so I thought I'd make it crusty. This one was pretty tricky, but very useful when I had it down. I create voroni cells out of the sprite and only show the cells who's center is shown on the sprite silhouette. Once I have the cells, I pull a random value between 0 and .3 for the grey value in the center and slowly fade it out. You can see it doesn't fill in the thin daggers because the cell center is off it, but that is a small side effect for an otherwise "crusty" effect.

Electrical Burn

Spoiler: How it's done

An electrical burn is self-explanatory, but I wanted it to look like burnt, decaying skin. For this, I just have a line that I draw across the surface that has the sprite. I color it different values depending on how far from the Y center of the surface it is. Then you warp the surface and rotate it by random amounts for each pixel and viola. Pretty simple, but you can make some cool patterns with it.

Decay

Spoiler: How it's done

How do you show decaying flesh on a blob? Well, kinda like this I guess. I have a static noise texture with values ranging from 0 to 1. Then I move a value from -.2 to 1.5 and color all the pixels whose noise is close to the moving value. As you move past 1, the colored sections will gradually fall off and disappear like so. Then you just fade in the diseased sections by mixing the sprite on a sin curve. It's a weird explanation, but it's a weird effect.

Meteor

Spoiler: How it's done

This one was a ton of fun to make, and I really like the slowdown portion of the meteor. Most of this was done with shaders, except for the meteor which is a sprite. The lightning effect is a shader where I've taken a box and drawn a line down the middle. I distort the position of the line and slowly shrink it to get the lightning effect you see there. I think it makes for pretty decent lightning, although having any offshoots is next to impossible here.

Melt

Spoiler: How it's done

This one is actually simple enough to show the code for. Just move down the Y position of each pixel based on some noise and mix it with red over time. Don't move it as much towards the bottom because I don't want it falling off the surface.

vec2 getYChange(vec2 st)
{
    //Standard noise function based on position
    float n = noise(st);

    //melt is a uniform for how far down the sprite gets moved
    float mm = melt * 1.5;
   
    //Don't move the sprite as much the farther down we get
    //75% up the surface, will be moved down 100% of melt value
    //-.5% down the surface, will be moved not at all
    float dampener =  smoothstep(-.05, .75, 1.0 - v_vTexcoord.y);
   
    //Only subtract the y axis
    return v_vTexcoord - vec2(0.0, n * mm * dampener);
}

void main()
{
    //Since this is a surface, I always have values between 0 and 1 here
    vec2 st = v_vTexcoord;
   
    //Divide the x axis into various sections for noise
    //I am between 20 and 30 each time
    st.x *= sections;
   
    vec2 p = getYChange(st);
   
    //Don't move the values past 0 or 1 since this is a surface
    clamp(p);
   
    //Draw the sprite with new coordinates
    gl_FragColor = texture2D( gm_BaseTexture, p );
   
    //Shade it red over time
    gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(1.0,0.0,0.0), shade);
}

Spark

Spoiler: How it's done

Spark is a little hard to picture in your head, so I just went with a ball of lightning and said good enough. It two noise textures moving very fast in opposite directions. I only highlight the ridge of these guys for values between .42 and .48. There's also a particle effect for the center glow and another one for the sparks that shoot out of the ball. You raise the size and speed of the particles over time and bam, you got yourself a lightning ball.

Paralysis

Spoiler: How it's done

This one reuses a ton of elements from other effects. The lightning lines are the same as meteor, and the basic lightning texture is reused in other animations. Not a lot to say here except I like the lingering static effect for showing that it has some lasting effect. Like most things, I used two scrolling noise textures for that effect.

Teleport

Spoiler: How it's done

This was one of the most complicated shaders I made, but I also think it is one of the coolest. I modeled it after the SnakeBird portal (which is a fantastic game if you haven't heard of it) and you can figure it out if you stare at it long enough. You start with a sphere and add in some extra spheres revolving around the main one. Some of them subtract from the main sphere's alpha and some add to it. The spheres all slowly move in overtime so the portal can form a cohesive shape. Then I grow it before shrinking it and having the portal alpha dictate which parts of the sprite I draw. I can't comment much on the texture since I borrowed most of the code from somebody else, plus some edits.

Fire Familiar

Spoiler: How it's done

All of the familiars have a similar intro, but the familiars themselves have different movement patterns. The intro was a complete accident because it was supposed to be a trail, but I messed up the code and got that effect instead. I like this better, and added some more spawn particles when it is finished. The movement for the dragon took a while to get down because it all has to be in the code, no simple image speed animations here.

Water Familiar

Spoiler: How it's done

Pretty much the same as before but now blue with bubbles. This fairy just hovers side to side on a sin curve and shoots out particles. I got the trail effect from here if you want to check it out. It is super useful and I'm doing that everywhere, but there's not much else to this one.

Continued in Part 2...

 

[aereddia]

Part 2

Lightning Familiar

Spoiler: How it's done

Same as before, but I extended it a bit because I like their slow movements. They just hover back and forth on a sin curve on the x and y axis. I also tilt the image_angle depending on where they are moving to, so it is a nice and subtle effect. It took me a while to figure out, but I really like their hovering.

Phase Shift

Spoiler: How it's done

This was (another) complicated one that took a while to figure out. What does a Phase Shift look like? Who knows!? I had to split the sprite into two and have different sections in the shader for the left and right sides. I already had a dissolve shader for the Ghost Knight death and a simple sin curve and fade-out would work for the light side. I only draw the colored parts where the light and dark sections overlap. The hard part was having the colored part split into two different images with one over the other (because some sprites still have sections overlapping after the split) so one of them had to have a higher depth. What I do here is split them, then play the animation backwards with the X position of the images flipped. That was the only way I could figure it out because reversing this thing was impossible. Super complicated, but I like it a lot.

Eruption

Spoiler: How it's done

This is one of the few "sprite-only" animations we have. It was tough to figure out what does an "eruption" spell look like, but I thought the artist nailed it with the Earth opening up and some powerful beam shooting up.

Hasten

Spoiler: How it's done

This one was already shown in the first post, but I wanted to talk about it here. The clock was entirely done with a shader for fun and I only later realized it could be used for an animation. Hasten seems like you are energizing your body and I thought that hopping back and forth with an accelerating clock seemed appropriate. At a certain point, I have to stop moving the sprite and just draw it twice in one frame or it wouldn't look right. You can see that at the end of the effect.

Torrent

Spoiler: How it's done

This one took a super long time to figure out because what the hell does a "Torrent" look like? I figured since it increases your Magic, it was basically like surrounding yourself with a strong torrent of water and the cyclic pillars were born. I actually have to create two instances of this object for the animation to work, otherwise, you end up with weird depth issues as a pillar moves behind the player. The bubbles are a bit much, but they have to be for this to really work. I increase the speed and amount of the particles over time and that's your torrent animation.

Lightning Reflexes

Spoiler: How it's done

We were going for some "anime flash away" effect here, but since I couldn't figure out how to do that with a shader, this is what I have. You still flash away and come in from behind, and the electricity and dirt really sell the movement. I reused the lightning effect from Paralyse and a few other animations, so there wasn't much work left except for getting the timing down.

Purify

Spoiler: How it's done

Since this is a fire spell, we wanted it to look like you are heating up metal and removing any toxins or chemicals on it. Since metal expands when it heats up, I do the same for the player and give him a "hot spot" in the center of the surface. The particles just made sense, but I don't even remember what I was thinking when I made it. The top particles always emit from the sprite's head (which was a pain to set up for 18 different sprites) but I think it looks real nice.

Icicle

Spoiler: How it's done

The only real cool thing about the icicle is that it is 100% a shader image (The icicle, not the particles). It took way too long to get a mediocre icicle set up through a shader, but it made my artist's life easier so it was worth it.

Charge

Spoiler: How it's done

Charge is pretty self-explanatory. I have particles that I create outside the sprite and send them inwards. I have a basic mix shader to turn the sprite white-hot with energy before unleashing a tendril of lightning. That lightning is a lot like the other lightnings I've created but with smoothstep for the edges and curves instead of jagged edges. I increase the width of the lightning, moving across the x axis when it spawns to make it look like it is traveling, then I shrink the width for the whole thing to make it fade out.

Tempest

Spoiler: How it's done

Tempest was a bit tricky because representing tornados in 2d is surprisingly difficult. I didn't have a sprite, so I had to make my own tornado effect with particles. I tried to base it off the tornado effect here, but since they are exporting it as a sprite they can get away with a bit more. I already had the rain animation from a previous effect, so I used it here since a storm made sense. You can also get lightning strikes during this animation, but it isn't playing this time because it is a random chance.

Well I think that about does it. 20 of the more interesting animations I did for this game. Hopefully you enjoyed some of the gifs, there were 20 in total (and it turns out you can only have 10 in one post) and it took a while to get all this footage down. Next month I'll probably be showing off some of the music I did. Cheers!

 

[Prrz]

All of this is so incredibly cool, I love the effects you have created! Keep it up

 

[aereddia]

All of this is so incredibly cool, I love the effects you have created! Keep it up

Hey, I don't know how I missed this. Thanks so much! Doing these, you never know if people actually look at them or not, so I'm glad somebody else is enjoying them.

 

[aereddia]

Update #4: Soundtrack

I've always been picky about soundtracks, chiptunes especially. Most of them sound sort of generic like they are all trying to rip off the old FF NES soundtracks, but I couldn't be any more bored by them. Coming from a jazz background, one of my goals was to have that influence woven deep into the soundtrack and try to bring something new to the table. I couldn't do a whole lot with crazy drums or melodies, so I mostly brought it through in the chords. I've uploaded 4 of the 15 tracks to bandcamp right now and I'll break down my overall thought process for each of them below.

Spell Welders OST, by Andrew Ereddia

15 track album

andrewereddia.bandcamp.com

1. Rebel Sands

This is the music that plays while you are walking through Gladstein during the intro tournament. I was basically envisioning it as the town's "Fight Song" they all chant before the tournament starts, but still have some relaxed parts because it is still an intro town. Jazz actually does a chill and relaxed vibe very well, but I was still having trouble finding something original so I took some influences from Christaian Sands "Rebel Music," which is also where the title comes from. Once I had the intro line down and the overall feel set up, the rest fell into place. I especially like the overall chord progressions I use here and the drums add a lot of energy to the town.

2. A Most Beautiful Ghost

This is one of my favorite tracks because of how simple the melody is and how it sort of weaves in and out of itself. Sometimes it is in 5 and sometimes 6, but it should still feel natural and relaxed. The movement between 5, sharp 5, and 6 gives it a nice storybook feel like you are entering a new and magical world, so its placement at the very start of the game couldn't be a better fit. The first 9 notes of the melody were also taken from Gerald Clayton's solo off of Ben Wendel's "Song Song," so there's another straight jazz line I ripped off.

3. Battle Music 1

Battle music is always tough for jazz, but I've always wanted to use this intro chord progression and I thought it worked for setting the stage for a battle. Keeping things in 7 for most of the track was purely accidental, but I think it flows naturally and you don't even notice it. I don't have too much to say about this, but I think between 0:43-1:15 is easily the best part of the track. It helps break up the monotony of earlier sections and give the track some levity.

4. Grab a Drink

This track came to me in the shower as clear as day and I could hardly wait to get to the piano to figure out what it was. The melody in particular is so light and relaxing that it feels like you are floating on a cloud. It also feels like the most traditional "jazz" track off the 15 I've written, particularly between 0:29-0:45. It was written for the bar in the game (which isn't going to be in the final version unfortunately), but it gives me "Island Vibes" where I'm sipping a martini on a beach somewhere.

That's about it for the updates. We're very close to launching so the next one will probably just be about the steam page and the process of getting that set up. I hope you enjoyed the breakdown of these tracks and gave the soundtrack a listen. Cheers!