Differences

This shows you the differences between two versions of the page.

--- es:orx:tutorials:scrolling [2012/03/05 06:42 (13 years ago)] – [Detalles] zera
+++ es:orx:tutorials:scrolling [2020/08/19 21:14 (5 years ago)] (current) – Old content sausage
@@ Line 1: / Line 1: @@
-====== Tutorial de Desplazamiento ======
-===== Sumario =====
-Ver los anteriores [[main#Basic|tutoriales básicos]] para más información sobre la [[object|creación básica de objetos]], [[clock|manejo del reloj]], [[frame|jerarquía de fotogramas]], [[anim|animaciones]], [[viewport|cámaras & vistas]], [[sound|música & sonido]], [[FX|efectos(FXs)]] y [[physics|física]].
-Este tutorial muestra como dibujar un [[http://es.wikipedia.org/wiki/Estereoscopía#Paralaje_por_movimiento|paralaje por movimiento]]; [[wp>Parallax_scrolling|parallax scrolling]](EN).
-Como puedes ver, no hay un código especial para el paralaje por movimiento en sí.\\
-Actualmente, el plugin de rendereo por defecto de orx tendrá esto en cuenta por tí, dependiendo de como tu pongas los atributos de los objetos en el fichero de configuración.
-Por defecto en este tutorial, el atributo ''AutoDesplazamiento''(''AutoScroll'') está puesto en 'ambos'('both').\\
-Esto significa que un paralaje por movimiento sucederá en ambos ejes X y Y cuando se muevan las cámaras.\\
-Tú puedes probar a poner este valor a la X, Y o cuando lo remuevas.
-Más allá del atributo ''AutoScroll'', tu puedes encontrar ''EscalaEnProfundidad''(''DepthScale'').\\
-Este atributo es usado para automáticamente ajustar la escala de los objetos dependiendo en cuan lejos están de la cámara.\\
-La cámara truncada más pequeña es, a la que más rápido se le aplicará esta autoescala.\\
-Puedes probar y jugar con el posicionamiento de un objeto y los planos lejos & cerca de una cámara para lograr el desplazamiento deseado y frecuencias de escalado profundo que quieras.
-Puedes cambiar la velocidad de desplazamiento (ej. la cámara se mueve rápido) en el fichero de configuración. Como es usual, puedes modificar su valor en tiempo real y hacer una recarga de la configuración histórica.
-Como has podido ver, nuestra simple actualización de código mueve la cámara en el espacio 3D.\\
-Presionando las flechas se moverá a traves de los ejes X y Y, y presionando las teclas control & alt a través de la Z.\\
-Como dije anteriormente, todos los paralajes por movimiento sucederán porque los objetos han sido marcados apropiadamente.\\
-Tu código meramente necesita mover tu cámara en tu escenario, sin tener ninguna molestia con los efectos de desplazamiento.\\
-Esto te da un control total sobre tantos planos en desplazamiento quieras, y que objetos serán afectados por el.\\
-El último punto concierne al cielo.\\
-Como vimos en el [[frame|tutorial de fotogramas]], ponemos los fotogramas de los objetos como hijos de la cámara.\\
-Esto significa que la posición puesta por el objeto cielo en el fichero de configuración siempre será relativo a la cámara.\\
-En otras palabras, el cielo siempre seguirá la cámara.\\
-Como pusimos ahí, por defecto, a la profundidad de 1000 (ej. el mismo valor de un plano truncado de cámara alejada), el se mantendrá en el fondo(background).
-===== Detalles =====
-As usual, we begin by loading our config file, getting the main clock and registering our ''Update'' function to it.\\
-Lastly, we create our ''Sky'' background and all our ''Cloud'' objects.\\
-Please refer to the [[main#Basic|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.
-<code c>orxVECTOR vScrollSpeed;
-orxConfig_PushSection("Tutorial");
-orxConfig_GetVector("ScrollSpeed", &vScrollSpeed);
-orxVector_Mulf(&vScrollSpeed, &vScrollSpeed, _pstClockInfo->fDT);
-orxConfig_PopSection();
-</code>
-Nothing really new so far.\\
-We now need to update our camera move vector depending on the active inputs.
-<code c>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;
-}</code>
-Lastly we apply this movement to our camera.
-<code c>orxCamera_SetPosition(pstCamera, orxVector_Add(&vPosition, orxCamera_GetPosition(pstCamera, &vPosition), &vMove));</code>
-As stated before, there's not even a single line of code to handle our [[wp>Parallax_scrolling|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.
-<code ini>[Tutorial]
-CloudNumber = 1000
-ScrollSpeed = (300.0, 300.0, 400.0)</code>
-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.
-<code ini>[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</code>
-The two important attributes here are ''AutoScroll'' that activates the [[wp>Parallax_scrolling|parallax scrolling]] and ''DepthScale''.
-First, the ''AutoScroll'' attribute can take the values 'x', 'y' or 'both'.\\
-This tells on which axis the [[wp>Parallax_scrolling|parallax scrolling]] will happen for this object.\\
-The [[wp>Parallax_scrolling|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.
-<code ini>[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</code>
-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. =)
-===== Recursos =====
-Código fuente: [[https://orx.svn.sourceforge.net/svnroot/orx/trunk/tutorial/src/09_Scrolling/09_Scrolling.c|09_Scrolling.c]]
-Fichero de configuración: [[https://orx.svn.sourceforge.net/svnroot/orx/trunk/tutorial/bin/09_Scrolling.ini|09_Scrolling.ini]]

Orx Learning

User Tools

Site Tools

Differences

Page Tools