SlideShare a Scribd company logo
1 of 31
The BGA framework at a glance
Intro

The BGA framework helps you to build a online
board game adaptation:
● That will be played in realtime.
● That will be played by several human players.

● That will be played from an internet browser.

● That will have rules enforcement (ie : no possibility to cheat).




This presentation shows at a glance how BGA
framework is working
After reading this presentation, you'll be able to understand how a game is running on the
BGA platform.
We won't go into details, in order you can have a good overview of the platform, and
afterwards immediately understand « which component is doing what ».
Clients & server


                                                    BGA server
                                                     BGA server

Here's an overview of the BGA
architecture.

3 players : Alice, Bob and Charlie
are playing a game on the BGA
server using their web browser.
                                         Alice's
                                          Alice's     Bob's
                                                       Bob's      Charlie's
                                                                   Charlie's
                                        browser
                                         browser     browser
                                                      browser     browser
                                                                   browser
Clients & server


                                                    BGA server
                                                     BGA server


While developing your game logic,
you'll have to work on both server
side and client side.

Let's see what's on each side.

                                         Alice's
                                          Alice's     Bob's
                                                       Bob's      Charlie's
                                                                   Charlie's
                                        browser
                                         browser     browser
                                                      browser     browser
                                                                   browser
The server side

On the server side, you'll find 3
components :                                             BGA server
                                                          BGA server
●   The game database :

This is the current state of the
game (ex : scores, tokens place on
board, which card is where...)

●   The game logic :                           Game         Game           Game
                                              database   logic (rules)   resources
This is the rules of the game. The game
logic ensures that it's not possible to
cheat (« rules enforcement »).

●   The game resources :

This is what's going to be downloaded to
be used by the client browsers (ex :
images, stylesheets, ...).
The client side

                                                Alice's browser
                                                 Alice's browser


On the client side, you'll find the
user interface (UI).

The user interface manage all what
is displayed to the user (ex : « this
token has moved from A to B »),                      Game
and make possible all user actions                    UI
on the game (ex : « a click on this
card plays this card »).
The client side

To do this, you will use 4 different
types of resources :                               Alice's browser
                                                    Alice's browser

●A HTML view which defines the
basic layout of your game UI.

● Some images to display the
game art.                                                 Game
                                                           UI
● A CSS stylesheet which defines
the style and position of elements
of your game UI.

● A javascript script which
defines the mechanisms of your
UI (ex : click on this button trigger    HTML    Images    Stylesheet   Javascript
this action).                             view
Summary : technologies
                       used
 The game database is using MySQL.




 The game logic is using the PHP language.




 The game ressources, used for the user interface, are using :



HTML language                CSS                      Javascript script
  (HTML4)                 stylesheet                (with Dojo framework)
Information flow


                                                    BGA server
                                                     BGA server
Now, let's have a look on how all
these components interact with a
simple example.

Our three players A, B and C are
starting a game together. The name
of this fake game is «mygame ».
                                         Alice's
                                          Alice's     Bob's
                                                       Bob's      Charlie's
                                                                   Charlie's
                                        browser
                                         browser     browser
                                                      browser     browser
                                                                   browser
Creating a new game

                                                   BGA server
                                                    BGA server
As soon as everyone accept to
start the game, your PHP method
« setupNewGame » is called (from
game logic).

This method must setup the initial       ««setupNewGame »»
game situation, as described in             setupNewGame
game rules, ie you have to create
the right SQL statements to
initialize the database according to
the game rules.

This is it, you can now welcome
your players !
                                        Alice's
                                         Alice's      Bob's
                                                       Bob's     Charlie's
                                                                  Charlie's
                                       browser
                                        browser      browser
                                                      browser    browser
                                                                  browser
Loading the game


                                                              BGA server
                                                               BGA server
Alice's browser requests to load the
game with the path :

« /mygame?table=9999 »                 http://boardgamearena.com/mygame?table=9999

Where « 9999 » is the identifier of
the table.
                                             Alice's
                                              Alice's            Bob's
                                                                  Bob's              Charlie's
                                                                                      Charlie's
                                            browser
                                             browser            browser
                                                                 browser             browser
                                                                                      browser
Loading the game

                                                    BGA server
                                                     BGA server




At first, we have to gather all
informations about the current
game situation in order Alice's           ««getAllDatas »»
browser can setup game situation             getAllDatas
on client side.

For this, your « getAllDatas » PHP
method is called.



                                      Alice's
                                       Alice's         Bob's
                                                        Bob's     Charlie's
                                                                   Charlie's
                                     browser
                                      browser         browser
                                                       browser    browser
                                                                   browser
Loading the game

                                                     BGA server
                                                      BGA server




Your getAllDatas method gather all
information Alice can see from the       ««getAllDatas »»==
                                            getAllDatas
game (and not the cards in the
hand of Bob!), and return this data.




                                        Alice's
                                         Alice's        Bob's
                                                         Bob's     Charlie's
                                                                    Charlie's
                                       browser
                                        browser        browser
                                                        browser    browser
                                                                    browser
Loading game

Then, we have to generate for Alice                      BGA server
                                                          BGA server
a classical webpage where she can
play « mygame ». Of course, this
webpage is in classic HTML.

This is the view of the game.

You can use some logic to create                   HTML
some dynamic HTML page, but                      (inc data
most of the time we'll let the client            for Alice)
do the biggest part of the game
setup and return a simple piece of
static HTML here.

Note that the HTML generated
embed automatically the data              Alice's              Bob's     Charlie's
previously generated (in « json »          Alice's              Bob's     Charlie's
                                         browser
                                          browser             browser
                                                               browser   browser
                                                                          browser
format).
Loading the game


                                                   BGA server
                                                    BGA server




The HTML webpage and all
information are returned to Alice...


                                        Alice's
                                         Alice's     Bob's
                                                      Bob's      Charlie's
                                                                  Charlie's
                                       browser
                                        browser     browser
                                                     browser     browser
                                                                  browser
Loading the game


                                                  BGA server
                                                   BGA server



Then, like any classic webpages,
resources are downloaded : your
images, your javascript and your
css stylesheet.

                                       Alice's
                                        Alice's     Bob's
                                                     Bob's      Charlie's
                                                                 Charlie's
                                      browser
                                       browser     browser
                                                    browser     browser
                                                                 browser
Loading the game


Finally, your « setup » javascript                  BGA server
                                                     BGA server
method is called.

In this method, you can use the
data returned by the server
(« Alice data ») to finalize the
game setup for Alice.                                  ««setup »»
                                                          setup
                                         Alice's
                                          Alice's
Ex : wow, Alice starts the game         browser
                                         browser
with 3 money tokens. Let's set her                    Bob's         Charlie's
                                                       Bob's         Charlie's
money counter to « 3 ».                              browser
                                                      browser       browser
                                                                     browser
Loading the game


                                                  BGA server
                                                   BGA server


This is it !

Alice has now a view of the current
game situation, and she's ready to
play.
                                       Alice's
                                        Alice's     Bob's
                                                     Bob's      Charlie's
                                                                 Charlie's
                                      browser
                                       browser     browser
                                                    browser     browser
                                                                 browser
Loading the game


                                                 BGA server
                                                  BGA server



Of course the same thing
happened to Bob and Charlie.

Now, everyone is ready to play!

                                      Alice's
                                       Alice's     Bob's
                                                    Bob's      Charlie's
                                                                Charlie's
                                     browser
                                      browser     browser
                                                   browser     browser
                                                                browser
Making a move


                                                       BGA server
                                                        BGA server
It's Alice turn. She is the « active
player ».

Let say Alice want to play a card,
and then clicks on a card.


                                           Alice's browser       Bob's
                                            Alice's browser       Bob's Charlie's
                                                                         Charlie's
                                                                browser browser
                                                                 browser browser



                                         « clic »
Making a move


                                                       BGA server
                                                        BGA server

During the initial « setup » of the
page, we setup a handler for this
« clic » event for this card.

Let say this handler is a javascript                          «onClicMyMethod»
                                                               «onClicMyMethod»
method call « OnClicMyMethod ».
                                           Alice's browser       Bob's
OnClicMyMethod is called.                   Alice's browser       Bob's Charlie's
                                                                         Charlie's
                                                                browser browser
                                                                 browser browser



                                         « clic »
Making a move


                                                      BGA server
                                                       BGA server


OnClicMyMethod gets the ID of the        /mygame/mygame/playAcard.html?card=99
Alice's card (ex : 99), and send a
request to BGA server at this url :
                                                              «onClicMyMethod»
                                                               «onClicMyMethod»
/mygame/mygame/playAcard.html?
card=99
                                          Alice's browser          Bob's
                                           Alice's browser          Bob's Charlie's
                                                                           Charlie's
                                                                  browser browser
                                                                   browser browser



                                        « clic »
Making a move

                                                          BGA server
                                                           BGA server




On server side, your corresponding                              «playAcard( 99 )»
                                                                 «playAcard( 99 )»
method « playAcard » is called,
with the id of the card played in
parameter.



                                     /mygame/mygame/playAcard.html?card=99


                                           Alice's
                                            Alice's          Bob's
                                                              Bob's          Charlie's
                                                                              Charlie's
                                          browser
                                           browser          browser
                                                             browser         browser
                                                                              browser
Making a move

                                                              BGA server
                                                               BGA server




Your first work, on this method, is to
check if this is a right move :
● Is Alice the active player really ?
                                                                    «playAcard( 99 )»
                                                                     «playAcard( 99 )»
● Can she play a card at this

moment of the game ?
● Does she really have this card in

hand ?
● ...



                                         /mygame/mygame/playAcard.html?card=99


                                               Alice's
                                                Alice's          Bob's
                                                                  Bob's          Charlie's
                                                                                  Charlie's
                                              browser
                                               browser          browser
                                                                 browser         browser
                                                                                  browser
Making a move

                                                          BGA server
                                                           BGA server

Done !

Now, you just have to apply the
rules of the game to the current
situation.                                                      «playAcard( 99 )»
                                                                 «playAcard( 99 )»
Let's say the card played by Alice
gives her 2 money tokens. We write
in the database that she has 2
more money tokens and that her
card is now discarded (and that
                                     /mygame/mygame/playAcard.html?card=99
Bob is the new active player).

                                           Alice's
                                            Alice's          Bob's
                                                              Bob's          Charlie's
                                                                              Charlie's
                                          browser
                                           browser          browser
                                                             browser         browser
                                                                              browser
Making a move

                                                               BGA server
                                                                BGA server
Now, we have to notify all the
players that the situation has
evolved.

Note that we can't notify only Alice
here. All players must be notified                                   «playAcard( 99 )»
                                                                      «playAcard( 99 )»
that she has played a card and got
2 money tokens.

The BGA framework proposes a
simple method to create and send
notifications to players :                /mygame/mygame/playAcard.html?card=99
« notifyAllPlayers ».

Now let's notify all players that Alice         Alice's
                                                 Alice's          Bob's
                                                                   Bob's          Charlie's
                                                                                   Charlie's
got 2 money tokens...                          browser
                                                browser          browser
                                                                  browser         browser
                                                                                   browser
Making a move

                                                             BGA server
                                                              BGA server
                                                                                «playAcard( 99 )»
                                                                                 «playAcard( 99 )»



Let's name our notification
« takeMoneyToken ».

We associate to the notification a                         « takeMoneyToken »
little packet of data saying that the
concerned player is Alice and that
the number of token is 2.

The notification is sent to all         /mygame/mygame/playAcard.html?card=99
players.
                                              Alice's
                                               Alice's          Bob's
                                                                 Bob's             Charlie's
                                                                                    Charlie's
                                             browser
                                              browser          browser
                                                                browser            browser
                                                                                    browser
Making a move


                                                                  BGA server
                                                                   BGA server

Let's have a look on what happend
on Bob's browser.                       …/playAcard.html?...
                                                               « takeMoneyToken »
He receives a « takeMoneyToken »
notification. Automatically, your                                         «notif_takeMoneyToken»
associated javascript method                                               «notif_takeMoneyToken
« notif_takeMoneyToken » is               Alice's                 Bob's browser         Charlie's
called, with arguments saying that it      Alice's                 Bob's browser         Charlie's
                                         browser
                                          browser                                       browser
                                                                                         browser
concerns Alice and that the number
of money tokens is 2.
Making a move


                                                                 BGA server
                                                                  BGA server

… and finally, your
notif_takeMoneyToken just have to      …/playAcard.html?...
increase money tokens number of                               « takeMoneyToken »
Alice by 2 on the web page.

Of course the same thing happens                                         «notif_takeMoneyToken»
                                                                          «notif_takeMoneyToken
on Alice's and Charlie's browser, so
everyone knows that Alice is             Alice's                 Bob's browser
                                                                  Bob's browser        Charlie's
                                          Alice's                                       Charlie's
wealthier.                              browser
                                         browser                                       browser
                                                                                        browser
Making a move


                                                            BGA server
                                                             BGA server

Afterwards, two additional
                                     …/playAcard.html?...
notifications are sent to notify
players that Alice's card has been
discarded and that it's now Bob's
turn.

And this is it : Bob can take some       Alice's              Bob's
                                                               Bob's      Charlie's
action, and so on...                      Alice's            browser       Charlie's
                                        browser
                                         browser              browser     browser
                                                                           browser
Summary


● You know what is managed on the server side, and what is manager on the client
(browser) side.

●   You know which technology is used for each part of the game adaptation.

●You know what happened during basic steps of the game lifecycle : game setup,
page load and making a move.

●You understand the concepts of game database, game view, game action and
notification.

More Related Content

What's hot

Game Design - Monetization
Game Design - MonetizationGame Design - Monetization
Game Design - MonetizationErez Yerushalmi
 
Introduction to Game Development
Introduction to Game DevelopmentIntroduction to Game Development
Introduction to Game DevelopmentSumit Jain
 
Intro to Game Design
Intro to Game DesignIntro to Game Design
Intro to Game DesignGraeme Smith
 
Game Design Document - Step by Step Guide
Game Design Document - Step by Step GuideGame Design Document - Step by Step Guide
Game Design Document - Step by Step GuideDevBatch Inc.
 
Killer Design Patterns for F2P Mobile/Tablet Games
Killer Design Patterns for F2P Mobile/Tablet GamesKiller Design Patterns for F2P Mobile/Tablet Games
Killer Design Patterns for F2P Mobile/Tablet GamesHenric Suuronen
 
Making a Game Design Document
Making a Game Design DocumentMaking a Game Design Document
Making a Game Design DocumentEqual Experts
 
Game development Pre-Production
Game development Pre-ProductionGame development Pre-Production
Game development Pre-ProductionKevin Duggan
 
Game development
Game developmentGame development
Game developmentreittes
 
Game Development workshop with Unity3D.
Game Development workshop with Unity3D.Game Development workshop with Unity3D.
Game Development workshop with Unity3D.Ebtihaj khan
 
LAFS Game Design 6 - Conceptualization
LAFS Game Design 6 - ConceptualizationLAFS Game Design 6 - Conceptualization
LAFS Game Design 6 - ConceptualizationDavid Mullich
 
Game development life cycle
Game development life cycleGame development life cycle
Game development life cycleSarah Alazab
 
10 page pitch for game design
10 page pitch for game design10 page pitch for game design
10 page pitch for game designTom Carter
 
06. Game Architecture
06. Game Architecture06. Game Architecture
06. Game ArchitectureAmin Babadi
 

What's hot (20)

Phases of game development
Phases of game developmentPhases of game development
Phases of game development
 
Game Design - Monetization
Game Design - MonetizationGame Design - Monetization
Game Design - Monetization
 
Introduction to Game Development
Introduction to Game DevelopmentIntroduction to Game Development
Introduction to Game Development
 
Intro to Game Design
Intro to Game DesignIntro to Game Design
Intro to Game Design
 
Game Design Document - Step by Step Guide
Game Design Document - Step by Step GuideGame Design Document - Step by Step Guide
Game Design Document - Step by Step Guide
 
Killer Design Patterns for F2P Mobile/Tablet Games
Killer Design Patterns for F2P Mobile/Tablet GamesKiller Design Patterns for F2P Mobile/Tablet Games
Killer Design Patterns for F2P Mobile/Tablet Games
 
Introduction to Game Design
Introduction to Game DesignIntroduction to Game Design
Introduction to Game Design
 
Game design document
Game design document Game design document
Game design document
 
Making a Game Design Document
Making a Game Design DocumentMaking a Game Design Document
Making a Game Design Document
 
Game development Pre-Production
Game development Pre-ProductionGame development Pre-Production
Game development Pre-Production
 
Game development
Game developmentGame development
Game development
 
Game Development workshop with Unity3D.
Game Development workshop with Unity3D.Game Development workshop with Unity3D.
Game Development workshop with Unity3D.
 
LAFS Game Design 6 - Conceptualization
LAFS Game Design 6 - ConceptualizationLAFS Game Design 6 - Conceptualization
LAFS Game Design 6 - Conceptualization
 
Jago Studios Pitch Deck
Jago Studios Pitch DeckJago Studios Pitch Deck
Jago Studios Pitch Deck
 
Game development life cycle
Game development life cycleGame development life cycle
Game development life cycle
 
Game design - Retention
Game design - RetentionGame design - Retention
Game design - Retention
 
Pong
PongPong
Pong
 
Ten page document
Ten page documentTen page document
Ten page document
 
10 page pitch for game design
10 page pitch for game design10 page pitch for game design
10 page pitch for game design
 
06. Game Architecture
06. Game Architecture06. Game Architecture
06. Game Architecture
 

Recently uploaded

WHO KILLED ALASKA? #18: Mirror Memoria - "TATTOO" TRANSCRIPT.pdf
WHO KILLED ALASKA? #18: Mirror Memoria - "TATTOO" TRANSCRIPT.pdfWHO KILLED ALASKA? #18: Mirror Memoria - "TATTOO" TRANSCRIPT.pdf
WHO KILLED ALASKA? #18: Mirror Memoria - "TATTOO" TRANSCRIPT.pdfOptimistic18
 
Vector Methods.pptxjjjjjjjjjjjjjjjjjjjjjj
Vector Methods.pptxjjjjjjjjjjjjjjjjjjjjjjVector Methods.pptxjjjjjjjjjjjjjjjjjjjjjj
Vector Methods.pptxjjjjjjjjjjjjjjjjjjjjjjjoshuaclack73
 
8th Global Fashion and Design Week Noida 2024 Sets New Standards in Creative ...
8th Global Fashion and Design Week Noida 2024 Sets New Standards in Creative ...8th Global Fashion and Design Week Noida 2024 Sets New Standards in Creative ...
8th Global Fashion and Design Week Noida 2024 Sets New Standards in Creative ...Marwah Studios
 
The Gaming Quiz - 17th April 2024, Quiz Club NITW
The Gaming Quiz - 17th April 2024,  Quiz Club NITWThe Gaming Quiz - 17th April 2024,  Quiz Club NITW
The Gaming Quiz - 17th April 2024, Quiz Club NITWQuiz Club NITW
 
The Ultimate Guide to Choosing the Best HD IPTV Service in 2024.pdf
The Ultimate Guide to Choosing the Best HD IPTV Service in 2024.pdfThe Ultimate Guide to Choosing the Best HD IPTV Service in 2024.pdf
The Ultimate Guide to Choosing the Best HD IPTV Service in 2024.pdfXtreame HDTV
 
C&C Artists' Websites .
C&C Artists' Websites                       .C&C Artists' Websites                       .
C&C Artists' Websites .LukeNash7
 
week 3 questions and answers.phhhhhhhhhhptx
week 3 questions and answers.phhhhhhhhhhptxweek 3 questions and answers.phhhhhhhhhhptx
week 3 questions and answers.phhhhhhhhhhptxjoshuaclack73
 
WHO KILLED ALASKA? #17: Mirror Memoria - "OFFICER" TRANSCRIPT.pdf
WHO KILLED ALASKA? #17: Mirror Memoria - "OFFICER" TRANSCRIPT.pdfWHO KILLED ALASKA? #17: Mirror Memoria - "OFFICER" TRANSCRIPT.pdf
WHO KILLED ALASKA? #17: Mirror Memoria - "OFFICER" TRANSCRIPT.pdfOptimistic18
 
WHO KILLED ALASKA? #15: "5½ STORIES Part Two" Transcript .pdf
WHO KILLED ALASKA? #15: "5½ STORIES Part Two" Transcript .pdfWHO KILLED ALASKA? #15: "5½ STORIES Part Two" Transcript .pdf
WHO KILLED ALASKA? #15: "5½ STORIES Part Two" Transcript .pdfOptimistic18
 
NO1 Pakistan kala jadu Specialist Expert in Quetta, Gujranwala, muzaffarabad,...
NO1 Pakistan kala jadu Specialist Expert in Quetta, Gujranwala, muzaffarabad,...NO1 Pakistan kala jadu Specialist Expert in Quetta, Gujranwala, muzaffarabad,...
NO1 Pakistan kala jadu Specialist Expert in Quetta, Gujranwala, muzaffarabad,...Amil Baba Dawood bangali
 
Vibration Control.pptxjjjjjjjjjjjjjjjjjjjjj
Vibration Control.pptxjjjjjjjjjjjjjjjjjjjjjVibration Control.pptxjjjjjjjjjjjjjjjjjjjjj
Vibration Control.pptxjjjjjjjjjjjjjjjjjjjjjjoshuaclack73
 
在线办理(concordia学位证书)康考迪亚大学毕业证学历学位证书学费发票原版一模一样
在线办理(concordia学位证书)康考迪亚大学毕业证学历学位证书学费发票原版一模一样在线办理(concordia学位证书)康考迪亚大学毕业证学历学位证书学费发票原版一模一样
在线办理(concordia学位证书)康考迪亚大学毕业证学历学位证书学费发票原版一模一样ahafux
 
Abortion Pills In Jeddah+966572737505 & Get cytotec Jeddah
Abortion Pills In Jeddah+966572737505 & Get cytotec JeddahAbortion Pills In Jeddah+966572737505 & Get cytotec Jeddah
Abortion Pills In Jeddah+966572737505 & Get cytotec Jeddahmarufhussain782445
 
the red riding girl story fkjgoifdjgijogifdoin
the red riding girl story fkjgoifdjgijogifdointhe red riding girl story fkjgoifdjgijogifdoin
the red riding girl story fkjgoifdjgijogifdoinkomalbattersea123
 
batwheels_01batwheels_01batwheels_01batwheels_01
batwheels_01batwheels_01batwheels_01batwheels_01batwheels_01batwheels_01batwheels_01batwheels_01
batwheels_01batwheels_01batwheels_01batwheels_01Patricia Pham
 
Title Unlocking Imagination The Importance of Toca Boca for Kids.pdf
Title Unlocking Imagination The Importance of Toca Boca for Kids.pdfTitle Unlocking Imagination The Importance of Toca Boca for Kids.pdf
Title Unlocking Imagination The Importance of Toca Boca for Kids.pdfToca boca
 
Smart-Dustbin-Using-EEEEEEESP32 (1).pptx
Smart-Dustbin-Using-EEEEEEESP32 (1).pptxSmart-Dustbin-Using-EEEEEEESP32 (1).pptx
Smart-Dustbin-Using-EEEEEEESP32 (1).pptxsrajece
 
NO1 Pakistan Vashikaran Specialist in Uk Black Magic Specialist in Uk Black M...
NO1 Pakistan Vashikaran Specialist in Uk Black Magic Specialist in Uk Black M...NO1 Pakistan Vashikaran Specialist in Uk Black Magic Specialist in Uk Black M...
NO1 Pakistan Vashikaran Specialist in Uk Black Magic Specialist in Uk Black M...Amil Baba Dawood bangali
 

Recently uploaded (19)

WHO KILLED ALASKA? #18: Mirror Memoria - "TATTOO" TRANSCRIPT.pdf
WHO KILLED ALASKA? #18: Mirror Memoria - "TATTOO" TRANSCRIPT.pdfWHO KILLED ALASKA? #18: Mirror Memoria - "TATTOO" TRANSCRIPT.pdf
WHO KILLED ALASKA? #18: Mirror Memoria - "TATTOO" TRANSCRIPT.pdf
 
Vector Methods.pptxjjjjjjjjjjjjjjjjjjjjjj
Vector Methods.pptxjjjjjjjjjjjjjjjjjjjjjjVector Methods.pptxjjjjjjjjjjjjjjjjjjjjjj
Vector Methods.pptxjjjjjjjjjjjjjjjjjjjjjj
 
kiff2
kiff2kiff2
kiff2
 
8th Global Fashion and Design Week Noida 2024 Sets New Standards in Creative ...
8th Global Fashion and Design Week Noida 2024 Sets New Standards in Creative ...8th Global Fashion and Design Week Noida 2024 Sets New Standards in Creative ...
8th Global Fashion and Design Week Noida 2024 Sets New Standards in Creative ...
 
The Gaming Quiz - 17th April 2024, Quiz Club NITW
The Gaming Quiz - 17th April 2024,  Quiz Club NITWThe Gaming Quiz - 17th April 2024,  Quiz Club NITW
The Gaming Quiz - 17th April 2024, Quiz Club NITW
 
The Ultimate Guide to Choosing the Best HD IPTV Service in 2024.pdf
The Ultimate Guide to Choosing the Best HD IPTV Service in 2024.pdfThe Ultimate Guide to Choosing the Best HD IPTV Service in 2024.pdf
The Ultimate Guide to Choosing the Best HD IPTV Service in 2024.pdf
 
C&C Artists' Websites .
C&C Artists' Websites                       .C&C Artists' Websites                       .
C&C Artists' Websites .
 
week 3 questions and answers.phhhhhhhhhhptx
week 3 questions and answers.phhhhhhhhhhptxweek 3 questions and answers.phhhhhhhhhhptx
week 3 questions and answers.phhhhhhhhhhptx
 
WHO KILLED ALASKA? #17: Mirror Memoria - "OFFICER" TRANSCRIPT.pdf
WHO KILLED ALASKA? #17: Mirror Memoria - "OFFICER" TRANSCRIPT.pdfWHO KILLED ALASKA? #17: Mirror Memoria - "OFFICER" TRANSCRIPT.pdf
WHO KILLED ALASKA? #17: Mirror Memoria - "OFFICER" TRANSCRIPT.pdf
 
WHO KILLED ALASKA? #15: "5½ STORIES Part Two" Transcript .pdf
WHO KILLED ALASKA? #15: "5½ STORIES Part Two" Transcript .pdfWHO KILLED ALASKA? #15: "5½ STORIES Part Two" Transcript .pdf
WHO KILLED ALASKA? #15: "5½ STORIES Part Two" Transcript .pdf
 
NO1 Pakistan kala jadu Specialist Expert in Quetta, Gujranwala, muzaffarabad,...
NO1 Pakistan kala jadu Specialist Expert in Quetta, Gujranwala, muzaffarabad,...NO1 Pakistan kala jadu Specialist Expert in Quetta, Gujranwala, muzaffarabad,...
NO1 Pakistan kala jadu Specialist Expert in Quetta, Gujranwala, muzaffarabad,...
 
Vibration Control.pptxjjjjjjjjjjjjjjjjjjjjj
Vibration Control.pptxjjjjjjjjjjjjjjjjjjjjjVibration Control.pptxjjjjjjjjjjjjjjjjjjjjj
Vibration Control.pptxjjjjjjjjjjjjjjjjjjjjj
 
在线办理(concordia学位证书)康考迪亚大学毕业证学历学位证书学费发票原版一模一样
在线办理(concordia学位证书)康考迪亚大学毕业证学历学位证书学费发票原版一模一样在线办理(concordia学位证书)康考迪亚大学毕业证学历学位证书学费发票原版一模一样
在线办理(concordia学位证书)康考迪亚大学毕业证学历学位证书学费发票原版一模一样
 
Abortion Pills In Jeddah+966572737505 & Get cytotec Jeddah
Abortion Pills In Jeddah+966572737505 & Get cytotec JeddahAbortion Pills In Jeddah+966572737505 & Get cytotec Jeddah
Abortion Pills In Jeddah+966572737505 & Get cytotec Jeddah
 
the red riding girl story fkjgoifdjgijogifdoin
the red riding girl story fkjgoifdjgijogifdointhe red riding girl story fkjgoifdjgijogifdoin
the red riding girl story fkjgoifdjgijogifdoin
 
batwheels_01batwheels_01batwheels_01batwheels_01
batwheels_01batwheels_01batwheels_01batwheels_01batwheels_01batwheels_01batwheels_01batwheels_01
batwheels_01batwheels_01batwheels_01batwheels_01
 
Title Unlocking Imagination The Importance of Toca Boca for Kids.pdf
Title Unlocking Imagination The Importance of Toca Boca for Kids.pdfTitle Unlocking Imagination The Importance of Toca Boca for Kids.pdf
Title Unlocking Imagination The Importance of Toca Boca for Kids.pdf
 
Smart-Dustbin-Using-EEEEEEESP32 (1).pptx
Smart-Dustbin-Using-EEEEEEESP32 (1).pptxSmart-Dustbin-Using-EEEEEEESP32 (1).pptx
Smart-Dustbin-Using-EEEEEEESP32 (1).pptx
 
NO1 Pakistan Vashikaran Specialist in Uk Black Magic Specialist in Uk Black M...
NO1 Pakistan Vashikaran Specialist in Uk Black Magic Specialist in Uk Black M...NO1 Pakistan Vashikaran Specialist in Uk Black Magic Specialist in Uk Black M...
NO1 Pakistan Vashikaran Specialist in Uk Black Magic Specialist in Uk Black M...
 

BGA Studio: The BGA framework at a glance

  • 1. The BGA framework at a glance
  • 2. Intro The BGA framework helps you to build a online board game adaptation: ● That will be played in realtime. ● That will be played by several human players. ● That will be played from an internet browser. ● That will have rules enforcement (ie : no possibility to cheat). This presentation shows at a glance how BGA framework is working After reading this presentation, you'll be able to understand how a game is running on the BGA platform. We won't go into details, in order you can have a good overview of the platform, and afterwards immediately understand « which component is doing what ».
  • 3. Clients & server BGA server BGA server Here's an overview of the BGA architecture. 3 players : Alice, Bob and Charlie are playing a game on the BGA server using their web browser. Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 4. Clients & server BGA server BGA server While developing your game logic, you'll have to work on both server side and client side. Let's see what's on each side. Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 5. The server side On the server side, you'll find 3 components : BGA server BGA server ● The game database : This is the current state of the game (ex : scores, tokens place on board, which card is where...) ● The game logic : Game Game Game database logic (rules) resources This is the rules of the game. The game logic ensures that it's not possible to cheat (« rules enforcement »). ● The game resources : This is what's going to be downloaded to be used by the client browsers (ex : images, stylesheets, ...).
  • 6. The client side Alice's browser Alice's browser On the client side, you'll find the user interface (UI). The user interface manage all what is displayed to the user (ex : « this token has moved from A to B »), Game and make possible all user actions UI on the game (ex : « a click on this card plays this card »).
  • 7. The client side To do this, you will use 4 different types of resources : Alice's browser Alice's browser ●A HTML view which defines the basic layout of your game UI. ● Some images to display the game art. Game UI ● A CSS stylesheet which defines the style and position of elements of your game UI. ● A javascript script which defines the mechanisms of your UI (ex : click on this button trigger HTML Images Stylesheet Javascript this action). view
  • 8. Summary : technologies used The game database is using MySQL. The game logic is using the PHP language. The game ressources, used for the user interface, are using : HTML language CSS Javascript script (HTML4) stylesheet (with Dojo framework)
  • 9. Information flow BGA server BGA server Now, let's have a look on how all these components interact with a simple example. Our three players A, B and C are starting a game together. The name of this fake game is «mygame ». Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 10. Creating a new game BGA server BGA server As soon as everyone accept to start the game, your PHP method « setupNewGame » is called (from game logic). This method must setup the initial ««setupNewGame »» game situation, as described in setupNewGame game rules, ie you have to create the right SQL statements to initialize the database according to the game rules. This is it, you can now welcome your players ! Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 11. Loading the game BGA server BGA server Alice's browser requests to load the game with the path : « /mygame?table=9999 » http://boardgamearena.com/mygame?table=9999 Where « 9999 » is the identifier of the table. Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 12. Loading the game BGA server BGA server At first, we have to gather all informations about the current game situation in order Alice's ««getAllDatas »» browser can setup game situation getAllDatas on client side. For this, your « getAllDatas » PHP method is called. Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 13. Loading the game BGA server BGA server Your getAllDatas method gather all information Alice can see from the ««getAllDatas »»== getAllDatas game (and not the cards in the hand of Bob!), and return this data. Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 14. Loading game Then, we have to generate for Alice BGA server BGA server a classical webpage where she can play « mygame ». Of course, this webpage is in classic HTML. This is the view of the game. You can use some logic to create HTML some dynamic HTML page, but (inc data most of the time we'll let the client for Alice) do the biggest part of the game setup and return a simple piece of static HTML here. Note that the HTML generated embed automatically the data Alice's Bob's Charlie's previously generated (in « json » Alice's Bob's Charlie's browser browser browser browser browser browser format).
  • 15. Loading the game BGA server BGA server The HTML webpage and all information are returned to Alice... Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 16. Loading the game BGA server BGA server Then, like any classic webpages, resources are downloaded : your images, your javascript and your css stylesheet. Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 17. Loading the game Finally, your « setup » javascript BGA server BGA server method is called. In this method, you can use the data returned by the server (« Alice data ») to finalize the game setup for Alice. ««setup »» setup Alice's Alice's Ex : wow, Alice starts the game browser browser with 3 money tokens. Let's set her Bob's Charlie's Bob's Charlie's money counter to « 3 ». browser browser browser browser
  • 18. Loading the game BGA server BGA server This is it ! Alice has now a view of the current game situation, and she's ready to play. Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 19. Loading the game BGA server BGA server Of course the same thing happened to Bob and Charlie. Now, everyone is ready to play! Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 20. Making a move BGA server BGA server It's Alice turn. She is the « active player ». Let say Alice want to play a card, and then clicks on a card. Alice's browser Bob's Alice's browser Bob's Charlie's Charlie's browser browser browser browser « clic »
  • 21. Making a move BGA server BGA server During the initial « setup » of the page, we setup a handler for this « clic » event for this card. Let say this handler is a javascript «onClicMyMethod» «onClicMyMethod» method call « OnClicMyMethod ». Alice's browser Bob's OnClicMyMethod is called. Alice's browser Bob's Charlie's Charlie's browser browser browser browser « clic »
  • 22. Making a move BGA server BGA server OnClicMyMethod gets the ID of the /mygame/mygame/playAcard.html?card=99 Alice's card (ex : 99), and send a request to BGA server at this url : «onClicMyMethod» «onClicMyMethod» /mygame/mygame/playAcard.html? card=99 Alice's browser Bob's Alice's browser Bob's Charlie's Charlie's browser browser browser browser « clic »
  • 23. Making a move BGA server BGA server On server side, your corresponding «playAcard( 99 )» «playAcard( 99 )» method « playAcard » is called, with the id of the card played in parameter. /mygame/mygame/playAcard.html?card=99 Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 24. Making a move BGA server BGA server Your first work, on this method, is to check if this is a right move : ● Is Alice the active player really ? «playAcard( 99 )» «playAcard( 99 )» ● Can she play a card at this moment of the game ? ● Does she really have this card in hand ? ● ... /mygame/mygame/playAcard.html?card=99 Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 25. Making a move BGA server BGA server Done ! Now, you just have to apply the rules of the game to the current situation. «playAcard( 99 )» «playAcard( 99 )» Let's say the card played by Alice gives her 2 money tokens. We write in the database that she has 2 more money tokens and that her card is now discarded (and that /mygame/mygame/playAcard.html?card=99 Bob is the new active player). Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 26. Making a move BGA server BGA server Now, we have to notify all the players that the situation has evolved. Note that we can't notify only Alice here. All players must be notified «playAcard( 99 )» «playAcard( 99 )» that she has played a card and got 2 money tokens. The BGA framework proposes a simple method to create and send notifications to players : /mygame/mygame/playAcard.html?card=99 « notifyAllPlayers ». Now let's notify all players that Alice Alice's Alice's Bob's Bob's Charlie's Charlie's got 2 money tokens... browser browser browser browser browser browser
  • 27. Making a move BGA server BGA server «playAcard( 99 )» «playAcard( 99 )» Let's name our notification « takeMoneyToken ». We associate to the notification a « takeMoneyToken » little packet of data saying that the concerned player is Alice and that the number of token is 2. The notification is sent to all /mygame/mygame/playAcard.html?card=99 players. Alice's Alice's Bob's Bob's Charlie's Charlie's browser browser browser browser browser browser
  • 28. Making a move BGA server BGA server Let's have a look on what happend on Bob's browser. …/playAcard.html?... « takeMoneyToken » He receives a « takeMoneyToken » notification. Automatically, your «notif_takeMoneyToken» associated javascript method «notif_takeMoneyToken « notif_takeMoneyToken » is Alice's Bob's browser Charlie's called, with arguments saying that it Alice's Bob's browser Charlie's browser browser browser browser concerns Alice and that the number of money tokens is 2.
  • 29. Making a move BGA server BGA server … and finally, your notif_takeMoneyToken just have to …/playAcard.html?... increase money tokens number of « takeMoneyToken » Alice by 2 on the web page. Of course the same thing happens «notif_takeMoneyToken» «notif_takeMoneyToken on Alice's and Charlie's browser, so everyone knows that Alice is Alice's Bob's browser Bob's browser Charlie's Alice's Charlie's wealthier. browser browser browser browser
  • 30. Making a move BGA server BGA server Afterwards, two additional …/playAcard.html?... notifications are sent to notify players that Alice's card has been discarded and that it's now Bob's turn. And this is it : Bob can take some Alice's Bob's Bob's Charlie's action, and so on... Alice's browser Charlie's browser browser browser browser browser
  • 31. Summary ● You know what is managed on the server side, and what is manager on the client (browser) side. ● You know which technology is used for each part of the game adaptation. ●You know what happened during basic steps of the game lifecycle : game setup, page load and making a move. ●You understand the concepts of game database, game view, game action and notification.