1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Egret</title> 7 <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> 8 <meta name="apple-mobile-web-app-capable" content="yes" /> 9 <meta name="full-screen" content="true" /> 10 <meta name="screen-orientation" content="portrait" /> 11 <meta name="x5-fullscreen" content="true" /> 12 <meta name="360-fullscreen" content="true" /> 13 <style> 14 html, body { 15 -ms-touch-action: none; 16 background: #888888; 17 padding: 0; 18 border: 0; 19 margin: 0; 20 height: 100%; 21 } 22 </style> 23 </head> 24 25 <body> 26 <div style="margin: auto;width: 100%;height: 100%;" class="egret-player" 27 data-entry-class="Main" 28 data-orientation="auto" 29 data-scale-mode="noBorder" 30 data-frame-rate="30" 31 data-content-width="600" 32 data-content-height="950" 33 data-show-paint-rect="false" 34 data-multi-fingered="2" 35 data-show-fps="false" data-show-log="false" 36 data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9"> 37 </div> 38 <script> 39 var loadScript = function (list, callback) { 40 var loaded = 0; 41 var loadNext = function () { 42 loadSingleScript(list[loaded], function () { 43 loaded++; 44 if (loaded >= list.length) { 45 callback(); 46 } 47 else { 48 loadNext(); 49 } 50 }) 51 }; 52 loadNext(); 53 }; 54 55 var loadSingleScript = function (src, callback) { 56 var s = document.createElement('script'); 57 s.async = false; 58 s.src = src; 59 s.addEventListener('load', function () { 60 s.parentNode.removeChild(s); 61 s.removeEventListener('load', arguments.callee, false); 62 callback(); 63 }, false); 64 document.body.appendChild(s); 65 }; 66 67 var xhr = new XMLHttpRequest(); 68 xhr.open('GET', './manifest.json?v=' + Math.random(), true); 69 xhr.addEventListener("load", function () { 70 var manifest = JSON.parse(xhr.response); 71 var list = manifest.initial.concat(manifest.game); 72 loadScript(list, function () { 73 /** 74 * { 75 * "renderMode":, //引擎渲染模式，"canvas" 或者 "webgl" 76 * "audioType": 0 //使用的音頻類型，0:默認，2:web audio，3:audio 77 * "antialias": //WebGL模式下是否開啟抗鋸齒，true:開啟，false:關閉，默認為false 78 * "retina": //是否基於devicePixelRatio縮放畫布 79 * } 80 **/ 81 egret.runEgret({ renderMode: "webgl", audioType: 0 }); 82 }); 83 }); 84 xhr.send(null); 85 </script> 86 </body> 87 88 </html>
- data-entry-class=”Main” 設置項目的入口文件，表示項目的入口類，默認為Main,如果需要自定義的話需要在項目中先創建類，然后在這里配置類的名字。
- data-orientation=”auto” 設置旋轉模式，包含auto,portait,landscape，landscapeFlipped
- data-scale-mode=”showAll” 設置縮放模式，有8個參數可以選擇
- data-frame-rate=”30” 幀頻數
- data-content-width：游戲內stage寬。
- data-content-height：游戲內stage高。
- data-show-paint-rect=”false”設置是否顯示臟矩形區域
- data-multi-fingered=”2” 設置多指觸摸的數量
- data-show-fps=”false” data-show-log=”false” 設置是否顯示fps及是否顯示egret.log輸出出來的信息
- data-log-filter=”” 設置一個正則表達式過濾條件，日志文本匹配這個正則表達式的時候才顯示這條日志。如 data-log-filter=”^egret” 表示僅顯示以 egret 開頭的日志
- data-show-fps-style=”x:0,y:0,size:30,textColor:0x00c200,bgAlpha:0.9” fps面板的樣式。目前只支持4種配置，可以修改其值改變樣式，x:0, y:0, size:30, textColor:0xffffff
旋轉模式
auto模式，不管橫屏還是豎屏，都是從上到下顯示內容
portrait模式，橫屏與豎屏都以豎屏時手機左上角為坐標原點
landscape模式，始終以豎屏狀態下手機的右上角為起點顯示內容
landscapeFlipped模式，橫屏狀態下和 landscape 起點相同，豎屏狀態下起點位置和 landscape 相反，從右上方變成了左下方
landscape 和 landscapeFlipped 這兩種模式，一般用於橫屏游戲，但需要提示用戶關閉重力感應鎖，鎖定屏幕方向。簡單說就是豎屏狀態下玩橫屏游戲。
縮放模式
showAll 模式
showAll 模式就是保持寬高比，顯示全部內容。縮放后應用程序內容向較寬方向填滿播放器窗口，另一個方向的兩側可能會不夠寬而留有黑邊。在此模式下，舞台尺寸(stage.stageWidth,stage.stageHeight)始終等於初始化時外部傳入的應用程序內容尺寸。
目前的手機屏幕大部分都是16:9的，所以指定一個設計寬高尺寸，就可以在大部分移動設備有相接近的體驗，這時使用 showAll 模式是一個比較簡單的適配模式。
noScale 模式
noScale 模式顧名思義，就是不對內容進行任何縮放，保持原始的1:1比例，然后直接把舞台對齊到瀏覽器的左上角。即使在更改播放器窗口大小時，它仍然保持不變。如果播放器窗口比內容小，則可能進行一些裁切。在此模式下，舞台尺寸（stage.stageWidth,stage.stageHeight）始終跟播放器窗口大 小保持一致。
noBorder 模式
noBorder 和之前版本的縮放模式是不一樣的，原來的 noBorder 模式現在叫 fixedWidth ，后面會有說明。
noBorder 模式會根據屏幕的尺寸等比縮放內容，縮放后應用程序內容向較窄方向填滿播放器窗口，不會有黑邊存在，另一個方向的兩側可能會超出播放器窗口而被裁切，只顯示中間的部分。
在此模式下，舞台尺寸(stage.stageWidth,stage.stageHeight)始終等於初始化時外部傳入的應用程序內容尺寸。
exactFit 模式
exactFit 模式是不保持原始寬高比縮放應用程序內容，縮放后應用程序內容正好填滿播放器窗口。簡單的說就是不按照原來內容的比例，直接拉伸，暴力填充整個屏幕。在此模式下，舞台尺寸(stage.stageWidth,stage.stageHeight)始終等於初始化時外部傳入的應用程序內容尺寸。
fixedWidth 模式
fixedWidth 模式是保持原始寬高比縮放應用程序內容，縮放后應用程序內容在水平和垂直方向都填滿播放器窗口，但只保持應用程序內容的原始寬度不變，高度可能會改變。在此模式下，舞台寬度(stage.stageWidth)始終等於初始化時外部傳入的應用程序內容寬度。舞台高度(stage.stageHeight)由當前 的縮放比例與播放器窗口高度決定。
fixedWidth 就是老版本中的 noBorder 模式，是一般做游戲推薦的模式。寬度固定了，高度隨屏幕自適應，可以獲得最好的顯示效果。
fixedHeight 模式
fixedHeight 模式保持原始寬高比縮放應用程序內容，縮放后應用程序內容在水平和垂直方向都填滿播放器窗口，但只保持應用程序內容的原始高度不變，寬度可能會改變。在此模式下，舞台高度(stage.stageHeight)始終等於初始化時外部傳入的應用程序內容高度。舞台寬度(stage.stageWidth)由當前的 縮放比例與播放器窗口寬度決定。
fixedHeight 是新增的一種縮放模式，和 fixedWidth 相反，高度固定，寬度隨屏幕自適應。
在 Egret Engine 2.5.6 中新增了 fixedNarrow 和 fixedWide 兩種縮放模式。在新增的屏幕縮放模式下，首先會填滿屏幕不留黑邊，縮放后可以保持原始的寬高比例不變，等比的縮放程序內容，縮放后應用程序向設定的方向來填滿播放器窗口。舞台的高度和寬度由當前的縮放比例與播放器視口決定，可 以根據舞台的高度和寬度來自適應布局。這兩種縮放模式簡單可以理解為fixedWidth和fixedHeight的高級封裝，顯示效果與那兩種模式類似，但是決定縮放比例的方向不是定死的，而是根據內容距離屏幕的邊距寬窄來決定。在這兩種模式下可以比較方便的布局 UI。
fixedNarrow 模式
保持原始寬高比縮放應用程序內容，縮放后應用程序內容在水平和垂直方向都填滿播放器視口，應用程序內容的較窄方向可能會不夠寬而填充。
在此模式下，舞台高度(Stage.stageHeight)和舞台寬度(Stage.stageWidth)由當前的縮放比例與播放器視口寬高決定。
fixedWide 模式
保持原始寬高比縮放應用程序內容，縮放后應用程序內容在水平和垂直方向都填滿播放器視口，應用程序內容的較寬方向的兩側可能會超出播放器視口而被裁切。
在此模式下，舞台高度(Stage.stageHeight)和舞台寬度(Stage.stageWidth)由當前的縮放比例與播放器視口寬高決定。