Matthew Chang, profile picture
Uploaded byMatthew Chang
PPTX, PDF717 views

Capstone Project Last Demonstration

The document outlines the proposal for a Facebook in-app game called 'Facebook Remote Volleyball,' developed by Team NGX for their capstone project. It includes details on the game's structure, such as gameplay mechanics, system architecture, technical requirements, team roles, and a schedule for development milestones. Team NGX aims to create a hybrid gaming experience that incorporates real-time multiplayer features and user interactions through Facebook integration.

Embed presentation

Download to read offline
1 / 104
2 / 104
3 / 104
4 / 104
5 / 104
6 / 104
7 / 104
8 / 104
9 / 104
10 / 104
11 / 104
12 / 104
13 / 104
14 / 104
15 / 104
16 / 104
17 / 104
18 / 104
19 / 104
20 / 104
21 / 104
22 / 104
23 / 104
24 / 104
25 / 104
26 / 104
27 / 104
28 / 104
29 / 104
30 / 104
31 / 104
32 / 104
33 / 104
34 / 104
35 / 104
36 / 104
37 / 104
38 / 104
39 / 104
40 / 104
41 / 104
42 / 104
43 / 104
44 / 104
45 / 104
46 / 104
47 / 104
48 / 104
49 / 104
50 / 104
51 / 104
52 / 104
53 / 104
54 / 104
55 / 104
56 / 104
57 / 104
58 / 104
59 / 104
60 / 104
61 / 104
62 / 104
63 / 104
64 / 104
65 / 104
66 / 104
67 / 104
68 / 104
69 / 104
70 / 104
71 / 104
72 / 104
73 / 104
74 / 104
75 / 104
76 / 104
77 / 104
78 / 104
79 / 104
80 / 104
81 / 104
82 / 104
83 / 104
84 / 104
85 / 104
86 / 104
87 / 104
88 / 104
89 / 104
90 / 104
91 / 104
92 / 104
93 / 104
94 / 104
95 / 104
96 / 104
97 / 104
98 / 104
99 / 104
100 / 104
101 / 104
102 / 104
103 / 104
104 / 104
Facebook Remote Volley Ball Proposal Team NGX(Next Generation eXperience) presentation for capstone project Ikwhan Chang(20060957) | Sangtae Lee(20115695) | Dongkyoung Jo(20112104)
INDEX • Team NGX • Introduction • How to Play • System Architecture • Requirements • Schedule • Q&A 2
Team NGX Team NGX Next Generation eXperience Team Member & Role 3 Name Part Ikwhan Chang Facebook In-App Game(using Adobe Edge or Unity Engine), iPhone Apps Sangtae Lee I/O Server, Game Server(Main), Database Dongkyoung Jo Hybrid Client, Game Server(Assistance), Facebook API
Introduction Project Name • Facebook Remote Volley Ball What is this? • Simple VolleyBall Game • looks like Pikachu Volleyball • Facebook In-App Game • Remote Controlling
How to play? 5 1. Install on Facebook
How to play? 6 2. Add primary controller Add to your controller iphone5 primary +
How to play? 7 3. connect to game Room list vs 3 : 0 view My Info Ikwhan Chang W : 30 L : 100 Friend’s Activities vs 3 : 0 view new room vs 3 : 0 view . . . playing idle playing playing playing playing playing setting
How to play? 8 4. make new room or join create new room room title : time : 3min 5min privacy : open hide create back
How to play? 5. ready and play [3] fast volleyball play chat Users Chang Lee + invite button ready Players Ikwhan Chang W : 30 L : 100 Sangtae Lee W : 30 L : 100
How to play? 5-1. invite friend [3] fast volleyball play chat Users Chang Lee + invite friend idle idle idle idle invite close
How to play? 5. ready and play [3] fast volleyball play chat Users Chang Lee + ready character moving area shooting or jumping area player 1’s controller player 2’s controller shaking phone(use motion sensor) chattin g
System Architecture 12 Controller 1 (iphone or android) Controller 2 (iphone or android) Wi-Fi Connected Server : I/O , Game Logic Processing, Push Database Server MySQL Viewing Data Facebook OAuth Login Facebook User Data (Friend list, Profile Image..)Wi-Fi Connected User Data Maintenance (facebook token, game data, etc..) Facebook In-App Store
Client System Environment 13 Server
Development Environment 14 Lee Jo IntelliJ IDE Eclipse w/ STS Eclipse w/ Android Testing Server changes Jenkins Continuou s Integration JIRA Issue Trackershare Issue/Bug/TODO Chang Git Repository
Schedule 15 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 UI / layout class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Set-up Facebook JSON Parser JSON I/O Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integratin g rooming gaming game control convert iPhone 1st test Final Test
Team NGX - 3rd weekend Ikwhan Chang - Github setting, JIRA setting, Jenkins setting Sangtae Lee - Intellij IDEA setting Dongkyoung Jo - Apache cordova setting, Presenter 16
Schedule 17 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 UI / layout class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Set-up Facebook JSON Parser JSON I/O Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integratin g rooming gaming game control convert iPhone 1st test Final Test
Team NGXhttps://github.com/izie/FBVolleyBall 18 Github setting -Setting the Git Repository for colleting source
Team NGXhttps://izectlab.atlassian.net 테스트 ID : tester PW : 123qwe!1 19 JIRA Setting - Tool for Issue tracker, Bug report, Scheduling
Team NGXhttp://1.209.21.74:9090/jenkins/job/FBVolleyBall/ 20 Jenkins setting - Collecting our source and send to the test server automatically
Team NGX 21 Spring MVC is supported only in Ultimate Edition For using the Spring MVC
Team NGX 22 Containing the Spring MVC
Team NGX 23 <Excuted by Android AVD>
Team NGX 24 Apache cordova can make Hybrid app
Team NGX - 4th weekend 25 Ikhwan Chang - Github setting, Jenkins setting, register Facebook App, support other settings. SangTae Lee - Complete setting Intellij IDEA, Spring MVC environment study, Json parsing study, Presenter DongKyoung Jo - Distinguish screen touch pattern
Schedule 26 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova JSON Parser JSON I/O Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation Set-up Facebook UI / layout
Team NGX  Select Intellij IDEA  Cannot find any alternative tool.  Use Ikhwan Chang’s previous version tool license.  Spring MVC environment study  Spring is unaccustomed framework.  Study spring MVC part with ‘토비의 스프링 3.1’ 27
Team NGX 28  Practice some spring MVC pattern and json parsing http://1.209.21.74:8080/FBVOL_SERVER/Character/printUser 1.209.21.74:8080/FBVOL_SERVER/Character/Move/%7B"ID":"izie","X":200,"Y":100%7D
Team NGX 29  We registered facebook app and waited for their approval
Team NGX 30  Finally today, it is approval. https://apps.facebook.com/ngx_fbvol/
Team NGX  Test screen touch sensor  Distinguish the moving patterns (basic 4 directions)  Let’s see demo 31
Team NGX - 5th weekend 32 Ikhwan Chang - Trying to pushing server, support other settings. SangTae Lee - Spring MVC environment study, Design to Model for MVC pattern DongKyoung Jo - Call to server’s API and send user’s touch data
Schedule 33 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
Team NGX 34  CLIENT : Make hybrid Apps First time we makes controller for android and now we can easily convert for iOS version
Team NGX 35  CLIENT : Sending user’s touch data via AJAX 1. Convert coordinates to JSON format 2. Send to server using Ajax {"ID":"izie","X":200,"Y":100} http://1.209.21.74:8080/FBVOL_SERVER/Character/Move/ %7B"ID":"izie","X":200,"Y":100%7D
Team NGX 36  SERVER : Get user’s data and draw image User‘s Data : {"ID":"izie","X":200,"Y":100} Server‘s JSON Parser User Entity Architecture
Not yet implemented Finished Team NGX 37 SERVER : Fixing user’s coordinates and notification all clients which is connected to server Controller 1 (iphone or android) Controller 2 (iphone or android) Wi-Fi Connected Server : I/O , Game Logic Processing, Push Database Server MySQL Viewing Data Facebook OAuth Login Facebook User Data (Friend list, Profile Image..)Wi-Fi Connected User Data Maintenance (facebook token, game data, etc..) Facebook In-App Store
Team NGX 38  Demo https://apps.facebook.com/ngx_fbvol/
Team NGX 39  Problem  Smooth moving  today’s demo is just point-to-point moving. We need to smooth move characters.  There is no looks like game. We need to make game user interface.  Server’s real-time notification  We just using timer in client’s code. If there is some modified data in server, then server notify all other clients automate
Team NGX - 6th weekend 40 Ikhwan Chang - Support other settings, making the movement SangTae Lee - Studying Spring MVC environment, Making MVC pattern and DB table scheme DongKyoung Jo - Call to server’s API and send user’s touch data, Moving the character smoothly
Schedule 41 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
Team NGX 42  CLIENT : Sending user’s touch data via AJAX 1. Convert coordinates to JSON format 2. Send to server using Ajax {"ID":"izie","X":200,"Y":100} http://1.209.21.74:8080/FBVOL_SERVER/Character/Move/ %7B"ID":"izie","X":200,"Y":100%7D
Team NGX 43 $(document).bind('touchmove', function(e) { var event = e.originalEvent; var canvas_x = event.touches[0].pageX; var canvas_y = event.touches[0].pageY; var json = '{"ID":"'+id+'","X":'+canvas_x+',"Y":'+canvas_y+'}'; $.callAjax(json); event.preventDefault(); }); When user move the finger while touching the screen, the x-coordinate and y-coordinate are sent to server through the JSON format
Team NGX 44 KineticJS -HTML5 Canvas JavaScript framework -Almost free (except support of technology) -Using the game engine DB -Managing user’s information -Using the JDBC for connecting with DB -Token needs to communicate with Facebook apps
Team NGX 45 Problem •Sending the absolute coordinate value  Character moves point to point when user inputs the first touch  Considering the relative position •Movement is unnatural •Can’t make a push server yet
Team NGX - 9th weekend 46 Ikhwan Chang - Making natural movement, Making default UI, Making default game rule. SangTae Lee - Making actions and rooming, Calculate natural physical phenomenon DongKyoung Jo - Divide mobile screen between moving section and shooting section.
Schedule 47 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
Play mode
Team NGX 49  Demo https://apps.facebook.com/ngx_fbvol/
Team NGX 50 Problem •Characters are free from gravity. •Ikwhan and SangTae exchange role each other. •Can’t make a push server yet •We will make rooms and basic game forms like lobby and chatting box etc.
Team NGX - 11th weekend 51 Ikhwan Chang - Change Server Module from spring framework to Play framework using Scala language - Design Flow Chart - Design default game UI SangTae Lee - Making jumping action - Implementation to default physics engine DongKyoung Jo - Implementation to shooting action.
Schedule 52 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
change server framework • Ikwhan Chang tried to make a push server. • But spring framework support push technology upper latest beta version. (current beta version : 4.0b M2, our version : 3.2) • After role is changed(between Lee and Chang) there is no specific reason to use spring framework because spring framework is based on Java language and Lee is used to this language. • Play framework is based on Scala language. • Play framework is free and it can easily make push server.
Setup SSL Certification on server • Facebook required us to setup certification on server (SSL)
Setup SSL Certification on server • commercial SSL is too expensive for us. • We try to find free SSL
Setup SSL Certification on server •We find Startssl.com • it’s totally free. • But for getting a SSL, it takes at least 1 month. • We requested to provide SSL 1 months ago, and last week we got a single free SSL certification.
facebook application flow chart-1
facebook application flow chart-2
facebook application flow chart-3
Team NGX 60 Problem •SSL (Secure Socket Layer) is not yet setup in server • We got SSL just last week and it takes a long time unexpectedly. •Rooming is delayed • For push server, we changed server framework. As a result, rooming is delayed. •Gaming is delayed • Gaming is client’s role. But server is not yet implement so client is just waiting for finishing server-side.
Team NGX - 12th weekend 61 Ikhwan Chang - Change Server Module from spring framework to Play framework using Scala language - Design default UI SangTae Lee - Making natural movement and default game rule DongKyoung Jo - Managing game controler - Presenter
Schedule 62 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
change server framework • Ikwhan Chang tried to make a push server. • But spring framework support push technology upper latest beta version. (current beta version : 4.0b M2, our version : 3.2) • After role is changed(between Lee and Chang) there is no specific reason to use spring framework because spring framework is based on Java language and Lee is used to this language. • Play framework is based on Scala language. • Play framework is free and it can easily make push server.
https://apps.facebook.com/ngx_fbvol/
Team NGX 66 Game rule(Draft) -One on one matching system -User can select 15, 18, 21 points as condition for win -Passing a ball over a net within three touches -User can give up during the game -No time limit
Team NGX 67 Problem •Delay • Changing the server • Just waiting for finishing server-side • Complete • Controler • Checking more detail elements • Way to move, hit, jump • Moving speed, jump height etc
Team NGX - 13th weekend 68 Ikhwan Chang - Making create and delete room function - Implement detail UI - Presenter SangTae Lee - Making detail game state and modify bugs in our game. DongKyoung Jo - Add buttons on controller. - Prepare final report
Schedule 69 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
Controller UI • Native app -> Web hybrid app • Don’t need to install app, Just service controller’s URL.
Controller UI in IOS
Controller UI in Android
Main GameUI
Creating room
Main GameUI
Main GameUI
Main GameUI
Team NGX 78 •WebSocket on SSL Layout • Secured WebSocket is working only HTTP 1.1 Protocol but our apache server cannot server that. • Change Apache HTTP Server to NGINX and FIX
Team NGX 79 Problems • Gamming • Shooting needs to more various direction. • Client • Chatting, Inviting function is delayed.
Team NGX 80 This week we will … •Integrate all parts and debug whole project. •Play with our friends many time to find error and supplement gamming.
Team NGX - 14th weekend 81 Ikhwan Chang - All default and detail function for Rooming, gaming, and chatting. - Presenter SangTae Lee - Making more detailed user action, add restriction and rule - Add sound effect - Tester DongKyoung Jo - Tester
Schedule 82 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
Team NGX Team NGX Next Generation eXperience Team Member & Role(revised) 83 Name Part Ikwhan Chang Facebook In-App Game(using Adobe Edge or Unity Engine), iPhone Apps Web Server, Push Server, Database, Facebook API Sangtae Lee I/O Server, Game Server(Main), Database Main Game Client(using KineticJS + HTML5) Dongkyoung Jo Hybrid Client, Game Server(Assistance), Facebook API HTML5 Mobile Web App
Introduction Project Title • NGX FBVOL (Facebook Remote Volley Ball) What is this? • Simple VolleyBall Game • looks like Pikachu Volleyball • Facebook In-App Game • Remote Controlling • Push GameServer API
Proposal 85 • Main focus : One Source Multi Use • Client Side : Our game is made by HTML5 which is provide cross-browsing function • Server Side : We implement main I/O(with mySQL database) and push server and it can be adopted easily any kind of game. • Controller : We made controller by HTML5 mobile web application which is looks like native-app.
Modify 86 ClientServer
Modify 87 ClientServer Server o/s HTTP Proxy Server I/O, Push Server Database Javascript Library Mobile UI Library Web UI Library Social API Modern Web API Data standard
Modify 88 Removed function • Primary device select : user can use their own any device which is login via facebook account. • Room privacy : not important
Method – Model 89 class User(seq:Pk[Long], name:String, email:String, pic_url:String, win:Int, lose:Int, total:Int, token:String,joinDate:String, current_location:Int, location_x:Int, location_y:Int, seq_current_room:Int) class Room(seq:Pk[Long], id_owner:String, id_player:Option[String], title:String, time:Int, privacy:Int, game_status:Int,gameinfo:Game, owner:User, player:User=null, watcher:Seq[User]=null) class Game(seq:Pk[Long], seq_room:Int, turn:Int, score_owner:Int, score_enemy:Int)
Method – WebSocket 90 ChatRoom$ join() makeRoom() quitRoom() ChatRoom() receive() notifyAll() notifyAll_Makeroom() notifyAll_Quitroom() ChatRoom QuitRoom() JoinRoom() MakeRoom() Join() Quit() Talk() NotifyJoin() Connected() CannotConnect() GameRoom$ join() quit() move() jump() shoot() GameRoom() receive() notifyAll() notifyAll_Move() PlayGame() ReadyGame() ShootGame() JumpGame() MoveGame() JoinGame() QuitGame() TalkGame() NotifyJoinGame() NotifyRoomOwner()
Method – View/Action 91 Application$ Index() controller() Privacy() chatRoom() chatRoomJs() chat() gameRoom() gameRoomJS() game() javascriptRoutes() Room$ getRooms() getPlayersProfile() addRoom() delRoom() User$ addUser() getUser() setUserStatusByToken() setUserCurrentRoom() setUserPosition() setUserXY() JumpUser() ShootUser()
Problems 92 • SSL(Secured Socket Layer) – unexpected(11th week) • For making a Facebook canvas based game, facebook required SSL layer for all developers. • We tried to fix that using previous server environment, but it failed(using Apache HTTP) • Fix it : Web server change (Apache HTTP 2.1 -> NginX)
Problems 93 • Push server implementation (expected, but it took a long time) 11th week • spring framework support push technology upper latest beta version (current beta version : 4.0b M2, our version : 3.2) fix : web framework change (Spring Framework -> Play Framework)
Problems 94 Hybrid Application(unexpected) 13th week • Our controller app is required just tiny part of function(eg. login with facebook, sending user’s action from device to server)
Result – Facebook Platform 95
Result - Room 96 • Room list, pagination, search • New game • Help • Friend list and activity
Result - Game 97 • View player’s profile • Main game • Sound effect • Ready & start button
Result - Controller 98 • Add to Bookmark(using our own icon) • Social login • Move/Jump/Shoot
Demo 99 https://www.facebook.com/games/?app_id=2362202 53168811&fb_source=100
To be implementation 10 0• Chatting : chatting with each users • Inviting Friend : friend’s list will be appeared in game screen and user can invite if he is room’s owner. • Social Sharing : After game is ended, user’s win or lose status will be posted in their timeline. (it already implemented but not yet approval from facebook about permission)
To be implementation 10 1 • Various Controller’s action : shaking, gyro sensor.. • Chatting using their own device or video chat : maybe..? very hard things to do. • Another Game : maybe.. Football? Some small game can adapt our platform easily. Maybe we can make that next term(capstone project 2)
Conclusion 10 2 • Learnt a lot of libraries : KineticJS, Web Socket, Scala language.. • Learnt security on the internet(SSL, Secured-WebSocket) • At first, we thought that for making volley ball, it will easy to build. But a lot of functions is needed. • Unexpected problems : SSL, Changing web framework.. • Schedule delayed : we cannot use our free time with flexible especially national holiday. • Server-side technology is well done implemented but client-side technology is normal implemented. • Because of server-side is done, we can focus on make game next term..
Q&A Github Repository : https://github.com/izie/NEW_FBVOL_PLAY
thanks!

More Related Content

PPTX
Mother teresa 1
bymediaonlinehere
 
PPTX
Zheng he
byBegoña García Zapico
 
PDF
10 inspirational quotes from Mother Teresa
byHeyday ApS
 
PPTX
38 talking about other people
byErika Oya
 
PPTX
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
bySencha
 
PDF
ALL NEW OOP 2014
byBambang Wiratmojo
 
PPTX
Meteor Day Talk
byBrandon Bechtel
 
PPT
Beethoven
byldburks
 
Mother teresa 1
bymediaonlinehere
 
Zheng he
byBegoña García Zapico
 
10 inspirational quotes from Mother Teresa
byHeyday ApS
 
38 talking about other people
byErika Oya
 
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
bySencha
 
ALL NEW OOP 2014
byBambang Wiratmojo
 
Meteor Day Talk
byBrandon Bechtel
 
Beethoven
byldburks
 

Viewers also liked

PPTX
Mother teresa of calcutta saint
byMartin M Flynn
 
PPTX
The life of beethoven
byGrace Swanner
 
PPT
Leadership analysis mother teresa
byDidem Şahin
 
PPS
Mother Teresa
byMallikarjun Chirumamilla
 
PPTX
Ludwig Van Beethoven
bysiewchiang
 
PPT
The past perfect tense
byfatimahraus
 
PPTX
Mother Teresa leadership style
byPushpendu saha
 
PPTX
Beethoven presentation
byAmy Yang
 
PPTX
Ludwig Van beethoven
byYoelvis Medero Lunar
 
PPTX
Mother Teresa by K Mc
byshalbert
 
PPT
Introductory slide show zheng he
byAlex Thompson
 
PPTX
Mother teresa qualities
bySrikanya Mummareddy
 
PPT
Cheng Ho (a short introduation)
bymokky7
 
PPT
Zheng He
bydcyear5
 
PPTX
Using Past Perfect Tense
bysusan espiritu
 
PPTX
Great leader
byKxe Duran
 
PPT
A Tribute to Mother Teresa !!
bySupriya S.
 
PPTX
Beethoven part one
byDorothy Bonett
 
PPT
Bill Gates
byteppivn_90
 
Mother teresa of calcutta saint
byMartin M Flynn
 
The life of beethoven
byGrace Swanner
 
Leadership analysis mother teresa
byDidem Şahin
 
Mother Teresa
byMallikarjun Chirumamilla
 
Ludwig Van Beethoven
bysiewchiang
 
The past perfect tense
byfatimahraus
 
Mother Teresa leadership style
byPushpendu saha
 
Beethoven presentation
byAmy Yang
 
Ludwig Van beethoven
byYoelvis Medero Lunar
 
Mother Teresa by K Mc
byshalbert
 
Introductory slide show zheng he
byAlex Thompson
 
Mother teresa qualities
bySrikanya Mummareddy
 
Cheng Ho (a short introduation)
bymokky7
 
Zheng He
bydcyear5
 
Using Past Perfect Tense
bysusan espiritu
 
Great leader
byKxe Duran
 
A Tribute to Mother Teresa !!
bySupriya S.
 
Beethoven part one
byDorothy Bonett
 
Bill Gates
byteppivn_90
 

Similar to Capstone Project Last Demonstration

PDF
Capstone Project Final Presentation
byMatthew Chang
 
PDF
Mobile game architecture on GCP
by명근 최
 
PPT
Presentation team ngx 4주차 발표자료
byMatthew Chang
 
PPT
​Presentation team ngx 5주차 발표자료
byMatthew Chang
 
PDF
Presentation Team NGX
byMatthew Chang
 
PDF
2011 py con
byEing Ong
 
PDF
Cucumber meets iPhone
byErin Dees
 
PPTX
Mobile developer is Software developer
byEugen Martynov
 
PDF
How to build Kick Ass Games in the Cloud
byChris Schalk
 
PPTX
Getting Web Multi-Touch Working
byAidan Wu
 
PPTX
Mastering Multiplayer Stage3d and AIR game development for mobile devices
byJean-Philippe Doiron
 
PDF
Acceptance Testing of Web UI
byVladimir Tsukur
 
KEY
Rvrsit
byPatrick Sheridan
 
PDF
Building social games
byAnkit Nigam
 
PDF
2012 03-19
byFantasyHipHop
 
PDF
Arquillian: Effective tests from the client to the server
byLukáš Fryč
 
PPTX
Houston TechFest 2014 slidedeck
byMatt Keas
 
PPTX
Html5 mobile develop tools
byLey Liu
 
PDF
Coscup
by宇宣 賴
 
PDF
Browser as a broadcast medium
byvrt-medialab
 
Capstone Project Final Presentation
byMatthew Chang
 
Mobile game architecture on GCP
by명근 최
 
Presentation team ngx 4주차 발표자료
byMatthew Chang
 
​Presentation team ngx 5주차 발표자료
byMatthew Chang
 
Presentation Team NGX
byMatthew Chang
 
2011 py con
byEing Ong
 
Cucumber meets iPhone
byErin Dees
 
Mobile developer is Software developer
byEugen Martynov
 
How to build Kick Ass Games in the Cloud
byChris Schalk
 
Getting Web Multi-Touch Working
byAidan Wu
 
Mastering Multiplayer Stage3d and AIR game development for mobile devices
byJean-Philippe Doiron
 
Acceptance Testing of Web UI
byVladimir Tsukur
 
Rvrsit
byPatrick Sheridan
 
Building social games
byAnkit Nigam
 
2012 03-19
byFantasyHipHop
 
Arquillian: Effective tests from the client to the server
byLukáš Fryč
 
Houston TechFest 2014 slidedeck
byMatt Keas
 
Html5 mobile develop tools
byLey Liu
 
Coscup
by宇宣 賴
 
Browser as a broadcast medium
byvrt-medialab
 

More from Matthew Chang

PDF
Db설계 프로젝트 1조 _중간제출
byMatthew Chang
 
PDF
A new interface between smart device and web using html5 web socket and qr code
byMatthew Chang
 
PDF
모바일 앱 개발 최종 발표 Proposal
byMatthew Chang
 
PDF
Twitter Trend Analyzer
byMatthew Chang
 
PDF
The implementation of Banker's algorithm, data structure and its parser
byMatthew Chang
 
PDF
Digital Certified Mail
byMatthew Chang
 
PPTX
Development of Design Structure Matrix(DSM) Tool
byMatthew Chang
 
PPTX
SDN Project PPT
byMatthew Chang
 
DOCX
Research and Analysis of SSH
byMatthew Chang
 
PPTX
Digital Certified Mail (PPT)
byMatthew Chang
 
PDF
Project NGX - Proposal
byMatthew Chang
 
PDF
Programming Language Final PPT
byMatthew Chang
 
PDF
Project Avalon Online(Game) Final Report
byMatthew Chang
 
PPTX
Project Avalon
byMatthew Chang
 
PDF
Profile_ Ikwhan chang
byMatthew Chang
 
PDF
Image Compression Storage Policy for Openstack Swift
byMatthew Chang
 
PDF
Report : Android Simple Bug Catch Game(Korean)
byMatthew Chang
 
PDF
Analyze of Tumblr.com
byMatthew Chang
 
PDF
Logic Circuit Project Final Presentation
byMatthew Chang
 
PDF
Urhyme introduction
byMatthew Chang
 
Db설계 프로젝트 1조 _중간제출
byMatthew Chang
 
A new interface between smart device and web using html5 web socket and qr code
byMatthew Chang
 
모바일 앱 개발 최종 발표 Proposal
byMatthew Chang
 
Twitter Trend Analyzer
byMatthew Chang
 
The implementation of Banker's algorithm, data structure and its parser
byMatthew Chang
 
Digital Certified Mail
byMatthew Chang
 
Development of Design Structure Matrix(DSM) Tool
byMatthew Chang
 
SDN Project PPT
byMatthew Chang
 
Research and Analysis of SSH
byMatthew Chang
 
Digital Certified Mail (PPT)
byMatthew Chang
 
Project NGX - Proposal
byMatthew Chang
 
Programming Language Final PPT
byMatthew Chang
 
Project Avalon Online(Game) Final Report
byMatthew Chang
 
Project Avalon
byMatthew Chang
 
Profile_ Ikwhan chang
byMatthew Chang
 
Image Compression Storage Policy for Openstack Swift
byMatthew Chang
 
Report : Android Simple Bug Catch Game(Korean)
byMatthew Chang
 
Analyze of Tumblr.com
byMatthew Chang
 
Logic Circuit Project Final Presentation
byMatthew Chang
 
Urhyme introduction
byMatthew Chang
 

Recently uploaded

PPTX
CFP_Unit 5. Structure and Functions pptx
bypawarbhaktiit
 
PDF
Finite Automata With Output - Moore and Mealy Machines definitions and Solved...
byNileshPardeshi28
 
PDF
Non-Deterministic Finite Automata (NFA) to Deterministic Finite Automata (DFA...
byNileshPardeshi28
 
PPT
software-security-intro Secure software Design and Development
bysahar62648
 
PDF
Environmental Engineering (3-0-2) Laboratory.pdf
byChemical Engineering Dept. NIT Rourkela-769008, Odisha, India
 
PDF
Lec1a-infinite square well-particle in a box.pdf
byb17052006bhuvanasent
 
PDF
Robert Walker Epps - A Football Coach
byRobert Walker Epps
 
PDF
A wire harness (also called a wiring harness or cable harness)
byabhinandankondekar2
 
PPT
5.1 Basic concept and hierarchy.ppt1234564
byChetansingh768231
 
PPTX
Battery Energy Storage System detail notes
bypevepe9073
 
PDF
DIMENSION REDUCTION FOR SCRIPT CLASSIFICATION- PRINTED INDIAN DOCUMENTS
byijait
 
PPTX
review of transistor circuit and applications
bysophieshuqinghuang
 
PDF
Autonomous Talent Systems | Cerebraix Technologies
byCerebraix Technologies
 
PPTX
analog communication part one lecture note
byhirutfanta1212
 
PPTX
analog communication part two lecture note
byhirutfanta1212
 
PDF
How to Write Research Papers NCBP D3.pdf
byDr. Rahul Pandya
 
PPT
Lock out Tag Out Training for Safe Maintenance activity
byBalakrishnanRamasamy14
 
PPTX
Environmental-Impact-of-Sustainable-Development.pptx
byyecamoy754
 
PPTX
Why Precision Matters CO2 N2 Gas Filling Systems Neometrix
byNeometrix_Engineering_Pvt_Ltd
 
PPTX
introduction-210127111642.pptx hamster frftt
byridhammodi198
 
CFP_Unit 5. Structure and Functions pptx
bypawarbhaktiit
 
Finite Automata With Output - Moore and Mealy Machines definitions and Solved...
byNileshPardeshi28
 
Non-Deterministic Finite Automata (NFA) to Deterministic Finite Automata (DFA...
byNileshPardeshi28
 
software-security-intro Secure software Design and Development
bysahar62648
 
Environmental Engineering (3-0-2) Laboratory.pdf
byChemical Engineering Dept. NIT Rourkela-769008, Odisha, India
 
Lec1a-infinite square well-particle in a box.pdf
byb17052006bhuvanasent
 
Robert Walker Epps - A Football Coach
byRobert Walker Epps
 
A wire harness (also called a wiring harness or cable harness)
byabhinandankondekar2
 
5.1 Basic concept and hierarchy.ppt1234564
byChetansingh768231
 
Battery Energy Storage System detail notes
bypevepe9073
 
DIMENSION REDUCTION FOR SCRIPT CLASSIFICATION- PRINTED INDIAN DOCUMENTS
byijait
 
review of transistor circuit and applications
bysophieshuqinghuang
 
Autonomous Talent Systems | Cerebraix Technologies
byCerebraix Technologies
 
analog communication part one lecture note
byhirutfanta1212
 
analog communication part two lecture note
byhirutfanta1212
 
How to Write Research Papers NCBP D3.pdf
byDr. Rahul Pandya
 
Lock out Tag Out Training for Safe Maintenance activity
byBalakrishnanRamasamy14
 
Environmental-Impact-of-Sustainable-Development.pptx
byyecamoy754
 
Why Precision Matters CO2 N2 Gas Filling Systems Neometrix
byNeometrix_Engineering_Pvt_Ltd
 
introduction-210127111642.pptx hamster frftt
byridhammodi198
 

Capstone Project Last Demonstration

  • 1.
    Facebook Remote VolleyBall Proposal Team NGX(Next Generation eXperience) presentation for capstone project Ikwhan Chang(20060957) | Sangtae Lee(20115695) | Dongkyoung Jo(20112104)
  • 2.
    INDEX • Team NGX •Introduction • How to Play • System Architecture • Requirements • Schedule • Q&A 2
  • 3.
    Team NGX Team NGX NextGeneration eXperience Team Member & Role 3 Name Part Ikwhan Chang Facebook In-App Game(using Adobe Edge or Unity Engine), iPhone Apps Sangtae Lee I/O Server, Game Server(Main), Database Dongkyoung Jo Hybrid Client, Game Server(Assistance), Facebook API
  • 4.
    Introduction Project Name • FacebookRemote Volley Ball What is this? • Simple VolleyBall Game • looks like Pikachu Volleyball • Facebook In-App Game • Remote Controlling
  • 5.
    How to play?5 1. Install on Facebook
  • 6.
    How to play?6 2. Add primary controller Add to your controller iphone5 primary +
  • 7.
    How to play?7 3. connect to game Room list vs 3 : 0 view My Info Ikwhan Chang W : 30 L : 100 Friend’s Activities vs 3 : 0 view new room vs 3 : 0 view . . . playing idle playing playing playing playing playing setting
  • 8.
    How to play?8 4. make new room or join create new room room title : time : 3min 5min privacy : open hide create back
  • 9.
    How to play? 5.ready and play [3] fast volleyball play chat Users Chang Lee + invite button ready Players Ikwhan Chang W : 30 L : 100 Sangtae Lee W : 30 L : 100
  • 10.
    How to play? 5-1.invite friend [3] fast volleyball play chat Users Chang Lee + invite friend idle idle idle idle invite close
  • 11.
    How to play? 5.ready and play [3] fast volleyball play chat Users Chang Lee + ready character moving area shooting or jumping area player 1’s controller player 2’s controller shaking phone(use motion sensor) chattin g
  • 12.
    System Architecture 12 Controller1 (iphone or android) Controller 2 (iphone or android) Wi-Fi Connected Server : I/O , Game Logic Processing, Push Database Server MySQL Viewing Data Facebook OAuth Login Facebook User Data (Friend list, Profile Image..)Wi-Fi Connected User Data Maintenance (facebook token, game data, etc..) Facebook In-App Store
  • 13.
  • 14.
    Development Environment 14 Lee Jo IntelliJ IDE Eclipsew/ STS Eclipse w/ Android Testing Server changes Jenkins Continuou s Integration JIRA Issue Trackershare Issue/Bug/TODO Chang Git Repository
  • 15.
    Schedule 15 1 2 34 5 6 7 8 9 10 11 12 13 14 15 16 UI / layout class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Set-up Facebook JSON Parser JSON I/O Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integratin g rooming gaming game control convert iPhone 1st test Final Test
  • 16.
    Team NGX - 3rdweekend Ikwhan Chang - Github setting, JIRA setting, Jenkins setting Sangtae Lee - Intellij IDEA setting Dongkyoung Jo - Apache cordova setting, Presenter 16
  • 17.
    Schedule 17 1 23 4 5 6 7 8 9 10 11 12 13 14 15 16 UI / layout class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Set-up Facebook JSON Parser JSON I/O Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integratin g rooming gaming game control convert iPhone 1st test Final Test
  • 18.
  • 19.
    Team NGXhttps://izectlab.atlassian.net 테스트ID : tester PW : 123qwe!1 19 JIRA Setting - Tool for Issue tracker, Bug report, Scheduling
  • 20.
    Team NGXhttp://1.209.21.74:9090/jenkins/job/FBVolleyBall/ 20 Jenkins setting -Collecting our source and send to the test server automatically
  • 21.
    Team NGX 21 SpringMVC is supported only in Ultimate Edition For using the Spring MVC
  • 22.
    Team NGX 22 Containingthe Spring MVC
  • 23.
    Team NGX 23 <Excutedby Android AVD>
  • 24.
    Team NGX 24 Apachecordova can make Hybrid app
  • 25.
    Team NGX - 4thweekend 25 Ikhwan Chang - Github setting, Jenkins setting, register Facebook App, support other settings. SangTae Lee - Complete setting Intellij IDEA, Spring MVC environment study, Json parsing study, Presenter DongKyoung Jo - Distinguish screen touch pattern
  • 26.
    Schedule 26 1 23 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova JSON Parser JSON I/O Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation Set-up Facebook UI / layout
  • 27.
    Team NGX  SelectIntellij IDEA  Cannot find any alternative tool.  Use Ikhwan Chang’s previous version tool license.  Spring MVC environment study  Spring is unaccustomed framework.  Study spring MVC part with ‘토비의 스프링 3.1’ 27
  • 28.
    Team NGX 28 Practice some spring MVC pattern and json parsing http://1.209.21.74:8080/FBVOL_SERVER/Character/printUser 1.209.21.74:8080/FBVOL_SERVER/Character/Move/%7B"ID":"izie","X":200,"Y":100%7D
  • 29.
    Team NGX 29 We registered facebook app and waited for their approval
  • 30.
    Team NGX 30 Finally today, it is approval. https://apps.facebook.com/ngx_fbvol/
  • 31.
    Team NGX  Testscreen touch sensor  Distinguish the moving patterns (basic 4 directions)  Let’s see demo 31
  • 32.
    Team NGX - 5thweekend 32 Ikhwan Chang - Trying to pushing server, support other settings. SangTae Lee - Spring MVC environment study, Design to Model for MVC pattern DongKyoung Jo - Call to server’s API and send user’s touch data
  • 33.
    Schedule 33 1 23 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
  • 34.
    Team NGX 34 CLIENT : Make hybrid Apps First time we makes controller for android and now we can easily convert for iOS version
  • 35.
    Team NGX 35 CLIENT : Sending user’s touch data via AJAX 1. Convert coordinates to JSON format 2. Send to server using Ajax {"ID":"izie","X":200,"Y":100} http://1.209.21.74:8080/FBVOL_SERVER/Character/Move/ %7B"ID":"izie","X":200,"Y":100%7D
  • 36.
    Team NGX 36 SERVER : Get user’s data and draw image User‘s Data : {"ID":"izie","X":200,"Y":100} Server‘s JSON Parser User Entity Architecture
  • 37.
    Not yet implemented Finished TeamNGX 37 SERVER : Fixing user’s coordinates and notification all clients which is connected to server Controller 1 (iphone or android) Controller 2 (iphone or android) Wi-Fi Connected Server : I/O , Game Logic Processing, Push Database Server MySQL Viewing Data Facebook OAuth Login Facebook User Data (Friend list, Profile Image..)Wi-Fi Connected User Data Maintenance (facebook token, game data, etc..) Facebook In-App Store
  • 38.
    Team NGX 38 Demo https://apps.facebook.com/ngx_fbvol/
  • 39.
    Team NGX 39 Problem  Smooth moving  today’s demo is just point-to-point moving. We need to smooth move characters.  There is no looks like game. We need to make game user interface.  Server’s real-time notification  We just using timer in client’s code. If there is some modified data in server, then server notify all other clients automate
  • 40.
    Team NGX - 6thweekend 40 Ikhwan Chang - Support other settings, making the movement SangTae Lee - Studying Spring MVC environment, Making MVC pattern and DB table scheme DongKyoung Jo - Call to server’s API and send user’s touch data, Moving the character smoothly
  • 41.
    Schedule 41 1 23 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
  • 42.
    Team NGX 42 CLIENT : Sending user’s touch data via AJAX 1. Convert coordinates to JSON format 2. Send to server using Ajax {"ID":"izie","X":200,"Y":100} http://1.209.21.74:8080/FBVOL_SERVER/Character/Move/ %7B"ID":"izie","X":200,"Y":100%7D
  • 43.
    Team NGX 43 $(document).bind('touchmove',function(e) { var event = e.originalEvent; var canvas_x = event.touches[0].pageX; var canvas_y = event.touches[0].pageY; var json = '{"ID":"'+id+'","X":'+canvas_x+',"Y":'+canvas_y+'}'; $.callAjax(json); event.preventDefault(); }); When user move the finger while touching the screen, the x-coordinate and y-coordinate are sent to server through the JSON format
  • 44.
    Team NGX 44 KineticJS -HTML5Canvas JavaScript framework -Almost free (except support of technology) -Using the game engine DB -Managing user’s information -Using the JDBC for connecting with DB -Token needs to communicate with Facebook apps
  • 45.
    Team NGX 45 Problem •Sendingthe absolute coordinate value  Character moves point to point when user inputs the first touch  Considering the relative position •Movement is unnatural •Can’t make a push server yet
  • 46.
    Team NGX - 9thweekend 46 Ikhwan Chang - Making natural movement, Making default UI, Making default game rule. SangTae Lee - Making actions and rooming, Calculate natural physical phenomenon DongKyoung Jo - Divide mobile screen between moving section and shooting section.
  • 47.
    Schedule 47 1 23 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
  • 48.
  • 49.
    Team NGX 49 Demo https://apps.facebook.com/ngx_fbvol/
  • 50.
    Team NGX 50 Problem •Charactersare free from gravity. •Ikwhan and SangTae exchange role each other. •Can’t make a push server yet •We will make rooms and basic game forms like lobby and chatting box etc.
  • 51.
    Team NGX - 11thweekend 51 Ikhwan Chang - Change Server Module from spring framework to Play framework using Scala language - Design Flow Chart - Design default game UI SangTae Lee - Making jumping action - Implementation to default physics engine DongKyoung Jo - Implementation to shooting action.
  • 52.
    Schedule 52 1 23 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
  • 53.
    change server framework •Ikwhan Chang tried to make a push server. • But spring framework support push technology upper latest beta version. (current beta version : 4.0b M2, our version : 3.2) • After role is changed(between Lee and Chang) there is no specific reason to use spring framework because spring framework is based on Java language and Lee is used to this language. • Play framework is based on Scala language. • Play framework is free and it can easily make push server.
  • 54.
    Setup SSL Certificationon server • Facebook required us to setup certification on server (SSL)
  • 55.
    Setup SSL Certificationon server • commercial SSL is too expensive for us. • We try to find free SSL
  • 56.
    Setup SSL Certificationon server •We find Startssl.com • it’s totally free. • But for getting a SSL, it takes at least 1 month. • We requested to provide SSL 1 months ago, and last week we got a single free SSL certification.
  • 57.
  • 58.
  • 59.
  • 60.
    Team NGX 60 Problem •SSL(Secure Socket Layer) is not yet setup in server • We got SSL just last week and it takes a long time unexpectedly. •Rooming is delayed • For push server, we changed server framework. As a result, rooming is delayed. •Gaming is delayed • Gaming is client’s role. But server is not yet implement so client is just waiting for finishing server-side.
  • 61.
    Team NGX - 12thweekend 61 Ikhwan Chang - Change Server Module from spring framework to Play framework using Scala language - Design default UI SangTae Lee - Making natural movement and default game rule DongKyoung Jo - Managing game controler - Presenter
  • 62.
    Schedule 62 1 23 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
  • 63.
    change server framework •Ikwhan Chang tried to make a push server. • But spring framework support push technology upper latest beta version. (current beta version : 4.0b M2, our version : 3.2) • After role is changed(between Lee and Chang) there is no specific reason to use spring framework because spring framework is based on Java language and Lee is used to this language. • Play framework is based on Scala language. • Play framework is free and it can easily make push server.
  • 64.
  • 66.
    Team NGX 66 Gamerule(Draft) -One on one matching system -User can select 15, 18, 21 points as condition for win -Passing a ball over a net within three touches -User can give up during the game -No time limit
  • 67.
    Team NGX 67 Problem •Delay •Changing the server • Just waiting for finishing server-side • Complete • Controler • Checking more detail elements • Way to move, hit, jump • Moving speed, jump height etc
  • 68.
    Team NGX - 13thweekend 68 Ikhwan Chang - Making create and delete room function - Implement detail UI - Presenter SangTae Lee - Making detail game state and modify bugs in our game. DongKyoung Jo - Add buttons on controller. - Prepare final report
  • 69.
    Schedule 69 1 23 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
  • 70.
    Controller UI • Nativeapp -> Web hybrid app • Don’t need to install app, Just service controller’s URL.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
    Team NGX 78 •WebSocketon SSL Layout • Secured WebSocket is working only HTTP 1.1 Protocol but our apache server cannot server that. • Change Apache HTTP Server to NGINX and FIX
  • 79.
    Team NGX 79 Problems •Gamming • Shooting needs to more various direction. • Client • Chatting, Inviting function is delayed.
  • 80.
    Team NGX 80 Thisweek we will … •Integrate all parts and debug whole project. •Play with our friends many time to find error and supplement gamming.
  • 81.
    Team NGX - 14thweekend 81 Ikhwan Chang - All default and detail function for Rooming, gaming, and chatting. - Presenter SangTae Lee - Making more detailed user action, add restriction and rule - Add sound effect - Tester DongKyoung Jo - Tester
  • 82.
    Schedule 82 1 23 4 5 6 7 8 9 10 11 12 13 14 15 16 class, transactionDesign Server Client (device) Test Set-up Spring F/W Set-up Cordova Sync w/server Sync w/client Client (facebook) default game UI Character moving Default UI Rooming Inviting Sync w/server integrating rooming gaming game control convert iPhone final test 2nd demo1st demo 1st test Prepare final present ation UI / layout JSON Parser JSON I/O Setup Facebook now
  • 83.
    Team NGX Team NGX NextGeneration eXperience Team Member & Role(revised) 83 Name Part Ikwhan Chang Facebook In-App Game(using Adobe Edge or Unity Engine), iPhone Apps Web Server, Push Server, Database, Facebook API Sangtae Lee I/O Server, Game Server(Main), Database Main Game Client(using KineticJS + HTML5) Dongkyoung Jo Hybrid Client, Game Server(Assistance), Facebook API HTML5 Mobile Web App
  • 84.
    Introduction Project Title • NGXFBVOL (Facebook Remote Volley Ball) What is this? • Simple VolleyBall Game • looks like Pikachu Volleyball • Facebook In-App Game • Remote Controlling • Push GameServer API
  • 85.
    Proposal 85 • Mainfocus : One Source Multi Use • Client Side : Our game is made by HTML5 which is provide cross-browsing function • Server Side : We implement main I/O(with mySQL database) and push server and it can be adopted easily any kind of game. • Controller : We made controller by HTML5 mobile web application which is looks like native-app.
  • 86.
  • 87.
    Modify 87 ClientServer Server o/s HTTPProxy Server I/O, Push Server Database Javascript Library Mobile UI Library Web UI Library Social API Modern Web API Data standard
  • 88.
    Modify 88 Removed function •Primary device select : user can use their own any device which is login via facebook account. • Room privacy : not important
  • 89.
    Method – Model89 class User(seq:Pk[Long], name:String, email:String, pic_url:String, win:Int, lose:Int, total:Int, token:String,joinDate:String, current_location:Int, location_x:Int, location_y:Int, seq_current_room:Int) class Room(seq:Pk[Long], id_owner:String, id_player:Option[String], title:String, time:Int, privacy:Int, game_status:Int,gameinfo:Game, owner:User, player:User=null, watcher:Seq[User]=null) class Game(seq:Pk[Long], seq_room:Int, turn:Int, score_owner:Int, score_enemy:Int)
  • 90.
    Method – WebSocket90 ChatRoom$ join() makeRoom() quitRoom() ChatRoom() receive() notifyAll() notifyAll_Makeroom() notifyAll_Quitroom() ChatRoom QuitRoom() JoinRoom() MakeRoom() Join() Quit() Talk() NotifyJoin() Connected() CannotConnect() GameRoom$ join() quit() move() jump() shoot() GameRoom() receive() notifyAll() notifyAll_Move() PlayGame() ReadyGame() ShootGame() JumpGame() MoveGame() JoinGame() QuitGame() TalkGame() NotifyJoinGame() NotifyRoomOwner()
  • 91.
    Method – View/Action91 Application$ Index() controller() Privacy() chatRoom() chatRoomJs() chat() gameRoom() gameRoomJS() game() javascriptRoutes() Room$ getRooms() getPlayersProfile() addRoom() delRoom() User$ addUser() getUser() setUserStatusByToken() setUserCurrentRoom() setUserPosition() setUserXY() JumpUser() ShootUser()
  • 92.
    Problems 92 • SSL(SecuredSocket Layer) – unexpected(11th week) • For making a Facebook canvas based game, facebook required SSL layer for all developers. • We tried to fix that using previous server environment, but it failed(using Apache HTTP) • Fix it : Web server change (Apache HTTP 2.1 -> NginX)
  • 93.
    Problems 93 • Pushserver implementation (expected, but it took a long time) 11th week • spring framework support push technology upper latest beta version (current beta version : 4.0b M2, our version : 3.2) fix : web framework change (Spring Framework -> Play Framework)
  • 94.
    Problems 94 Hybrid Application(unexpected)13th week • Our controller app is required just tiny part of function(eg. login with facebook, sending user’s action from device to server)
  • 95.
  • 96.
    Result - Room96 • Room list, pagination, search • New game • Help • Friend list and activity
  • 97.
    Result - Game97 • View player’s profile • Main game • Sound effect • Ready & start button
  • 98.
    Result - Controller98 • Add to Bookmark(using our own icon) • Social login • Move/Jump/Shoot
  • 99.
  • 100.
    To be implementation10 0• Chatting : chatting with each users • Inviting Friend : friend’s list will be appeared in game screen and user can invite if he is room’s owner. • Social Sharing : After game is ended, user’s win or lose status will be posted in their timeline. (it already implemented but not yet approval from facebook about permission)
  • 101.
    To be implementation 10 1 •Various Controller’s action : shaking, gyro sensor.. • Chatting using their own device or video chat : maybe..? very hard things to do. • Another Game : maybe.. Football? Some small game can adapt our platform easily. Maybe we can make that next term(capstone project 2)
  • 102.
    Conclusion 10 2 • Learnt alot of libraries : KineticJS, Web Socket, Scala language.. • Learnt security on the internet(SSL, Secured-WebSocket) • At first, we thought that for making volley ball, it will easy to build. But a lot of functions is needed. • Unexpected problems : SSL, Changing web framework.. • Schedule delayed : we cannot use our free time with flexible especially national holiday. • Server-side technology is well done implemented but client-side technology is normal implemented. • Because of server-side is done, we can focus on make game next term..
  • 103.
  • 104.