1
2
3
4
5
6
Egret7
8
9
10
11
12
13
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
23
24
25
26
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
38
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 = newXMLHttpRequest();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:audio77 * "antialias": //WebGL模式下是否开启抗锯齿,true:开启,false:关闭,默认为false78 * "retina": //是否基于devicePixelRatio缩放画布79 * }80 **/
81 egret.runEgret({ renderMode: "webgl", audioType: 0});82 });83 });84 xhr.send(null);85
86
87
88
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)由当前的缩放比例与播放器视口宽高决定。
内容来源于网络如有侵权请私信删除