Egret社区

EgretVS使用教程

2014-11-14 14:33
2185462
本帖最后由 xsstomy 于 2015-5-26 11:40 编辑

EgretVS是为Egret Framework用户开发的一款Visual Studio插件,使VS用户可以方便的创建调试Egret项目,借助VS强大的TypeScript支持获得良好的Egret开发体验。

安装环境
Visual Studio 2012 + TypeScript Tools

Visual Studio 2013 Update 3+

安装方法
双击EgretVS.vsix选择需要安装的VS版本安装。
使用IE下载的开发者: 如果你下载到的文件是 EgretVS-v.版本号.zip 而不是 vsix,请手动修改扩展名为vsix,或使用其他浏览器下载,谢谢。

选择VS版本

选择VS版本




创建项目
EgretVS中包含了三种Egret项目模板,您可以根据需要选择要创建的项目
在新建项目窗口中左侧依次选择“其他语言>TypeScript”,就能看到三种Egret项目模板

新建项目窗口

新建项目窗口

三个模板分别为

Egret Empty Project
    空的Egret项目,只包含基本的类库,没有示例代码
Egret Game Project
    Egret 游戏示例项目,包含基本类库和示例代码
Egret GUI Project
    Egret GUI项目,包含基本类库和egret.gui类库,并包含gui示例代码

本文中选择GUI项目,点击OK创建项目。
项目创建完成后EgretVS会默认打开Main.ts文件。

文件编辑

文件编辑


项目编译
你可以直接使用VS的编译命令来编译Egret项目

项目编译

项目编译

同时EgretVS提供了一个菜单来实现Egret项目特有的编译参数

Egret编译

Egret编译

三个命令分别为

Build
编译项目ts文件
Build Engine
编译Egret Engine到本地目录,这个命令一般用于修改了egretProperties.json中的        modules或其他需要重新编译引擎代码的情形
Publish Game
发布Egret项目,这个命令会打包压缩所有的ts 和 js文件实现最小的网络传输



项目发布
右击需要发布的项目,点击Egret > Publish Game

项目发布

项目发布

发布完成后会自动打开发布后的文件夹

QQ截图20141223135001.png

项目调试VS集成调试
借助VS自带的TS调试功能我们能够很方便的调试我们的TS代码
在TS编辑器左侧添加一个断点

添加断点

添加断点

注意:选择Internet Explore作为调试浏览器(VS只能够附加到IE中实现JS调试功能)

启动调试

启动调试


点击绿色箭头(或按F5)开始调试

调试窗口

调试窗口

点击按钮,会看到断点被激活。

触发断点

触发断点

我们可以在下方的窗口中看到局部变量和调用栈

调用栈

调用栈


使用相关按钮或快捷键即可进行单步调试

单步调试

单步调试


其他浏览器调试
在解决方案资源管理器中找到
Launcher\index.html,右击鼠标选择“在浏览器中查看”

其他浏览器调试

其他浏览器调试

浏览器窗口弹出后你就可以在熟悉的浏览器中调试了。

Chrome调试

Chrome调试





ActionScript转TypeScript
EgretVS提供了ActionScript到TypeScript的转换功能,使您可以方便的倒入现有AS项目。

先创建一个Egret项目,然后在电脑中打开现有AS项目的目录,选择需要转换的文件或文件夹,复制。

AS文件窗口

AS文件窗口

在VS的解决方案资源管理器中选择放置代码的目录(本文中选择的是src目录)右击粘贴或Ctrl-V

复制粘贴

复制粘贴

根据转换文件的数量,转换的时间会有所不同,转换完成后就能看到转换之后的ts代码

转换后的TS文件

转换后的TS文件

转换之后的TS文件中可能会有一些语法错误,您可能需要自己修复编译时发生的错误。



分享到 :
4 人收藏

62 个回复

倒序浏览
yzhifeng666  初学乍练 | 2014-11-19 00:30:22
如果显示出代码高亮,是需要设置下语言环境么?该如何设置呢。并且我编译之后,出现一个错误
错误        1        “tsc.exe”已退出,代码为 1。        Egret2
这个该如何解决啊。。。。
智者见长  初学乍练 | 2014-11-18 20:16:23
我的VS2012,为啥在右键Egret->发布项目以后,打开那个index.html里面没东西,报错找不到egret呢?
abc  略有小成 | 2014-11-14 14:41:34
不错,昨天才装了vs2013 今天就跟进了。
xsstomy  斑竹 | 2014-11-14 16:30:01
顶顶顶,我要下载vs玩玩,mac上面怎么整
MikuHolic  初学乍练 | 2014-11-16 11:38:32
看上去好强大
littlemore  初学乍练 | 2014-11-16 13:48:37
终于出来了...
月之轮回2009  登堂入室 | 2014-11-17 00:59:37
本帖最后由 月之轮回2009 于 2014-11-17 10:22 编辑

使用VS2013编译项目时报了一个错,折腾了半天没解决,有人遇到过这个问题吗?
系统:win7 pro x64
工具:vs2013----------------------------
我看了下,Microsoft SDK 的TS编译器是TS1.1版,而编译参数是TS1.0,所以报错了。
QQ截图20141117005641.png
7yue  官方团队 | 2014-11-17 08:50:32
这工具相当屌,as代码拖拽进入vs,直接变ts.
小米粒儿  初学乍练 | 2014-11-17 11:51:33
果断试一下
stevenisgreat  登堂入室 | 2014-11-17 22:57:30
好强大啊
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部