2011年7月28日 星期四

HTML5 in mobile

紀錄一下有關HTML5 在行動平台上的滑鼠監聽事件
web mobile
onmousemove touchmove
onmousedown touchstart
onmouseup touchend

/**************************************************************************
程式碼
/**************************************************************************
window.addEventListener("touchmove", this, false);
this.stage.onmousemove = stageMouseEvent;
}
}
Stage.prototype.handleEvent = function (event)
{
switch(event.type)
{
case "touchstart" :
this.onTouchStart(event);
break;
case "touchmove" :
this.onTouchMove(event);
break;
case "touchend" :
this.onTouchEnd(event);
break;
}
}
Stage.prototype.onTouchMove = function(e)
{
e.preventDefault();
/* Stop tracking if targetTouches contains multiple touches (this means that a gesture event has occurred)*/
if (e.targetTouches.length != 1)
{
return false;
}
/* trace x,y */
mouseXY("Stage:" + e.targetTouches[0].clientX + ',' + e.targetTouches[0].clientY);
return false;
}

2011年7月26日 星期二

PhoneGap學習文件

PhoneGap是一套可以用HTML5 + JavaScript開發手機應用程式的開放原始碼SDK,以下是如何開發Android APP的安裝設定及基礎使用

/********************************************************************************************************/
//    Android PhoneGap安裝設定說明文件
//    撰寫人:Matis Hsiao
//    撰寫日期:2011/07/14
//
/********************************************************************************************************/
1.Android開發環境設定:
    1.下載安裝最新版JAVA JDK,安裝Android SDK會先確認電腦的JavaSDK是不是符合需求
    2.下載最新版Google android開發SDK:
        2-1.安裝android SDK請注意安裝目錄不能有空白及中文或特殊符號   
        2-2.安裝完成後,開啟Android SDK and AVD Manager(SDK setup.exe),選擇Setting勾選Force https://…sources to be fetched using http://….
        2-3.SDK Manager可以做SDK更新或是下載新版的SDK
    3.下載安裝Eclipse:
        3-1.開啟Eclipse,選擇工具列Help中的Install New Software
        3-2.選擇Add,Name的欄位可自行輸入,該欄位是做為辨識Software用,Location請輸入http://dl-ssl.google.com/android/eclipse,選擇OK
        3-3.Eclipse會自動跟http://dl-ssl.google.com/android/eclipse取得工具目錄清單,可能會花1~2分鐘
        3-4.接著會出現Developer Tools的清單,把所有Checkbox都打勾後按下Next,之後只需一直按Next再來按Accept再按下Select All最後按下OK,便會開始自動下載更新
        3-5.選擇工具列Window-> Preferences
        3-6.打開Android標籤,在SDK Location中輸入你剛剛解壓縮Android SDK的位置後按下OK
        3-7.選擇工具列Window-> Android SDK and AVD Manager
        3-8.選擇Installed Packages標籤接著按下 Update All
        3-9.按下Accept後就可以Install,此時會花一點時間下載更新SDK
    4.建立模擬器環境:
        4-1.開啟Eclipse,選擇工具列Window-> Android SDK and AVD Manager,選擇Virtual Devices標籤,按下New建立模擬器
        4-2.Name欄位可以任意輸入英文的模擬器名稱
        4-3.Target欄位是選擇你需要的Android版本
        4-4.可以設定SD Card和螢幕外觀等詳細設定,接著按下Create AVD
        4-5.建立完成後,可以點選你剛才設定好的模擬器,按下Start->Launch,測試模擬器是否可以運作
   
2.PhoneGap開發設定:
    1.建立Android專案
    2.設定PhoneGap函式庫及網頁根目錄
      2-1.在Android專案下建立libs目錄及在assets目錄下建立www作為網頁根目錄         
        2-2.解開PhoneGap函式庫壓縮檔,選擇Android目錄,並做以下複製動作
            2-2-1.將phonegap.js複製到/assets/www/下 ,原檔名可能為phonegap.x.x.x.js,請把它改名為phonegap.js
            2-2-2.將phonegap.jar複製到/libs/下
            2-2-3.[匯入函式庫]:從Eclipse點選專案目錄右鍵更新目錄,再右鍵點選libs/phonegap.jar,選擇[Build Path」-> [Add to Bulid Path]
    3.設定Android專案使用PhoneGap為主要開發設定
        3-1.開啟android專案內的src/專案package/app.java檔案
          3-1-1.在程式碼上方加入 import com.phonegap.*; //匯入phoneGap函式庫
          3-1-2.將程式碼第7行 Class extends 名稱從Activity 改成 DroidGap
        3-1-3.將程式碼第12行 setContentView(R.layout.main);改成 super.loadUrl("file:///android_asset/www/index.html");
    4.設定AndroidMainifest.xml檔,加入欲使用的硬體功能
      4-1.右鍵點選專案中的AndroidManifest.xml,並選擇Open With -> Text Editor
      4-2.將以下的XML參數複製到<manifest xmlns:android="http://schemas.android.com/apk/res/android" .... android:versionName="1.0">之後
      <supports-screens
      android:largeScreens="true"
      android:normalScreens="true"
      android:smallScreens="true"
      android:resizeable="true"
      android:anyDensity="true"
      />
      <uses-permission android:name="android.permission.CAMERA" />
      <uses-permission android:name="android.permission.VIBRATE" />
      <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
      <uses-permission android:name="android.permission.READ_PHONE_STATE" />
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.RECEIVE_SMS" />
      <uses-permission android:name="android.permission.RECORD_AUDIO" />
      <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
      <uses-permission android:name="android.permission.READ_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
      4-3.將android:configChanges="orientation|keyboardHidden"加到activity屬性內的android:label="@string/app_name"之後,如以下xml設定
          <activity android:name=".AppActivity"
       android:label="@string/app_name"
       android:configChanges="orientation|keyboardHidden">
3.PhoneGap開發:
        1.網頁存放位置為/assets/www/ 可將該目錄視為網頁根目錄
        2.Hello World範例:
            <!DOCTYPE HTML>
            <html>
            <head>
            <title>Hello Inside</title>
            <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
            </head>
            <body>
            <h1>Hello World</h1>
            </body>
            </html>
        3.執行模擬器操作,右鍵點選專案選擇Run As ->Android Application,就可模擬程式           
Q&A:
        Q1.如何使用Android手機實際操作?
            A:只要電腦可以抓到Android手機驅動,則Eclipse執行模擬器時會自動將App.apk安裝到你的手機裡
        Q2.為什麼模擬器效能不好?
            A:由於模擬器是依存在Eclipse,而Eclipse本身會吃記憶體,所以模擬器模擬出來的效能會比一般Android手機來的差,建議使用Android手機實際操作
        Q3.執行模擬器發生錯誤訊息
            A:請確認Android SDK是否有設定完成
           
           
           
參考網址:
        1.Android環境建置: http://www.inside.com.tw/2010/06/17/android-setup
        2.PhoneGap環境建置:http://www.inside.com.tw/2011/01/29/hello-inside-phonegap
          備註:PhoneGap環境建置的設定參數請注意"符號,該作者的參數是用”符號,或造成設定錯誤
   
 

SmartFoxServer 2X開發文件

前一陣子因為公司專案順便學的Java Server framework,以下是如何安裝跟如何使用一些內建framework API

/*******************************************************************************************************
SmartFox安裝
    到官方下載SmartFox安裝檔,安裝即可,免費上線人數為100人,如果要公開使用要在畫面show Power by SmartFox Server 2X

SmartFox更新
    下載SmartFox更新檔,並將檔案放置到SmartFox安裝的目錄執行install.bat進行安裝
   
SmartFox Extension更新
  使用eclipse:
          1.匯出Jar:使用Export功能匯出jar檔,並將檔案放置到 SmartFox安裝的目錄/SFS2X/extensions/zone name/
          2.設定SmartFox Extensions:
              1.開啟SmartFox admin tool,並登入admin tool
              2.選擇zone configurator分頁,並選擇要加入extension的zone選擇編輯功能
              3.選擇Zone Extension分頁
                  1.選擇Name選項,選取要使用的extension name
                  2.選擇Main class選項,選取要設定為Main class的class name             
          3.重新啟動smartfox server
         
SmartFox 設定:
  1.socket allow ip address:
    設定允許IP名單:
    開啟 SmartFox安裝的目錄/SFS2X/config/server.xml
    以下為允許清單,IP address ,port ,type = TCP or UDP
    <socketAddresses>
        <socket address="127.0.0.1" port="9933" type="TCP"/>
        <socket address="127.0.0.1" port="18881" type="TCP"/>
        <socket address="127.0.0.1" port="18881" type="UDP"/>
        <socket address="192.168.1.42" port="9933" type="TCP"/>
        <socket address="192.168.1.42" port="9933" type="UDP"/>
        <socket address="192.168.1.42" port="18881" type="UDP"/>
      </socketAddresses>
SmartFox Room Variables設定
    1.GroupID必須設定成預設跟公開
    2.Variables必須設定成global
    code:
        //宣告roomVarList
        List<RoomVariable> roomVarList = new ArrayList<RoomVariable>();
        //設定roomVar參數       
        SFSRoomVariable roomVar = new SFSRoomVariable("Test", "Test",false, true, true);
        //新增至roomVarList陣列
        roomVarList.add(roomVar);           
        //將Room variables 加入Room settings參數
    roomSettings.setRoomVariables(roomVarList);
SmartFox User Variables設定
    1.設定User variables必須使用getApi().setUserVariables,才能觸發USER_VARIABLES_UPDATE SFSEvent事件
    2.admin tool可設定user variables的數量,預設為5
    code:
        //宣告userVarList
        List<UserVariable> userVarList = new ArrayList<UserVariable>();
        //設定userVar參數   
        UserVariable userVar = new SFSUserVariable("TestUserVar", "userVars");
        //新增至userVarList陣列
        userVarList.add(userVar);       
        //更新使用者variables           
        getApi().setUserVariables(user, userVarList, true, true);
SmartFox DataBase 設定
    1.admin tool設定使用Database manager,選擇Database manager分頁
        //啟動Database manager
            1.Activate = true
        //設定Database Driver
            2.Database driver class = org.gjt.mm.mysql.Driver
        //Database IP及要使用的database name
            3.connection string = jdbc:mysql://localhost:3306/db name
        //Database user name
            4.username = dbUser
        //Database user password
            5.password = dbPassword
        //測試Database Server的Test SQL
            7.Test SQL = SELECT COUNT(*) FROM members
        //最多可以使用的連線數
            8.Maximun # of active connections
        //最多可以失效的連線數
            9.Maximun # of idle connections
        //當可用連線都用完的處理方式
            10.Exhausted pool action
                1.FAIL  傳送連線失敗
                2.BLOCK    直接阻擋
                3.GROW    追加新連線到連線池
        //阻檔連線時間
            11.Block time
    code:
        //建立連線及取得資訊
        try {
            //建立IDBManager
         IDBManager dbManager = getParentExtension().getParentZone().getDBManager();
        
         //建立連線資源
      Connection connection = dbManager.getConnection();
     
         //建立靜態SQL
         PreparedStatement stmt = connection.prepareStatement("SELECT * FROM members WHERE name = ?");
         //設定SQL name = String(name)
         stmt.setString(1, name);
                
         //執行SQL查詢
         ResultSet res = stmt.executeQuery();
        
         //如果查詢資源沒有資料,輸出例外
         if (!res.first()){
            //對Client發出例外錯誤
            SFSErrorData errData = new SFSErrorData(SFSErrorCode.LOGIN_BAD_USERNAME);
            errData.addParameter(name);                   
           
            //記錄錯誤情況到 Server Log
            throw new SFSLoginException("Bad user name: " + name, errData);
        }
        //輸出UID欄位資訊
         trace("RES:" + res.getString("uid"));                
        
    } catch (SQLException e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
    }
   
    Sample 2 code:
     IDBManager dbManager = getParentExtension().getParentZone().getDBManager();
        String sql = "SELECT * FROM people";
        
        try
        {
            // Obtain a resultset
            ISFSArray res = dbManager.executeQuery(sql);
            
            // Populate the response parameters
            ISFSObject response = new SFSObject();
            response.putSFSArray("people", res);
            
            // Send back to requester
            send("getPeople", response, sender);
        }
        catch (SQLException e)
        {
            trace(ExtensionLogLevel.WARN, "SQL Failed: " + e.toString());
        }
SmartFox buddy 設定
        1.使用admin tool,進入zone 設定,選擇buddy list 分頁
        2.Activate = true
        3.Maximum # of buddyies per user
        4.Maximum # of Buddy Variables
        5.Allow offline Buddy Variables
        6.Offline Budy variables cache size
        7.Custom Buddy List storage class
        8.Custom states
        9.Allow temportary buddies
        10.Enables bad words filter
       
        要設定成可下線依然可以取得資訊的buddy variables的話,必須在variable name前面加上$號
        code:
            SFSBuddyVariable buddyVar = new SFSBuddyVariable("$TestBuddyVars","Buddy " + buddyObj.getName());
       
        設定Buddy variables方式:
        code:
            //當A玩家對另一線上玩家B,加入buddy時,寫入buddy variables
            Buddy buddy = (Buddy) event.getParameter(SFSBuddyEventParam.BUDDY);       
            User AddUser = this.getParentExtension().getParentZone().getUserByName(buddy.getName());
            ISFSBuddyApi buddyApi = SmartFoxServer.getInstance().getAPIManager().getBuddyApi();       
            List<BuddyVariable> buddyVars = new ArrayList<BuddyVariable>();
            SFSBuddyVariable buddyVar = new SFSBuddyVariable("$OffLineVars","BuddyOffTest");
            buddyVars.add(buddyVar);
            buddyApi.setBuddyVariables(AddUser, buddyVars, true, true);

SmartFox 使用Invitation邀請API
        1.邀請的玩家跟被邀請的玩家必須在同一個room下
        2.Invitation必須額外用一支ExtensionAPI做觸發事件
            like:
            addRequestHandler("User.inviteUser",InviteUserHandler.class);
        3.Extension API要處理以下事情
            1.建立新的Invitation
            2.要設定Invitation返回類別
            3.使用GameAPI送出Invitation
        4.Client會收到SFSEvent.INVITATION的Event,然後再由Client發送answer
       
        備註:Invitation可以攜帶SFSObject傳送
       
        code:
            /*----------------------------------
            InviteUserHandler.class
            ----------------------------------*/
            User buddy = getParentExtension().getParentZone().getUserByName(params.getUtfString("buddyName"));
        if(buddy != null){
            trace("send invite request" + sender.getName() + ',' + buddy.getName());
            ISFSObject SFSObj = SFSObject.newInstance();
            SFSObj.putUtfString("Test",sender.getName());
            //建立新的Invitation
            Invitation invitation = new SFSInvitation(sender, buddy, (int) 30, SFSObj);
            //設定Invitation返回類別
                InvitationCallback cb = new InviteSensor();
                //使用GameAPI送出Invitation
                SmartFoxServer.getInstance().getAPIManager().getGameApi().sendInvitation(invitation, cb);
        }
        /*----------------------------------
            InviteSensor.class
            ----------------------------------*/
            public class InviteSensor implements InvitationCallback {
                @Override
                public void onAccepted(Invitation arg0, ISFSObject arg1) {
                    // TODO Auto-generated method stub
                    //玩家接受
                    System.out.println("onAccepted");
                }           
                @Override
                public void onExpired(Invitation arg0) {
                    // TODO Auto-generated method stub
                    //過期沒回應或是玩家斷線
                    System.out.println("onExpired");
                }           
                @Override
                public void onRefused(Invitation arg0, ISFSObject arg1) {
                    // TODO Auto-generated method stub
                    //玩家拒絕
                    System.out.println("onRefused");
                }           
            }

web 3D學習

在網路上有HTML5 webGL跟Unity 3D還有Flash 3D可以開發3D遊戲

不過因為自己是在開發flash遊戲,所以就先找了一套Papervision3D來玩看看

PV3D網路上的資原其實中文的不多,也有人提到PV3D很久沒更新了,不過也許哪天還會再更新也說不一定

 二話不說,直接貼原始碼這樣比較快~XD

 以下原始碼部份轉載自http://milkmidi.blogspot.com/ 奶綠茶大的原始碼
/*******************************************************************************************************

 package{
    //Flash類別
    import flash.display.*;   
    import flash.events.*;
    import flash.utils.getTimer;
    //PV3D類別
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.objects.*;
    import org.papervision3d.materials.*;
    import org.papervision3d.objects.DisplayObject3D;   
    //匯入材質色彩材質
    import org.papervision3d.materials.ColorMaterial;
    //容器類別
    import org.papervision3d.objects.primitives.Plane;
    //匯入BasicView類別,PV3D的整合型視窗類別,包含(scene)場景,(camera)攝影機,(Render)3D算圖引擎,(viewport3D)目前可視視窗
    import org.papervision3d.view.BasicView;   

    public class Pv3dTest1 extends MovieClip {
        //Pv3dTest1類別, 繼承MovieClip。
        private var view:BasicView;
        /**
        * 宣告view變數為BasicView物件。
        * BasicView是繼承Sprite物件,可被加入至顯示物件容器裡。
                */   
                /**
                * 建構函式  
                */
        public function Pv3dTest1():void{                     
            //執行PV3D baseView初始化
            init3D();
            //執行PV3D物件初始化
            init3DObject();           
        }
        /**
        *init3D函式,建構BasicView物件、設定Camera參數
        */
        private function init3D():void{          
            /**
            * 建構BasicView物件
            * 參數值(viewport寬度, viewport高度, 是否自動對齊場景中間, 是否開啟滑鼠感應功能,camera類別)
            * PV3D的Camera有二種,
            * Target:目標Camera,不論鏡頭怎麼移動,永遠看著目標點。
            * Free:自由Camera,可以任意的移動和旋轉鏡頭。
            * viewport寬度和viewport高度設定為0的話,表示寬高是跟著整個場景的大小。
            */
            view = new BasicView(0, 0, true, true, "Target");    
           
            /**           
            * 設定攝影機Y坐標
            */
            view.camera.y = 100;
           
            //將view加入至目前的顯示物件容器
            this.addChild(view); 
           //監聽ENTER_FRAME事件,PV3D是靠ENTER_FRAME事件作3D算圖計算
            this.addEventListener(Event.ENTER_FRAME, onEventRender3D);
           
        }
        /**
        *init3DObject函式,用來建立PV3D物件、材質及偵聽事件
        */
        private function init3DObject():void{
            //建立色彩材質
            var colorMat:ColorMaterial = new ColorMaterial(0x223344);
            //建立Plane平面物件
            for (var i:int = 0; i < 5; i++) {
                    /**
                    * 建立Plane平面物件
                    * 參數說明:Plane(色彩材質,寬,高)
                    */
                var plane:Plane = new Plane(colorMat, 200, 200);
                plane.x = (i - 2) * 250;
                //將物件加入場景
                view.scene.addChild(plane);
            }
        }
        /**
        *onEventRender3D函式,偵聽影格事件
        */
        private function onEventRender3D(e:Event):void { 
                //將攝影機X坐標左右擺動
            view.camera.x = Math.sin(getTimer() / 1000) * 500;
            //Render view物件
            view.singleRender();
           
        }       
    }
}