Egret社区
本帖最后由 xsstomy 于 2015-3-4 16:25 编辑

感谢 guoshaorui会员热心的为大家编写这套Egret入门教程,经过 guoshaorui 的同意转载这套教程。
该教程原始地址:点击访问
guoshaorui 的微博: http://www.weibo.com/guoshaorui



这里可以查看教程的配套源码:HelloEgret

Egret框架很重要的一个特性就是,允许开发者使用TypeScript来开发应用或游戏(框架本身就是基于TypeScript编写),熟悉Flash/AS3开发的朋友,会很容易掌握TypeScript这个语言,再加上Egret框架的显示对象封装采用了和Flash的显示列表机制很相似的设计,Flash开发者用起来会非常舒心。

补充:对Flash开发者,官方贴心的给出了Flash AS3移植Egret在线参考
egret-logo.png

这篇教程将向您展示Egret框架的基本用法:

环境和软件要求:


环境和工具
  • EgretEngine
  • 一个HTTP服务器(比如Apache) - 非必须

IDE

  • WebStorm (推荐) - 跨平台
  • SublimeText(可选) - 跨平台
  • VS2012(或更高版本) - 只支持Windows

安装和配置:




Egret 1.0 RC2的版本,集成了TypeScriptCompliler,开发者可以直接安装Egret,无需单独安装TypeScript

目前基于Egret框架的应用调试,必须基于一个HTTP服务器来进行,简言之,就是您需要在浏览器中用http://localhost/demo这样的形式来运行。那如何来配置一个HTTP服务器呢?会不会很麻烦?不必担心,Egret已经为大家考虑到了这一点,为了方便大家使用和调试,Egret内置了一个简单的HTTP服务器,使用方式会在下文中提及。不过为了获得更好的开发体验,Egret还是建议大家尽量使用成熟的HTTP服务器,比如Apache这样的。即使是自己配置服务器,也不必太顾虑,配置过程相对还是简单的。不同的操作系统有不同的选择,如果您是Windows系统,可以用系统自带的IIS(配置教程),或者在网上找一个AppServ的安装包。如果您是Mac OS X系统,就更简单了,Mac OS X自带了Apache,可以参考这篇教程设置一下虚拟站点。

至于IDE,您可以根据自己的系统和个人喜好自由选择,本文将使用WebStorm 8.0来完成演示,这个工具在前端开发界有很高的声誉。

Egret可以兼容多数现代浏览器,不过为了调试方便,建议大家使用Chrome浏览器,因为Chrome的开发者工具真的很强大。

运行HelloWorld:


程序员的习惯是,学习一个框架从HelloWorld开始。这里也不免俗,先带您运行Egret框架的HelloWorld。

下载和安装EgretEngine
EgretEngine现在已经集成一键下载安装下载地址
等候安装成功,然后输入下面的命令,可以查看Egret工具的帮助信息:
  1. egret
复制代码
Mac OS用户请加上sudo来确保执行权限。如果安装失败,请根据提示,找到失败原因并重新安装。

对于开发人员来说,一个好的习惯是,将特定的一组项目放在一起,这个目录可以称作工作目录(workspace)。当然本质上,就是您磁盘上的一个文件夹。如果您使用自己的HTTP服务器(而不是Egret内置的),请把服务器指向您的工作目录,确保此目录可以被您的服务器访问到,为了便于描述,以下将使用{egret_workspace}代指您的工作目录。

执行下面的命令来创建您的第一个Egret项目:
  1. cd {egret_workspace}
  2. egret create HelloEgret
复制代码
创建大约耗时十几秒,请耐心等候。
然后执行成功后,您可以看到工作目录下多了HelloEgret这个项目。

现在就可以运行HelloEgret项目,这时您有两个选择:如果希望使用Egret内置的HTTP服务器,则执行命令
  1. egret startserver HelloEgret
复制代码
这个命令会使用默认浏览器自动运行当前项目;如果您使用自己的HTTP服务器,请打开浏览器输入站点目录下的/HelloEgret/launcher/路径即可,比如:http://localhost/HelloEgret/launcher/。顺利的话,您将会看到如下的画面:
hello_egret.png

如果您有任何的ts代码修改,请敲入下面的命令编译后再运行项目:
  1. egret build HelloEgret
复制代码
另外官网还提供了很多实例,您可以从这里下载,根据说明来安装和编译,并浏览这些例子的实际效果和源码展示。
egret_samples.png
egret_fps.jpg


分享到 :
3 人收藏


------------------------------

78 个回复

倒序浏览
哈哈熊二  登堂入室 | 2014-10-13 14:56:50
为什么我按照楼主这么做,它说找不到文档类呢?
shinji  圆转纯熟 | 2014-8-3 11:27:59
闪闪辛苦了
JustYY  登堂入室 | 2014-8-26 14:46:42
HelloWordl帖留名
风云·  初学乍练 | 2014-8-30 02:23:24
luckduvip  初学乍练 | 2014-10-13 15:25:25
到此一游,。。
Hy369  初学乍练 | 2014-10-18 17:21:54
不错,赞一个!
lighteeth  登堂入室 | 2014-10-21 10:35:32
提示: 作者被禁止或删除 内容自动屏蔽
小乔布斯  圆转纯熟 | 2014-10-22 16:48:01
完成就是Mac OS X自带了Apache服务器按照教程一直没有配置成功,默认的localhost能打开,自己的目录就打不开了,在网上找了好多相关教程都没有配置成功,我的系统时OS X10.10,哪位大神指导一下啊
A闪  社区管理员 | 2014-10-23 01:04:36
小乔布斯 发表于 2014-10-22 16:48
完成就是Mac OS X自带了Apache服务器按照教程一直没有配置成功,默认的localhost能打开,自己的目录就打不 ...

Egret自带一个服务器程序,直接用命令egret startserver就可以用了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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

返回顶部