Scratch

Tutorial 1
Understanding 3D and the SpRiTeD 3D Projection Engine


Part 1: A Crash Course in 3D

    The first thing you should realize about 3D in Scratch is that Scratch can't support real 3D, at least not fast enough to make a playable game. To get around this, we have to fake 3D. There are two main ways of doing this.

    The first, and prettiest, way of doing this is making a prerendered sprite with many costumes, each one at a different angle or 3D position. These costumes are then displayed in some order to create a 3D illusion. Here is a sample of what can be achieved if you use this method:



    Looks pretty good, doesn't it? However, this method is extremely limiting, and is basically only useful for making prerendered 3D sprites.

NOTE: If you simply want to make a game where you can move forwards or backwards in 3D, you can just prerender all your scenery. This is ideal for flight simulators, moving in straight tunnels, etc. But for more complex games, that simply won't do.

    Later, we'll talk about combining prerendered sprites with the SpRiTeD engine to create a better 3D illusion.



    The second way to display 3D objects, which is the basis of the SpRiTeD engine that we will be using for these tutorials, is 3D projection. 3D projection uses math to calculate an object's 2D position from a given 3D position.
    In a 2D space, objects can only move in two directions; X and Y. The X axis goes left/right, and the Y axis goes up/down. However, in a 3D space, an extra axis is added; the Z axis. The Z axis goes forwards and backwards.
    Scratch only knows the X and Y axis. To push Scratch into 3D, we have to create the Z axis, or at least make it look like the Z axis is there. 3D projection is how we will do that. There are two main ideas behind 3D projection, which will be described below.


1) Objects and distances look smaller as they get farther away

    In real life, you've probably noticed how as things get closer to you, they seem to get bigger. Likewise, as they move away, they seem to get smaller. Of course, the objects aren't really getting bigger or smaller; your eye just sees it that way. The same thing also applies to distances. For example, take this picture of a 3D plane:



    Notice how the green line, which is farther away on the Z axis, appears to be smaller than the red line, which is closer to you. The real distances are the same, but the green line looks smaller because it is farther away from you.

2) Perspective distortion and obstruction

    You might also notice something else in this 3D plane. As the lines get farther away from the center, they get more skewed. This skewing is known as perspective distortion.
    Also, another important factor in 3D is obstruction. This simply means that closer objects come first. If a red cube is behind a blue ball, and the blue ball is closer to you, then you won't be able to see all of the red cube.


    This might seem really complicated to you, and most of it is probably because I suck at explaining things. You don't really need to know the concepts behind the SpRiTeD engine to make games, but if you want to take your games to the next level you'll definitely need to understand this. It's like how you don't need to know about variables to use Scratch, but so much more can be done with them.


    Now that we've gotten the explanation over with, let's see a sample of what the SpRiTeD engine can do!



    All credits for this image go to Seijino-san. He also innovated when making this, and made some tank sprites at different angles to exemplify the 3D illusion. I think this looks impressive! This was made before camera rotation and panning were added, too.



Part 2: Breaking Down the SpRiTeD 3D Engine

    At this point, you'll need to download the SpRiTeD 3D engine from the website. It can be found here:

    http://scratch.mit.edu/projects/S65/182441

    This engine is still pretty basic in general, but very advanced for Scratch. It supports camera rotation and panning, solid objects, and side-stepping so far. This engine is not a game; it is just the framework you can use to create your own 3D game, which is just what we will do in the following tutorials. This section will probably be harder to understand, but if you can understand the code, working with the engine should be a breeze. (Even if you can't, it'll still be a breeze, I promise.)

    Let's break down the code for the 3D projection system. Go to the “Basic Sprite"  and find the really long script that contains the following code:

                set scaleRatio to focalLength / focalLength + finalZ
                set x to finalX * scaleRatio
                set y to finalY * scaleRatio
                set size to 100 * scaleRatio%

                if finalZ > ZOrder 
                    go back 1 layers
                else
                    go back -1 layers

                set ZOrder to finalZ

We'll ignore the trigonometry in the beginning for now. That part is for camera rotation, so sprites rotate along with the camera and add to the 3D effect; this will come in a later tutorial. The whole projection script will probably never need to be changed except when I update the engine for more features anyway. The code above is probably the most important part of the 3D projection system, and the simplest part too.

NOTE: “focalLength"  is a constant value that is set at the beginning of the Camera sprite, and never changes (unless you want to make it change!). The value used for the engine is 300. Setting the focalLength to a low number is like zooming out, and setting it to a high value is like zooming in.

                set scaleRatio to focalLength / focalLength + finalZ
                set x to finalX * scaleRatio
                set y to finalY * scaleRatio
                set size to 100 * scaleRatio%

This part of the script handles perspective distortion and scaling. The way this works is, the scaleRatio is calculated from the Z position of the sprite (after accounting for camera rotation) and the focal length. This is done in such a way that as the object gets farther away, the scaleRatio gets lower. The final X and Y values are multiplied by the scale ratio to get the screen positions. Due to the property of the scale ratio mentioned earlier, this results in the perspective distortion effect (skewing the X/Y positions). The size of the object is also set here, to 100 times the scale ratio.

                if finalZ > ZOrder 
                    go back 1 layers
                else
                    go back -1 layers

                set ZOrder to finalZ

This function accounts for obstruction, and does it in an ingenious way. Basically, each sprite sets a variable called ZOrder to its final Z position. The next sprite then compares its Z position with the ZOrder, to see if it should be in front or behind that sprite. Since the calculations are happening at the same time, what happens is that each sprite's Z position is compared with each other sprite's Z position, and the proper order is made.

IMPORTANT: A glitch in the engine which I still haven't been able to fix: the ordering can mess up if two sprites are at the exact same Z position. Try not to give two sprites the same initial Z position when working with the engine.

    You probably won't understand most of what I just talked about. But that's okay. If you only understood 25% of the logic, that's still a good start. Try reading and rereading this section; it can be a lot to take in all at once, especially if you're new to 3D.



Summary

    In this section, you learnt about different ways of faking 3D in Scratch. You also delved into the basics of 3D projection, and were told about the logic behind the SpRiTeD 3D engine's projection. In the following tutorials, we will use the SpRiTeD 3D Engine to make basic scenes, animations, and games.

Last edited by S65 (2008-06-06 22:33:45)

Bluestribute wrote:

I kinda get it

That's good! I suck at explaining things, especially complex things like this =P

Last edited by S65 (2008-06-06 22:25:31)

Tutorial 2
Making Simple Scenes with the SpRiTeD 3D Projection Engine



    Last tutorial, we learnt the basics of 3D projection, and broke down the code of the SpRiTeD engine. In this tutorial, we will use the SpRiTeD engine to create a basic 3D scene, with nonmoving 3D sprites and a camera that can move, rotate, and pan.

    If you haven't already downloaded it from the last tutorial, the SpRiTeD 3D Projection Engine can be downloaded from here. Even if you have, you should redownload it, because I fixed a major Z-ordering bug and updated the project.

    Link to engine

   
Two Rows of Cats

    The SpRiTeD 3D engine project comes with two basic sprites; a “Basic Sprite"  and a “Camera" . The Camera sprite is, as you can probably tell, the first-person camera; it is your viewpoint in the game. The Basic Sprite is the framework for a 3D sprite, and the scripts that it contains will need to be in every sprite. Always start your new sprites by making a clone of the Basic Sprite.

    We already broke down the hard math of 3D projection in Tutorial 1. Let's take a look at something much simpler; the initial variables.

when green flag clicked
        set X to -100
        set Y to 0
        set Z to 200
        set Solid? to 0
        set CollisionRadius to 45

Pretty simple, don't you think? The first 3 lines set the X, Y, and Z positions. The 4th line sets the solidity of an object (1 is solid, 0 is not solid), and the 5th line sets the object's collision radius (how close you need to get to it in order to collide with it).

    We're going to make a 3D scene with two rows of cats, one on each side. We can do this by just changing the initial variables. Make 2 copies of the Basic Sprite, so you have 3 sprites in total. Don't change anything, and then run the program.



    Nothing looks changed, does it? That's because each sprite is still occupying the exact same position! Let's fix that, and make it so that, from the first sprite, each sprite goes forward 100 in Z. To do this, change one of the sprites' Z to 200 and one of the sprites' Z to 100. When you're done, it should look something like this:



    Now we have one row of figures. We just need to make the other one! Luckily, making one more row is just as simple as making this one.

    Clone each of the three cat sprites once, so you have six sprites total. Then go to the three new sprites, and change their X to 100. Since the X of the other row is -100, this makes the two rows be on opposite sides; basically, a mirror image.

    Your final X, Y, and Z positions should be these:

    
    X = -100
    Y = 0
    Z = 300

    X = -100
    Y = 0
    Z = 200

    X = -100
    Y = 0
    Z = 100



    X = 100
    Y = 0
    Z = 300

    X = 100
    Y = 0
    Z = 200

    X = 100
    Y = 0
    Z = 100

Now, after you make sure you've got all the right positions, run the program. The final output should look like this:



    A project containing the final output of this tutorial is also located here:

http://scratch.mit.edu/projects/SpRiTeD_3D_Tutorials/182930


    I hope you understood this tutorial, because I kinda suck at explaining things like I said before. If you do, then try to play around with this; maybe import different sprites, position them at places, etc. to make a scene.

    A sample scene that someone else created can be located here. This was made with an early, very basic version of the engine that I posted earlier as my 3D Sprite Demo.

Sample Scene






Summary

    In this tutorial, we learnt about the SpRiTeD engine's X, Y, and Z positioning, and made a basic scene with two rows of cats.

    Link to tutorial output:
    Link

Bluestribute wrote:

One thing though: You never explained how the variable Z effects it. All it is is a variable with no purpose, cause I'm pretty sure it affects size

Z is the position moving forwards and backwards. It not only affects size, but it also distorts the X and Y positions. Most other fake 3D projects just have it affect size.

Okay, is anyone actually interested in this? No one except Bluestribute seems to be posting in this topic, and I don't want to keep typing up long tutorials if no one is interested in them. If there's anything you don't understand, ask me about it and I'll try to explain as well as I can.

I'm interseted because there are many advanced techniques in Scratch (scrolling, velocity, Yspeed, etc) and I know most of them. 3D isn't one I know though, so I want to learn it too

I personally, just use graphics to make it look 3-D

Last edited by Bobby500 (2008-06-08 08:13:37)

This is very good information for someone trying to get that 3D look in scratch.
I am making a pseudo 3D game in scratch now, which has no where near the realism you are building into your engine.   My game doesn't have any perspective or zOrder.  I just has 3D rendered sprites.  If I decide to do another 3D game, I will probably use your engine or at least parts of it.  This is very good work.

@s65
Please keep going - I just found this thread today (I find the forum doesn't track posts properly in between visits so I miss things if I don't check every day!)

The engine looks very good and your tutorial is very good as well 

regards

Simon

Very cool!  I'm sure this will be very valuable to the community when it starts getting attention.  That will probably happen when someone makes a cool game with it and posts a link to this tutorial.

Last edited by AddZero (2008-06-09 10:25:20)

how come it moves on it's own though?

AddZero wrote:

Bluestribute wrote:

how come it moves on it's own though?

It also has mouse control. just leave the mouse in the middle if you don't want it.... or move it left and right to look left and right.

Right.......