Crazy Simple Raycasting E2 - 🎮 How to make awesome 3d games in Scratch
ฝัง
- เผยแพร่เมื่อ 11 มิ.ย. 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
![[Live] : ONE 167 วันนี้!! "ตะวันฉาย vs โจ"](http://i.ytimg.com/vi/D9_dvfIa6Ao/mqdefault.jpg)
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
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 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
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
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
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
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
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 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
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!!!
this is the coolest tutorial ive ever watched on programming. thanks a lot for this video, im having a lot of fun!
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
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
You were the only tutorial that actually worked. Thank you!
This really helped me! I finshed the 3D part! i'll see the other EPS too in 1 day!
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)
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!
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!😁😁😁😁😁😁😁😁
i would never have thought of it on my own. it's so amazing.
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
@@cheating6319 just a little
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 love how I listen to your tutorials bc your voice is so energetic yet calming 😂😂😂😂 Great tutorial btw❤
I will use this tutorial video as a reference to make a game. Thank you! I'm rooting for you!
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
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!
Thanks so much, this helped me a lot! You are the best :)
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!
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!
😇
Your tutorials are really interesting and helpful. Thank you!
Thanks for helping me put the rays on 2 sides of the player!
I love your enthusiasm in this series! These videos are super fun to follow along with :D
Bought membership for this yesterday. And so happy I did!
i was amazed with my results, thanks griff!
I was so happy when I saw the 3D picture, thank you so much!!!
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
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!
thanks you for this series, it helped me make my game mazing in
Bro, you are a life saver, I'm going to make the best 3d maze project ever!
Watching what Griff can do with scratch blows my mind, great work mate.
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
if you dont want to see the dark walls in the background - like a foggy effect, you can change the brightness to transparency and set the values to negative
Not only did this help me with ray casting but also with a projectile to kill enemies!
Amazing Tutorial as always!! Thank you!!! ❤❤❤❤❤
I loved watching the 3D environment slowly take shape over the whole episode. Nice vid 😊
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😁)
Я помню что когда-то я смотрел другой гайд по рей-касту, и там всё было настолько сырое, что даже чем дальше стена тем больше она была на проекции, а у тебя гайды просто класс)
he has such a great way of teaching everyone and he also does this too visually
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 might be one of the most impressive things I've ever seen in my life
this was awesome!!! thanks man!
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
As someone who no longer works in Scratch, this is still some pretty useful knowledge that could translate into really any language / framework
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
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.
Awesome video I've been waiting for the second part for so long!
Hope you enjoyed it!
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.
This video was really helpful!
i love this series!
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
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!
who loves griffpatch?? I DO!! he makes me learn everything in scratch... I love scratch because of him!!
Im a kid and it worked perfectly. amazing. love your scratch videos
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
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
This is sooooooo good thank you for teaching me!!!!!
thank you griffpatch, still helping people learn code
13:50 Is it just me, or whenever griffpatch says “here goes nothing” I get super excited?
x is so fun
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?
you are a genius, best scratcher and tutorial maker
thanks, my friend is asking me to make a 3d, multiplayer shooting game out of scratch. now that is 1/3 stuff done!
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.
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.
you have good perspective. And I did not know you can make 3d walls with the pen!
Thank you griffpatch!
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
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
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 🤯
Its SO FUN!!!(And Eazy)
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)
THANK YOU!!!!!!!!!!!!! be cause of you I did my first 3D game
Your channel is very cool and your explanation is simple
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...
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
I really like this tutorial its cool and easy to follow
THANK YOU SO MUCH ITS AMAZING
Waiting for the next episode where he might show jumping, crouching, using up-down arrow keys to look up and down and more than 2 coloured walls along with lifts which he had in his 3d maze, also 3dentities.
sadly it only showed the new enities
Fortunatley 1 or 2 episodes later they did Jumping@@MariaMartins-pj8mj
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
very usefull the best tutorial for a 3D game thanks
so helpful, you're amzing!
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 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
gotta do trig for GCSE and this is helping. Thanks griffpatch :)
thanks for the very good tutorial
tip: if the colors don't always switch, just put [set pen color to (53)] in the else part of the if/else statement on the single ray custom block.