Learn simple three-dimensional from the production of spherical rope

This tutorial comes from "Flash MX 2004 game Development" (Canada, Glen Rhodes, Electronic industry Press).

Preparation: The following three instances of the same components, just different code, components in the library, 40x40 pixel sphere, link name: Sphere

The explanation section of the code is represented in red font

A. Static three-dimensional rope production

The effect is as follows:

Process:

Prepare components for the 1th frame input code in the home scene:

d = 800;
CenterX = 275;
CenterY = 200;

Ang = 0;

for (var i = 0; i<1250; i++) {
var nm = "Sphere" +i;
_root.attachmovie ("Sphere", NM, I);
//We first defined a variable named Ang, initialized to 0, and we will use that variable in the Cnoidal loop body.

Next we created 1250 small balls of MC, the instance name is: Sphere0,sphere1,sphere2,... Wait a minute. We add these MC to the _root and then define their depth level as I, and the depth of the ball is later modified according to their z value to accurately reflect their level.
Next:
_root[nm].x = Math.Cos (ANG) *200;
Ang + 0.2;
_ROOT[NM].Y = 400;
This is the way we create cnoidal. The x position of each ball is set to Math.Cos (ANG) *200, which means that x will be a number between 200 and 200, and then be cycled around. Also add 0.2 to the Ang of each successfully created ball.
Note that the variables x and y are x and y, not _x and _y. Remember that this is the virtual location within the three-dimensional space, not the screen coordinates.

Next:
_root[nm].z = (i*50) +1400;
var zfactor=d/_root[nm].z;
//The first ball will be on (Z axis) 1400, the second one is 1450 .... , next we calculate the screen position of the ball:
_root[nm]._x=_root[nm].x*zfactor+centerx;
_root[nm]._y=_root[nm].y*zfactor+centery;

Next we set the scale of the ball so that the far small ball looks smaller.
_root[nm]._xscale=100*zfactor;
_root[nm]._yscale=100*zfactor;

At last:
_root[nm].swapdepths (Math.floor (100000-_root[nm].z));

}
Why use Swapdepths: This allows the farther object to appear after the object in the nearer. Let's have a lower depth with a higher z value than that.

If we disable the Swapdepths function, we will get the following:
(It looks as if the distant ball is stacked on top of the near ball.)

B. Moving spherical rope

Effect:

Prepare for the same with a,

1th Frame Code:

d = 1000;
CenterX = 275;
CenterY = 200;

Ang = 0;

Function Project () {
if (this.z<40) {
This._visible = false;
}
We have performed an important test here. If the object's Z value is less than 40, we think it's actually behind the user, so we don't have to draw it at all. Imagine the ball approaching us, at what point does it take us to notice the passing of the ball and then to our back side and not see it? In our example, it seems that 40 is a good z-value. Do not use "if" (this.z<40), because when the z value of a small ball reaches 0, it is so infinitely close to the observer that it seems infinitely large. At the z-value of 40, the ball looks quite large and very close, so it can be thought that this is the point where the ball passes us.
Next:
else {
This._visible = true;
var zfactor = d/this.z;
Equivalent to: We make the ball visible when this.z>0 (the ball is not in our rear)
this._x = This.x*zfactor+centerx;
this._y = This.y*zfactor+centery;

This._xscale = 100*zfactor;
This._yscale = 100*zfactor;

This.swapdepths (Math.floor (100000-this.z));
}
}

for (var i = 0; i<40; i++) {
var nm = "Sphere" +i;
_root.attachmovie ("Sphere", NM, I);
_root[nm].x = Math.Cos (ANG) *200;
Ang + 0.2;
_ROOT[NM].Y = 400;
_root[nm].z = (i*50) +d;

_root[nm].project = project; //Add the project function to the small ball MC under the method named Project. Next, simply by calling the Sphere.project () method, you can have the ball change its position, scale, and layer.

_root[nm].onenterframe = function () {

this.y-=3;

This.project ();
};
}
This is where we change the object to dynamic, starting by reducing the Y-value of each ball (not the _y value) by 1, and then calling each ball's project method to make the screen update.

Put the code last: this.y-=3, change to this.x-=3;this.z-=3; try it.

C. Mobile Viewpoint

So far, we've talked about moving the object itself, so let's take a look at how you can move the entire view so that the user's perspective appears to be moving, and the object remains fixed, rather than the user staying fixed and the object moving.

Component: A 40*40 sphere, link name: Sphere

At home scene The first frame code is as follows:

Xoff,yoff,zoff is used to determine where our observers are located.
xoff=0;
yoff=0;
zoff=0;
d=1000;
centerx=275;
centery=200;
ang=0;
Function Project ()
{
if ((This.z-zoff) <40)
{
This._visible=false;
}
Else
{
This._visible=true;
var zfactor=d/(This.z-zoff);
this._x= (This.x-xoff) *zfactor+centerx;//is missing a xoff in the formula in the previous effect because the ball position is now relative to the observer.
This._y= (This.y-yoff) *zfactor+centery;

This._xscale=100*zfactor;
This._yscale=100*zfactor;

This.swapdepths (Math.floor (100000-(This.z-zoff)))//Let the ball near the top.
}
}
The next step is to create a ball ....
for (Var i=0;i<40;i++)
{
var nm= "Sphere" +i;
_root.attachmovie ("Sphere", nm,i);

_root[nm].x=math.cos (ANG) *200;
ang+=0.2;
_root[nm].y=100+math.cos (I/3) *100;

_root[nm].z= (i*50) +d;
_root[nm].project=project;

_root[nm].onenterframe=project;
}
Build a listener to listen for mouse activity.
Mouselistener=new Object ();
Mouselistener.onmousewheel=function (diff)
{
zoff+= (DIFF*50)
}
Mouselistener.onmousemove=function ()
{
Xoff=_xmouse-centerx;
Yoff=_ymouse-centery;
}
Mouse.addlistener (MouseListener);