SlideShare une entreprise Scribd logo
1  sur  35
Télécharger pour lire hors ligne
Wstęp
Elementy składowe
Całość

Programowanie gier 2D
Podstawowe koncepcje

Filip Sobalski

30.03.2011

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Wszystko to iluzja

Cel: Jak oszukać gracza?
Jak uzyskać efekt, który będzie zgodny z wyobrażeniami gracza
najmniejszym nakładem obliczeń i pamięci.

Czyli...
Wszystkie chwyty dozwolone – liczy się tylko efekt.

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Duszki i inne potworności
Sprite

W dosłownym tłumaczeniu znaczy „duszek”. Podstawowy element
graficzny, czyli - w skrócie - obrazek, który zmienia położenie. W nowych
implementacjach to będzie obiekt zawierający także wszystkie informacje
o postaci, potworku czy innym elemencie gry.
Sprite Engine
Odpowiada za rysowanie Sprite’ów, zwykle także za ich animację,
detekcję kolizji, etc... Kiedyś implementowany sprzętowo, teraz
najczęściej przez oprogramowanie.
Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Grafika

1 Wstęp

2 Elementy składowe

Grafika
Ruch
Detekcja kolizji

3 Całość

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Bit blit

Bit-blitting
Blokowy (vide: scanlines) transfer danych z obrazka źródłowego do
docelowego (zwykle bufor graficzny) często z użyciem operatora
rastrowego (ROP). ROP to nic innego jak operator bitowy - AND, OR,
XOR.

Zwykle użyjemy do tego biblioteki korzystającej wyłącznie z CPU (np.
SDL) lub zlecimy rysowanie wyspecjalizowanemu sprzętowi (np.
OpenGL).

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Przezroczystość

maskowanie
Najpierw rysujemy 1-bitową maskę z operacją AND a potem w tym
samym miejscu rysujemy właściwy obrazek z operacją OR. Dany
piksel może być przezroczysty lub nie.
colorkey
Używane przy grafice z paletą. Wybieramy indeks palety, który ma
być przezroczysty i każdy piksel źródłowy o tej wartości jest
ignorowany przy blitting’u.
alpha blending
Dziś to najczęściej stosowane rozwiązanie. ROP zastępujemy
operatorem matematycznym mieszającym kolory z uwzględnieniem
dodatkowego kanału alpha.

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Przezroczystość - maskowanie

Rysunek: 1-bitowa maska

Rysunek: rezultat poszczególnych kroków maskowania
Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Przezroczystość - colorkey

Rysunek: sprite przygotowany do metody colorkey

Uwaga!
Stratna kompresja w przypadku sprite’ów i masek to zło!

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Przezroczystość - alpha blending

Mieszamy składowe piksli w proporcjach określonych przez kanał alfa.
s - piksel źródłowy
d - piksel docelowy
k ∈ {R, G , B}
dk , sk , sA ∈ [0, 1]
blended componentk = dk × (1 − sA ) + sk × sA

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Kolejność rysowania - warstwy

Stała ilość warstw - dla każdej warstwy osobna lista sprite’ów
Dowolna ilość warstw - nr warstwy przypisany do sprite’a
Sortujemy co klatkę. [stabilny algorytm sortowania]
Każdego nowego sprite’a wstawiamy w odpowiednie miejsce. [a’la
insertion sort]

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Viewport clipping
Viewport
Zwykle zdefiniowany przez położenie bezwzględne (w układzie wsp.
świata) i wymiary; określa, który fragment sceny widać na ekranie.
Rysujemy tylko te sprite’y, których aktualne obrazki nakładają się na nasz
viewport. Wygodnie tutaj zastosować bounding box ale o tym później.
Położenie pod którym narysujemy sprite’a to prostu różnica wektorowa
jego położenia i położenia viewportu. Warto jednak wyróżnić sprite’y
których położenie będziemy definiować względem viewportu - użyteczne
do wyświetlania punktacji, ilości naboi etc.
Uwaga
W każdej klatce rysujemy wszystko od nowa. Można rysować tylko to
co zmieniło się od ostatniej klatki, jednak dziś nie ma sensu stosować tej
techniki.
Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Podwójne buforowanie

Podwójne buforowanie razem z synchronizacją pionową (v-sync)
rozwiązuje problem tearing’u.
1

Narysuj w buforze off-screen scenę.

2

Zamień miejscami wartości wskaźników pokazujących na bufor
off-screen i display.

3

Narysuj na ekranie bufor display w momencie kiedy monitor skończył
rysować poprzednią klatkę ale nie zaczął następnej.

W praktyce wszystkim zajmie się biblioteka. Nas interesuje bufor
off-screen oraz musimy pamiętać o wywołaniu funkcji typu SwapBuffers
po narysowaniu sceny.
Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Ruch

1 Wstęp

2 Elementy składowe

Grafika
Ruch
Detekcja kolizji

3 Całość

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Dyskretyzacja ruchu
Jak?
Dlaczego nie ma już w obudowach przycisku turbo?
Lag
Czas w sekundach mierzony od ostatniej klatki.
Skalujemy wszystko przez lag.

Caveat
Nawet jeśli nie rysujemy z podpikslową precyzją wszystko trzymamy we
float’ach! Obcinamy wtedy kiedy potrzebujemy int’a.

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Animacja

frame ← frame + animation speed × lag
Nie obcinamy części ułamkowych!
Zawijamy: (lub odbijamy w przypadku oscylacji)
i f ( f r a m e >= t o t a l f r a m e s )
f r a m e −= t o t a l f r a m e s ;

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Animacja - wyrównywanie klatek

Sposób nr 1
Każda klatka (obrazek) animacji ma tę samą wielkość. Położenie sprite’a
określamy względem stałego punktu obrazka (np. lewego-górnego rogu [0, 0]).

Sposób nr 2
Każda klatka animacji ma określony punkt względem którego będziemy
ją pozycjonować na ekranie - nazwijmy go grab point. Znajdujemy punkt
odniesienia na naszym animowanym obiekcie i jego pozycja w każdej
klatce będzie stanowiła grab point.
Sposób nr 2 jest rozszerzeniem sposobu nr 1.

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Grab point
Ten punkt będzie wydawał się stać w miejscu podczas animacji.

Rysunek: przykładowe umieszczenie gp

Gdzie rysujemy lewy-górny róg sprite’a?
sprite screen pos ← sprite pos − frame gp

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Przemieszczenie
Prędkość to nie problem...
sprite pos ← sprite pos + sprite velocity × lag

Co z przyśpieszeniem?
sprite velocity ← sprite velocity + sprite accelleration × lag
Przykład - grawitacja
sprite velocity ← sprite velocity + (0, gravity ) × lag

Czy widać tutaj jakiś problem?

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Przybliżenie...

Rysunek: 10 FPS
Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Przybliżenie... c.d.

Rysunek: 30 FPS
Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Detekcja kolizji

1 Wstęp

2 Elementy składowe

Grafika
Ruch
Detekcja kolizji

3 Całość

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Bounding box
Szybki test BB vs. BB
Często wystarczy jako jedyna metoda detekcji kolizji
Dobra metoda dla pierwszej fazy (pruning)
Kiepsko aproksymuje kształty.

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Bounding circle
Szybki test BC vs. BC i BB vs. BC
Dobrze nadaje się do aproksymacji tylko niektórych kształtów, np.
pocisków
Dobra metoda dla pierwszej fazy

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Per-pixel collision test
Bardzo powolny test, nawet z bitmaską
Nienaturalny efekt
Ze skalowaniem i obrotem to koszmar
Tylko vs. per-pixel
Tylko do drugiej fazy

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Ograniczenie wielokątami wypukłymi

Relatywnie szybkie
Łatwo dowolnie przekształcić
Tylko do drugiej fazy
Jak? Separating Axis Theorem

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Ograniczenie wielokątami

Co z wklęsłymi?
1

Podziel na trójkąty (tesselacja)

2

Zachłannie łącz z powrotem w wypukłe wielokąty.

3

Dla każdego wielokąta z otrzymanego zbioru wylicz bounding box i
dodaj kolejną fazę...

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Co robimy kiedy nastąpi kolizja?
Przewidujemy kolizję z wyprzedzeniem ;)
Cofamy do poprzedniej pozycji - kiepski efekt przy dużej prędkości
Cofamy się małymi kroczkami wzdłuż wektora przemieszczenia aż
kolizja przestanie zachodzić
Jeśli metoda detekcji pozwala to liczymy wektor „zagłębienia” i
odejmujego go od pozycji. (Wielokąty FTW!)

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Potencjalne problemy

Niski framerate i/lub duża prędkość - jeden sprite przeskoczy drugi.
Nie ma dobrego rozwiązania. Można ruch pomiędzy klatkami
sprowadzić do postaci ciągłej.
Zakleszczenie:
1
2
3

Zmiana klatki animacji na „większą” w trakcie kolizji/zaraz po
cofnięciu. (Częste przy teście per-pixel.)
Błędy zaokrągleń.
Dwa sprite’y poruszające się na raz.

Specjalne przypadki - np. gracz spada na płaską powierzchnię czy
chodzi po niej, ślizganie się, etc.
Niska wydajność.

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Wydajność, wydajność, wydajność...
Naiwne podejście - sprawdzić każdy obiekt z każdym - nieakceptowalnie
powolne przy dużej liczbie obiektów.
Propozycje:
Wykluczyć z testów obiekty dla których detekcja kolizji nam jest nie
potrzebna.
Podzielić obiekty na klasy i wykluczyć z testów pary klas, które na
pewno nie będą kolidować lub włączyć jedynie te pary, których
kolizja nas interesuje.
Indeksowanie przestrzenne - np. quadtrees (octrees w 3D), siatka
obszarów.
Przy skomplikowanych testach dodać więcej faz (ale nie za dużo!).
Liczyć przekształcenia tylko w ostatniej fazie.
Zrezygnować z powyższych sposobów detekcji kolizji jeśli specyfika
gry na to pozwala. ;) (KISS)
Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Grafika
Ruch
Detekcja kolizji

Quadtree

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Ograniczenie ilości FPS

Prosty sposób - sleep/delay w głównej pętli - nie skaluje się.

Uniwersalny sposób - sleep/delay adaptujący się do czasu wykonania
pętli

I zapewne wiele innych...

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Adaptive Frame Limiter

v o i d A d a p t i v e F r a m e L i m i t e r : : onFrame ( )
{
f l o a t d i f f = ( 1 . 0 f / m maxFps ) − m l a g ;
float delay = d i f f + 0.9 f ∗ m lastDelay ;
m lastDelay = delay ;
i f ( d e l a y <= 0 . 0 f ) r e t u r n ;
m pSystem−>d e l a y ( ( d e l a y ∗ 1 0 0 0 . 0 f ) ) ;
}

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Główna pętla
1

Wyczyść bufor graficzny

2

Uaktualnij stan wejścia

3

Uaktualnij timery synchroniczne

4

Wylicz nową pozycję sprite’ów + logika (+zaznacz sprite’y do
usunięcia i zapisz te do dodania)

5

Sprawdź kolizje (+zaznacz sprite’y do usunięcia i zapisz te do
dodania)

6

Usuń zaznaczone sprite’y

7

Dodaj sprite’y w kolejce

8

Narysuj sprite’y

9

Podmień bufory (swap buffers)

10

Poczekaj chwilę aby ograniczyć FPS

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

Więcej?

1

Diagram klas

2

Jakaś demonstracja

3

Kompensujący timer synchroniczny

4

Podsystem wejścia

Filip Sobalski

Programowanie gier 2D
Wstęp
Elementy składowe
Całość

...

Dziękuję za uwagę.

Filip Sobalski

Programowanie gier 2D

Contenu connexe

En vedette

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

En vedette (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

2D sprite engine - basic concepts