Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
Clients & server


                                                    BGA server
                                        ...
Clients & server


                                                    BGA server
                                        ...
The server side

On the server side, you'll find 3
components :                                             BGA server
   ...
The client side

                                                Alice's browser
                                         ...
The client side

To do this, you will use 4 different
types of resources :                               Alice's browser
 ...
Summary : technologies
                       used
 The game database is using MySQL.




 The game logic is using the PHP...
Information flow


                                                    BGA server
                                        ...
Creating a new game

                                                   BGA server
                                       ...
Loading the game


                                                              BGA server
                              ...
Loading the game

                                                    BGA server
                                         ...
Loading the game

                                                     BGA server
                                        ...
Loading game

Then, we have to generate for Alice                      BGA server
                                        ...
Loading the game


                                                   BGA server
                                         ...
Loading the game


                                                  BGA server
                                          ...
Loading the game


Finally, your « setup » javascript                  BGA server
                                        ...
Loading the game


                                                  BGA server
                                          ...
Loading the game


                                                 BGA server
                                           ...
Making a move


                                                       BGA server
                                        ...
Making a move


                                                       BGA server
                                        ...
Making a move


                                                      BGA server
                                         ...
Making a move

                                                          BGA server
                                      ...
Making a move

                                                              BGA server
                                  ...
Making a move

                                                          BGA server
                                      ...
Making a move

                                                               BGA server
                                 ...
Making a move

                                                             BGA server
                                   ...
Making a move


                                                                  BGA server
                             ...
Making a move


                                                                 BGA server
                              ...
Making a move


                                                            BGA server
                                   ...
Summary


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

●   You know w...
Upcoming SlideShare
Loading in …5
×

of

BGA Studio: The BGA framework at a glance Slide 1 BGA Studio: The BGA framework at a glance Slide 2 BGA Studio: The BGA framework at a glance Slide 3 BGA Studio: The BGA framework at a glance Slide 4 BGA Studio: The BGA framework at a glance Slide 5 BGA Studio: The BGA framework at a glance Slide 6 BGA Studio: The BGA framework at a glance Slide 7 BGA Studio: The BGA framework at a glance Slide 8 BGA Studio: The BGA framework at a glance Slide 9 BGA Studio: The BGA framework at a glance Slide 10 BGA Studio: The BGA framework at a glance Slide 11 BGA Studio: The BGA framework at a glance Slide 12 BGA Studio: The BGA framework at a glance Slide 13 BGA Studio: The BGA framework at a glance Slide 14 BGA Studio: The BGA framework at a glance Slide 15 BGA Studio: The BGA framework at a glance Slide 16 BGA Studio: The BGA framework at a glance Slide 17 BGA Studio: The BGA framework at a glance Slide 18 BGA Studio: The BGA framework at a glance Slide 19 BGA Studio: The BGA framework at a glance Slide 20 BGA Studio: The BGA framework at a glance Slide 21 BGA Studio: The BGA framework at a glance Slide 22 BGA Studio: The BGA framework at a glance Slide 23 BGA Studio: The BGA framework at a glance Slide 24 BGA Studio: The BGA framework at a glance Slide 25 BGA Studio: The BGA framework at a glance Slide 26 BGA Studio: The BGA framework at a glance Slide 27 BGA Studio: The BGA framework at a glance Slide 28 BGA Studio: The BGA framework at a glance Slide 29 BGA Studio: The BGA framework at a glance Slide 30 BGA Studio: The BGA framework at a glance Slide 31
Upcoming SlideShare
BGA Studio - Focus on BGA Game state machine
Next

6 Likes

Share

BGA Studio: The BGA framework at a glance

This presentation is an introduction to BGA Studio Framework.

After reading this presentation:
_ 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.

BGA Studio: The BGA framework at a glance

  1. 1. The BGA framework at a glance
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.
  • BOBSINM

    Dec. 22, 2020
  • facechico

    Sep. 2, 2020
  • AdindaDwiL1

    Jul. 31, 2020
  • DeannaEarley1

    Jul. 22, 2020
  • BlackRabbitCoder

    May. 19, 2020
  • TracyLanier1

    Aug. 20, 2015

This presentation is an introduction to BGA Studio Framework. After reading this presentation: _ 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.

Views

Total views

27,544

On Slideshare

0

From embeds

0

Number of embeds

9

Actions

Downloads

1

Shares

0

Comments

0

Likes

6

×