2013年4月28日 星期日

Porting a HTML5 game to mobile platform

When I read the article from Michal Budzynski that teaches me the first lesson "How to make a HTML5 game", and I try to let it also can be played fun on mobile devices. Here is the link I put on my Github: https://github.com/DaoshengMu/Simple-game-with-HTML5-Canvas/tree/master/mobile

Link: https://dl.dropboxusercontent.com/u/75721204/Html5/mobile/index.html



  1. Different screen size
    You must define different item-size for supporting different screen size. Therefore, you need to write the CSS file, CSS provides px, %, em to adjust the item size. "px" is absolute pixel of the screen. "%" means percentage of the font size. For example, your browser default font size is 12 point, 80% means you use 9.6 point. "em" is the m letter size, it has the same meaning as "%", if your em is 0.5 that means your item is 6 point. Put the mobile.css in your index.html, and define the media(resolution) you want to support.
    media="screen and (max-device-width: 768px) and (orientation: portrait),
      screen and (max-device-width: 1024px) and (orientation: landscape)"/> 
    Define the special size in mobile.css
    #mario-proto {
        position : relative;
        width : 1.625em;
        height : 2.375em;    
    }
    .mario-size {
        font-size : 40px;
    }
    
    /* use a bigger base size for tablets, in mobile.css */
    @media (min-device-width: 768px) {
        #game {
            font-size : 64px;
        }
        #game-screen .game-board {
            margin : 0.75em;
        }
        .mario-size {
            font-size : 80px;
        }
        
        .platform-size {
            font-size : 80px;
        }
    }
    

  2. User input
    If we play the game on PC browser, we can use our mouse to be the controller, but on mobile device we need to adjust our method, accelerometer is the best choice.
    Mouse move event:
     window.onmousemove = function(e) {
                mouseX = e.pageX;
                mouseY = e.pageY;
                if (player.X > mouseX) {
                    player.moveLeft();
                } else if (player.X < mouseX) {
                    player.moveRight();
                }
            };
    Accelerometer is not the official spec of W3C, so there is some complexity need to be solved:
    if (window.DeviceOrientationEvent) {   // W3C spec
            window.addEventListener("deviceorientation", function () {
             //   tilt([event.beta, event.gamma]);
             player.moveAccMove(event.gamma*0.5);
            }, true);
        } else if (window.DeviceMotionEvent) { // Some devices support it
            window.addEventListener('devicemotion', function () {      
             player.moveAccMove(event.acceleration.x);
            }, true);
        } else {   // Mozilla spec
            window.addEventListener("MozOrientation", function () {      
                player.moveAccMove(orientation.x);
            }, true);
        } 
  3. Cross-browsers
    I can sure every browsers could be supported totally, especially for accelerometer function. On iOS you can the install function to install on your desktop, and that will be an icon likes like an native app which download from app store. On Android, we can hide the address bar
     // hide the address bar on Android devices
            if (/Android/.test(navigator.userAgent)) {
                $("html")[0].style.height = "200%";
                setTimeout(function() {
                    window.scrollTo(0, 1);
                }, 0);
            }
  4. WebStorage
    If you want to save some game data on your browser, you can choose WebStorage or cache, cache just can save 4KB per domain, WebStorage can support 2MB. Therefore, we prefer WebStorage to be our first technology-choice. In WebStorage, we use key/value approach to store our data.
     var db = window.localStorage; // WebStorage 
     db.setItem(key, value); // store data to WebStorage
  5. Debugging on mobile
    https://developers.google.com/chrome-developer-tools/docs/remote-debugging
    It is very easy to debug on mobile. First, you need to download Android SDK to your PC, and then enable USB debugging on your Android device. Second, open your Chrome browser on mobile, go to the setting and enable USB web debugging. Next, open the folder where you downloaded Android SDK, go to android-sdk\platform-tools, use command-line tool enter adb devices to confirm your driver has been installed successfully. Then, enter adb forward tcp:9222 localabstract:chrome_devtools_remote , open your PC Chrome and go to the address localhost:9222,you will see the pages are the same to your mobile device Chrome. Select which page you want to debug. Now, you can debug!!!
     

2013年4月25日 星期四

WebGL: How to write portable WebGL


WebGL has been occupied about 67% users' devices. Now, it is a big chance to do some innovative works on it.
http://webglstats.com/
http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/

2013年4月14日 星期日

架設Gerrit和Git

Gerrit是對於Git的一種使用Web-based的code-review管理工具。
管理者可以透過網頁的介面管理project與reviewer。 設定方式有點複雜,我個人本身花了三天,而且還找到翻譯文章拼命試,後來才發現找錯方向。 整理一下目前可能的裝設方法:
  1. 使用OpenID
    OpenID是由一些大型的網站所提供(ex: google, Yahoo...),可以透過他們的介面取得我們的使用者帳號,利用此法可以登入我們架設好的Gerrit,但是對於企業專案不打算使用外部帳號的需求上這點就不實用。這種架設方法Gerrit官方號稱只需要十分鐘就可以完成,不過我還是花了半小時...http://gerrit-documentation.googlecode.com/svn/Documentation/2.6/install-quick.html

    首先替我們的ubuntu創建一個user:
    $ sudo adduser gerrit2
    $ sudo su gerrit2
    下載Gerrit,我這次很乖照文件載了較舊版本 2.2
    A list of releases available Link to the 2.2.2 war archive
    安裝Gerrit
      gerrit2@host:~$ java -jar gerrit.war init --batch -d ~/gerrit_testsite
      Generating SSH host key ... rsa(simple)... done
      Initialized /home/gerrit2/gerrit_testsite
      Executing /home/gerrit2/gerrit_testsite/bin/gerrit.sh start
      Starting Gerrit Code Review: OK
      gerrit2@host:~$
    確認Gerrit restart是否ok
      gerrit2@host:~$ ~/gerrit_sites/bin/gerrit.sh restart
      Stopping Gerrit Code Review: OK
      Starting Gerrit Code Review: OK
      gerrit2@host:~$
    修改canonicalWebUrl使他會導向該有的位址,預設為localhost,如果從外部連進去會發生頁面導向錯誤 (ex:http://ec2-184-72-200-48.compute-1.amazonaws.com:8080)
    ubuntu@domU-12-31-39-14-69-82:~$ vi /home/gerrit2/gerrit_sites/etc/gerrit.config
    註冊ssh key,此key是用來給操作git行為的使用者一個授權碼,首先檢查是否已經存在ssh key
    user@host:~$ ls .ssh
    authorized_keys  config  id_rsa  id_rsa.pub  known_hosts
    user@host:~$
    如果沒有的話就要生成一個

      user@host:~$ ssh-keygen -t rsa
      Generating public/private rsa key pair.
      Enter file in which to save the key (/home/user/.ssh/id_rsa):
      Created directory '/home/user/.ssh'.
      Enter passphrase (empty for no passphrase):
      Enter same passphrase again:
      Your identification has been saved in /home/user/.ssh/id_rsa.
      Your public key has been saved in /home/user/.ssh/id_rsa.pub.
      The key fingerprint is:
      00:11:22:00:11:22:00:11:44:00:11:22:00:11:22:99 user@host
      The key's randomart image is:
      +--[ RSA 2048]----+
      |     ..+.*=+oo.*E|
      |      u.OoB.. . +|
      |       ..*.      |
      |       o         |
      |      . S ..     |
      |                 |
      |                 |
      |          ..     |
      |                 |
      +-----------------+
      user@host:~$
    輸出public key
    user@host:~$ cat .ssh/id_rsa.pub
      ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEA1bidOd8LAp7Vp95M1b9z+LGO96OEWzdAgBPfZPq05jUh
      jw0mIdUuvg5lhwswnNsvmnFhGbsUoXZui6jdXj7xPUWOD8feX2NNEjTAEeX7DXOhnozNAkk/Z98WUV2B
      xUBqhRi8vhVmaCM8E+JkHzAc+7/HVYBTuPUS7lYPby5w95gs3zVxrX8d1++IXg/u/F/47zUxhdaELMw2
      deD8XLhrNPx2FQ83FxrjnVvEKQJyD2OoqxbC2KcUGYJ/3fhiupn/YpnZsl5+6mfQuZRJEoZ/FH2n4DEH
      wzgBBBagBr0ZZCEkl74s4KFZp6JJw/ZSjMRXsXXXWvwcTpaUEDii708HGw== John Doe@MACHINE
      user@host:~$
    開啟browser輸入Gerrit的canonical url (ex: http://ec2-184-72-200-48.compute-1.amazonaws.com:8080) 點選register user會彈出以下頁面,這時候會疑問甚麼是OpenID
    參考以下連結說明 http://openidexplained.com/get
    選擇哪種網站的帳號
    獲得OpenID
    輸入ID,就會導入認證頁面

    認證成功後,將public key貼到Gerrit的setting頁面
    (從ssh-rsa開始clip到結尾,注意中間不要有自己添加多餘的空白或換行)
                                
    修改Username
                               
    最後再確認到底Username(ellis)有沒有驗證成功,如果顯示以下內容就表示成功了,否則會出現Permission deny

  2. ubuntu@domU-12-31-39-14-69-82:~$ ssh ellis@localhost -p 29418                  
      ****    Welcome to Gerrit Code Review    ****
    
      Hi Ellis Mu, you have successfully connected over SSH.
    
      Unfortunately, interactive shells are disabled.
      To clone a hosted Git repository, use:
    
      git clone ssh://ellis@ec2-184-72-200-48.compute-1.amazonaws.com:29418/REPOSITORY_NAME.git
    
    
    接下來就可以做後續管理member, project等動作
    (如果有問題可以嘗試
     sudo rm -rf known_hosts
    )
  3. 使用HTTP和MYSQL
    原本預設是選定OpenID和H2,這個服務方式會限制其使用者的普及度,並且H2並不是適合大型project使用。
    安裝Apache2, MySQL:
    sudo apt-get install apache2
    sudo apt-get install mysql-server

    設定table
    CREATE USER 'ubuntu'@'localhost';  
    CREATE DATABASE reviewdb;
    ALTER DATABASE reviewdb charset=latin1;
    GRANT ALL ON reviewdb.* TO 'ubuntu'@'localhost';
    GRANT ALL ON reviewdb.* TO 'root@'localhost';
    FLUSH PRIVILEGES; 
    #這裡的ubuntu為Linux中的user

    安裝gerrit
    下載版本 2.5.2
    執行
    sudo java -jar gerrit.war init -d /home/ubuntu/gerrit_sites

    在過程中:
    Database選用MYSQL
    Database name為reviewdb
    Database user為root
    Database password為安裝時候給予的root密碼
    Maintainer為root
    Authentication為http
    這樣安裝就會順利成功


    設定密碼:
    sudo htpasswd -c /home/ubuntu/gerrit_sites/etc/passwords "xxx" //第一次創建時的指令
    sudo htpasswd /home/ubuntu/gerrit_sites/etc/passwords "xxx"


    設定apache sibling link
    ln -s /etc/apache2/mods-available/proxy.conf /etc/apache2/mods-enable/proxy.conf  
      
    ln -s /etc/apache2/mods-available/proxy.load /etc/apache2/mods-enable/proxy.load  
      
    ln -s /etc/apache2/mods-available/proxy_http.load /etc/apache2/mods-enable/proxy_http.load

    修改apache的default page
    sudo vi /etc/apache2/sites-available/default

    在最後面加上
                   AuthType Basic
                   AuthName "Gerrit Code Review"
                   AuthBasicProvider file              
                   AuthUserFile /home/ubuntu/gerrit_sites/etc/passwords
                   Require valid-user
    
           
    
           ProxyPass / http://ipaddress.xx.xxx.xx:8080/

    修改gerrit的config
    sudo vi /home/ubuntu/gerrit_sites/etc/gerrit.config

    加上canonicalWebUrl = http://ipaddress.xx.xxx.xx:8080

    重新啟動gerrit
         sudo /home/ubuntu/gerrt_sites/bin/gerrit.sh restart

    重新啟動apache
         sudo /etc/init.d/apache2 restart

    成功後,接下來用browser輸入ip, ex: http://ec2-54-234-142-14.compute-1.amazonaws.com/
    就會要求帳號驗證,這裡就輸入在passwords裡面所記錄的資料,成功導入後就跟前面OpenID的SSH驗證方式一樣了。
    reference: http://fatalove.iteye.com/blog/1332881

  4. Gitweb和Gitolite
    Gitweb可以幫助我們用web方式瀏覽程式碼,再搭配Gitolite去控制使用者的權限,Gitolite只能透過命令列管理使用者權限,並沒有一個完美的GUI顯示,所以我試過後放棄它。http://changyy.pixnet.net/blog/post/31126499-%5Blinux%5D-%E4%BD%BF%E7%94%A8-git-%2B-gitolite-%2B-gitweb-%E6%9E%B6%E8%A8%AD-git-server-@-u
  5. GitLab
    目前我傾向用這套,因為它可以在browser來修改使用者權限,也有mail server的功能,分別可以針對member/group來管理使用者跟project的各自屬性。
    https://github.com/gitlabhq/gitlabhq/blob/951273ff2fff1a76f1e6ab87a774f3894de56838/doc/install/installation.md
    一些需要注意的事項:
    • 主機必須要配置4GB以上的記憶體
    • 如果遇到Access denied for user 'root'@'localhost' (using password: YES),表示database.yml漏修改到,記得要先執行cp的拷貝指令之後再去修改。
    • 當設定完成,連到此頁面遭遇Site-unavailable 502 Bad Gateway,要參考http://serverfault.com/questions/491022/access-code-304-accessing-nginx-in-vmware-from-host
      修改
      /etc/nginx/sites-available/gitlab   server: listen 10.190.193.113:80  internal ip
      /etc/nginx/sites-available/default  server: listen 127.0.0.1:80
    • config/gitlab.yml
      一般來說,email_from, support_email直接隨便填沒有關係,這欄位主要是定義寄件人資訊,Gmail是可以被發送成功mail和notify。但我遇到我們公司會阻擋notify,這時候這個adress就要被正確定義,ex:gitlab@192.168.xx.xx,後面的ip就是公司的mail server。

     

2013年4月2日 星期二

Porting C++ apps to FLASCC


2013年4月1日 星期一

Unreal Engine 4 "Infiltrator" Real-Time Demo