测试2 

 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)由当前的缩放比例与播放器视口宽高决定。

内容来源于网络如有侵权请私信删除
标签： 游戏开发
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！