Egret应用开发实践（01） Egret与WebPack

Egret应用开发实践（01） Egret与WebPackEgretEgret引擎是一款使用TypeScript语言构建的开源免费的移动游戏引擎。Egret仅是纯粹的使用TypeScript语言来开发游戏，开发后可以使用Egret来打包为HTML5网页游戏和Android,iOS,WinPhone原生游戏。WebPackwebpa...

Vincen??

773人浏览 · 2016-03-09 09:12:54

Vincen?? · 2016-03-09 09:12:54 发布

Egret应用开发实践（01） Egret与WebPack

Egret

Egret引擎是一款使用TypeScript语言构建的开源免费的移动游戏引擎。Egret仅是纯粹的使用TypeScript语言来开发游戏，开发后可以使用Egret来打包为HTML5网页游戏和Android,iOS,WinPhone原生游戏。

WebPack

webpack是一款模块加载器兼打包工具，它能把各种web开发中常用到的静态资源，包括JS（含JSX）、CoffeeScript、TypeScript、样式（含less/sass）、图片等都作为模块来进行统一的管理以及打包发布，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。其官方主页用下面这张图来说明Webpack的作用：
WebPack

TypeScript

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

TypeScript扩展了 JavaScript 的句法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。

开发环境搭建

首先还是要保证安装了 nodejs，然后通过 npm 安装程序。

https://nodejs.org/en/download/

项目初始化

创建项目目录

初始化 package.json

npm init

安装WebPack

npm install --save-dev webpack

安装 awesome-typescript-loader

npm install --save-dev awesome-typescript-loader

安装 strip-sourcemap-loader

npm install --save-dev strip-sourcemap-loader

配置Egret

Egret引擎的GitHub开源地址 https://github.com/egret-labs/egret-core，可以在此获取到最新的Egret源码。

解压后将egret目录下build、src目录拷贝到项目目录的libs/egret下

安装http-server

npm install --save-dev http-server

配置TypeScript

在项目目录下新建tsconfig.json

{
"compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
},
"files": [
],
"exclude": [
    "node_modules"
],
"compileOnSave": false,
"buildOnSave": false

}

创建HelloWorld应用

项目目录的apps下创建应用目录app_01_hello_world，并创建以下文件：

app/app.ts

/// <reference path="../../../libs/egret/build/egret/egret.d.ts"/>
/// <reference path="../../../libs/egret/build/tween/tween.d.ts"/>
/// <reference path="../../../libs/egret//build/res/res.d.ts"/>
class App extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);        
    }
    private onAddToStage(event: egret.Event) {
        this.createGameScene();
    }
   

    private createGameScene(): void {
        var stageW: number = this.stage.stageWidth;
        var stageH: number = this.stage.stageHeight;
        var colorLabel: egret.TextField = new egret.TextField();
        colorLabel.textColor = 0xffffff;
        colorLabel.textAlign = "center";
        colorLabel.text = "Hello World!";
        colorLabel.size = 40;
        colorLabel.x = stageW - colorLabel.width >> 1;
        colorLabel.y = (stageH - colorLabel.height >> 1) + 50;
        this.addChild(colorLabel);
    }    
}
egret.registerClass(App, "App");
window["App"] = App;

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World</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>
    <script src="../../libs/egret/build/egret/egret.js"></script>
    <script src="../../libs/egret/build/egret/egret.web.js"></script>
    <script src="../../libs/egret/build/game/game.js"></script>
    <script src="../../libs/egret/build/game/game.web.js"></script>
    <script src="../../libs/egret/build/tween/tween.js"></script>
    <script src="../../libs/egret/build/res/res.js"></script>
    <script src="build/app.bundle.js"></script>
</head>
<body>
    <div style="margin: auto; width: 100%;height: 100%;" class="egret-player"
     data-entry-class="App"
     data-orientation="auto"
     data-scale-mode="noScale"
     data-frame-rate="30"
     data-content-width="640"
     data-content-height="960"
     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 type="">
    egret.runEgret();
    </script>
</body>
</html>

webpack.config.js

var path = require('path');
module.exports = {
     entry: {
        'app': [     
            path.resolve('app/app')
        ]
    },
    output: {
        path: path.resolve('build'),
        filename: '[name].bundle.js',
        pathinfo: false // show module paths in the bundle, handy for debugging
    },
    module: {
    loaders: [{
        test: /\.ts$/,
        loader: 'awesome-typescript',
        query: {
        'doTypeCheck': true
        },
        include: path.resolve('app'),
        exclude: /node_modules/
    }],
    noParse: [
       
    ]
    },     
    resolve: {
    alias: {      
    },
    extensions: ["", ".js", ".ts"]
    },
    plugins: [
    ]
};

编译及测试

编译，在app_01_hello_world下运行

 ..\..\node_modules\.bin\webpack

运行，在项目目录下运行


.\node_modules\.bin\http-server

浏览器打开http://localhost:8080/apps/app_01_hello_world/

其他

本文代码：https://github.com/guyoung/GyEgretPattern/tree/master/apps/app_01_hello_world
项目地址：https://github.com/guyoung/GyEgretPattern

参考

Guyoung Studio

Official Site: www.guyoung.net
Email: guyoung[at]aliyun.com

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

一文解决Cellphonedb单细胞互作分析及可视化作图（2）

开放原子开发者工作坊

[工具使用]——时序图与UML类图

开放原子开发者工作坊

CTFHub技能树 Web-SQL注入详解

整数型注入我们输入 1不断尝试发现闭合方式就是 1 ，整数型存在两列order by 2存在两个注入点/?id=-1 union select 8,9爆库，当前数据库为sqli/?id=-1 union select 8,database()爆出所有表名,这里我们需要吧sqli转换为16进制/?id=-1 union select 8,group_concat(table_name) from i

开放原子开发者工作坊

所有评论(0)

查看更多评论

Vincen??

@weixin_34060299

已为社区贡献12条内容