BEAST SOCKET (Procedural Monsters)

kupo15

Member
Holy πŸ’©πŸ’©πŸ’©πŸ’©, this is some amazing tech stuff you got going and the game looks really cute too! This is the type of stuff I like to see devs doing. Really pushing the envelope and raising the bar and expectations. Amazing stuff! My only thought would be to have the dotted ball line thing actually go from the ball instead of being hidden behind the character. I think it'll be more clear and visually appealing personally.

Keep it up!
 

RujiK

Member
@Bladestorm Games Thanks! Getting waterfalls to work from two angles was a real beast to tame. Also I didn't forget my water tech-post. Should be before 2020 I think.

@Bentley I answered in your other thread but If anyone has the same question, feel free to check this post on transitions:
https://forum.yoyogames.com/index.php?threads/solved-shader-q-looking-for-some-direction.68366/

@nacho_chicken I remember that game! Do you remember the name? I don't. I remember it had pretty nice NES-like graphics. Thanks!

@RangerX Glad you approve of my water. I remember getting similar feedback from you way back on the GMC in 2015:
Posted 05 June 2015 - 07:09 PM by RangerX

You know what's the most important aspect for me to like your water? The relationship between that water and the character.

Some water can be very cool looking but if it doesn't splash great when I step into it, if it doesn't ripple or move in a way it feels like its another type of liquid, it ends but being anything else than satisfying. What I often see in game is that they really really under priorise that aspect and I think its sad. Most water in games also don't nearly splash enough compared to real life.
It only took me four years, but I have finished my splashy-water.

@Dogwithswords Getting the waterfalls to work from two angles was probably the trickiest part of all the water. The water surface and the water-falls is all one shader. Glad it paid off :)

@kupo15 The dotted line doesn't even work anymore since I switched to 3d and haven't fixed it. It needs a lot of tweaking now. Thanks for your kind words and feedback.


...


It's time to make static scenes look more dynamic by adding MOTION. Wind seems like an obvious answer, so I tried to make a wind shader.

Step 1: make some ripples on the ground:

Step 2: Realize it looks like jelly and give up.
Step 3: Pout.
Step 4: Yell at my dog.
Step 5: Try again.
Step 6: Greatly reduce the up-and-down motion and apply highlights based on a noise texture:

As far as I know, this is an original idea. I don't remember seeing anyone apply a grass-wind shader without any physical grass. While I think it's an original effect, I also think it's a mediocre effect. I ditched it and started over.

SO, I decided to add some actual grass models to blow around instead of just faking it. I drew a bunch of grass and added a distance check in my grass shader. (Color and large radius is just for clarity)


I thought a distance check would be kind of sluggish, but a stress test of 2,000 distance checks for 300 blades of grass still ran at 300 fps! That's more than half a million distance checks every frame! I plan on limiting distance checks to 4 or 8.

Next, I add Push-Force based on distance. (Still Shader-code)

That looks pretty cool! For the wind effect, I use a warped perlin noise texture that looks kinda like this

I apply the texture as a push-force based on the grass sprites position like this:


And with the correct colors it looks like this:

That looks good to me! Best of all it's lightning fast. There's almost no performance chance between static grass and wind blown grass.

That's all. And here is the first human sprite for the game. Gotta add some waifu's.
 

GMWolf

aka fel666
Very cool!
I actually think the UV hack effect looks quite good. Perhaps of you slower it down a little and used larger waves?
It might even look good beneath that actual grass you made! To add extra movement !

If those distance checks become too much, you could offload them to the vertex shader. Tricky bit there is supporting multiple objects. (Oh wait,is that already what you are doing?)

The Perlin noise wave is a really good idea!

Keep those devlog entries coming! This is one of my favourite threads on the GMC!
 

kupo15

Member
I certainly believe it! I would say I'm a gameplay programmer first and foremost followed closely by technical programmer...but tech artist is my weakest. His skills as a tech artist is off the charts. This is a great thread!
 

NightFrost

Member
Looking very good! Technically just a sprite shear (I think that is called) but applied in a way that produces great results. That's what good design is all about.
 

RujiK

Member
@nacho_chicken Ah, that's it! Looks like his devlog hasn't been updated in ages unfortunately.
@NightFrost You make it sound so easy. :p There's a slight color shift too.
@rIKmAN Thanks! Glad you like it!

@kupo15 @GMWolf

Thank you my good fellows. Your compliments are screenshotted and going into my ego folder. There are only 3 images there so it's no small feat. :D (Yes, I really have one)

Also GMWolf, the distance check, as you said, is in the vertex shader. And I tried tweaking the fake wind effect A LOT, but I was never happy with the results. I'll have to try combining it with the tall grass at some point.

Okay, @Bladestorm Games , here is the water explanation I promised:


- HOW TO MAKE COOL WATER -
Step 1: Draw a scrolling noise texture. (Perlin is cool)


Step 2: Draw ANOTHER scrolling noise texture on top of the first one.


Step 3: Use that yucky texture as your water surface.


Step 4: Whip out your shaders! Adjust the contrast and tint it blue.


Step 5: Add transparency and cull the darkest and/or the lightest colors:


Step 6: Adjust the colors to your liking. Waterfalls use the same process but pull data from a separate texture/color channel.


Step 7: Apply a sinusoidal distortion to everything underwater.



Yuh Done!


BUT! I know what some of you are thinking: "RujiK, you rapscallion, you didn't explain how the ripples work!!!"

PSYCH! The ripples are a completely unintended visual glitch! Look what happens when you apply a sinusoidal distortion to an image:

See that white stuff at the top of the distorted image??? That out-of-bounds emptiness is your shoreline! Ha ha ha ha!! You probably thought I did it on purpose. Nope.

Here's the distortion effect with no surface texture:


Thanks again for your EXTRA ego-boosting words!
 

CMAllen

Member
@nacho_chicken Ah, that's it! Looks like his devlog hasn't been updated in ages unfortunately.
@NightFrost You make it sound so easy. :p There's a slight color shift too.
@rIKmAN Thanks! Glad you like it!

@kupo15 @GMWolf

Thank you my good fellows. Your compliments are screenshotted and going into my ego folder. There are only 3 images there so it's no small feat. :D (Yes, I really have one)

Also GMWolf, the distance check, as you said, is in the vertex shader. And I tried tweaking the fake wind effect A LOT, but I was never happy with the results. I'll have to try combining it with the tall grass at some point.

Okay, @Bladestorm Games , here is the water explanation I promised:


- HOW TO MAKE COOL WATER -
Step 1: Draw a scrolling noise texture. (Perlin is cool)


Step 2: Draw ANOTHER scrolling noise texture on top of the first one.


Step 3: Use that yucky texture as your water surface.


Step 4: Whip out your shaders! Adjust the contrast and tint it blue.


Step 5: Add transparency and cull the darkest and/or the lightest colors:


Step 6: Adjust the colors to your liking. Waterfalls use the same process but pull data from a separate texture/color channel.


Step 7: Apply a sinusoidal distortion to everything underwater.



Yuh Done!


BUT! I know what some of you are thinking: "RujiK, you rapscallion, you didn't explain how the ripples work!!!"

PSYCH! The ripples are a completely unintended visual glitch! Look what happens when you apply a sinusoidal distortion to an image:

See that white stuff at the top of the distorted image??? That out-of-bounds emptiness is your shoreline! Ha ha ha ha!! You probably thought I did it on purpose. Nope.

Here's the distortion effect with no surface texture:


Thanks again for your EXTRA ego-boosting words!
Mmm...I would tread carefully with that ripple effect. Something tells me that you should not expect consistent results across all systems. Out-of-bounds pixel data may not universally return back white pixels, and if that's what you're relying on, it will look strange when that's not the texture data it returns. I'd at least have it tested on a variety of systems before calling it good...which is sad, because it does look good for an accidental bonus.
 

NightFrost

Member
Very nice. And those people who don't want to wrap their heads around / experiment with perlin noise, can just use an edge-wrapping sprite as noise texture and displace its position every step. I think GLSL version GMS uses supports those texture wrap settings so the shader wouldn't even need to map draw position to position on texture to do the wrap? (I can't remember as I've only read about that feature somewere, never used it myself.)
 

rIKmAN

Member
Using the new GMS2 3d functions, I have rebuilt the engine to be truly 3d. If you have a 2d brain, prepare to be shook:

<snip>

I've never coded in 3d so the transition from GMS1>2 took around 2 months.
I needed to change the tiles, the NPC-sprites, the shaders, the view, and get rid of every draw_sprite or add_tile functions. It took a LOOOONG time and was very frustrating but it's just about done now.
I meant to ask you this a while ago but must have thought it in my head instead and not actually done it.

Would you mind sharing / suggesting any and all resources you used to help you learn and transition from the old engine to the new "truly 3D" engine?
Going from "never coded in 3D" to an engine rewrite of such quality in 2mths is pretty impressive!

3D in GMS has never appealed to me at all - until this WIP - so any links or reading material that helped you would be appreciated so I can have a play around with it myself.
That water gets better every time I see the gifs btw, so good!
 

RujiK

Member
@CMAllen I think I exaggerated the "oops" factor a little. The shoreline/out-of-bounds pixel data is actually transparent but is easily changed to white with a few lines of shader code. So it was an accidental effect that I dyed white.

@NightFrost t That's exactly what I'm doing. I just googled "Tileable perlin noise" and copied one that I like for a shader texture.

@YanBG @Deadly Serious Media @hogwater Thanks my dudes!

@hogwater Stop cyber bullying me!!! :mad: (I meant 6 years, not months.)

@Lance Klepp Thanks! (That guy looks like Will Ferrel?) What's the game about? It's a story game with some super cool yet undisclosed mechanics. :p Stay tuned.

@rIKmAN Thanks! Glad you like the water. I learned 3D almost entirely from an example by @flyingsaucerinvasion : LINK ... Feel free to ask me more 3D questions, but the example was extremely helpful for my 3D learning experience.


...


FIRST, LET ME FLEX MY MASSIVE GAINS:

(Expect a new avatar soon)

Some lame stuff:


And here is the text engine IN ACTION. I'm trying to squeeze in a lot of personality into the text since voice acting is extremely unlikely.


And I started work on the inventory. I'm going for an extremely clean and readable style.


And now for something cool because UI is lame!

How about some 3D lighting in a fake 2D world?! Is that cool?

There is a little bit of a graininess effect on the darkness but the gif compression makes it look much stronger than it really is.

And a day-night cycle and smooth weather transitions have been added:

The rain is made in the style of a shader particle. I originally used sprites, but ~200 drops of water started to affect performance. With the shader effect I can have ~10,000 rain drops with almost no performance change. Even ONE MILLION drops of rain still runs at 50 FPS. The screen was completely white though :D

And something spooky:



- - A E S T H E T I C - -



Expect a NEW avatar and a NEW topic title soon. You won't even recognize me. Thanks for your comments!
 
I suspect its actual 3D lighting.
Yeah, his post does call 3D lighting, and he did redo the world in some sort of 3D, so I'm sure you're right. I was referring to how it doesn't seem to completely respect the 3D objects in the scene though, because of however he's doing it. It gives off the impression of being 2D lighting, even though I'm sure it's using some 3D stuff under the hood. It kind of seems to bleed through things a bit, which is very unique looking. It suits the 2D look of the game much better than most lighting GM lighting examples out there.
 
M

Master Maker

Guest
Did I just see that Sasha is a half-lizard person from outer space in that GIF?
 

RujiK

Member
@GMWolf I will think about your marriage proposal. 😘 Unrelated, how much money do you make?
@RichHopefulComposer Glad you like it. UI is a necessary evil. ;) It is indeed 3d lighting, but it has no shadowcasting and that causes the bleed-through.

@kupo15 @AnotherHero @Samuel Venable Thanks, my dudes! I always love some compliments :)

@Master Maker it's just placeholder text :p but speaking of lizards....

Can I make something cooler than my water?! CHECK THIS OUT

I have successfully applied procedural animations to a pixel art-ish character. He can also interact with my procedurally animated water:


Those ripples though.

Now, I must tell you something important:

THIS WAS SERIOUSLY HARD TO MAKE.
THIS WAS SERIOUSLY HARD TO MAKE!!
THIS WAS SERIOUSLY HARD TO MAKE!!!!!!!(!!)
(Seriously, it was very hard for a 3d math loser)

I have to give a special thanks to @Joe Ellis , @GMWolf , and especially @SSJCoder for helping me with some of the 3d math stuff. The lizards took about a month to make and probably half of that time was spent messing around with the 3d math. This is one of the few coding adventures I seriously considered giving up on. BUT IT WORKS NOW, so eat it, you mathematician of the world!


AND this is only the first step of the procedural lizards. I have some really cool ideas that I hope will pan out.


NEW TITLE: BEAST SOCKET This is a working title, but I've been going away from sock-puppets for a long time. The old title doesn't really make sense anymore. Beast Socket sounds cooler anyway

Finally, I thought this bug was funny. It was the first time I walked the lizard into water. I guess he didn't like it.
 

sv3nxd

Member
Always been following along as a silent watcher, but I really have to say it ...

This is unreal. You are unreal. You make everything I've ever learned and ever made seem so small and I'm not even the tiniest amount mad. You are amazing.
 
Wow. Just... I mean...

You make everything I've ever learned and ever made seem so small and I'm not even the tiniest amount mad.
That about covers it. By the way, I know this is a few months late, but your post on how you make water effects should be posted in the tutorials. And possibly get some sort of Nobel and/or cash prize. I hope that at some point I can make a game that's even half as good as your water effects alone.
 
Super impressive stuff, as always. That lizard is fantastic. It looks like a month's worth of work. Congrats on finishing him up - you've got some serious willpower!

I love how the lizard looks too, tech aside. Great colors and design!
 
Last edited:

Aleifr

Member
I think I remember seeing this on twitter or reddit, but I think your method of animating is very cool and I appreciate you explaining how it was done so well!
 
How!? o_O
I guess that's the magic of your work!
I am sherlocked as to how you managed to program a lizard like that.
This is something that many classic game developers probably wanted to make but could at best only make several ball segments.

Words cannot even describe how amazed I am.
 

RujiK

Member
@sv3nxd Thanks man! Always nice to convert a lurker into a poster :)

@CMAllen lol thanks! I like your suggestion :p

@HeWhoShallNotBeNamed Thanks :) I didn't post the water in the tutorials section as it doesn't really work for beginners without any code being shown. Thanks again.

@RichHopefulComposer Thanks my man. It was one of the harder things I've finished. I'm glad it's done.

@Aleifr Thanks dude! Also nice to see that some one's first post on the forum was in my devlog :)

@Dogwithswords Thanks! It is actually pretty similar to a lot of the SNES ball-segment bosses on the technical side of things.

@Joe Ellis LOL, I'm not sure about that but I'll gladly take your compliment. :p

@frd @GrizzliusMaximus @FoxyOfJungle @kraifpatrik @lolslayer Thanks my homies. I appreciate every comment.


. . .


FIRST THINGS FIRST, TIME FOR SOME BRAGGING.
  • I have been contacted by TWO large/legitimate game publishers expressing interest (Nothing concrete) in funding my game. (I won't say which companies unless there's a formal deal.)
  • My ONE lizard post on twitter gained me 2,300 followers.
  • I am now the top post of all time on reddit.com/r/proceduralgeneration
  • A game curator posted gifs of my game on reddit. It's super cool when other people re-post your stuff. I got to read 150 comments about my game and I didn't even post anything.


SECOND THINGS SECOND, I'VE BEEN STRUGGLING WITH 3D.
So, normally I don't post my "test projects" in this thread, but I would consider this project as "Research and Development" for Beast Socket. I've been having some trouble with 3D so I decided to make a full 3d scene for practice.

First, I made basic heightmap using the midpoint-displacement algorithm and converted it into a basic vertex-buffer mesh. (I added erosion just because it's cool.)



And, because I'm a sucker for water, I decided to add some. I applied a sinusoidal offset to the vertex points like this:

That KIND OF looks like water, but it also looks terrible.

So I decided to focus on the water SURFACE, and using most of the same water code from BEAST SOCKET, I draw a water surface:

Water is defined by a height-level, and the ground texture gets bluer depending on how far below the water surface it is. Very basic "color_blue += min(pos.z - water_level,0.0)" shader code stuff. The SHORELINES were a little more tricky, and in the above image you can actually see I cheated. The shoreline is ACTUALLY DRAWN ONTO THE TERRAIN INSTEAD OF THE WATER SURFACE. It looks fine at a distance but it looks wrong up close.

I changed the shoreline to actually be on the water by passing the heightmap image into the water fragment shader and doing a height comparison. "If abs(ground_height-water_height) < 5 {im_a_shoreline;}" I also added some "Sloshing" to make the water have waves that go up and down a little.

Next, you may notice there are no textures. Adding a SINGLE texture is really easy. You can use the "pos.xy in the fragment shader instead of UV's to get a nice and easy texture system. This only works with one texture though. (This next image is textured, but only has one texture.)

(I really like this image because it looks like one of those early 90's computer 3d scene renders.)

But OBVIOUSLY, I don't want grass EVERYWHERE, so I made a texture-map that is the same size as my height-map:

Red = stone
Blue = sand
Green = grass
Alpha = unused
Using some basic shader code, I use the texture map to blend the three ground textures like this:
Code:
vec4 grass_col = texture2D( gm_BaseTexture, pos.xy + uv_offset[0]);
vec4 beach_col = texture2D( gm_BaseTexture, pos.xy + uv_offset[1]);
vec4 stone_col = texture2D( gm_BaseTexture, pos.xy + uv_offset[2]);

vec4 MIXER = texture2D(texture_map, pos.xy);
vec4 final_col = grass_col*MIXER .g + beach_col*MIXER .b + stone_col*MIXER .r;
final_col.rgb /= (MIXER .r+MIXER .g+MIXER .b);
And that looks like this. Wow!


It looked cool, but I couldn't do anything with it. So I made a very basic 3d map editor to change the texture_map and height_map.



And then I had a weird idea. What if I used the same texture_map/texture blending process for the waters surface? I could make flowing water! So, I made four textures(Water flowing right, left, up, and down) and blended them:

(Water color is just for clarity)

So I put the flowing water in a scene and you get:

(15 megabytes of sweet flowing water are spoiled below. Open that badboy if your not on dial-up.)


And here is the water-flow editor. It converts the basic mouse-velocity into the flow direction.


Although this flowing looks pretty cool, I don't really recommend it. If you blend a right-scrolling image with an up-scrolling image the resulting diagonal scrolling texture is not nearly as clear as the original two textures. It would look much better if I had diagonal and straight scrolling textures to blend.


THIRD THINGS THIRD, SO IS BEAST SOCKET 3D NOW?
Nope. I just needed the 3d practice. It took about 10 days start-to-finish but I think it was a good investment. You will probably never see this 3d scene again, but I hope my 3d code has improved with my better understanding.

I realize it's kind of weird to post non-BEAST SOCKET stuff in the BEAST SOCKET thread, but since it was made for the purpose of better-ing the BEAST SOCKET 3d code, I'm gonna post it. I think there are enough people in this forum with 2d brains who will hopefully find it useful.

Thanks for all of your comments! Don't forget to like, comment, and subscribe!
 
Last edited:

lolslayer

Member
Damn, you must have quite some spare time on your hand, I simply love the flowing water effect and the solution you found for it, really inventive.
 

CMAllen

Member
Yeah, that work with water would definitely need sub-cardinals *OR* the ability to rotate the UV coords passed into the shader. Then you'd only need a single (or multiple for variety) water animation texture set, and you'd use the same 'directionality' system to determine the UV coords for the texture to match it. That involves more math, of course.
 

HayManMarc

Member
I just lost sleep catching up on this thread. I haven't seen it since you made the hats. Where have I been??

I did see your video which was highly entertaining. I'm surprised it hasn't been posted here yet.

So... the water is fantastic, the lizard is wonderful, but my favorite little guys remain to be the copycat penguins and that tough-guy-struttin' frog.

Best of wishes to you and this project! Very inspiring.
 
Top