<!DOCTYPE HTML>
<html> <head>
<meta charset="utf-8">
<title>Egret</title>
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="true" />
<meta name="screen-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" />
<style>
html, body {
-ms-touch-action: none;
background: #888888;
padding: 0;
border: 0;
margin: 0;
height: 100%;
}
</style>
</head> <body>
<div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
data-entry-class="Main"
data-orientation="auto"
data-scale-mode="noBorder"
data-frame-rate="30"
data-content-width="600"
data-content-height="950"
data-show-paint-rect="false"
data-multi-fingered="2"
data-show-fps="false" data-show-log="false"
data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
</div>
<script>
var loadScript = function (list, callback) {
var loaded = 0;
var loadNext = function () {
loadSingleScript(list[loaded], function () {
loaded++;
if (loaded >= list.length) {
callback();
}
else {
loadNext();
}
})
};
loadNext();
}; var loadSingleScript = function (src, callback) {
var s = document.createElement('script');
s.async = false;
s.src = src;
s.addEventListener('load', function () {
s.parentNode.removeChild(s);
s.removeEventListener('load', arguments.callee, false);
callback();
}, false);
document.body.appendChild(s);
}; var xhr = new XMLHttpRequest();
xhr.open('GET', './manifest.json?v=' + Math.random(), true);
xhr.addEventListener("load", function () {
var manifest = JSON.parse(xhr.response);
var list = manifest.initial.concat(manifest.game);
loadScript(list, function () {
/**
* {
* "renderMode":, //引擎渲染模式,"canvas" 或者 "webgl"
* "audioType": 0 //使用的音频类型,0:默认,2:web audio,3:audio
* "antialias": //WebGL模式下是否开启抗锯齿,true:开启,false:关闭,默认为false
* "retina": //是否基于devicePixelRatio缩放画布
* }
**/
egret.runEgret({ renderMode: "webgl", audioType: 0 });
});
});
xhr.send(null);
</script>
</body> </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)由当前的缩放比例与播放器视口宽高决定。

Egret index.html设置的更多相关文章

  1. YII 1.0 隐藏单入口index.php 设置路由与伪静态

    隐藏 index.php 保证apache配置文件httpd.conf里的LoadModulerewrite_module modules/mod_rewrite.so开启(去掉#)将相对应目录的Al ...

  2. Spark2.2+ES6.4.2(三十二):ES API之index的create/update/delete/open/close(创建index时设置setting,并创建index后根据avro模板动态设置index的mapping)

    要想通过ES API对es的操作,必须获取到TransportClient对象,让后根据TransportClient获取到IndicesAdminClient对象后,方可以根据IndicesAdmi ...

  3. dedecms首页去掉index.html怎么设置

    很多网友用IIS服务器建站,反映说dedecms首页默认多了一个/index.html,一般是没有这个后缀的,直接就**.com,那么如何将dedecms首页去掉index.html呢?很简单,服务器 ...

  4. 【Egret】使用VSCode 编译,断点调试Egret项目

    经过我日积月累的摸索,还是一直模模糊糊的,搞不懂,今天经晨哥点拨两下,一下子就恍然大悟,搞定了怎么弄这个东西,现将经验分享如下. 一.效果目的 1.在VSCode里,直接F5打开Egret页面,并且可 ...

  5. databtables 设置(显示)行号

    var table = $('#priceStrategtyTable').DataTable({         "rowCallback": function( row, da ...

  6. QAbstractItemView::setRootIndex(const QModelIndex & index) 失效

    问题: 在逻辑中使用了, QAbstractItemView::setRootIndex(const QModelIndex & index), 第一次设置生效, view 进入了model ...

  7. jquery 获取设置值、添加元素详解

    jQuery 获取内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易 ...

  8. dom自定义属性 兼容 index值获取

    function getIndex(Eve,obj){ for(var i = 0;i<obj.length;i++){ obj[i].setAttribute("index" ...

  9. C# 设置和获取一个字节的某一位的值的方法

    自己工作中遇到需要对单字节的高位.低位进行赋值,即一个字节byte,想要给每一位都赋值,这个值是动态来的,是0或是1. 好不容易收集到一些珍贵资料,整理一下: 一.设置 方法code: /// < ...

随机推荐

  1. struts2.3.23升级到struts2.3.32

    新的漏洞 3月8号去审计厅培训系统的使用,那边计算机中心的负责人递过来一张如下图所示的文档,意思是发现了struts2的漏洞,需要进行修复. 在培训前,我登录到服务器中,看到了项目中,所有的服务器中应 ...

  2. (基础篇 走进javaNIO)第二章-NIO入门

    在本章巾,我们会分别对 JDK 的BIO ,NIO 和JDK 1.7 最新提供的 NI02.0的使用进行详细说明 ,通过流程图和代 码讲解,让大 家体会到随着 Ja va 1/0 类库的 不断发展和改 ...

  3. 浅谈MVC异常处理

    在日常开发中,我们会去捕捉很多的异常,来进行处理,通常我们的方法就是,在需要进行异常处理的地方加上 try catch 块,但是,如果需要异常处理的地方很多,那么,就会频繁的去写try catch 块 ...

  4. 模仿ICE的structured panorama小按钮

    这个按钮的目的是用于手动排列图片序列,应该说写得比较精巧,我使用csharp进行模仿,主要采用的是自动控件创建技术.结果比较简陋,实现功能而已,放出来大家一起学习. ;        ;        ...

  5. 在.Net下使用redis基于StackExchange.Redis

    研究了下redis在.net下的使用,因为以前在java上用redis用的是jedis操作,在.net不是很熟悉,在网站上也看了一部分的.net下redis的使用,大部分都是ServiceStack. ...

  6. JavaSE教程-03Java中分支语句与四种进制转换-思维导图

    思维导图看不清楚时: 1)可以将图片另存为图片,保存在本地来查看 2)右击在新标签中打开放大查看 if语句 a) if语句 基本语法结构: if(关系表达式) { 基本语句体 } 执行流程: 首先判断 ...

  7. 天气正好,hello world!

    两个多月,稀里糊涂的回来了,内心很迷茫,回来一周了,明知道还需要有一大堆东西需要去学,但是却找不到之前学习的状态,在寝室,在实验室,看着自己一向不喜欢的电视剧,无目的的逛着淘宝,刷着头条和知乎,就这么 ...

  8. C#程序遍历数组A中所有元素

    ] { "a1","a2","a3","a4","a5"}; //第一种方法 ; i < A. ...

  9. [UWP]用Shape做动画

    相对于WPF/Silverlight,UWP的动画系统可以说有大幅提高,不过本文无意深入讨论这些动画API,本文将介绍使用Shape做一些进度.等待方面的动画,除此之外也会介绍一些相关技巧. 1. 使 ...

  10. JavaWeb系列:Servlet

    个人整理,欢迎转载与批评建议,转载请添加索引,谢谢. ---------------------------------------------------------------2017.06.10 ...