在基于TypeScript的LayaAir HTML5游戏开发中使用AMD

AMD

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。这是目前最流行的JavaScript/TypeScript代码的管理方式。本文介绍了如何在基于TypeScript的LayaAir HTML5游戏开发中使用AMD来组织代码。本文参考资料列表中包含了更多关于AMD的信息。

示例项目

示例项目源码从这里下载https://github.com/wildfirecode/HTML5-Game-AMD-TypeScript.

创建项目

依然使用LayaIDE来创建项目,因为要使用LayaAir引擎的库文件。

使用Visual Studio Code作为编码调试环境

为了能够对index.html有绝对的控制权,我们不能再使用LayaIDE,为了能够编译和调试项目,我们需要添加一些额外的配置。

  • 复制示例项目中的.vscode文件夹到自己项目的根目录。
  • 在index.html文件中引入所有的游戏代码编译文件

    <script src="./js/game.js"></script>
  • 在index.html文件中启动游戏。

    <script>
        require(['GameMain'], function (GameMain) {
            new GameMain.default()
        });
    </script>
  • 增加LayaAir引擎适配模块adapter.ts,每一个LayaAir的类都要增加一个适配。比如Laya.EventDispatcher:

    export const EventDispatcher = Laya.EventDispatcher;
  • 使用示例项目中的tsconfig.json覆盖原来的tsconfig.json文件。

编译和调试

编译使用快捷键Ctrl+Shift+B,调试使用F5,过程基本和LayaAir相同。更多信息参考VSCode官方文档。

requirejs

从requirejs官方下载库文件,目前的最新版本是2.3.4,这是下载链接http://requirejs.org/docs/release/2.3.4/minified/require.js。把下载的库文件放入./bin目录,并且在index.html增加文件引用,具体参见示例项目。

插件推荐

为了能够自动import,需要下载额外的VSCode插件,这里是插件地址 https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

参考

在基于TypeScript的LayaAir HTML5游戏开发中使用AMD的更多相关文章

  1. 使用Visual Studio Code调试基于ActionScript的LayaAir HTML5游戏

    使用Visual Studio Code(VS Code)调试的优势 使用VS Code我们可以极大地提高LayaAir Html5游戏项目的调试效率,VS Code的优势有以下几点: 在发生Java ...

  2. 借助Visual Studio Code提高基于ActionScript的LayaAir HTML5游戏的调试效率

    借助Visual Studio Code提高基于ActionScript的LayaAir HTML5游戏的调试效率 使用Visual Studio Code(VS Code)调试的优势 借助VS Co ...

  3. 借助AMD来解决HTML5游戏开发中的痛点

    借助AMD来解决HTML5游戏开发中的痛点 游戏开发的痛点 现在,基于国内流行引擎(LayaAir和Egret)和TypeScript的HTML5游戏开发有诸多痛点: 未采用TypeScript编译器 ...

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

    自动化的开发流程 在HTML5游戏开发或者说在Web客户端开发中,对项目代码进行修改之后,一般来说,需要手动刷新浏览器来查看代码修改后运行结果.这种手动的方式费时费力,降低了开发效率.另外,如果我们使 ...

  5. Cocos2d-x游戏开发中的消息机制:CCNotificationCenter的使用

    在HTML5游戏开发中,js可以使用Event对象的addEventListener(添加事件监听).dispatchEvent(触发事件)实现监听机制,如果在coocos2d-x中,去实现这种机制该 ...

  6. Egret是一套完整的HTML5游戏开发解决方案

    Egret是一套完整的HTML5游戏开发解决方案.Egret中包含多个工具以及项目.Egret Engine是一个基于TypeScript语言开发的HTML5游戏引擎,该项目在BSD许可证下发布.使用 ...

  7. CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎

    CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5  2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...

  8. 优秀工具推荐:两款很棒的 HTML5 游戏开发工具

    HTML5 众多强大特性让我们不需要多么高深技术就能创建好玩的网页游戏,同时证明了开放的 Web 技术能与任何其他在游戏开发中使用的技术竞争.正如标题所说,这篇文章推荐的几款很棒 HTML5 游戏开发 ...

  9. HTML5游戏开发引擎,初识CreateJS

    CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎.打造 HTML5 游戏,构建新游戏,提供构建最新 HTML5 的技术.你可以通过这个网站学习如何构建跨平台和跨终端游戏.这 ...

随机推荐

  1. java实现https请求

    package com.lichmama.test; import java.io.IOException; import java.net.URL; import java.security.Key ...

  2. delphi选择打印机打印

    printer.getprinter(mdevice, mdriver, mport, mhdmode); printer.setprinter(pchar(g_PRNzt), mdriver, mp ...

  3. Servlet 中为多项选择题判分---String类的indexOf()方法妙用

    首先来看一下String类的indexOf()方法的用法: public class FirstDemo1 { /** *API中String的常用方法 */ // 查找指定字符串是否存在 publi ...

  4. C# Web.config配置

    使用 <!--M002 バッチを起動のPath配置--> <add key="BM0002_START_PATH" value="D:\BM0002\B ...

  5. 改进log4go的一些设想

    log4go 的 4.0.2 版本(https://github.com/ccpaging/log4go/tree/4.0.2)发布以后, 看了看别的 go 语言日志文件设计.发现了一篇好文: log ...

  6. CDH版本的oozie安装执行bin/oozie-setup.sh prepare-war,没生成oozie.war?

    不多说,直接上干货! 前期博客 Oozie安装部署 问题描述 bin/oozie-setup.sh prepare-war 解决办法 [hadoop@bigdatamaster bin]$ pwd / ...

  7. iOS App签名的原理

    前言 相信很多同学对于iOS的真机调试,App的打包发布等过程中的各种证书.Provisioning Profile. CertificateSigningRequest.p12的概念是模糊的,导致在 ...

  8. [转]从入门到精通: 最小费用流的“zkw算法”

    >>>> 原文地址:最小费用流的“zkw算法” <<<< 1. 网络流的一些基本概念 很多同学建立过网络流模型做题目, 也学过了各种算法, 但是对于基本 ...

  9. 原生JSdom节点相关(非原创)

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...

  10. maven简介及基础使用

    一.Maven简介 Maven可译为"知识的积累"."专家",主要服务于基于Java平台的项目构建.依赖管理和项目信息管理. 1.Maven-项目构建工具    ...