capstone project final presentation

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)


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


Server

Game

Demo

Architecturing





Sync w/server

Sync w/client



Optimizing

1st Demo Final Demo




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“ });


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


Server

Game

Demo

Architecturing





Sync w/server

Sync w/client



Optimizing

1st Demo Final Demo




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


Ikhwan Chang(Presenter)

-  Completed to make server

-  Vaccine is added on our server

-  Send to OSS Awards(오픈소스 공모대전), finally.


-  - 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


Server

Game

Demo

Architecturing





Sync w/server

Sync w/client



Optimizing

1st Demo Final Demo




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.


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


Server

Game

Demo

Architecturing





Sync w/server

Sync w/client



Optimizing

1st Demo Final Demo




We’re now


KineticJS

-  HTML Canvas JavaScript framework

-  Almost free(except support of technology)

-  Experience of use

-  Using the 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



-  Tested to communication between client and server

-  OSS Award: Failed


-  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


Server

Game

Demo

Architecturing





Sync w/server

Sync w/client



Optimizing

1st Demo Final Demo




We’re now

Team NGX- 9th weekend

54


-  Redesign controller

-  Add to chat function in server and client.


-  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


Server

Game

Demo

Architecturing





Sync w/server

Sync w/client



Optimizing

1st Demo Final Demo




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


59


-  Fixed to server

-  Changed whole design


-  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


Server

Game

Demo

Architecturing





Sync w/server

Sync w/client



Optimizing

1st Demo Final Demo




We’re now


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


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


Server

Game

Demo

Architecturing





Sync w/server

Sync w/client



Optimizing

1st Demo Final Demo




We’re now


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


Server

Game

Demo

Architecturing





Sync w/server

Sync w/client



Optimizing

1st Demo Final Report




We’re now


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


.��. . . . .



Client #1

Modified – Server Env 74

Server

Routing


.��. . . . .



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)

thanks!

capstone project final presentation

Engineering