Blend Modes & Silhouettes | Game Maker Studio 2
HTML-код
- Опубликовано: 4 окт 2024
- In this video we learn about what blend modes and colour channels are, why they're important, and how we can use them to make object silhouettes.
Here I am in other places:
Twitter: / friendly_cosmo
Patreon: / friendlycosmonaut
Helpful blog posts:
www.yoyogames....
www.yoyogames....
Artwork by "Buch" on opengameart: opengameart.or...
-King & Hooded Dude from "A Platformer in the Forest"
-Tiles & Trees from "The Field of Floating Islands"
![Drawing Elements | Menus: GMS2 [P2]](http://i.ytimg.com/vi/Y0XohkeieVg/mqdefault.jpg)
![Concepts & Setup | Cutscenes [1]](http://i.ytimg.com/vi/2CLm38HCP64/mqdefault.jpg)
I like your little "Tips" boxes that are popping up, the notification sound when one does is a nice touch.
Haha thank you! It's usually a result of me watching over the video in the editing progress and thinking "Aw no, I didn't explain that well enough, I need to clarify something..."
If you already know about blend modes, head over to 13:00 as this is when we begin the silhouette stuff.
NOTE: In the video I mention a "depth system" video which unfortunately is still in the works! (I'm re-making my old depth video since it would be better in just *one* video instead of two, as well as including how to use the old "depth = -y" method of depth sorting.)
Also, BIG thanks to Ariak again for talking through this with me and introducing me to the concepts in the first place!!
Haha, sorry I'm not 100% sure what you mean. Do you mean a system that uses a set of blank base sprites for clothes, hair, etc, but allows you to customise the COLOURS?
Sigge look up, spine in game maker. Or spriter will do too, is this what you need?
Ah, okay - then yes! I plan on doing this eventually, though admittedly I think it'll be quite a few videos down the line. :)
FriendlyCosmonaut it will be so cool, love your videos and explanation!
I love the npc dialogue lol very self aware.
This helped me so much! I have been trying to work with blend modes for an hour or two, and I couldn't figure out why the alpha blend modes didn't seem to be working for me. When you got to the part about the alpha-0 rectangle, it suddenly clicked; my test drawings were pulling in alpha values from the pixels behind the object I was drawing! Adding in that alpha mask made everything work perfectly. Thanks again so much for making this video!
Oh that's awesome to hear! Great work :)
Best explanation of blending modes seen so far on youtube ! Thank you !
Your videos are extremely easy to understand and well made, thank you so much for these!
You are the hero this city needs
One of the easiest and useful tutorials Chanel thank.TT
Thank you for this tutorial. Great explaining as always :)
You are awesome!! My new mentor!
Not going to lie, this is one of the most helpful channels I have been across. Thank you for your hard work, keep it up. :)
This tutorial is awesome, and the video is also well edited, love it
These are phenomenal. Love how in depth and clear your explanations are. Easy to follow and instructive. Please keep up the great work!
WOW that was really useful, hope you continue teaching us those advanced stuffs!
This channel is underrated, great videos, you deserve way more subs
Really helpful tutorials guys. Best I've found!
I love your awesome tutorials, you deserve much more subscribers and views! :)
Can you give us some details about your background, who you are, what you do and how you teach yourself this stuff? Getting this in depth knowledge about GMS is kinda hard, usually takes a lot of trial and error if you just started programming indie games. Good guides are kinda rare.
That's why I really appreciate your videos and the time you put in them
Thanks so much!! :)
My areas of study have been quite far removed from programming, to be honest! I studied Biomedical sciences (Physiology) and Philosophy/Literature formally, and when that was finished I just wasn't content with pursuing research. I've always loved games and writing/stories, and in the final few months of Uni, I started looking at game engines. I think I'd been entertaining the thought for quite a while, and as soon as Uni finished, I dove right in to GameMaker. I remember watching a bunch of tutorials from pretty much every other GameMaker youtuber out at the time, reading tonnes of blog posts, the documentation. And I would go over concepts again and again (I've probably re-done movement code about 50 times). That was over a year ago, now!
After a few months of getting the basics down, I'd start experimenting. I'd form an idea in my mind of what to code, and then go about trying to do it for the next few hours/days. One of the most significant things I achieved was probably the depth system, after I was having some trouble with the layers and just thought, "Well, why don't I make something to sort the depth for me?". I think that kind of wild experimentation and going off on your own is when you learn the most. You discover things you didn't know before and apply all of the concepts you've learned.
Also, a user named "Ariak" has also helped me a lot. He corrected a lot of the "bad habits" I'd had and taught me some extremely valuable concepts: using local variables within with statements, optimising loops with data structures, random quirks in the GM engine, etc. So while it's super important to go off and experiment on your own, it's also important to not get tunnel vision and take the time to look at how other people code/review and refactor your code/watch other tutorials. You learn a lot.
And funnily enough, as soon as I personally began reaching out to other people - answering queries on the GM subreddit, or just starting to make RUclips tutorials, and debugging people's issues - I found my knowledge increased exponentially. When you attempt to teach a concept, you become acutely aware of how well you actually know it, and might even stumble across areas you need to touch up on.
So in sum, here's some tips for your learning-to-program journey:
1: Watch/read LOTS of tutorials to get the foundations down. Get lots of error messages. Do lots of debugging. Read the documentation.
2: Experiment on your own. You'll learn a lot once you can code things independently. (This doesn't mean NEVER look at a tutorial: as soon as you hit a wall, hit up google, watch a tutorial, see how others approached it, etc)
3: Be bold and never stop challenging yourself. There's always more to learn, so never be afraid to dive into seemingly "difficult" concepts (shaders, data structures, blend modes, etc). The sooner the better!
@FriendlyCosmonaut
Wow, what a response ^~^
I was 4 semesters into my Bachelor in Business Administration and after hearing from Eric Barone and Stardew Valley, I somehow stumbled up on GMS and become addicted, doing nothing else for 2 weeks straight right before my semester finals :'D
Actually I wanted to switch into computer science class, but due some illness and other circumstances I am doing a sabbatical year now and dedicating myself to game dev.
Mr. Concerned Ape himself *praise the lord* recently responded to me too saying he got his skills from learning Java in school and his programming degree, but I don't even think it limits you in any way or is essential necessary.
I am looking forward to where the journey goes for both of us and even more importantly your first game projects :)))
Hehe yeah sorry about the essay. That's great, you should be able to dive in and learn lots!
I definitely would agree - having a degree and/or prior experience will of course help, but it isn't necessary. The only thing you really need is determination and time. As long as you stick with it and keep learning, you'll make progress.
Good luck! :)
This is so nice! I also dropped from my area (I'm a lawyer) and took a head dive in game development. It's been 3 years now, and even though I'm not making 'moneys' yet, I'm much more engaged and happy than I ever was before. I just think I started a little late, as I'm 32 by now, but you and people like you inspire me to keep going and I hope soon to get somewhere =)
Thanks for your videos! You are awesome!!
That's awesome -- and thank you! Haha, I don't think you can ever be late! I bet the time you've spent in law has given you invaluable knowledge and experience, and made you into a unique developer. I'm sure you've already found it pops up from time to time!
Good luck on your game dev journey :)!
im surprised i didnt see this sooner for GML 1. It has all the required functions etc (with different names), but it definitely made it easier that what i had going with shaders i made XD.
Awesome, I'm glad it translated over well! :)
A really nice and well detailed and explained video.. Been a Big fan since I caught your depth video.
Keep up the grate work !!
What beautiful circles!
Haha, I agree! :)
I use the following quick method for something similar:
in my obj_TreeSprite I have a create event and a step event. Overview: If the player touches a pixel in the obj_TreeSprite layer mask, then obj_TreeSprite will reduce it's own alpha to 0.5 or whatever you want and if the player is not touching again then it sets itself back to alpha = 1.
[[ CreateEvent code ]]
/// @description Depth Correction
depth = y * -1;
[[ StepEvent code ]]
/// @description Collide with obj_Hero or whatever your user object is
if collision_point( x, y, obj_Hero, true, true ){
if(obj_Hero.depth > depth){
image_alpha = 0.5;
}
}else{
if(image_alpha < 1){
image_alpha = 1;
}
}
where did u set the sprite offset in your object?
Timestamps:
15:09 Setup
14:14 gpu_set_colorwriteenable(false, false, false, true) --> function enables us to turn off other channels (toggles what channels we are writing to)
15:30 gpu_set_blendenable(false) --> turns off alpha blending (anything we draw with transparency will be drawn with full opacity)
15:53 The mask: get the start and end of rectangle
16:40 Draw rectangle at alpha of 0: why? Alpha over player will be 0.
17:37 Resetting everything after done drawing
18:13 Draw End event: waiting until everything has drawn itself, then draw the sillhouette
18:40 gpu_set_fog --> originally used for 3D, but we can just enable it then give a color
19:46 Turn the fog off afterwards
19:54 Quick demo (We want sillhouette to appear behind the specific tiles)
21:08 What matters what's already there
21:13 Using our own blend formula
21:39 "No silhouette when masked is undisturbed"
22:32 Use of bm_dest_alpha, bm_inv_dest_alpha, turn it off afterwards
22:47 Quick demo (Now a red rectangle enveloping the entire sprite appears)
23:44 What the colours of the transparent pixels are on our sprite (they're black pixels of RGB 0, 0, 0 with full transparency)
24:07 Turn on "alpha testing" --> a cutoff value at which all alpha values will be set to 0
24:32 Turn off alpha testing afterwards
24:35 The Desired Result
25:05 Implementing two new things: Silhouette shows only behind tiles, and other objects have this functionality too)
25:06 Drawing the rectangle over the entire view now
25:50 obj_silhouette will draw *after* all the other instances have finished drawing
25:53 Create an instance layer above the instance layer, and plop the obj_silhouette there. (Or, the depth sorter object. Refer to 30:43)
26:56 Draw Event in obj_silhouette: cut and paste code in the video from obj_king into this obj_silhouette (27:05 Note: not drawing rectangle over player anymore, we are now drawing the view)
27:51 Get the Draw End code from the obj_kind
28:07 Replace draw_self() [or just use a with statement to draw_self() in obj_king] (code as it is makes the silhouette when behind tiles)
28:45 Make a parent object, with all the objects that you want to have silhouettes
29:07 Quick Demo
29:14 Different coloured silhouettes for different objects
30:33 Quick Demo
30:43 For those who used the other depth sorting method (like myself): draw the mask after the loop through the depth sorting grid is done. Copy and paste code from Draw Event from obj_silhouette into the depthsorter object, place code after the grid loop code. Cut Draw End event code from obj_silhouette, then create a new Draw End Event in depthsorter and paste it there. Make your par_objects a child of the depth sorter object.
31:00 The code that needs to be copied. No need to set up obj_silhouette, and no need to do the switch statement due to inheritance.
Great tutorials, thanks a lot!
top video!
I accidently found your video and subscribed just immediately! Your videos are super useful (even tho, I'm experienced in GML), explanation is very clear and solid.
And My God, how sweet your voice is, I literraly just felt in love ^_^
You are the first and only women, that I've seen in that dev part of community, making tutorials. And for God sake, you are just fantastic! Good luck with that, and from now and forever I'm defenetly staying with you =D
P.S: I'm from Russia, so, don't blame me much about my English, sorry for that)
Haha, thank you! Very glad you found the video useful. Ah yes, hopefully the times are a'changing and more women enter the field. More people developing games can only ever be good! It means there's more fun stuff to play :).
P.S: No worries at all - if I ever suspect English isn't someone's first language, all I feel is jealousy. I can't speak more than one language at all, so props to you!
great video! thank you :)
THANK YOU
I might be very late with this, but is there a way to draw the silhouette over one object without drawing over another while standing on both objects at the same time? I use the depth = -y method
awesome!
this is so good, i watched it all but sadly i cant apply because i did some shenanigans with my shaders and the sillhouete is looking super small, still loved the tutorial.
is there a way to use this system with sprite instead of plain color?
Edit: i want to clarify one thing, I’m trying to adapt your method with a chessboard version which combine one plain color and one with 100% transparent. Is that possible?
Is there a way to make so it affects from just one specific object, instead of tile layers?
and then when it's over the player; the rest of the object's pixels that aren't over the player are invisible.
I'm really kind of new so more advanced blending, and the end result of this looks really great! But from a few silhouette tutorials I've seen in the past it looks as though they implement the use of surfaces? Is this method more optimal than using surfaces? It seems like, considering it checks each pixel and does calculations on each one after determining if it's been overlapped, would it be a bit heavier of a process? Not doubting your methods or anything, just curious :)
Ahh I see where you're coming from - let me clarify: blending is happening ALL the time, even if you never touch blend mode stuff, it'll be doing it under the hood. It's just part of the drawing/rendering process. And it'll just be in the "normal" blend mode, where the factors are the source alpha and inverse source alpha.
We're actually just taking advantage of what would be happening normally - all we really do is add our rectangle mask, then we just let everything draw normally. Then, I suppose the most "costly" part would be when we then have to go and draw all the objects again as silhouettes (as in the drawing itself - the switching to a different blend mode bm_subtract won't matter much).
I can't really say if it's faster than other methods as I'm not sure which one you're referencing! A quick way to check if it's affecting your game much is to use the debugger. Run the game in debug mode (hit F6) and take a look at the FPS counter, or you can even "profile" your game (it's in the "Other" tab down the bottom). Then, comment out the silhouette stuff and re-run the game in debug mode, and see if there's a significant difference.
Holy moly thank you so much for such a descriptive response and so quick! I'll definitely take your advice and check. Really appreciate it, and great channel. Your tuts are great :)
great tutorial. However, for it works only to an extent. When I hide, then it shows the silhouette very clearly, but it also shows me light marron although I am not hiding. But I want it to show me only when I hide and when I not hide, it should return normalcy...please HELP!
Yes.
I just set up a similar system using shaders and layers from the YoYo Dungeon tutorial.
Ooh, awesome! I'll have to have a look at that demo.
It's almost the same system really, but with the option to "turn off" for graphical performance (you know, low/high graphics settings), and uses layers for the mask, so everything you want to have create a silhoutte when you walk behind them is sandwiched between a mask end/begin layer.
So any idea on how you would tackle getting the silhouette to show through the trees as well, in the same manner it's showing through your upper tiles (using the depth = -y method)? I have them on a lower layer depth than my player instances, but I'm not quite sure how to handle that considering my trees are also objects getting their depth based on their -y position. This is an awesome effect, but I'm not 100% sure how to control it just yet. Thanks for any help you can give me.
Hmm I'm not sure you can do this with the current depth system. I could have a play around more when I'm back from my break, but sorry I can't help at the moment!
is it possible to give the silhouette some transparency?
I'm trying to do that but I've been unsuccessful. I know you're post is old but did you ever manage, by any chance ?
I am trying this in gamemaker 2.3(newest one) but when I get to 27:50 when you transfer it to the depthsorter it doesn't work when I put the with statement. My player still has depth but the silhouette doesn't work. I followed it precisely and I'm not understanding why it isn't working. Any ideas?
Hello there Cosmonaut Could we have a real time stragey tutorial in Gamemaker 2 Thanks.
Thanks again, this was great! I implemented this into my project... but I have a question. I have the Drawing Control Object "high" enough to draw the silhouette when I am behind tiles only.. BUT.. I also have a Parallax Scrolling Foreground layer above the Silhouette Drawing Object... Is there a way to have the drawer ignore the Layer above it, so that only the tiles draw the silhouette and not the foreground? Thanks so much.
Ah, you'll want to put the silhouette drawing object in the Instances layer (or in its own layer, one layer above the instances). That way, it'll only "turn on" AFTER the tiles in the foreground (which are above the instances) have drawn themselves.
Thanks for the reply Friendly! I have done as instructed, but the problem is that the Parallax Foreground is still Silhouetting the Player object.. I cant seem to figure out how to only have the tile layer draw the Silhouette and not the parallax layer above it..
Oh okay, then you'll want to draw all of the silhouettes BEFORE the foreground stuff draws. So instead of putting the silhouette drawing code in the "Draw End", you may want to create ANOTHER object and place it in a layer between the Instances and Foreground layer, and have IT run the code.
Hopefully that makes sense, but let me know how you go!
Thanks for sticking with me! I currently have an object running the code in its Draw End Event, like in the video. Right now my room Layers are like this
-- Foreground
--Tiles
-- Silhouette object
--Enemies
-- PLAYER
-- etc.
AS of now, the silhouette draws silhouettes to anything above it. If i put it in between the tiles and the foreground, only the FG draws...
THANKS AGAIN FOR ALL YOUR HELP! I really appreciate it.
thanks but is there a way i can do this with inverted colors?
Where did you get the DialogBox from? Can you give me the link to download it?
If using an additive blend mode, can't the value overload by exceeding 255? Does GML have any kind of error handling in place to just max the value out or would I need to code error handling in for such a thing myself?
Or am I just wrong about it overloading altogether?
Fair question - it will be capped at that 255 value.
I just followed the video along but for some reason when I draw the rectangle it makes my whole screen black.
It seems like the draw_set_alpha in this piece of code doesn't trigger for some reason.
draw_set_alpha(0)
Hmm, that looks right to me. I'd have to see all the code - perhaps a function has been left out or is in the wrong order?
I'd greatly appreciate if you could help me with this.
pastebin.com/BKc6BDGx
This is the depth sorter object.
oParentDepth is the parent object for the objects with silhouettes. It has an empty draw event in it.
@@FriendlyCosmonaut Hey, so I was having the same issue as Sixtehn and could not figure out the problem. Just wanted to let you know that I emailed you my project, I'd appreciate it so much if you were able to help.
Oh 5 years ago nvm...
I kinda like what happened to her voice at 10:22 while saying "for example" :3
May you please add a download
I have followed your instructions and it is not working for me.
It'd probably be easier to just link the code -- here's the pastebin: pastebin.com/GUeg4wGr
INK effect. Help!
Always amazed by the clear and graphical way you have to explain things o.o