How to Create a 3D Game on Scratch

by pedrohenriquelimaabreu in Circuits > Software

24790 Views, 28 Favorites, 0 Comments

How to Create a 3D Game on Scratch

Captura de tela 2020-12-16 173852.png

So, how is it possible to create a 3D game on a 2D gaming platform? in fact, this is still a 2d game, but with the use of a technique called Ray-Casting. So, what is ray-casting, and where did it come from? in the past, when our home computers were unable to process those large amounts of information as they do today, a 3D game was ahead of its time, but in 1992 Wolfenstein 3D was launched by ID software introducing this technique, and in 1993 ID software launched another game called DOOM, which is what most people recognize. The role of ray-casting here is to make a 2D map look like a 3D map. During this step by step, you will understand how it works and creates your own game using ray-casting

Creating a Simple 2d Maze

Captura de Tela (34).png
Captura de tela 2020-12-15 124344.png
Captura de tela 2020-12-15 125008.png
Captura de tela 2020-12-15 125108.png
Captura de tela 2020-12-15 125328.png
Captura de tela 2020-12-15 125153.png
Captura de tela 2020-12-15 125432.png
Captura de tela 2020-12-15 124624.png

(all the images above are in chronological order with the text)

Before the 3d part starts, we need to create a 2d game so then we use ray-casting to give the impression of a 3d game.

First, you just have to create a sprite called "maze" and draw a simple maze. In my case, I just downloaded an image from google and then traced it over using the line tool. the only line of code you need is to centralize the maze on the screen.

PS: small spaces are good to improve performance

then you can clone the maze sprite and call it "Exit". all you have to do here is trace lines on your map in the places you want to end the game, and after that, you can delete the maze(the clone) and only leave the exits. after that, you need to trigger the winning message to display it by using the code above.

Now you write some text for the winning message as a new sprite, and for the code when it receives the win broadcast it shows up.

Finally the for the player itself, you just need to draw a simple small box and then code its movement script. you can use your movement code of choice, in the images above I put a movement script that uses WASD, but you can change for arrows if you want to.

In the end, you should have a simple 2D top-view maze game

Making a Radar

Captura de tela 2020-12-16 170908.png
Captura de tela 2020-12-16 171637.png
Captura de tela 2020-12-16 173056.png
Captura de tela 2020-12-16 173157.png

Now the real fun begins.

ok so, how are we going to transform this 2D game into a 3D game? First, let's imagine that our player has a big rule, and then he starts to measure his distance in relation to the walls in various angles while annotating all of them on a piece of paper. with those numbers, we can use some math to generate an image based on them. and if the player walks one step he makes this process all again.

that is the role of the radar here. Now I will show you how to code the radar.

for the radar, you just need a little dot and some code, in the images above you have the code(image 1) and I will explain here.

First, you create a custom block (pink circle in the block picker) called calc {!IMPORTANT! -when creating the Calc block you MUST SELECT RUN WITHOUT SCREEN REFRESH option otherwise the Radar WON'T WORK (image 2)} we do this to allow the radar to be super fast when calculating the distances.

then you create two variables (distances and angles) and one list (dists) briefly explaining, the radar will point -50 degrees in relation to the player's angle and walk one step and add 1 to distance until it reaches one maze wall or the maximum distance (50). after that, it will save that distance to the dist list and start all over again but now at - 49 degrees. it will do this 100 times (+50 degrees) because -50 + 50 = 100 in this case the field of view of the player will be 100 degrees(50 left 50 right).

to finish you just have to activate that radar, to do this you just have to broadcast a message every time the player moves (see image 4). Now if you want to see the radar in action use the second code above (image 3) to see it (remember to revert to the first code after that).

Final Step - the Render

Captura de tela 2020-12-16 175015.png

I have to say if you made up through here you are lucky this part is very short, the explanation is very big but the code itself is very simple (image above) just remember to set the block to run without screen refresh. Ps, this sprite doesn't need to paint anything you only need code.

the short version of the explanation is the sprite will draw thicker, taller, and brighter lines when the distance calculated by the radar is closer and thinner, shorter, and darker lines when the distance is closer.

Credits, Fonts, Study Materials and More

The video that I based my project:

The video that the video I saw was based (you don't read wrong):

a more complex project (and more interesting too)(not by me):

https://scratch.mit.edu/projects/17209672/

My own project:

https://scratch.mit.edu/projects/462580666/

A more deep explanation about ray-casting (please visit):

https://lodev.org/cgtutor/raycasting.html

Final Words

Captura de tela 2020-12-16 173852.png
Captura de tela 2020-12-16 180324.png
Captura de tela 2020-12-16 182553.png

Please remember, this is only the base, from here you can modify it and do what you want like a racing game or a shooter. and even if you don't want to make a whole new game you can simply modify this one like making a compass, like I did in my version (image 1) or reverse light (image 2) or rainbow walls (image 3), a mini-map, a gun, or anything you want just be creative.

My name is Pedro, and I hope you enjoyed this instructable.