Tutorial:Cameras (Polski)

Ten poradnik jestłumaczeniem artykułów "Cameras in Love2D" napisanym przez BlackBulletIV.

Oryginalne artykuły (po angielsku)：

• Part 1: The Basics
• Part 2: Parallax Scrolling
• Part 3: Movement Bounds

Część 1. Podstawy

This part will deal with the fundamentals of creating a camera. Part two will deal with parallax scrolling and creating layers. So, let's get to it!

W pierwszej części zajmiemy się podstawami tworzenia kamer.

Funkcje z których będziemy korzystać

• love.graphics.pop
• love.graphics.push
• love.graphics.translate -- translacja/przesunięcie
• love.graphics.rotate -- obrót
• love.graphics.scale -- skalowanie

LÖVE posiada stos przekształceń (geometrycznych), a dokładniej stos [b]informacji o danym przekształczeniu[/b]. love.graphics.push pozwala odłożyć aktualne przekształcenie na stos (pozwala to zapamiętać przekształcenie na później), natomiast love.graphics.pop zdejmuje przekształcenie ze stosu (nadpisując tym samym aktualne przewształceni, tym zdjętym przed chwilą ze stosu).

Na [b]informację o przekształceniu[/b], składają się trzy elementy: przesunięcie, skalowanie i obrót. W trakcie każdej operacji rysowania:

• argumenty x i y przekazywane do funkcji love.graphics.translatesą dodawane do współrzędnych x i y,
• obie współrzędne są mnożone przez argument funkcji love.graphics.scale
• każdy punkt jest obracany względem lewego górnego rogu o kąt podany jako argument do funkcji love.graphics.rotate(w radianach).

Mając te wiedzę możemy stworzyć naszą pierwszą kamerę

function love.draw()
  love.graphics.translate(-x, -y)
  -- właściwe rysowanie poniżej
end

Tutaj funkcja translate modyfikuje aktualne przekształcenie. Stos intormacji o przekształceniach (jak również aktualne przekształcenie) jest resetowany z każdą ramką, więc w każdej ramce, będziemy ustawiać kamerę.

Bardziej kompletna implementacja kamery wygląda następująco:

function love.draw()
  love.graphics.rotate(-obrot) -- w radianach
  love.graphics.scale(1 / skala, 1 / skala)
  love.graphics.translate(-x, -y)
end

zmienne -obrot i -x oraz -y, będą mieć takie wartości, że obiekty, które nie poruszają się wraz z kamerą, zostaną w tyle. (Najczęściej kamera będzie podążać za graczem). Wartości zmiennej skala powyżej 1 będą oddalały kamerę, podczas gdy mniejsze od 1, będą ją przybliżały.

moduł kamery

Uporządkujmy kod do obsługi kamery w moduł

camera = {}
camera.x = 0
camera.y = 0
camera.scaleX = 1 
camera.scaleY = 1
camera.rotation = 0 

function camera:set()
  love.graphics.push()
  love.graphics.rotate(-self.rotation)
  love.graphics.scale(1 / self.scaleX, 1 / self.scaleY)
  love.graphics.translate(-self.x, -self.y)
end

function camera:unset()
  love.graphics.pop()
end

function camera:move(dx, dy) -- przesuniecie kamery o deltę
  self.x = self.x + (dx or 0)
  self.y = self.y + (dy or 0)
end

function camera:rotate(dr) -- obrot kamery o deltę
  self.rotation = self.rotation + dr
end

function camera:scale(sx, sy) -- zmiana skali (względna)
  sx = sx or 1
  self.scaleX = self.scaleX * sx
  self.scaleY = self.scaleY * (sy or sx)
end

function camera:setPosition(x, y) -- zmiana pozycji absolutnej kamery
  self.x = x or self.x
  self.y = y or self.y
end

function camera:setScale(sx, sy) -- zmiana skali (bezwzględnda)
  self.scaleX = sx or self.scaleX
  self.scaleY = sy or self.scaleY
end

Moduł kamery jest tablicą, która zawiera informację gdzie ma być umiejscowiona kamera. Kluczowe są funkcje set i unset. set zmienia aktualne przekształcenie, na informacje zawarte w module kamery (ale wcześniej zapisuje bieżący stan, dzięki czemu moduł kamery będzie w stanie obsługiwać kilka widokow w jednej ramce. unset po prostu przywraca poprzednie ustawienie, korzystając z wspomnianej funkcji pop. Pozostałe funkcje stanowią pomoc przy przemieszczaniu kamery.

Kamery można użyć poprzez następujący kod w callbacku love.draw (Polski):

function love.draw()
  camera:set() -- zaapliwowanie ustawień kamery

  -- właściwe rysowanie

  camera:unset()
end

Natomiast w callbacku love.update (Polski), można zmieniać położenie kamery.

camera.x = 50
camera:scale(3)

mysz

Jeśli chcesz znać pozycję myszy w świecie (czyli względem kamery), będzie trzeba odpowiednio przekształcić współrzędne zwracane przez love.mouse.getX/love.mouse.getY. Mając gotowy moduł kamery, można to prosto zrobić dodając do niego następującą funkcję.

function camera:mousePosition()
  -- przelicza pozycję myszy na ekranie, na współrzędne 'w świecie gry'
  return love.mouse.getX() * self.scaleX + self.x, love.mouse.getY() * self.scaleY + self.y
end

Funkcja ta koryguje pozycję myszy tylko względem przesunięcia i skalowania kamery. W przypadku obrotu, należy uwzględnić przemnożenie przez odpowiedni vector. Zobacz implementacje wektora bibliotece HUMP, by zobaczyć jak to zrobić.

Część 2. Wielowarstwowe przewijanie (parallax scrolling)

"W szczególności paralaksa odnosi się do jednoczesnego obserwowania obiektów leżących w różnych odległościach od obserwatora lub urządzenia obserwującego," - Wikipedia, paralaksa

W efekcie czego, przy poruszaniu się, odnosi się wrażenie, że obiekty położone dalej, poruszają się wolniej.

W tej części zajmiemy się przewijaniem paralakatycznym. Użyta metoda, nie jest najpiękniejsza, ma jedynie stanowić podstawę, dla prób na własną rękę.

Czym jest przewijanie paralakatyczne? To sposób na uzyskanie efektu pseudo-3d, podczas gay cała gra i grafiki są oparet na 2d. To popularna metoda w grach 2d, na dodanie wrażenia głębi, chociaż de facto jej tam nie ma.

Technika którą wykorzystamy by osiągnąć ten efekt nazywana jest metodą warstwową (tłum: stąd bardziej właściwy tytuł części: Przewijanie wielowarstwowe). To co musimy zrobić, to wyrenderować kilka warstw grafik, na które ruch kamery ma wpływ w różnym stopniu. Normalnie na pole gry (tam gdzie znajduje się gracz i gdzie będzie odbywać się cała rozgrywka) ruch kamery będzie miał wpływ w stosunku 1:1 (czyli teren PO którym gracz chodzi i sam gracz będzie się poruszać z taką prędkością z jaką porusza się kamera). Warstwy bliżej kamery niż pola gracza, będą poruszać się szybciej niż kamera, natomias warstwy dalej niż kamera, będą poruszać się welniej (góry w tle, chmury itp.)

Implementacja

Dosyć gadania, czas przystąpić do dzieła. By zaimplementować przewijanie stworzymy dość surowy system warstw, który będzie zarządzany przez kamerę. Oto modyfikacje oryginalnego modułu kamery, jakie musimy zrobić. Na początek, musimy dodać tablicę, która będzie przechowywać warstwy.

camera.layers = {}

Następnie musimy dodać metodę, która pozwoli na dodawanie nowych warstw:

function camera:newLayer(skala, funkcjaRysujaca)
  table.insert(self.layers, { draw = funkcjaRysujaca, scale = skala })
  table.sort(self.layers, function(a, b) return a.scale < b.scale end)
end

skala to wartość przez którą zostaną przemnożone współrzędne kamery przed narysowaniem warstwy. funkcjaRysujaca to funkcja, która będzie odpowiedzialna za rysowanie obiektów w danej warstwie. Musimy również trzymać warstwy posortowane względem skali, tak by te położone dalej (w tle) rysować zanim narysujemy te położone bliżej.

(tłum: niektóre frameworki obsługują 'układanie', w jakiej kolejności ma następować rysowanie, w LÖVE istotna jest kolejność rysowania)

Następnie dodamy taką metodę:

function camera:draw()
  local bx, by = self.x, self.y
  
  for _, v in ipairs(self.layers) do
    self.x = bx * v.scale
    self.y = by * v.scale
    camera:set()
    v.draw()
    camera:unset()
  end
end

Funkcja ta zajmuje się rysowaniem wszystkich warstw. bx,by to "bazowe" współrzędne oryginalnej pozycji kamery. Zwróć uwagę, że przed każdym wywołaniem camera:set i funkcji rysującej (v.draw()), mnożymy bazowe współrzędne kamery przez skalę danej warstwy, dopiero potem przystępujemy do rysowania.

Nasz kod w callbacku LÖVE odpowiedzialnym za rysowanie, będzie bardzo prosty:

function love.draw()
  camera:draw()
end

Szybki przykład

Przygotowałem szybki przykład, by zaprezentować działanie przewijania paralektycznego w praktyce.

require('camera')

math.randomseed(os.time())
math.random()
math.random()
math.random()

function love.load(args)
  -- stworzymy 6 warstw
  -- indeks i, będzie użyty jako skala warstwy
  for i = .5, 3, .5 do
    local rectangles = {}
    
    -- w każdej warstwie będą kwadraty o losowym położeniu
    -- i losowym kolorze
    for j = 1, math.random(2, 15) do
      table.insert(rectangles, {
        math.random(0, 1600),
        math.random(0, 1600),
        math.random(50, 400),
        math.random(50, 400),
        color = { math.random(0, 255), math.random(0, 255), math.random(0, 255) }
      })
    end
    
    -- dodajemy warstwę
    camera:newLayer(i, function()
      -- funkcja rysująca warstwę jest bardzo prosta
      -- rysuje ona wszystkie kwadraty należące do danej warstwy
      for _, v in ipairs(rectangles) do
        love.graphics.setColor(v.color)
        love.graphics.rectangle('fill', unpack(v))
        love.graphics.setColor(255, 255, 255)
      end
    end)
  end
end

function love.update(dt)
  camera:setPosition(love.mouse.getX() * 2, love.mouse.getY() * 2)
end

function love.draw()
  camera:draw()
  love.graphics.print("FPS: " .. love.timer.getFPS(), 2, 2)
end

function love.keypressed(klawisz, unicode)
  if klawisz == ' ' then
    love.load()
  elseif klawisz == 'escape' then
    love.event.push('q')
  end
end

Część 3. Ograniczenia ruchu

Dansk – Deutsch – English – Español – Français – Indonesia – Italiano – Lietuviškai – Magyar – Nederlands – Polski – Português – Română – Slovenský – Suomi – Svenska – Türkçe – Česky – Ελληνικά – Български – Русский – Српски – Українська – עברית – ไทย – 日本語 – 正體中文 – 简体中文 – Tiếng Việt – 한국어
More info