cocos 手遊開發與 cocos-html5 頁遊的螢幕適配

星星test發表於2016-02-24
HTML
 一 cocos 手機遊戲常用的螢幕適配方式:
    1:FIXED_WIDTH 固定寬度 (豎屏遊戲常用)
    2:FIXED_HEIGHT 固定高度(橫屏遊戲常用)
    3:SHOW_ALL 會按照設計時的比例顯示出來,如果目標螢幕和設計螢幕的比例不一樣，會留黑邊；
    4:其它,我們這裡不在討論
 二傳統的手機遊戲 app 適配需求
    傳統的手機遊戲 app 按照包的適配，都是全屏遊戲，所以螢幕的大小是固定的，顧通常選取 1, 2, 3 適配
方式。
三 cocos-html5 的網頁遊戲適配需求
   1:在手機上有可能全屏開啟網頁遊戲,也有可能在微信裡開啟網頁遊戲,微信內建的瀏覽器會留出一個工具欄
出來;
   2:在 PC 上開啟網頁遊戲，瀏覽器的視窗可以任意變化，任意大小;
四 如果我們能夠忍受網頁遊戲在手機上有黑邊，我們直接採用 SHOW_ALL 什麼都不用管;
五 如果我們不能忍受在網頁遊戲在手機上執行的時候有黑邊，又要相容 PC 上開啟網頁遊戲後可以任意的改
變大小:
    1:我們只在初始化的時候 只能採用固定高度與固定寬度;
        cc.view.setDesignResolutionSize(DESIGN_WIDTH, DESIGN_HEIGHT, cc.ResolutionPolicy.FIXED_
WIDTH);
       這樣一啟動螢幕區域會充滿全屏;
   2:應對 PC 上瀏覽器大小隨時改變的情況:
  cc.view.setResizeCallback(function() {
        cc.view.setDesignResolutionSize(DESIGN_WIDTH, DESIGN_HEIGHT, cc.ResolutionPolicy.SHOW_ALL)
;
        cc.director.getRunningScene().on_resize();
    });
  這裡我們使用 SHOW_ALL,這樣我們在 PC 上總能顯示正確，而在手機上，一般不能像 PC 一樣自由的改變
大小；
這樣修改後，發現原來的遊戲內容不是出現在正確的位置上，因為我們的座標全域性不都基於開始時候的適配
和座標方式而達到的。為了應對這個問題，我們在應用層做響應的處理。因為我們需要重排所有的遊戲元素。
 3:重排所有的遊戲元素
   當我們的大小改變後，我們要重排我們的遊戲元素，看上去很複雜，我們需要將我們的所有的節點重新調
整一次。其實很簡單，我們在做程式碼設計的時候，將我們的遊戲場景分為幾個固定的參考點，比如，四個角
+中心點，在每個地方放一個大的 root,其它所有的元素都基於這些 root,作為這些 root 的孩子。當有 resize 
的時候，呼叫 cc.director.getRunningScene().on_resize();
然後每個場景編寫 on_resize 方法,然後根據新的 size,重新調整 這些參考點的 root,就能達到修改適應螢幕的

目的。



當 resize 由左辺到右邊的時候，大小變了，只要重新調整參考點的位置，那麼這樣，所有的內容都調整到中
心處了；



相關文章