Scrolling i transformació món-pantalla
======================================

Introducció
-----------

*Scrolling* `1 <http://en.wikipedia.org/wiki/Scrolling>`__
    Desplaçament dels elements de l'escena d'un videojoc (fons, text,
    etc).

Els jocs abans del *scroll*: la tècnica coneguda com `flip
screen <http://en.wikipedia.org/wiki/Flip-screen>`__.

Tipus de scrolling:

-  Scrolling del fons, decoratiu. Ex: Joc d'arcade
   `Galaxian <https://www.youtube.com/watch?v=XhYVcwhSWjI>`__.
-  Parallax scrolling. Ex: joc d'arcade `Moon
   patrol <https://www.youtube.com/watch?v=PU7QmBs0ZI8>`__.
-  Vertical scrolling. Ex: joc d'arcade
   `1943 <https://www.youtube.com/watch?v=Aq5aX1Q4R2g>`__.
-  Side scrolling. Ex: jocs de plataformes tipus `Super Mario
   bros <https://www.youtube.com/watch?v=NcRHqfBhTh4>`__
-  Complet ("8 direccions"). Ex: jocs tipus `The legend of
   Zelda <https://www.youtube.com/watch?v=TUNkD-ys70w>`__

Aquesta llista està ordenada segons la dificultat de programar-ho.

Com programar un scroll decoratiu del fons
------------------------------------------

.. image:: Scroll_circular.png
   :align: center

#. Aconseguir una imatge més ample, en la qual una part, de l'amplada de
   la finestra, estigui repetida.
#. Visualitzar només una secció de la imatge de fons (una
   finestra). En pygame, podem fer que el fons sigui un sprite tota la
   imatge, molt més gran que la pantalla i amb coordenades negatives,
   o bé una imatge petita, que sigui una `subsurface
   <https://www.pygame.org/docs/ref/surface.html#pygame.Surface.subsurface>`__
   de la gran.
#. Fer que quan la finestra arribi a *Tmax*, torni a *Tini*.

Scroll complet: Un món més gran
-------------------------------

El món (escenari, mapa) és més gran que la pantalla. És a dir, els
elements del joc viuen en un món i a la pantalla es projecta una vista
del món.

Transformació món-pantalla (o *window-viewport*)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. image:: window-viewport.svg
   :align: center
   :height: 700

La funció de transformació de coordenades de món a coordenades de
pantalla és una transformació lineal (un canvi de coordenades):
translació + possible escalat. La transformació inversa també.

En 3D la situació i els càlculs es compliquen:
`2 <http://www.songho.ca/opengl/gl_transform.html#example2>`__ ... =>
concepte de
`càmera <http://en.wikipedia.org/wiki/Virtual_camera_system>`__.

Com afecta això al bucle del joc?
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

A partir d'ara, podem entendre que el fons és el món i que **tots** els
elements del joc (personatges, obstacles, tresors, .etc.) viuen en espai
de món. Disposen, doncs, de dues representacions: la del món (les seves
coordenades, mida,...) i la de la vista (la seva representació en la
pantalla, potser només una imatge). El fons és un element més del joc:
la representació del mapa.

.. image:: Gameloop.svg
   :height: 400

-  Actualització (*update*) => actualització dels elements, en
   coordenades de món.
-  Visualització (*render*) => visualització dels elements, transformats
   en coordenades de vista.

    - `Clipping
      <http://en.wikipedia.org/wiki/Clipping_%28computer_graphics%29>`__:
      descartar (o tallar) els elements no visibles, per eficiència.

-  Tractament dels events (*processar input* & al.) => en coordenades de
   vista, transformades a coordenades de món.

Cal emmagatzemar la transformació món-pantalla (la càmera). En 2D, la
finestra del món és un rectangle, del qual es poden deduir les funcions
de transformació.

Més d'una vista
---------------

Ara que ja sabem com fer la transformació món-pantalla, no hi ha
problema en obtenir més d'una vista en el joc! Exemples:

-  Joc multijugador => pantalla dividida en dos o quatre...
   `3 <https://www.youtube.com/watch?v=okFBaQd71wg>`__

-  `Mini-map <http://en.wikipedia.org/wiki/Mini-map>`__: Vista en
   miniatura del món (sencer); sovint en una capa superior, com un HUD.

Alguns enllaços interessants
----------------------------

-  `Mètode
   *scroll* <http://www.pygame.org/docs/ref/surface.html#pygame.Surface.scroll>`__
   de les *surfaces* de pygame
-  `Eines, mòduls i jocs de pygame que usen
   scrolling <http://www.pygame.org/tags/scrolling>`__
- `pyscroll <https://pyscroll.readthedocs.io/en/latest/>`__
-  `gummworld2 <https://bitbucket.org/gummbum/gummworld2/wiki/Home>`__