Crazy Simple Raycasting E2 - 🎮 How to make awesome 3d games in Scratch
ฝัง
- เผยแพร่เมื่อ 19 มิ.ย. 2024
- How to make a simple 3d game (Raycaster) in Scratch. This is part 2 of a short tutorial and we actually create the raycaster. We'll cover projectiles, light rays, Godrays, Wide beam torches with shadows, 3d projection, lens correction, and two colour wall surfaces. I hope you are ready for some serious fun!
Don't forget to submit your projects to the studio linked below by commenting the project URL in the studio comments.
My tutorials are for all budding game & software developers using Code Blocks. Scratch On guys!
👀 Part 3 - • Sprites in a 3D World ...
🔥 Bug Fixes - • Quick Fixes for Raycas...
🚀 Boost Your Creativity with Griffpatch
The Griffpatch Academy will take you from "Gamer to Game Creator"
Learn more at 👉 griffpatch.academy 👈
😺 Scratch was developed by the Lifelong Kindergarten Group at the MIT Media Lab. See scratch.mit.edu
🐱 Scratch Studio for this tutorial - scratch.mit.edu/studios/30945...
👀 Part 1 - • Crazy Simple Raycastin...
👀 Full Episode Playlist - • Crazy Fun Raycasting (...
👀 Quick and Fun Tutorials - • Quick and Fun Scratch ...
❤️ Scratch Addons - scratchaddons.com/
📹 Video Editing Software - techsmith.pxf.io/c/2682566/50...
-------------Video Chapters-------------
0:00 Intro
0:30 Part 2 - Ray Casting
0:53 Firing a Simple Projectile
3:24 Move by 4 - why?
4:13 Don’t overlap the wall
5:13 Run Without Screen Refresh
6:01 Drawing a Ray with the Pen Extension
7:38 Laser Beam
8:27 Flash Light
9:38 Field of View
12:07 3d projection using raycasting
13:49 Coding our first 3d Raycaster
17:35 Hide the Level Map
18:07 Vertical Line Spacing & Resolution
21:20 Depth Shading the 3d Level
22:51 Fix Fisheye Lensing Effect
25:43 Horizon, Floor and Ceiling
27:41 Improving Jitter
29:30 Shaded Walls
34:16 Outro
EPISODE 3 - th-cam.com/video/eBFOjriHMc8/w-d-xo.html
Bug Fixes - th-cam.com/video/vqaKQzZLAes/w-d-xo.html
Channel membership with perks - th-cam.com/channels/awsI_mlmPA7Cfld-qZhBQA.htmljoin
Scratch Studio for this tutorial - scratch.mit.edu/studios/30945983/comments
Why is this comment 6 days old
Why now
@@cubekoss7547Because
16:50 why does 1 line show up i dont know why its happening but its error
Can we play it on iPad and how
I remember looking at griffpatch’s projects on scratch as a kid and being amazed. Now, when I understand everything happening it’s even more amazing
holy crap you're literally everywhere
@Elliot Farnsworth No I am everywhere I'll be commenting on 1 project one second the next I'm commenting on a different one then I take a 1 second to sip my tea and COMMENT EVEN MOREE just kidding I only watch ever video
I didn't know you watch Griffpatch! I love your puzzles
really its work
I am a kid lol
I'm still amazed that a project that uses the touching block can render something complex like this in real time, but it's impressive definitely.
Actually he using the same context that our eye did.our eyes using the touching light to make a prespective.because of that in the dark we almost cant see.
ikr! I would have just implemented the map programmatically, not as a costume and raycasted using maths..
@@afifanimation7396 that's not how depth is measured your eyes are not in the same place so your brain can see the difference and measure the depth. That's why people with one eye or have something in their brain preventing the calculation can't see depth.
@Beany Boi I have never related more than this comment lol
@@afifanimation7396 not really as the rays are coming from light sources and when they bounce they change colours depending on the surface that they touch and then some of those rays end up in your eye
I used raycasting for a platforming game to prevent the player from standing up after crawling if something is right above them. This really helped me out with it
So cool! I love how you not only show us how to make it but you also show how it WORKS!! You are so cool and now I understand actually how this works!
Yay thanks. Yes that's what I like to do :) show how it works!
@@griffpatch 😎😎😎
@@griffpatch uhm- can you show me why my cpu now allways when i run the project i get an error that a web partition is not executable? i mean it wont work....
@@griffpatch my walls showing up half on my screen pls help
I can already see so many games on scratch when they find this amazing tutorial... Absolutely Awesome!
And You can now get your own Silver play button!
fps games would start to be on scratch
I can see rip off's of popular games start to be more advanced now
Griffpatch = Legend
@@arandomperson3117 imma try getting a proper wolfenstein 3D
I'm not even using this as a tutorial, I just love how this guy does their magic
This is true for most videos, as it is entertaining just watching griffpatch use his high knowledge of scratch and show them in tutorials.
@@-_lIl_- It's weird how everyone thinks it's complicated (including me!) until griffpatch explains it. I love how it all comes together and even though it's so complicated it makes so much wonderful sense and logic and I love it 🤩
i thought i was the only one
@@randomMSMtuber Your name is literally Mario Fan 0, but your profile icon is a ghost from Pac-man. What the heck?
@@g4me_mobile66 That was my channel name 3 years ago, but i decided to keep the name handler (the one with the @)
the ray casting makes me think of a top-down view games where you are sneaking into a place and an ai guard has a flash light and if you touch in the light you get caught! also ty for making these tutorials! they are really helpful :D
i would never have thought of it on my own. it's so amazing.
As I said on the last episode, this has so much potential!! I think I'll try implementing a grid list system to let myself have more control over colour, and possibly create a level editor. This has genuinely been the best tutorial series I've ever watched, and I can't wait to see what the community creates with it. Keep Scratching, y'all!
hi chipm0nk!
EGG
gyatte
I have been waiting for this part for a while now, and I am definitely not disappointed! This tutorial is leagues better than the Scratch Wiki one in my opinion :)
Glad you enjoyed it!
I enjoyed the 1st part i hope it's 3d in the second i said that since i haven't seen this episode
@@griffpatch I didn't 🙃
@@brothergodzilla dislike
@@brothergodzilla i would like you to direct me to who asked plz
the reason why I watch Griffpatch tutorials and not tutorials by others is because griffpatch's tutorials are:
- fun
- easy to follow
- easy to understand
- beginner-friendly
- intermediate friendly
- advanced-level friendly
- can make 35-minute tutorials feel like 10 minutes
- it is easy to learn new things from griffpatch's tutorials (I myself learned how to use custom blocks from griffpatch's tutorials)
- make tutorials and videos that are actually useful when making a good game
- makes us understand the tutorial and what we are doing in the tutorial instead of telling us to just copy this and that
- shows how the different pieces of complex code work (like how the cos and sin math functions were used to differentiate x and y when using the move (10) steps block)
- griffpatch's tutorials are worth it in the end
- griffpatch's tutorials work
That's so true I myself have really learned a lot from Griff patch's tutorials
I am American, E S S A Y N O S I M P L E ! ! !
@@InvertedByDefaultso the meme about smartest child in america solving 2+1 was true
WTF IS A KILOMETER?!@@-_lIl_-
Griffpatch teaches things so perfectly, literally anyone can watch it without getting bored or confused, the visual explanations are on point, and the funny thing is, sometimes I'll randomly watch one of his tutorials just for fun due to how entertaining they are
this is the coolest tutorial ive ever watched on programming. thanks a lot for this video, im having a lot of fun!
I started to take Scratch lessons like 1 month ago, and these tutorials will help in the Scratch classes. I love your tutorials!
wait, scratch lessons exist? where can i sign up
@@ChillKillaBeta I think they mean in school
@@ralphralph1346 oh, what schools do this then
Awesome video, imagine instead of using level sprite you used your grid based list! Add maze generation on top of that! Man, lots of great ideas here...
Surely the next step will be drawing sprites though? Would love to see it with your depth sorting project
Ikr, I guess I should consider that :)
Funut why did you delete your videos?
@@funut2541 OMG FUNUT why did you DELETE your CHANNEL!
@@Crafter_100 i dont think he’d wanna delete his videos for no reason. I think something bad happened to make him lose his videos
Dude I just watched this video and saw about 10 new things that I did not know you could do. Keep up the good work griffpatch!!!
Я помню что когда-то я смотрел другой гайд по рей-касту, и там всё было настолько сырое, что даже чем дальше стена тем больше она была на проекции, а у тебя гайды просто класс)
12:06 this raycasting is great, it could be great to use for enemy visions, to make stealth games
I actually did that without even realizing it was an "official" method (albeit a bit simpler)
Yes, I thought of a Hide n' Seek game. But 3D is more likely "not a mistake", ✨ IT'S A MASTERPIECE! ✨
Perfect for horror games also, just set the divisor for distance to 1.
@@AnduTheShadow i thought of making the same thing but with bushes and 2d
@@AnduTheShadow Imagine using star emojis unironically
I'm impressed how scratch can make these things, i thought it was more limited, but your tutorials proved me wrong, keep it going!
what most engines have built-in, on scratch you have to code them yourself. that's part of the charm of it
your tutorials help more than the scratch tutorial videos! i'm making a 3d game and also a top down view game, and i couldn't get it to work until now! Thanks Griffpatch!😁😁😁😁😁😁😁😁
Thanks so much, this helped me a lot! You are the best :)
Tip for decreasing corner flickering: Make player forward and backward velocity a multiple of the ray velocity.
the angle of the ray would make that mot work
@@gabrielfuhr5964 How so?
Corner flicking is problem, but I don’t understand what you said. Can you simplify please?
@@farriswheel3984 Imagine your Player is standing at the coordinates (x: 0, y: 0) and facing right. If the Raycaster moves 4 steps in each iteration than it will verify if there is a wall at the positions (4, 0), (8, 0), (12, 0) and so on (ignore the dimensions of the Raycaster sprite, Scratch's sprite collision detection is not perfect and it's not worth taking it into consideration here).
If we move the Player to the right 2 steps it will be at (x: 2, y: 0) and the Raycaster will now verify if there is a a wall at the positions (6, 0), (10, 0), (14, 0) and so on. This are different positions and it's a big part of what makes the corner flickering.
If instead of moving 2 steps the Player had moved 4 steps, the Raycaster would have verified if there was a wall at the postitions (8, 0), (12, 0), (16, 0) and so on. The same positions it verified before moving.
Let's say there was a corner at (12, 0). It would have been detected when the Player was at (0, 0) but once the player moved, if it had moved 4 steps, the corner would still be detected, but not if the Player moved 2 steps.
You can verify that this will be true for any multiple of the Raycaster velocity.
@@karllospinto Thanks a lot, this helped the flickering!
When I try to make a single ray block, it doesn’t pop up as my block. Could you help me with that?
Just click into another sprite and back and it will appear in your palette as if nothing was wrong!
I seem to have the same problem when attempting to make a custom block tutorial. :|
I have a problem that it show at the side or at the back
there's a glitch in scratch where the my blocks just disappear when you try to make them. simply restart the browser or scratch
Oh it isn't just me this happened yesterday (my time zone)
This really helped me! I finshed the 3D part! i'll see the other EPS too in 1 day!
I love how I listen to your tutorials bc your voice is so energetic yet calming 😂😂😂😂 Great tutorial btw❤
Here's an extra tip to make a nice looking raycaster. Under the "Single Ray" block, you can go down to the "set pen brightness block" and place a "change pen color by" block under it. place ( distance / 20 ) inside, and it will make it so the farther away the wall is the deeper of a color it will be
Okay, I can get behind this idea
this is much better
ok
Its rainbow-ish
@@BrightestEclipse just a little
Thank you Griffpatch for releasing Part 2! I was just making a 3D game, you helped me learn 3D in Scratch
Thank you for this tutorial, it helped me understand a lot about raycasting!
When you are at the flashlight stage I would reccomend making an aditional level costume that is the same but black or whatever color you used for your background to get a cool effect
This was a really fun video. I can't wait to try it myself! I think if this series were to continue (which I really hope it does), I think adding room warps and moving objects would be really cool.
12:07 1024A+256A+128A=2048A!
This is a note for people who are having this problem: I had the issue where my wall colors would show up a little bit on the wrong walls (some walls were 2 colors) to fix this just save the project and refresh Scratch and it should work fine :D
Thanks ❤️❤️❤️
OMG THANK YOU-
thank you
Thank you, didn't even think about it!
@@b3rnardGamingForever you’re welcome
I will use this tutorial video as a reference to make a game. Thank you! I'm rooting for you!
dude, thank you so much. Ive always wanted to make a game like this and i did, thanks to your amazing tutorial. (and i also got a perfect score in my digital tech class thanks😁)
i remember griffpatch from years ago, and being amazed. its wonderful to see this legend is still going
I literally discovered his channel after finding Episode 1 of this two-part series lol
I love your enthusiasm in this series! These videos are super fun to follow along with :D
Not only did this help me with ray casting but also with a projectile to kill enemies!
I was so happy when I saw the 3D picture, thank you so much!!!
As someone who no longer works in Scratch, this is still some pretty useful knowledge that could translate into really any language / framework
Amazing Tutorial as always!! Thank you!!! ❤❤❤❤❤
Your tutorials are really interesting and helpful. Thank you!
i was amazed with my results, thanks griff!
Watching what Griff can do with scratch blows my mind, great work mate.
Hey man, I can't express how thankful I truly am. You are an amazing person making all these tutorials for people, so we can all learn how to make wonderful games! I have told you I think in the first video that I am going to make a game. Well because of you that game that I have always wanted to make is now a reality :D You deserve many more subscribers!
😇
You were the only tutorial that actually worked. Thank you!
I am a kid 11 years and I know mostly of the viewers are kids and copying everything but this series is ❤ really gud😊❤❤❤
"gud"lol
Did u seriously just say "gud" u mean good right😂😂
And u just siad "god"
@@user-fk7gt5yz2pthey're called abbreviations
@@user-fk7gt5yz2pyou literally said "did u seriously", that "u" is an abbreviation.
It's time to redesign my maze 😀
But I don't understand why when '' move 4'' in normal, it's slow, and when it's in "my blocks" So he hits the wall instantly. 5:29
I don't know if you explained it, I don't understand English.
So, although it looks like the projectile hits the wall instantly... in reality, it does take time... just so little that you don't see it happen. Now when we start doing this a thousand times a second to build a 3d scene, that begins to add up and you will find your game begins to drop in framerate... lag more and more. So, the faster we can do our ray casting the better!
I think it is because the box of RUN WITHOUT SCREEN REFRESH is ✅. In normal, the box move 4 steps, show it to you, move 4 steps... but in my blocks, if you tick the run without screen refresh, the box will finish all the tasks in the define section before it show the result i.e. move 4 steps, move 4 steps, move 4 steps... show it to you.
Hope this can help you, but as I am also new, there might be mistakes in understanding the code. 😅
Let me try to explain. The game in Scratch runs at, around, 30 frames per second (fps). In the first case, it will move 4 steps and then wait for the next frame to start. In the second case however, all the blocks in the custom block are forced to run in the one frame, your project will wait for everything in this block to process, and only after that it will render the frame (show you the result). Therefore you won't see how it's all happening in the second case.
What language?
Si hablas español es porque cuando marcas el mover sin refresco de pantalla, el codigo de moverse no se realiza con animacion para mostrarte el movimiento, sino que se ejecuta al instante y no se muestra en pantalla el movimiento
Bought membership for this yesterday. And so happy I did!
Incredible tutorial. Honestly great for a COMPLETE beginner like me. I don't mind starting from scratch (heh) and working my way up. I always wondered how these scratch raycasters worked. I just made it and i'm still so confused lol.
This might be one of the most impressive things I've ever seen in my life
he has such a great way of teaching everyone and he also does this too visually
Finally, I'm so excited to start coding at 1:20am!
Maybe my time zone isn't so good
Oh no sadness... That's too late!!! If only we could share a single timezone LOL
@@griffpatch me in gmt+2 separated from USA: meh, typical
@@griffpatch like your coding but 16:49 its a giving a result as so many lines but not even an angle working
I'm in GMT so I know when he will upload without conversion.
Sounds like the start of an all-nighter.
Thanks for helping me put the rays on 2 sides of the player!
thanks, my friend is asking me to make a 3d, multiplayer shooting game out of scratch. now that is 1/3 stuff done!
I loved watching the 3D environment slowly take shape over the whole episode. Nice vid 😊
Awesome video I've been waiting for the second part for so long!
Hope you enjoyed it!
thanks you for this series, it helped me make my game mazing in
i love this series!
9:47 There's a hidden Appel in the transition. And amazing tutorial!
yes
I thought I hallucinated that for a second, lol
@@lexdoes bruh
Wow! Your editing quality has improved a LOT! I've been watching since I found your video about a scrolling platformer! 1 million subscribers are what you deserve.
Even 1 million are very little for these awesome tutorials
This is sooooooo good thank you for teaching me!!!!!
2:30 I was wondering why my little block was not moving when I was pressing the space key, they I realized that my character is fixed and my map moved rather than my player 😆. Thank you for the tutorial! It really improved my understanding of scratches mechanics and I got to show off to my class, they were mind blown 🤯
for the coloring walls part maybe you could just move the ray right when it collides, check if it's still touching the wall, if yes then move it left, if at any point it's not touching the wall then color it blue
Griffpatch, how do you like the idea of combining 3d with a maze generator?
that would be sicccckkkkkk
very cool
Look up his tutorial for that and instead of making the path colored, make two small rectangles that are colored, i think that'd work
You can't do it because it uses pen
@Keremino me too i forgot touching colours existence and now i lost my maze generation thing
this was awesome!!! thanks man!
This video was really helpful!
Great! What I like about this is that for the game engine, it is still fairly less work and more efficient than other 3d games I have played. Those games get like under 5 fps and are not playable.
Yes!!! I was waiting for part 2 for many hours!!
Sorry it took so long - It's been quite hard to squeeze it all in :D
@@griffpatch Can you make a studio to upload my project when finished?
Yes I will!!! I don't usually make them until the video goes public to avoid people just taking peoples projects and remixing without watching the video and learning about it. As soon as it goes public the link will be shared too :D
Also, you can set the brightness of the backdrop so the background is as bright as the walls!
in depth shading, if you divide distance by 0.1, you feels like you are lost in a dark room, turning the walls red will make it even scarier
I remember making one of these years back in Elementary School for the hell of it. It ran at 3 FPS, but it was my pride and joy.
Never could get enemies working, though, which was a shame.
Sounds great :) such fun right
@@griffpatch It was - but being the overambitious oaf-child I was, though, I set the bar too high and ended up crashing and burning and losing all motivation for a good long time.
I might actually try and resuscitate that project, because looking back at some of the ideas I dumped into a Google Doc, not all of them were terrible concoctions.
Come on, I've been creating variables to get the direction, position, volume..., of another sprite all the time because I was too stupid to find that block😡😂
You have amazing tutorials griffpatch, thank you :D
2:27 when we do that, if we loop it the raycast script, it can be like a representation of the player hitbox! Siveince the player and the raycaster hitbox costume are the same thing.
THANK YOU!!!!!!!!!!!!! be cause of you I did my first 3D game
Are there any raycasters that scan horizontally? I wonder if there was a way to hide the pen lines as a sort of CRT scanlines effect
maybe an easy way is to just ovelay a sprite that looks like the effect over the raycaster.
Why don’t you just make a few costumes on a sprite
Well i did a little fiddling and found that if you put res at 31 it should give small efect like that without doing anything to the code
13:50 Is it just me, or whenever griffpatch says “here goes nothing” I get super excited?
x is so fun
Thank you griffpatch!
Im a kid and it worked perfectly. amazing. love your scratch videos
Hi Griffpatch! This is amazing! I'm just wondering how you would be able to create tunnels (that don't touch the floor and/or reach the ceiling) since the 3D world is being created from a 2D sprite and is a top-down view of the map?
If i was you, I would be estatic to be the one to discover this hidden secret of scratch. Raycasting! Your skill is a natural gift, and you are using it to your best ability by teaching everybody else your knowledge.
Keep on scratching!
-Skippy
should of said"eggstatic"
@@guineapigabomination3293 yeah should have (love the name btw)
We should just appreciate the fact that Griffpatch writes his own captions(I think). :D THANKS!!!
Hey Griffpatch thank you so much because finaly i made a 3d renderer. Thx you so much
Wohoo now I recive notifications for the early acces videos
But I think I don't need them because I go on your channel 4 times a day
The video looks awesome 🤩🔥
Woo-hoo :D So pleased to have you in the membership! Enjoy!
This is why you use circles instead of squares for hitbox checks. Circles are unbiased.
If you want to paint the level, you could just modify the normal level and check if it's touching a particular colour on it. Also we should get light sources in future videos ={^o_o^}=
if you're reading this be verified ✓
pixels are square shaped. if you wanted to make a circular hitbox it would have to be considerably larger and less accurate
@@uwnoodle Better then, use a square and switch it to a pixel once it reaches the wall.
No, wait, we were talking about corner skipping...uh yeah just do something about that to prevent it. Have something that checks for walls in a straight line.
@@FireyDeath4 yea like a square
@@nj7808 Mmm...you know what, actually, no. More like a line with all-around rotation. That would be good.
im having problems with my color thing so im litteraly just going to do that, idc anymore...
thank you griffpatch, still helping people learn code
I love this tutorial because its makes the game a lot better and you barely do any coding its ver short
13:30 I saw the Platformer Character/Guy I think, was this a challenge? It seemed a bit obvious like I was able to see it for a few seconds. Also, the tutorial is so good, prob better than my teacher, (I hope she doesn't find this comment). Keep up the good work!
Griff i have a question i have tried to combine this with your maze generator, and when you erase all in the pen extension it removes my map, is it possible to do something diffrently in either the maze or the raycaster?
YEES I FINALYY FIXED MY ISSUE WITH DRAWING ONLY ONE 3D LINE INSTEAD OF THE WHOLE 3D FOV THING. I HAD TO REWATCH HUNDREDS OF TIMES I CANT DESCRIBE HOW HAPPY I AM
MY PROBLEM WAS SETTING X TO 240 INSTEAD OF -240 such a small mistake
In the next episode, we will probably add jumping, collectables, enemies.
Remember how he said in episode 1 that this series might only be two episodes?
@@amiasmiljour1190 if this was meant in a condescending way, your comment has aged horribly
@@ninjireal lol yeah
@@ChillKillaBetaespecially now that we can jump
I'm trying to do this on python and I'm wondering how to make the raycast "instant" or how to run without screen refresh, please help!
so helpful, you're amzing!
THANK YOU SO MUCH ITS AMAZING
Great tutorial! Learned a lot.
But it would be cool for a tutorial for making platforms, slopes and putting 2D sprites in this 3D world.
(For making enemy's)
Exactly we need this!!!
I would definitely need the 2d sprites! I want to make a shooter game.
@@denbotgaming same bro
So how far can this be taken? could we recreate the original doom? or would stuff like elevated areas and texture projection be to complicated for scratch?
Finlay_Cool has made a doom engine of sorts, and also a functional Wolfenstien clone
Considering even this simple raycasting can run a little slow i dont think full-fledged sector based rendering like doom can run very well
you have good perspective. And I did not know you can make 3d walls with the pen!
gotta do trig for GCSE and this is helping. Thanks griffpatch :)
some problems i have:
1: when my thing collides with the wall the rays go crazy
2: the RES thing is not far enough and squishes if i go high, so does FOV
Spectacular Tutorial, Griffpatch! It’d be cool if you can include a tutorial on how you made 3D laser tag’s platforms and slopes. Awesome series so far though!
I want weapons tho
that is all i need to make my game idea true
need guns
I loved it!
I really like this tutorial its cool and easy to follow