Egret教程（二、HelloWorld）

最新推荐文章于 2022-07-19 17:28:01 发布

laixiao_hero

最新推荐文章于 2022-07-19 17:28:01 发布

阅读量1w

点赞数 4

分类专栏： Egret

本文链接：https://blog.csdn.net/laixiao_hero/article/details/51637432

版权

Egret 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

一、index.html
在 index.html 文件里可以完成很多配置。打开文件，在第15行可以看到（这里可以设置舞台的背景颜色）：

background: #888888;

完整的主页代码：

<!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>

    <!--这个标签为通过egret提供的第三方库的方式生成的 javascript 文件。删除 modules_files 标签后，库文件加载列表将不会变化，请谨慎操作！-->
    <!--modules_files_start-->
    <script egret="lib" src="libs/modules/egret/egret.js" src-release="libs/modules/egret/egret.min.js"></script>
    <script egret="lib" src="libs/modules/egret/egret.web.js" src-release="libs/modules/egret/egret.web.min.js"></script>
    <script egret="lib" src="libs/modules/res/res.js" src-release="libs/modules/res/res.min.js"></script>
    <script egret="lib" src="libs/modules/tween/tween.js" src-release="libs/modules/tween/tween.min.js"></script>
    <!--modules_files_end-->

    <!--这个标签为不通过egret提供的第三方库的方式使用的 javascript 文件，请将这些文件放在libs下，但不要放在modules下面。-->
    <!--other_libs_files_start-->
    <!--other_libs_files_end-->

    <!--这个标签会被替换为项目中所有的 javascript 文件。删除 game_files 标签后，项目文件加载列表将不会变化，请谨慎操作！-->
    <!--game_files_start-->
    <script egret="game" src="bin-debug/Main.js"></script>
    <script egret="game" src="bin-debug/Utils/CommonUtil.js"></script>
    <!--game_files_end-->
</head>
<body>

    <div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
         data-entry-class="Main"
         data-orientation="auto"
         data-scale-mode="showAll"
         data-frame-rate="30"
         data-content-width="1080"
         data-content-height="1080"
         data-show-paint-rect="false"
         data-multi-fingered="2"
         data-show-fps="false" data-show-log="false"
         data-log-filter="" data-show-fps-style="x:0,y:0,size:30,textColor:0x00c200,bgAlpha:0.9">
    </div>
    <script>
        //默认使用 WebGL 渲染模式
        egret.runEgret({renderMode:"webgl"});
    </script>
</body>
</html>

在这里可以配置项目的很多设置：

data-entry-class=”Main” 设置项目的入口文件，表示项目的入口类，默认为Main,如果需要自定义的话需要在项目中先创建类，然后在这里配置类的名字。
data-orientation=”auto” 这里就是配置缩放模式，内容跟上面的 Wing 上面配置缩放模式的页面相同。
data-scale-mode=”showAll” 这里配置旋转模式，内个也跟 Wing 上面的配置相同。
data-frame-rate=”30” 这里是运行的帧率。
data-content-width=”480” 和 data-content-height=”800” 用来设置舞台的设计宽和高
data-show-paint-rect=”false” 设置显示脏矩形的重绘区域。
data-multi-fingered=”2” 设置多指触摸
data-show-fps=”false” data-show-log=”false” 这里设置显示帧率和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面板的样式。目前支持默认的这几种设置，修改其值即可，比如修改面板位置可以设置x和y,改变大小可以设置size,改变文字颜色textColor，改变背景面板的透明度bgAlpha。

二、egretProperties.json
这个文件里面进行项目配置,包括模块和第三方库的配置，发布和native相关配置。
我们比较常用的设置就是添加模块和第三方库。

项目模块化配置：http://edn.egret.com/cn/index.php/article/index/id/644

三、使用 tsconfig.json项目配置文件
作用：自定义编译参数。
tsconfig.json 是什么呢？熟悉 typescript 的朋友应该对它不陌生，它是一个 typescript 项目的配置文件，可以通过读取它来设置 ts 编译器的编译参数。

其它编译参数：https://github.com/Microsoft/TypeScript/wiki/tsconfig.json
不支持的编译参数：”target”,”outDir”,”module”,”noLib”,”outFile”,”rootDir”,”out”

1 ) 在 egret 项目的文件夹里，创建一个名为 “tsconfig.json” 的文本文件

2 ) 像下面这个例子一样，把您需要的编译参数写到 compilerOptions 里。

{
    "compilerOptions": {
        "sourceMap": true,
        "removeComments": true
    }
}

“sourceMap”: true 把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件
“removeComments”: true 编译 js 的时候，删除掉注释

四、编写第一行代码


class Main extends egret.DisplayObjectContainer {

    public constructor() {
        super();        

        //程序的入口
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);

    }

    private onAddToStage(e:egret.Event){
       console.log("调试项目:需要显示的log内容")
    }

    private onFrame(e:egret.Event){

        //当其返回值为true时会忽略帧频强制刷新屏幕，false时不会。并且这个返回值不能省略。
        return false;
    }


}

五、调试：显示脏矩形和帧频信息

以在根目录下的 index.html 中：
1、设置是否显示重绘区域，当这个值为 true 时 egret 会将舞台中的重绘区域用红框表示出来。

data-show-paint-rect=”true/false”

2、设置是否显示帧频信息，当这个值为 true 时 Egret 会在舞台的左上角显示 FPS 和其他性能指标

data-show-fps=”true/false”

FPS: 29 - 帧频
Draw: 7,6% - 每帧 draw 方法调用的平均次数，脏区域占舞台的百分比
Cost: 0,0,1 - Ticker和EnterFrame阶段显示的耗时,每帧舞台所有事件处理和矩阵运算耗时，绘制显示对象耗时（单位是ms）

laixiao_hero

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Egret教程（二、HelloWorld）

一、index.html 在 index.html 文件里可以完成很多配置。打开文件，在第15行可以看到（这里可以设置舞台的背景颜色）： background: #888888;完整的主页代码：<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>Egret</title> <meta name="vi
复制链接

扫一扫