Air Hockey Web Game (using ngxqrctl.js) Proposal
Team NGX kick-off presentation for capstone project Ikwhan Chang(20060957) | Sangtae Lee(20115695) | Dongkyoung Jo(20112104)
INDEX • Team NGX
• Introduction
• How to Use
• How to Play
• Game Rule
• System Architecture
• System Environment
• Schedule
• Q&A
2
Team NGX Team NGX
Air Hockey Web Game
(using ngxqrctl.js)
Team Mission
- Make new user experience in a web
- Make best web maintenance environment
- Share our source code within worldwide developers
Team Member & Role
3
Name Part
Ikwhan Chang NGX Web Server, QR Controller JavaScript Library
Sangtae Lee AirHockey Game Client
Dongkyoung Jo NGX QR Controller
Introduction Project Name
• Responsive Air Hockey Web Game
What is this?
• Air Hockey Game based on Web
• Remote Controlling via QR Code
• Server is based on NGXRCS
(NGXRCS : NGX Remote Control Server, our previous final production which is notification-based web
server)
Goal 5
1) optimize NGXRCS(NGX Remote Control Server) more smoother and faster.
2) make our NGXRCS via QR-code and Javascript Library(jQuery Plugin) : NGX QR Controller, ngxqrctl.js
3) make simple responsive game based on HTML/JavaScript and ngxqrctl.js : Air Hockey Game
Server optimizationOptimize
Provide for developer to our js library(jQuery Plugin)
Ngxqrctl.jsProvide our Air Hockey Game for demonstration(how to use our ngxqrctl.js)
Air Hockey Game(Demo)
How to Use? 6
1. Install our JS library Ngxqrctl.js : for developer
1) Add HTML element for showing qr-code
<div id=”ngx-container”></div>
2) Include the ngxqrctl script in developer’s site
<script src="/path/to/ngxqrctl.min.js"></script>
How to Use? 7
1. Install our JS library
3) CSS
#ngx-container #qr-view{ width: 100%; }
4) Initialize with JavaScript
var $container = $('#ngx-container');// init $container.ngx-qrctl({ // options layoutMode: 'fitRows’});
(How to use CSS is not yet determined but we will use CSS for customizing style)
Initialize an NGX QR Controller instance as a jQuery plugin: $('#container').ngx-qrctl().
Ngxqrctl.js : for developer
How to Use? 8
2. Setting event
(ex : onTouchStart)
var $container = $('#ngx-container');function onTouchStart() { // Here is user’s action console.log('layout done');} // bind event listener $container. ngx-qrctl( 'on', ’touchStart', onTouchStart );
Ngxqrctl.js : for developer
dragstartdragmove dragend
touchstarttouchend
touchmove
(list of event)
9
if there is two user, game will start
Player 1 - disconnected Player 2 - connected
How to Play? Air Hockey Web Game
1. Connect our game’s website
10 How to Play? Air Hockey Web Game
2. scan QR-code via user’s smartphone
11 How to Play? Air Hockey Web Game
3. Play!
12 Game Rule Air Hockey Web Game
• Two players, One ball
• Each side has their own goalpost
• Ball can move inside rectangle area.
• Available action Moving : left, right, jump
• If the ball go into the opposite’s goalpost, on the ground during game, the user can get a single point
• Time limitation : 3 min
System Architecture 13
Controller 1(iphone or android)
Controller 2(iphone or android)
Wi-Fi Connected
Server: I/O , Game Logic Processing, Push
Viewing Data���(JSON)
QR Code provided
User’s unique code Wi-Fi Connected
Our Website
Client #1
System Environment 14
Server
Routing
Socket.io (Push Server) Client #N
.���. . . . .
Push Data���(JSON)
Push Data���(JSON)
Development Environment 15
Lee
Jo
IntelliJ IDE
Eclipse w/ STS
Eclipse w/ Android
Testing Server
changes
testing
Jenkins Continuous Integration
JIRAIssue Tracker share Issue/Bug/TODO
Chang
GitRepository
Mid-term Exam
Schedule 16
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16UI / layout
class, transaction Design
Server
Game
Demo
Architecturing
Set-up Default Layout
research about QR-Code processing
Solve to minor problems
Apply QR-Code library to our game
Sync w/server
Sync w/client
JS Library Optimizing implementation to
build QR-Code image processing
Optimizing
1st Demo Final Demo
Default Game Appearance
packing JavaScript Library
OSS Challenge deadline(28th Sep)
Team NGX- 3th weekend 17
Ikhwan Chang (Presenter)
- Server Turning
- Architecturing
SangTae Lee & Dongkyoung Jo
- QR-Code Research
- jQuery & Socket.io plugin Research
Schedule 18
Mid-term Exam
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16UI / layout
class, transaction Design
Server
Game
Demo
Architecturing
Set-up Default Layout
research about QR-Code processing
Solve to minor problems
Apply QR-Code library to our game
Sync w/server
Sync w/client
JS Library Optimizing implementation to
build QR-Code image processing
Optimizing
1st Demo Final Demo
Default Game Appearance
packing JavaScript Library
OSS Challenge deadline(28th Sep)
We’re now
Architecturing Cent OS (Main O/S)
NGINX (Routing)
NodeJS
Socket.IO (Notification)
Server
ngx_rcs.js (plugin)
Smartphone HTML5
<canvas>
Client(Device) User’s Touch Data���
(JSON)
Air Hockey Game
jQuery
Client(Game)
ngx_qrctl.js (plugin) Push Notification
jQuery.qr-code
Where our plugins located Server Client
Server : npm(kind of node.js ‘s package) Client : jQuery Plugin All they will provide with opensource(most of plugin already do that)
ngx_rcs.js (plugin)
ngx_qrctl.js (plugin)
Type of QR-Code
QR-Code Processing http://larsjung.de/jquery-qrcode/
QR-Code Processing USERIP+USER-AGENT+HTTP HEADER
{“Sat, 07 May 2011 17:31:38 GMT”,”Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:10.0) Gecko/20100101 Firefox/10.0”,”165.194.33.5”}
CREATE UNIQUE KEY(using MD5 with IP-Hash key)
ENCODED TEXT : E5c09a1dd615d8c878dcfb0f2923f976 KEY : 165.194.33.5
CREATE QR-CODE(using jquery.qrcode : http://larsjung.de/jquery-qrcode/)
$(selector).qrcode({ "width": 100, "height": 100, "color": "#3a3”, "text": “http://qrcode.matthewlab.com/q=E5c09a1dd615d8c878dcfb0f2923f976“ });
Team NGX- 4th weekend 24
Ikhwan Chang
- - setting to node.js and socket.io
- - made to default push notification program
SangTae Lee & Dongkyoung Jo(Presenter)
- - set up default layout
- - restructure the class
Schedule 25
Mid-term Exam
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16UI / layout
class, transaction Design
Server
Game
Demo
Architecturing
Set-up Default Layout
research about QR-Code processing
Solve to minor problems
Apply QR-Code library to our game
Sync w/server
Sync w/client
JS Library Optimizing implementation to
build QR-Code image processing
Optimizing
1st Demo Final Demo
Default Game Appearance
packing JavaScript Library
OSS Challenge deadline(28th Sep)
We’re now
• License problem
• We provided web server from SK since we joined open source award challenge but said that they cannot provide window based server because they have not enough to Window license.
• So they provide only server based on Linux
• We seriously consider to change Cent OS(based on Linux) during first week and finally Cent OS has no problem if we changed.
Team NGX- Why we change server O/S?
• Detected malware and DDOS attack
• During summer vacation, we found that there was a lot of malware and DDOS in our server.
• So we could not trust windows server anymore.
Team NGX- Why we change server O/S?
• We finished to setup socket.io and node.js
• Node.js can provide npm instructions
• So user can easily install our NGX Server
Team NGX- Setting socket.io and node.js
• User can install just two instructions
• npm install –save express
• npm install –save socket.io
• If user want to run our server, there is easy instruction
• Just “node index” instruction can run our server
Team NGX- Setting socket.io and node.js
• We can check how more faster than previous server(Windows)
• http://test.matthewlab.com/game : Test game
• http://test.matthewlab.com/c : NGX Controller
Using JavaScript
- Center circle
- Center line
- Goal area
- Goalpost
Team NGX- Default layout(prototype)
Team NGX- Game engine
KineticJS
- HTML Canvas JavaScript framework
- Almost free(except support of technology)
- Experience of use
- Using the game engine
Team NGX- Game
Volleyball & Air hockey
• similar elements
• way of movement, collision, score etc
• can reuse the last semester’s class
• need to restructure the class
Team NGX- Problem
• Implementation to actual hockey game is delayed
• graduation thesis, broke down the laptop ..., other problems
à We must speed up for progressing our project
Team NGX- Next to do
• Implementation to actual hockey game quickly
• Add to npm library and make jQuery plugin
Team NGX- 5th weekend 35
Ikhwan Chang(Presenter)
- Completed to make server
- Vaccine is added on our server
- Send to OSS Awards(오픈소스 공모대전), finally.
SangTae Lee & Dongkyoung Jo
- - Set game rules clear and then these rules are applied previous project
- - Modify prototype UI and add both players and ball(s)
Schedule 36
Mid-term Exam
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16UI / layout
class, transaction Design
Server
Game
Demo
Architecturing
Set-up Default Layout
research about QR-Code processing
Solve to minor problems
Apply QR-Code library to our game
Sync w/server
Sync w/client
JS Library Optimizing implementation to
build QR-Code image processing
Optimizing
1st Demo Final Demo
Default Game Appearance
packing JavaScript Library
OSS Challenge deadline(28th Sep)
We’re now
Install to vaccine 37
- ClamAV is freeware for linux-based OS.
- Our server is based on Cent OS. So we installed ClamAV and added to daily schedule.
Presented to oss award 38
- Finally, our server-side programming was presented for open source software award, sending all materials.
- We captured our demo video and upload all source code at github for open source.
Demo video : http://www.youtube.com/watch?v=Vjxvz-ngwSA Website : http://ngx.matthewlab.com
Server Architecture(OSS Awards) 39
Device Detection(OSS Awards) 40
Site Remote Control(OSS Awards) 41
Air hockey rules 42
- There are two players
- If puck goal in the my section hole, the opposite play get 1 point.
- A puck is on a host player's section at first. It means a host player attacks first. but, in the next game, the winner of previous game gets a right to attack first.
- If a player get a 15 or 18 points, finally the player win the game.
- Players cannot touch puck which is in opposite player section.
- There is time limit to play game speedly.
Air hockey 43
What will we do next? 44
- The first evolution result will be noticed at 10/6.
- If we passed first evolution, then there is technical test during October. So, Ikwhan Chang will focus on this technical test and other tests.
- And Sangtae Lee and Dongkyoung Jo will focus on make air hockey game for perfect sample.
Team NGX- 6th weekend 45
Ikhwan Chang
- ngx_qrctl.js is attached successfully in our Air Hockey Game
- Now we can get user’s touch x-y coordination in our game.
SangTae Lee(Presenter) & Dongkyoung Jo
- Implementing Game part (animation effect, movement, collision)
- Design 2D collision equation yet applied to hockey game.
Schedule 46
Mid-term Exam
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16UI / layout
class, transaction Design
Server
Game
Demo
Architecturing
Set-up Default Layout
research about QR-Code processing
Solve to minor problems
Apply QR-Code library to our game
Sync w/server
Sync w/client
JS Library Optimizing implementation to
build QR-Code image processing
Optimizing
1st Demo Final Demo
Default Game Appearance
packing JavaScript Library
OSS Challenge deadline(28th Sep)
We’re now
Team NGX- Game engine
KineticJS
- HTML Canvas JavaScript framework
- Almost free(except support of technology)
- Experience of use
- Using the game engine
Team NGX- Game engine
• Kineticjs take a time-out for focusing on other endeavors
• It is going to service before long, but we cannot wait for their service.
Team NGX- Problem
• Implementation to actual hockey game is little bit delayed
• We decide to make hockey game only using html5.
à have to learn html5 animation
• It needs to calculate velocity of user’s controller
• We already have a calculating collision function
à We must speed up for progressing our project
Air Hockey Game
Team NGX- 7th weekend 51
Ikhwan Chang(Presenter)
- Tested to communication between client and server
- OSS Award: Failed
SangTae Lee & Dongkyoung Jo
- Implementing Game part (animation effect, movement, collision)
- Design 2D collision equation yet applied to hockey game.
Schedule 52
Mid-term Exam
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16UI / layout
class, transaction Design
Server
Game
Demo
Architecturing
Set-up Default Layout
research about QR-Code processing
Solve to minor problems
Apply QR-Code library to our game
Sync w/server
Sync w/client
JS Library Optimizing implementation to
build QR-Code image processing
Optimizing
1st Demo Final Demo
Default Game Appearance
packing JavaScript Library
OSS Challenge deadline(28th Sep)
We’re now
Demo
Team NGX- 9th weekend
54
Ikhwan Chang(Presenter)
- Redesign controller
- Add to chat function in server and client.
SangTae Lee & Dongkyoung Jo
- Add to Score and Game Ending Message
- Tried to more smooth game
- Change ball from vector to image
- Add to sound effect
Schedule 55
Mid-term Exam
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16UI / layout
class, transaction Design
Server
Game
Demo
Architecturing
Set-up Default Layout
research about QR-Code processing
Solve to minor problems
Apply QR-Code library to our game
Sync w/server
Sync w/client
JS Library Optimizing implementation to
build QR-Code image processing
Optimizing
1st Demo Final Demo
Default Game Appearance
packing JavaScript Library
OSS Challenge deadline(28th Sep)
We’re now
Extra Game Controller
Sound Effect and Other Effects
Team NGXProblems from demonstration
56
1. There is not enough to adjust hockey game rule(e.g. puck cannot move opposite area)
2. There is no sound effect(it means game is looks like air hockey but not really)
3. Game is too simple
4. Game is too monotone(it is not enough to game since there is no image)
Team NGXAdd to chat
57
NGX Controller [Player 1] : Hey what r u doing now??
NGX AirHockey Game
Team NGXAdd to chat – source code
58
Ngx_qrctl.js NGX Server
Team NGX- 10th weekend
59
Ikhwan Chang(Presenter)
- Fixed to server
- Changed whole design
SangTae Lee & Dongkyoung Jo
- Joined in ROTC Training
- Since their main role is game logic, Ikwhan focused on game’s appearance in this week
- Tried to find resources(sound, image)
- Add to sound
Schedule 60
Mid-term Exam
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16UI / layout
class, transaction Design
Server
Game
Demo
Architecturing
Set-up Default Layout
research about QR-Code processing
Solve to minor problems
Apply QR-Code library to our game
Sync w/server
Sync w/client
JS Library Optimizing implementation to
build QR-Code image processing
Optimizing
1st Demo Final Demo
Default Game Appearance
packing JavaScript Library
OSS Challenge deadline(28th Sep)
We’re now
Extra Game Controller
Sound Effect and Other Effects
Team NGXChange whole design
61
- Replaced puck, pin from vector to image(design by Ikwhan)
- Added to icy background image, relocated to score board
Team NGX 62 Add game control button in NGX controller
Add game sound
- Game starting sound
- Bump sound
Team NGX- 11th weekend
63
Ikhwan Chang
- Optimize server
- Try to solve blinking images problem
SangTae Lee (Presenter) & Dongkyoung Jo
- Optimize game appearances (focus on collision).
- Make ending point of game and enable to setting the point.
- Start to write final report.
Schedule 64
Mid-term Exam
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16UI / layout
class, transaction Design
Server
Game
Demo
Architecturing
Set-up Default Layout
research about QR-Code processing
Solve to minor problems
Apply QR-Code library to our game
Sync w/server
Sync w/client
JS Library Optimizing implementation to
build QR-Code image processing
Optimizing
1st Demo Final Demo
Default Game Appearance
packing JavaScript Library
OSS Challenge deadline(28th Sep)
We’re now
Extra Game Controller
Sound Effect and Other Effects Optimizing
Team NGXThere are some problems…
65
- Blinking images(puck and pin).
- When user control pin fast, it’s appearance is little strange.
Team NGX 66 Last week…
Add game control button in NGX controller
à Try to activate in the our game. But little bit delayed
Team NGX 67
This week…. - Enable setting ending sore in NGX controller
- Solve blinking problems
- Adjust game coordinate (when we redesign whole game
, cooridinate was changed )
- Optimize game logic continuously.
Schedule 68
Mid-term Exam
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16UI / layout
class, transaction Design
Server
Game
Demo
Architecturing
Set-up Default Layout
research about QR-Code processing
Solve to minor problems
Apply QR-Code library to our game
Sync w/server
Sync w/client
JS Library Optimizing implementation to
build QR-Code image processing
Optimizing
1st Demo Final Report
Default Game Appearance
packing JavaScript Library
OSS Challenge deadline(28th Sep)
We’re now
Extra Game Controller
Sound Effect and Other Effects Optimizing
Team NGX Team NGX
Air Hockey Web Game
(using ngxqrctl.js)
Team Mission
- Make new user experience in a web
- Make best web maintenance environment
- Share our source code within worldwide developers
Team Member & Role(Revised)
69
Name Part
Ikwhan Chang NGX Web Server, QR Controller JavaScript Library
Sangtae Lee AirHockey Game Client
Dongkyoung Jo UI Design
Introduction Project Name
• Responsive Air Hockey Web Game
What is this?
• Air Hockey Game based on Web
• Remote Controlling via QR Code
• Server is based on NGXRCS
(NGXRCS : NGX Remote Control Server, our previous final production which is notification-based web
server)
Goal 71
1) optimize NGXRCS(NGX Remote Control Server) more smoother and faster.
2) make our NGXRCS via QR-code and Javascript Library(jQuery Plugin) : NGX QR Controller, ngxqrctl.js
3) make simple responsive game based on HTML/JavaScript and ngxqrctl.js : Air Hockey Game
Server optimizationGoogle Cloud Server(IaaS)
OptimizeProvide for developer to our js library(jQuery Plugin)
Ngxqrctl.jsProvide our Air Hockey Game for demonstration(how to use our ngxqrctl.js)
Air Hockey Game(Demo)
Air hockey rules 72
- There are two players
- If puck goal in the my section hole, the opposite play get 1 point.
- A puck is on a host player's section at first. It means a host player attacks first. but, in the next game, the winner of previous game gets a right to attack first.
- If a player get a 15 or 18 points, finally the player win the game.
- Players cannot touch puck which is in opposite player section.
- There is time limit to play game speedly.
Client #1
Modified – Server Env 73
Server
Routing
Socket.io (Push Server) Client #N
.���. . . . .
Push Data���(JSON)
Push Data���(JSON)
Client #1
Modified – Server Env 74
Server
Routing
Socket.io (Push Server) Client #N
.���. . . . .
Push Data���(JSON)
Push Data���(JSON)
Modified – IaaS 75
Before – Customized Server
After – Google Cloud
Modified 76
Removed function
• Chatting : It is not useful
• KineticJS: Since KineticJS opensource project was closed, we could not use this framework.
Problem 77
• O/S was changed(4th week)
• We provided web server from SK since we joined open source award challenge but we could not use windows server since there was license problem of Windows Server.
• So they provide only server based on Linux
• Moreover, we failed to challenge OSS award(So, SK planet could not provide server anymore)
• => That’s why we move server from us to Google Cloud.
Problem 78
• Cannot use KineticJS
• Kineticjs take a time-out for focusing on other endeavors
• It is going to service before long, but we cannot wait for their service.
Before & After 79
Modified Feature Before After
Server H/W Server provided by SK Google Cloud Platform
Server O/S Windows 2013 Server Enterprise R2 CentOS 7
Game – Appearance Using the image of puck and pin Using the vector(SVG) of puck and pin
Game Engine KineticJS Pure-HTML5 Canvas
Client – the function of controller Chatting Button control(Start/Pause/Resume)
Client – QR Code Appearance QR with inner status message QR with color variation belong to the
status of user
Result 80
Game Intro
After user scanned qr-code
Result 81
Game Main
Result 82
• Game Controller
• MoveXY : User can control their puck using touch pad
• Game: User can set game score / User can pause/resume that game.
Demo http://github.com/MatthewLAB/NGX_PROJECT
To be implementation Server Client
Server : npm(kind of node.js ‘s package) Client : jQuery Plugin All they will provide with opensource(most of plugin already do that)
ngx_rcs.js (plugin)
ngx_qrctl.js (plugin)
Q&A
thanks!
Top Related