关闭

自动化的基于TypeScript的HTML5游戏开发

98人阅读 评论(0) 收藏 举报

自动化的开发流程

在HTML5游戏开发或者说在Web客户端开发中,对项目代码进行修改之后,一般来说,需要手动刷新浏览器来查看代码修改后运行结果。这种手动的方式费时费力,降低了开发效率。另外,如果我们使用了如TypeScript这类需要通过转换器把代码转换成浏览器可识别的JavaScript代码的语言,在运行程序之前,我们还需要进行额外的手动转换,这同样是影响开发效率的一个因素。为了解决这两个问题,本文介绍了如何通过使用TypeScript Compiler(tsc)的watch模式来实现代码修改后自动编译以及使用gulp-connect来实现编译后浏览器自动刷新。

开发环境

  • Visual Studo Code 1.15
  • node v8.4.0
  • npm 5.3.0

示例和源码

本文将通过一个完整的实例来讲解如何实现开发自动化,实例的源码托管在github。示例所采用的HTML5游戏引擎为LayaAir。目前已经在Windows和Mac OSX系统测试通过。这里是仓库链接。另外,示例项目是使用VS Code(Visual Studio Code)来开发的。我们常用的HTML5游戏集成开发环境Laya IDE以及Egret Wing等也是基于VS Code开发的,部分相关知识也可以借鉴。另外本文使用了AMD来管理项目的代码,关于如何在HTML5游戏中使用AMD请参考我的另一篇文章《借助AMD来解决HTML5游戏开发中的痛点》。

使用tsc的watch模式实现自动化编译

tsc天生就支持自动化编译和增量编译。在tsconfig.json中的compilerOptions属性中增加"wathc":true配置即可。这样我们执行命令tsc -p .的时候便可以使用这些特性了。

使用gulp和gulp-connect实现编译后浏览器自动刷新

gulp是一种基于nodejs的自动化构建工具,它可以增强我们的工作流程。gulp-connect是gulp的一个插件,主要提供web服务器和自动化浏览器刷新功能。在本文的参考资料列表中可以查看更多的关于gulp和gulp-connect的信息。下面我讲详细讲解自动化流程的创建。

安装

gulp是基于nodejs,所以首先要安装nodejs环境,具体安装过程以及nodejs相关知识我们可以参考nodejs官方网站。

nodejs安装完毕之后,需要初始化项目:

npm init

接着,通过执行命令来全局安装 gulp和tsc:

npm install -g gulp typescript

下面安装开发依赖

npm install --save-dev gulp gulp-connect

创建gulpfile.js

在项目根目录下创建一个名为gulpfile.js的文件,我们的自动化流程逻辑全部在这里。

首先我们要创建一个web server,因为gulp-connect使用WebSocket和浏览器进行通信,所以这是实现浏览器自动刷新的必要条件。我们来创建一个connect任务以实现这个功能。web server的默认端口为8080。

gulp.task('connect', () =>
    connect.server({
        root: './bin',
        livereload: true
    })
);

下面我们创建一个watch任务来实现对编译文件的内容变化的监听,当检测到变化之后则执行一个名为reload的任务。reload任务负责通知浏览器对当前的html页面进行刷新。

gulp.task('reload', () => {
    return gulp.src('./bin/*.html')
        .pipe(connect.reload());
});

gulp.task('watch', () => {
    gulp.watch(['./bin/js/*.js'], ['reload']);
});

为了自动化执行编译命令tsc,我们创建一个compile任务来完成这件事。

gulp.task('compile', () => {
    const cmd = os.platform() == 'win32' ? 'tsc.cmd' : 'tsc';
    const childProcess = require('child_process');
    const child = childProcess.spawn(cmd, []);
    child.stdout.on('data', function (chunk) {
        console.log('[tsc]', chunk + '');
    });
    child.stderr.on('data', function (chunk) {
        console.log('[tsc]', chunk);
    });
    child.on('exit', function (code, signal) {
        console.log('[tsc]', chunk);
    });
    return child;
});

当ts文件发生变化的时候,我们可以在控制台的日志中看到tsc的自动化编译的工作过程。
最后创建default任务,以触发其他所有任务的执行。

gulp.task('default', ['connect', 'watch', 'compile']);

配置VS Code

我们需要安装VS Code插件Debugger for Chrome,以实现使用Chrome在VS Code中调试运行代码。

接着,我们可以按下F5,并选择chrome来自动生成调试配置launch.json,此文件位于.vscode文件夹。

下面,按下F1,并输入Configure Default Build Task来快速找到配置默认生成任务选项,选择之后弹出任务列表,在列表中选中gulp:default之后,task.json文件会自动生成,并置于.vscode文件夹。task.json使得我们可以把gulp:default作为默认的构建任务。

至此,所有的配置和编程处理完毕。

开启自动化的开发之旅

按下快捷键Ctrl+Shift+B或者在终端中执行gulp来触发gulp:default

  • 创建一个web服务器
  • 执行tsc,在ts文件发生变化之后自动编译
  • 监听编译文件的变化,文件变化之后会通知浏览器刷新

接下来,我们可以在浏览器中输入http://localhost:8080来运行游戏。

然后修改示例中的Greeting.ts文件,把Hello LayaAir修改为Hello HTML5 Game.,保存文件之后,便会发现游戏中的显示文本修改为Hello HTML5 Game.. 具体请看下面的动图。

如有其他的配置疑问,请参考示例项目的源码。

参考

  • nodejs官网
  • gulp中文网
  • gulp-connect官网
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

使用typescript和egret wing3开发简单的单机五子棋游戏

前几天学了微软开发的Typescript,这种语言是用面向对象的思想来写,自动转换为js代码,既然学了就用一下,配合egret引擎(基于Html5的开发引擎)及egret wing3做一个十分基本的小...
  • S_clifftop
  • S_clifftop
  • 2017-08-01 18:22
  • 807

TypeScript自动化工作流程(中)

自动化任务工具自动化任务工具是用来自动化地执行开发过程中需要重复进行的任务。这些任务包括编译TS文件、压缩JS文件等等。目前较为流行的两个JavaScript自动化工具分别是Grunt和Gulp。Gr...
  • maomaolaoshi
  • maomaolaoshi
  • 2017-11-10 17:38
  • 183

html5简单游戏编程从零开始

本文基于lufylegend游戏引擎,所以以下内容全部和此有关,       lufylegend引擎的下载地址: http://www.lufylegend.com/lufylegend      ...
  • qq_26786555
  • qq_26786555
  • 2015-03-22 18:45
  • 1058

如何开发一个简单的HTML5 Canvas 小游戏

原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学。(如果你怀疑我的资历, ...
  • for_cxc
  • for_cxc
  • 2016-07-27 13:31
  • 855

HTML5面向对象的游戏开发简单实例总结

在阅读一本HTML5游戏开发相关书籍时发现一个很好的例子,通过这个例子可以对面向对象的开发进行更深入的理解。这个对象要实现的是:将一个CSS sprite中的图像绘制到canvas中。首先创建一个Sp...
  • fareise
  • fareise
  • 2016-07-15 22:37
  • 3183

用HTML5来开发一款android本地化App游戏-宝石碰碰

本次来说一说如何利用lufylegend.js引擎制作一款HTML5游戏后,将其转换为android本地化的App应用,转换过程其实很简单,下面一步步来做说明。首先来开发一个类似于对对碰的游戏,不过此...
  • lufy_Legend
  • lufy_Legend
  • 2013-03-27 08:03
  • 34852

TypeScript——Web前端开发的救赎

JavaScript代码有多烂?     入职到现在做了6年js开发了(包括之前的2年一共写了8年js),现在我们团队有10几20号人写js(纯js开发),需要维护的js代码有40-50万行,不得不...
  • HandsomClass
  • HandsomClass
  • 2016-07-23 14:32
  • 1517

html5 canvas 扑克牌游戏开发探索

基于html5和web socket的扑克游戏探索
  • tx101q
  • tx101q
  • 2017-02-01 13:27
  • 812

基于HTML5+WebSocket+JAVA的棋牌游戏开发,从入门到放弃(二)

我的简书地址前言前面我们已经实现了一个简单的五指棋,但问题特别多。这一篇,我们要解决的问题有 - 新增房间 - 前端给出一些提示,告诉你所属的颜色,是否是你的回合思考首先,当用户连接的时候,我们需...
  • ahchanming
  • ahchanming
  • 2016-07-21 11:37
  • 1556

HTML5游戏开发工具实践(一)

游戏制作工具Orion2是一个图形化的HTML5编辑工具,目标是用来开发小游戏应用。
  • wangnan8015
  • wangnan8015
  • 2015-10-12 11:29
  • 1598
    个人资料
    • 访问:12153次
    • 积分:290
    • 等级:
    • 排名:千里之外
    • 原创:0篇
    • 转载:101篇
    • 译文:0篇
    • 评论:0条
    文章存档
    最新评论