This is an old revision of the document!
参看前面的教程基础, 对象创建, 时钟 , 框架层次结构, 动画, 视口与摄像机, 声音与音乐 , 特效。
此教程说明了如何去展示一个 视差滚动(parallax scrolling)。
正如你可以看到的,视角切换本身没有用到特别的代码。
事实上,orx的默认2D 渲染插件将根据你在配置文件中怎么设置对象的属性来帮你设置好视差滚动。
默认情况下,在这个教程里,配置AutoScroll
将被设置为'both',表示两个坐标轴方向上都有滚动。
这意味着当摄像机移动的时候视差滚动将在X,Y两个坐标轴上同时发生。
你可以尝试设置这个值为x,y,甚至可以删掉此配置值。
除了AutoScroll
的属性外,你可以找到DepthScale
属性(深度缩放比)。
这个属性将用来依据对象离摄像机的距离自动的调整对象的缩放。
摄像机视锥体越小,自动缩放将会应用的越快。
你可以尝试将对象定位到摄像机的远&近剪裁平面来获取你感觉合适的视差滚动和深度缩放比。
你可以通过配置文件来改变视差滚动的速度(注释:摄像机移动的速度)。就像平时一样,你可以实时修改它的值并且重新读取配置。
正如你所能看到的,我们的update代码需要简单地移动3D空间里的摄像机就行了。
按下方向键能把摄像机视角按照X轴和Y轴移动,按下control和alt键会让视角按照Z轴移动。
正如前面说的,所有的视差滚动效果将会正常发生,因为所有的对象都已近被合适地处理了。1)
在场景里移动摄像机只需要很少的代码,而且不用去关心任何的滚动效果。2)
你对你想要有多少个滚动平面,以及哪些对象应该被滚动所影响有完全的控制。
最后一点与天空的显示有关。
正如框架教程(frame tutorial)里我们所看到的,我们把天空对象的frame设置为摄像机视角的一个子frame。
这意味着在配置文件里对天空对象位置的设置将总是相对与摄像机位置的相对值。
换句话说,天空将总是跟随着摄像机视角。
当我们把它的深度值设置为默认值1000时,(注释:与视锥矩形的远剪裁平面的值相同)它将会停留在背景中。
As usual, we begin by loading our config file, creating a clock and registering our Update
function to it.
Lastly, we create our Sky
background and all our Cloud
objects.
Please refer to the previous tutorials for more details.
Now let's see our Update
function. First, we get our camera speed from config and update it using to our DT so as not to be framerate dependent.
orxVECTOR vScrollSpeed; orxConfig_SelectSection("Tutorial"); orxConfig_GetVector("ScrollSpeed", &vScrollSpeed); orxVector_Mulf(&vScrollSpeed, &vScrollSpeed, _pstClockInfo->fDT);
Nothing really new so far.
We now need to update our camera move vector depending on the active inputs.
if(orxInput_IsActive("CameraRight")) { vMove.fX += vScrollSpeed.fX; } if(orxInput_IsActive("CameraLeft")) { vMove.fX -= vScrollSpeed.fX; } if(orxInput_IsActive("CameraDown")) { vMove.fY += vScrollSpeed.fY; } if(orxInput_IsActive("CameraUp")) { vMove.fY -= vScrollSpeed.fY; } if(orxInput_IsActive("CameraZoomIn")) { vMove.fZ += vScrollSpeed.fZ; } if(orxInput_IsActive("CameraZoomOut")) { vMove.fZ -= vScrollSpeed.fZ; }
Lastly we apply this movement to our camera.
orxCamera_SetPosition(pstCamera, orxVector_Add(&vPosition, orxCamera_GetPosition(pstCamera, &vPosition), &vMove));
As stated before, there's not even a single line of code to handle our parallax scrolling.
Everything will be done on the config side. We simply move our camera in our 3D
space.
Let's have a look at the config data. First our Tutorial
section where we have our own data.
[Tutorial] CloudNumber = 1000 ScrollSpeed = (300.0, 300.0, 400.0)
As you can see, we have our ScrollSpeed
and our CloudNumber
to control this tutorial.
The ScrollSpeed
can be update on the fly and reloaded with the config file history (by pressing Backspace
).
Let's now see our cloud object.
[CloudGraphic] Texture = ../../data/scenery/cloud.png Pivot = center [Cloud] Graphic = CloudGraphic Position = (0.0, 0.0, 100.0) ~ (3000.0, 2000.0, 500.0) AutoScroll = both DepthScale = true Color = (180, 180, 180) ~ (220, 220, 220) Alpha = 0.0 Scale = 1.0 ~ 1.5 FXList = FadeIn
The two important attributes here are AutoScroll
that activates the parallax scrolling and DepthScale
.
First, the AutoScroll
attribute can take the values 'x', 'y' or 'both'.
This tells on which axis the parallax scrolling will happen for this object.
The parallax scrolling will be rendered accordingly to the object's Z coordinate (ie. its depth in the camera frustum).
The closest the object is to the camera on the Z axis, the faster it will scroll. AutoScroll
default value is none
.
The DepthScale
attribute tells the render plugin wether to scale the object or not accordingly to its Z coordinate.
The closest the object is to the camera on the Z axis, the largest it will be displayed. DepthScale
default value is false
.
Let's now have a look at our sky object.
[SkyGraphic] Texture = ../../data/scenery/sky.png Pivot = center [Sky] Graphic = SkyGraphic Scale = (0.5, 0.004167, 1.0) Position = (0.0, 0.0, 1.0) ParentCamera = Camera
As you can see, we set a ParentCamera
for our Sky
object, meaning our Sky
will be in Camera
's local space (ie. it will move along the camera).
We set it's position to (0.0, 0.0, 1.0)
which means it's centered in the camera space and in the complete background.
When having a ParentCamera
, Scale
and Position
are expressed in parent's space by default, unless explicitely refused by setting UseParentSpace
to false
.
Hence our 'weird' value for the scale. If we had an object made of a single pixel, a scale of (1.0, 1.0, 1.0) would cover the entire parent camera's view.
As our sky.png
bitmap is 2 pixel wide on X axis, we need a scale on X of 0.5.
In the same way, as it is 240 pixel long on Y axis, we need a scale on Y of 1/240 = 0.004167.
Source code: 09_Scrolling.c
Config file: 09_Scrolling.ini