dezvoltarea jocurilor web (o introducere)
DESCRIPTION
A general view regarding Web game development, including most important aspects, architecture, and examples. This presentation is written in Romanian language. For more details, see http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.htmlTRANSCRIPT
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co dezvoltarea jocurilor Web
de la consideratii generale la arhitectura jocurilor Web
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“In order to succeed, we must first believe that we can.”
Nikos Kazantzakis
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cum definim conceptul de joc?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Jocuri
activități sau concursuri guvernate de reguli
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“A game is an activity among two or more independent decision-makers seeking to achieve
their objectives in some limiting context.”
Clark C. Abt
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Focalizarea asupra rolului activ jucat de jucător
activity
jocul reprezintă o activitate, un proces, un eveniment
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Focalizarea asupra rolului activ jucat de jucător
decision-makers
necesitatea ca jucătorii să ia decizii pro-activ
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Focalizarea asupra rolului activ jucat de jucător
objectives
jocurile oferă scopuri de îndeplinit
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Focalizarea asupra rolului activ jucat de jucător
limiting context există reguli ce limitează & structurează activitătile
în cadrul jocului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“A game is a form of art in which participants, termed players, make decisions in order to manage resources through game tokens
in the pursuit of a goal.”
Greg Costikyan
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“A game is a system in which players engage in an artificial conflict, defined by rules, that results in a quantifiable outcome.”
Katie Salen & Eric Zimmerman
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“Game design is the process by which a game designer creates a game, to be encountered by a player, from which meaningful play emerges.”
Katie Salen & Eric Zimmerman Rules of Play: Game Design Fundamentals,
MIT Press, 2004
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co Am putea clasifica jocurile?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
număr de jucători solitare ori în grup (echipă)
scop
câştig (gambling), dobândire de skill-uri,…strategie
obiectiv scor maxim, primul clasat, top 10, unic supravietuitor,…
tematică
racing, lingvistice, deducţie, sportive, acţiune etc.
mijloc/echipament tablă, teren, consolă, mediu virtual etc.
categorie de jucători
copii, adulţi, persoane cu nevoi speciale
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Strategy board games
piesele sunt plasate/mutate pentru a le captura
pe cele ale adversarilor sau a realiza alte scopuri: câştigarea de teritoriu, înlănţuirea sau alinierea pieselor
Chess, Domino, Go, Monopoly, Scrabble etc.
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Role-playing games
fiecare jucător îşi asuma rolul unui personaj având proprietăţi (caracteristici) particulare
eventual, poate exista un jucător principal (gamemaster)
care îndrumă utilizatorii pe parcursul unei partide
Dungeons & Dragons (anii ‘70)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Alte tipuri clasice
card games – precum Bridge, Hearts, Poker, Whist,… chance games – Bingo, Lottery, Roulette
dice games paper & pencil – de exemplu, Tic-tac-toe (X & 0)
puzzles target games – e.g., Bowling, Darts, Paintball
tile games – de exemplu, Mah Jongg
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Jocuri electronice
se bazează pe un mijloc electronic (arcade machine, dispozitiv miniaturizat, sistem
conectat la TV, computer, dispozitiv mobil,…) pentru a facilita desfășurarea unuia sau
mai multor jocuri cu oponenţi umani și/sau contra calculatorului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Jocuri electronice
arcade games
video games
computer games
online games
web games
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Stiluri/genuri de jocuri electronice
(Rollings & Morris, 2004)
Acțiune lots of frantic button pushing
Aventură the story matters
Strategie non-trivial choices
Simulare optimization exercises
Puzzle hard analytic thinking
Amuzament software you just have fun with
Educațional learning by doing
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Clasificare a jocurilor destinate dispozitivelor mobile (Hojin Cho & Jin-Seok Yang, 2010)
mobile game
stil de jucat
turn-based
real-time
scenario-based
conec- tivitate
permanenta
partiala
inexistenta
gen
arcade
jump & run
shooting
puzzle
fight
racing
simulare construction
history
flight
strategie turn-based
real-time
hibrida RPG
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Care sunt cele mai importante aspecte de interes privitoare la jocurile electronice?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
game experience
reacție motorie concentrare – game flow
“mecanică” de bază (core mechanic) narațiune
player roles detalii in
supliment
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
maniera de jucat (game play)
dependenta de “povestea” jocului (story-telling)
reguli condiții – de victorie/infrangere, implicite sau explicite
detalii in supliment
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
tipuri de provocări (challenges)
explicite vs. implicite
perfect informationlogical challenges versus
imperfect informationrealizarea de deducții (inferences)
detalii in supliment
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
tipuri de provocări (challenges)
pattern recognition & matching spatial awareness
micro-management reaction time
detalii in supliment
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
tipuri diverse expuse de jocurile disponibile in cadrul sistemului Web social Google Plus
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
personaje
playable characters personaje ce pot fi “jucate” de utilizator
non-playable characters (NPCs)
personaje independente de jucător, create prin software
detalii in supliment
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
tipuri de personaje
animal fantastic
istoric preluat
mitic
detalii in supliment
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
puncte de vedere (POV – points of view)
first-person POV jucătorul observă acţiunea prin “ochii” avatarului
third-person POV
utilizatorul poate vedea avatarul pe parcursul acţiunii
detalii in supliment
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
modelarea personajelor
proiectarea vizualăpersonalitate, postura, costumaţie
proiectarea verbalădialog, monolog, voce
mişcarea”semnatura”, idle, walking cycle
aspectul socio-cultural
numirea personajelor
detalii in supliment
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
proiectarea vizuala a personajelor animaţie bazată pe sprites – exemplu: Alice Amazed
tehnica des folosita in cazul jocurilor disponibile pe Web
sau pentru dispozitive mobile
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Angry Birds: categorii de personaje si comportamente specifice
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
proiectarea nivelurilor (level design)
ingrediente: acțiune, mod de explorare, rezolvarea unui “mister” (puzzle), narațiune (storytelling), estetica
design general versus “cazuri speciale”
detalii in supliment
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
fiecare scenă în Angry Birds Rio for iPad reprezintă un “caz special”
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
utilizarea inteligenței artificiale
“AI being intelligent” versus “AI appearing intelligent”
tehnicile AI trebuie doar să convingă utilizatorul că entitățile jocului (e.g., NPC) sunt “smart”
detalii in supliment
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
utilizarea inteligenței artificiale (Rouse, 2005)
provocarea jucătorului challenge the player
modelarea comportamentului NPC not do dumb things
realizarea impredictibilității be unpredictable
suport în derularea narațiunii assist storytelling
crearea unei lumi credibile create a living world
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Clasificarea datelor (classification) rețele neuronale, logici fuzzy, data mining etc.
Simularea sistemelor biologice (life systems)
algoritmi genetici, algoritmi sistolici,…
Găsirea drumului (pathfinding)
BFS, DFS, Dijkstra, euristici – e.g., metoda A*
Luarea de decizii (decision making)
automate, arbori de decizie, sisteme bazate pe reguli,…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Care este ingineria dezvoltării jocurilor?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Introducere
concepte & aspecte de interes
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Game creative design vs. game software design
cerinte, procese, asteptari, echipe diferite
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Structura echipei
www.mobilegamearch.eu
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Introducere
conform John P. Flynt, Omar Salem, Software Engineering for Game Developers, Thomson, 2005
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Planificare
fazele principale ale dezvoltarii unui joc electronic
pentru detalii, vezi suplimentul
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co Componente (sub-sisteme) primare ale unui joc
(Rollings & Morris, 2004)
User interface Bidirectional event handler
Data engine (graphics, level, miscellaneous data) Dynamics system (collisions & general physics)
Logic engine (the heart of the game) Graphics engine
Sound engine Hardware abstraction layers
(interfaces with graphics, sound & controller hardware)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Sub-sisteme secundare ale unui joc electronic
Game configuration system Menuing system
Online instructions and help system Music system
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Introducere
arhitectura generica a unui joc electronic (B. Lau et al., 2006)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Necesitatea unui nucleu (game kernel)
abordari: vizand exclusiv clientul – uzual, navigatorul Web
single-threaded, monolithic
multi-threaded, co-operative/pre-emptive (e.g., folosind WebWorkers)
adaptare dupa Marcin Chady (2011)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
// bucla principala a unui joc Web
while (true) {
// preluam date de la utilizator si/sau de pe retea
input_data_from_user_and_network ();
// actualizam starea jocului (simulam lumea lui),
// inclusiv verificand conditiile de victorie/esec
simulate_game_world ();
// redam continutul vizual 2D ori 3D
render_content ();
// generam efecte sonore conform starii
generate_sound_effects ();
}
adaptare dupa Marcin Chady (2011)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Necesitatea unui nucleu (game kernel)
abordari: recurgand la paradigma client/server
(Ajax/Comet, server-side events, WebRTC, paralelism,…)
exemple tipice: jocuri multi-user, MMORPG
adaptare dupa Marcin Chady (2011)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
procesare paralela pe baza divide-et-impera adaptare dupa M. Zamith et al. (2011)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
bucla principala a unui joc Web in retea (cloud) adaptare dupa M. Zamith et al. (2011)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Necesitatea unui nucleu (game kernel)
de asemenea, se poate recurge la un anumit game engine
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AI
Renderer
3D
Player Model
Sound
audio Resource Loader
Player View
Queue
Façade
Resources
arhitectura conceptuala a unui game engine (adaptare dupa Jeff Ward, 2007)
NPC Model
Externals Model
Internals Model Internals View
Externals View
NPC View
2D
Input
user & network
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Bucla principala de procesare:
pe baza interactiunii cu utilizatorul
si conform unor evenimente privind transferul de date via retea/Web,
se actualizeaza starea jocului si
se genereaza un cadru (frame) de redare a continutului,
eventual anumite efecte sonore
adaptare dupa Marcin Chady (2011)
mouse, tastura, touch, webcam,…
Ajax/Comet, notificari, WebSockets, WebRTC,…
JS clasic, WebWorkers,…
DOM, <canvas>, <video>, SVG, WebGL,…
<audio>, WebAudio API
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co sfericit slovit
sviu
sbolnav
coliziuni
automat descriind comportamentul porcilor verzi
≠lovituri
smort
lovituri letale
angry birds
lovituri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Alte activitati ce pot avea loc:
initializarea/terminarea aplicatiei
managementul la nivel inalt al starii jocului (la nivel de client, in-game, paused)
controlul fluxului jocului la nivel global
actualizarea sub-sistemelor primare/secundare
adaptare dupa Marcin Chady (2011)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
conceptualizarea jocului la nivel inalt (high level game logic)
nucleul jocului (game engine)
componente aditionale (game frameworks & libraries)
sistem de redare (rendering engine)
sistem audio (audio engine)
grafica (2D/3D graphics libs)
sunet (low-level sound libs)
interactiune
I/O
platforma de executie (browser Web)
infrastructura – cloud, masina virtuala, OS, hardware
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co http://jster.net/category/game-engines
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
concepte ale unui joc Web de tip adventure
studiu de caz
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aspecte referitoare la ingineria jocurilor Web
flexibilitate – independenta de navigatorul Web, maniere multiple de interactiune, responsive Web design performanta – alocarea memoriei, flux de date, baterie,…
extindere – noi niveluri, personaje, scheme vizuale,… scalabilitate – de pilda, in contextul jocurilor multi-user
securitate – e.g., acces la date personale, troieni Web etc. maturitate software
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
procesul de dezvoltare in cadrul industriei jocurilor conform (Rollings & Morris)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
D. Moore, No Tears Guide to HTML5 Games (2011) http://www.html5rocks.com/en/tutorials/canvas/notearsgame/
A. Rodrigues, Build your First Game with HTML5 (2011) http://net.tutsplus.com/tutorials/html-css-techniques/build-your-first-game-with-html5/
Gyrostorm, HTML5 Game Development Series (2012) https://www.youtube.com/playlist?list=PL290A4D2398C97186
G. Rodsavas, How to Make A Simple HTML5 Game with Enchant.js (2012)
http://www.raywenderlich.com/23370/how-to-make-a-simple-html5-game-with-enchant-js
Mozilla Game On Resources (2013) https://gameon.mozilla.org/en-US/resources/
E. McGrath, Design A Mobile Game with HTML5 (2012) mobile.smashingmagazine.com/2012/10/19/design-your-own-mobile-game/
tutoriale
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
www.html5gamedevelopment.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co www.html5gamedevs.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co