全新 Mac 安装指南（编程篇） - 简书
全新 Mac 安装指南（编程篇）
注：本文专门用于指导对计算机编程与设计（尤其是互联网产品开发与设计）感兴趣的 Mac 新用户，如何在 Mac OS X 系统上配置开发与上网环境，另有《》作为本安装指南的基础篇。
在 《》一文中我有提到 Mac 系统的命令行环境与 Linux 系统十分类似，这是因为 Mac OS X 的操作系统内核是 Darwin，它和 Linux 一样是一种优秀的类 Unix 系统。掌握 Linux Shell 命令行的使用，可以说是全栈工程师的基本要求之一，而使用 Mac 的初学者会比使用 Windows 系统的有着更大的优势。
接下来，我们先来了解几个 Mac （及 Linux ）下的基础概念 系统环境变量、Shell 终端、SSH 远程连接。
环境变量（environment variables）是所有操作系统中的一个通用概念，简单来说就是系统启动之后，会预设一些全局的变量信息供所有应用程序来使用。打个比方，如果我声明『接下来文章里说的 env 是表示 environment variables 的意思』，其实就是在这篇文章的环境下，定义了一个环境变量 $env = "environment variables" 。
在一个操作系统中，可以把一个目录名、命令行语句、数值或字符串定义成一个环境变量。以下截图展示了 Windows 操作系统中预设的一些环境变量：
windows系统环境变量
其中有一个比较特殊的环境变量叫做 系统 path 变量，它的用途是定义一组全局目录路径。当在命令行终端下运行一个命令行时，若当前路径中不存在该命令，则会在系统 path 变量所定义的目录中按先后顺序一一查找，查找到则执行，如果遍历完 path 中所有目录都未查找到，则返回无法找到该命令。
Windows CMD 与 Mac Terminal 下打印系统 path 变量
Shell 终端
Shell 可以用来执行命令行，在 Mac 下打开 Terminal（终端）程序，会自动开启一个 Shell 命令行界面，而 Shell 每次在被打开（或执行）的时候会自动加载默认配置文件。Mac 和 Linux 默认的 shell 都是 bash，其中 Mac 的 bash 默认配置文件是 .bash_profile ，Linux 的是 .bashrc 。Mac 下通过修改 .bash_profile 文件可以进行一些环境变量的配置。
接下来实际操作演示如何使用 Terminal 在 .bash_profile 中配置 ll 快捷命令，其中我会顺带使用一些常用命令，它们含义如下：
跳转至目录
列出当前目录下的文件及文件夹
ls 命令加 -l 参数表示列出更多详细信息
重命名文件
删除文件，-r 参数表示递归删除目录
显示当前目录
波浪号表示当前用户根目录，一般用户的配置文件都放在这里
打印字符串或变量
将结果输出至某文件中
输出文件全文内容
执行某一个文件，通常 .bash_profile 修改之后需要执行下 source 命令（或者新开一个 shell）来保证配置生效
Terminal Shell 演示
此外，管道命令 | 也是 Shell 中十分常用的命令，它用于将前一个命令的输出结果作为后一个命令的输入参数。
例如使用以下命令查看 7070 端口是否有进程占用：
netstat -an | grep 7070
Mac 下默认的 Terminal + bash 不够强大，推荐换成 iTerm2 + zsh ，以下是具体的配置方法：
安装后打开 iTerm2，按下 ?, 进行以下配置用来提升逼格:
设置窗口透明度。如下图，Preferences -& Profiles -& Window -& Window Appearance 设置 Transparency
iTerm2 窗口透明度设置
设置打开窗口快捷键。Preferences -& Keys -& Hotkey 推荐把快捷键设置成 control+反引号（数字1左边那个键）
iTerm2 设置唤起窗口快捷键
iTerm2 支持窗口切分，使用 ?d 可横向切分成两个 shell。
安装完成后还需要进行一定的配置，让 zsh 复用 bash 的环境变量配置，具体步骤如下：
在线自动安装 zsh 。在 iTerm2 中执行以下命令 sh -c "$(curl -fsSL /robbyrussell/oh-my-zsh/master/tools/install.sh)"
使用 vim 编辑器打开用户 zsh 配置文件，vim ~/.zshrc ，vim 与普通编辑器有很大差异，使用方法可自行百度学习
文件打开后，先按字母键大写 G（跳至文件末尾），再按下字母键小写 o（新插入一行，同时进入编辑模式），输入以下字符 source ~/.bash_profile ，然后按下 Esc 键退出编辑模式，再依次按下 :wq 保存关闭文件
Mac 安装其他命令行，需要一个类似 Linux apt-get 这样的包管理工具，运行以下命令即可自动完成安装 brew 命令：
ruby -e "$(curl -fsSL /Homebrew/install/master/install)"
安装完成后，如想安装 wget 命令行（一款常用的爬虫下载工具），只需在 shell 中运行 brew install wget。大多数命令行都可以通过 brew 进行安装和管理。
SSH 远程连接
ssh 是 Mac/Linux 下一个远程连接主机的命令行工具，两台机器建立一个 ssh 连接之后可以进行一系列的加密指令和数据传输。ssh 十分重要，每个爱编程自由的人都应该掌握。
在开始学习 ssh 之前，我们需要有一台 Linux 的主机（或者另外一台 Mac 电脑）用来作为远程被访问的机器。由于国内的 阿里云、腾讯云 价格略高，建议可以买一个国外的 VPS（虚拟独立服务器）， /
加州机房在国内的访问速度不错，Vultr 最便宜的主机 30RMB/月。
假设你已经有了另外一台 Linux 主机，IP地址 为 1.2.3.4，用户名为 root ，使用以下命令可发起建立 ssh 连接：
ssh root@1.2.3.4
此时会要求输入 root 用户的密码，输入完成后即可登录至远程机器。如果不想每次都输入密码，则可以使用 ssh 密钥文件鉴权。在使用 git/scp/rsync 等命令时，配置 ssh 密钥文件能省去每次输入密码的麻烦，其配置方法只需三步：
安装 ssh-copy-id 命令行工具 brew install ssh-copy-id
生成本机密钥/公钥文件 ssh-keygen -t rsa
将本机公钥上传到远程服务器上 ssh-copy-id root@1.2.3.4
注：ssh 端口映射
ssh 协议默认使用 22 端口连接，通过 -D 参数可指定将该 ssh 连接通道映射到本机的某个端口，并且该加密通道支持 SOCKS 代理协议，这意味着本地应用程序通过此端口传输数据时，实际上是使用远程服务器的网络请求的数据。以下命令行演示了静默映射 ssh 连接至本地 7070 端口：
ssh -g -N -D 7070 -f root@1.2.3.4
接下来我们验证下是否映射成功。打开 System Preferences -& Network ，点击当前使用中的网卡 -& Advanced..（高级） 配置面板，进行以下设置：
配置 SOCKS
设置完成后看看本地网络是否变成了远程机器的IP。使用 Vultr VPS 的同学可以尝试打开下
透透气，学会使用 Google/Stackoverflow/Github 找到技术问题的解决方案，是高级程序员的基础素质。
常用软件推荐
在了解了 环境变量、Shell 终端、SSH 远程连接 之后，基础的命令行编程环境和网络环境已经配置完成。以下是我常用的开发软件，推荐给各位，希望有所帮助。
HOST切换工具
极简录屏工具，直接生成 gif 格式
文件文本对比工具
各类开发语言、框架 Cheatsheet
FTP/SFTP 客户端
Git GUI 客户端，SVN 可使用
微软新出的基于 Atom Shell 的编辑器
MacVim 通过 brew 安装，同时安装
开发 Android 应用
开发 iOS 应用
HTTP 接口调试 Chrome 插件
Chrome 代理插件
最好用的 HTTP 抓包工具（）
网卡上 HTTP 抓包
产品原型设计软件
图片编辑工具，也可以当做轻量级原型设计软件
Adobe Photoshop / Flash / Illustrator
Photoshop 的轻量级替代品
动画原型设计工具
PS 快捷导图切图工具
视频转码工具（可转成浏览器支持的 video mp4格式）
字体设计工具
MOV 格式转 GIF 格式
图片压缩工具，ImageAlpha 可有损压缩 PNG
管理不同 node 版本的命令行工具
Egret 游戏开发框架
服务端开发
Apache/MySql/PHP 环境
数据库设计
MySQL GUI客户端
MongoDB GUI客户端
局域网内共享鼠标键盘
任务、项目管理
语言文件编辑工具
Dropbox 同步文件不会出错，不过要先学会设置代理
另外，相信不少程序员朋友有听说过神之编辑器 Emacs 与编辑器之神 VIM，在 Mac 下有一个十分关键的隐藏配置，开启之后，可助普通程序员直接步入大神级别。关注微信公众号 『猫哥学前班』，回复 hhkb 关键词即可揭晓答案：）
一个爱好编程的自由主义者
微信公众号「猫哥学前班」【Egret】Wing3发布移动APP功能，打包APK流程以及会遇到的问题 - 博客频道 - CSDN.NET
arvin0的专栏
个人站点：
https://arvin0.github.io
分类：HTML5
流程：1.安装好wing 3，然后 插件——Egret项目工具——发布移动APP——Build android native project
&&&&&&&&&&&
&&&&&&&&&&&2.配置发布环境：&&&&&&&&&&&
&&&&&&&&&& & Android
1.egret engine
2.android sdk
3.java sdk
4.ant 5.egret-android-support
可能会遇到的问题：
<span style="color:#.问题：提示资源名字错误‘
&解决方法：所resource目录下的所有资源，包括：图片，音乐，视频，xml等不能有中文，特殊符号，空格等，必须英文命名：
<span style="color:#.问题：雪碧图的png图片不规范
& 解决方法：重新导出雪碧图，直到图片格式正确为止；
<span style="color:#.问题：ERROR：SWT folder && does not exist.
Please set ANDROID_SWT to point to the folder containing swt.jar for your platform
&如下图错误，原因是没有正确配置JAVA的环境变量
&解决方法：按照这个教程的流程走一遍就OK了,
<span style="color:#.问题：d:EgretProjects/apptest/MaintainPlan2_android/MaintainPlan2/proj.android is not a valid project(AndroidManifest.xml not found)
出现 如下图所示，提示缺少AndroidManifest.xml这个文件
解决方法：新建一个Game项目，然后用这个项目发布一次app，成功后，再发布原理的项目，基本就会成功了。
<span style="color:#.问题：本地有视频文件的，发布APP不成功，错误，如下图所示：
解决方法：
①.项目名字不能带特殊字符，不能是数字开头，如“120-media-video”，这样子不行。
②.要用最新版本的Egret Engine和Egret Android Support
③.egret engine 3.1.2版本的egret.video不支持webGL模式，要改成canvas模式
<span style="color:#.问题：apk界面，固定横屏问题，
&解决方法：在wing里修改屏幕横竖模式没有作用，要在发布的时候生成的android项目里改，找到AndroidManifest.xml文件，打开，修改
android:screenOrientation=&landscape&，然后用eclipse打开这个android项目，编译生成apk
具体参考文章：
<span style="color:#.问题：apk图标替换
&解决方法：将项目中的res下和drawable有关的图片换掉就可以了
<span style="color:#.问题：apk名字更换
解决方法：首先找到对应安卓项目下的AndroidManifest.xml文件，首先确定这个xml的编码格式是 utf-8，不是的话修改成 &?xml version=&1.0& encoding=&utf-8&?&，不然app命名中文会出问
&方法①，在AndroidManifest.xml里按照下图所示方法更改，改好之后，然后再用eclipse编译，打包apk就行了。
&&&&&&&&&&
方法 ②点击 &插件——Egret项目工具——发布移动APP——Settings，修改里面的名字，如下图，不过wing3.1.1，这个功能好像有BUG，暂时修改这个没有用，方法一管用。

<span style="color:#.问题：手动删除了对应的安卓项目，导致IDE在按照已有记录的路径去查找项目时失败。
&& 解决方法：打开wing的项目，打开 egretProperties.json 文件，然后按下图操作






排名：第11112名
（26）（19）（22）（0）（16）（29）（1）（1）（2）
hajea网：强大的js学习网站，教程丰富。链接：Egret小白快速上手
by Egret TS Team
写在前面的话你可能需要了解引擎的安装。 本章将开始指导大家来编写代码，并让自己的一些想法用Egret运行起来。 首先确保你对面向对象编程有基本的了解，如果熟悉一门基础的面向对象语言，比如AS3或Java，那就更好了。如不了解，请先阅读OOP入门的文章或书籍。 Egret 采用 TypeScript 进行编程，它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript 扩展了 JavaScript 的语法，原生 JavaScript 的方法在 TypeScript 也是可以使用的。比如Math等。 更多TypeScript教程请访问：
注意 虽然 Egret 开放了所有源代码，但是有些接口是不建议使用的，比如以 $ 开头的内部接口。当然您如果在源代码中看到的以private标注的接口在项目中是访问不到的，也不应该使用。 建立工作环境工欲善其事，必先利其器。对于任何编程开发任务来说，部署一个强大易用的代码编辑器或IDE开发环境是首要的工作。 结合Egret本身的特点，我们推荐使用 Egret Wing 来开发 Egret 项目。Egret Wing 是一款针对 Egret 项目的集成开发环境，通过可视化的方式创建、编辑和管理项目中所有游戏用户界面，并可以同时进行 TypeScript 代码编写和断点调试。 在图形图像渲染中，Egret完全使用HTML5标准中的canvas技术,可以运行在支持 HTML5 的浏览器上。但是在我们调试项目的时候还是推荐使用 Chrome 浏览器，一个方面是对 HTML 5 支持的程度较高，二是可以方便的调试 JavaScript 和进行性能分析等。 当然还有诸如WebStorm,Sublime和Visual Studio等开发环境都可以用来开发Egret。请读者根据自己的爱好做出选择。 为了保持一致，我们的教程是以Egret Wing 2.0为IDE讲解的。如用其他开发工具，请在涉及Wing操作的步骤使用您所用工具对应的操作方法。 打开项目我们已经建立了一个HelloWorld项目，我们就以此为基础，用Wing来打开该项目。启动Wing程序，菜单选择导入项目：
会弹出”Import Project”对话框。在”Project Path”框通过Browse选择我们之前创建的项目目录，即workspace下的HelloWorld，或在地址栏直接输入完整路径，均可：
这一步用于选择RES管理方案，通常用默认的Egret RES即可，不用任何修改，Next：
这一步用于为gui项目选择主题，直接忽略Complete即可。 确认选择正确后，点OK，即会在左侧的”Package Explorer”出现项目：
刚导入的项目图标是带锁的，双击即可开锁：
然后可以点开，看到项目的目录树结构：
运行项目在 Wing 中打开项目后，可以非常方便的从菜单编译运行：
系统会自动打开浏览器窗口显示项目运行结果：
清理项目到这里，工作环境建立起来了。接下来我们对项目进行不同的修改调整，并运行测试。来学习不同方面的Egret编程知识。 对新手来说，egret默认创建的项目显示了较为复杂的内容。为了不影响我们的学习过程，我们首先将这些显示内容清除掉。重新开始。 打开Main.ts文件，将createGameScene中的内容全部删除，并将createGameScene方法后边的所有方法删除。代码成为如图所示：
修改代码后重新build，以使我们对代码的改动生效：
编译后，我们再打开刚才自动弹出的浏览器窗口，重新载入页面，会发现，刚才显示的内容已经消失，页面剩下漆黑一片：
那么，我们将从这里真正开启我们的Egret学习旅程。 Egret程序的入口像所有的开发语言一样，总有一个入口，整个程序都从这里开始启动。熟悉类C系语言的开发者，如C++和Java都了解这些语言会从一个静态的main函数入口。 而Egret语言的入口类似于ActionScript，是从一个称之为文档类的类作为入口的。当然，具体点儿，就是以这个文档类的构造函数作为入口。 文档类是可以配置的，每个Egret项目都有一个index.html文件,可以在Egret项目的根目录找到这个文件，后边我们称之为index文件。 index.html可以打开直接编辑。打开该文件，找到div标签可以看到一些配置属性，其中的data-entry-class，其值默认为Main，就是指Main.ts中所定义的类Main。当然这只是个默认值，我们可以根据自己的喜好随意修改，只要确保项目设定文件中的index.html属性值所指定的类名在项目中有其类定义即可。 注意 在 Egret Engine 2.5 之前的版本中是如下配置的：文档类是可以配置的，每个Egret项目都有一个配置文件egretProperties.json，可以在Egret项目的根目录找到这个文件，后边我们称之为项目设定文件。项目设定文件是一个文本文件，可以打开直接编辑。打开该文件，会看到有一个document_class的属性，其值默认为”Main”，就是指Main.ts中所定义的类Main。当然这只是个默认值，我们可以根据自己的喜好随意修改，只要确保项目设定文件中的document_class属性值所指定的类名在项目中有其类定义即可。 入口函数文档类的构造函数，即为Egret程序的入口函数，可以观察到入口函数内有一行代码 this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
现在，我们不需要具体分析这行代码，只需要知道，这行代码保证了onAddToStage方法执行时，文档类实例已经被添加到舞台中。并且在onAddToStage方法内，this.stage属性已经有效，其指向舞台对象。下一节我们将会用到。 绘制一个单色背景通常游戏的画面都需要一个背景，让我们就从这最基本的显示开始着手！ 背景可以是一张图片，这需要将图片作为资源载入，后边我们会学习这种方式。 现在我们用最简单直接的方式，让Egret自己绘制一个单色的背景。先看看运行结果：
这个背景，实际上是绘制了一个给定填充颜色的矩形。打开Main.ts，在事先清空的createGameScene方法内加入如下代码： var bg:egret.Shape = new egret.Shape();这是我们第一次输入代码，因此有必要说明一下，Egret编写代码都使用TypeScript，如果对这门语言不是很了解，请先查阅相关资料。 这里，我们首先建立一个egret.Shape对象bg，这是由于egret.Shape对象有图形绘制功能。我们要绘制的背景的工作就用这个对象来完成。 Egret 官方提供的类都是在egret包内的，所以后边为方便表示，我们会省略到包名，直接用Shape来表示egret.Shape。其他类也一样。 创建好之后，开始绘制：
bg.graphics.beginFill( 0x336699 );
bg.graphics.drawRect( 0, 0, this.stage.stageWidth, this.stage.stageHeight );
bg.graphics.endFill();
Shape对象中有graphic属性，用来专门负责图形绘制的工作。 第1行，在绘制前，需要定义图形的填充颜色，我们给出一个偏蓝的颜色。注意颜色值跟大部分其他OOP语言一样，是用十六进制的RGB颜色的组合来表示。用beginFill来设置填充颜色。 第2行绘制矩形。用drawRect来绘制矩形。参数部分，给出4个数字确定了一个矩形的区域，这4个参数分为两组，分别这顶区域的起点坐标和终点坐标。 注意这两组坐标，由于我们绘制的背景要刚好覆盖整个舞台区域，所以起点坐标为(0,0)，终点坐标为舞台的宽度和舞台的高度。这一对尺寸可以直接从前一节所讲到的this.stage中获得。 类似的绘制函数还有drawCircle等，可以绘制不同的简单形状。 第3行endFill用来结束绘制工作。 到这里，一张跟舞台同样大的浅蓝色矩形图形已经准备好。但，接下来我们还需要将其添加到显示结构中，才可以在运行时显示出来： super.addChild( bg ); 这里，我们第一次使用addChild，这是Egret引擎操作显示列表的一个最常用的方法，就是将某个显示对象添加到某个显示容器上。 (注意，文档类实例添加到舞台是引擎默认完成的，不需要我们写代码完成该任务。) 另外，这里使用super是由于所调用的方法addChild是当前类的父类定义的。当然根据个人习惯，这里完全可以用this.addChild。参数直接传入bg。 运行项目，将会看到前面图中所示的效果，浏览器显示一个矩形背景！ 调整屏幕适配模式虽然显示出来了，但我们会发现一个现象，就是显示区域在浏览器中并没有占满。这是由于Egret项目建立后，默认的屏幕适配模式是不进行缩放的。 而Egret目前应用最广泛的是移动设备，通常需要的屏幕适配模式是整体显示。 Egret提供了几种常规的适配模式，刚才所说的不进行缩放是一种，在Egret中表示为showAll。占满屏幕是另一种，为fixedWidth。fixedWidth模式下会保持原始宽高比缩放内容，缩放后应用程序内容在水平和垂直方向都填满播放器窗口，但只保持应用程序内容的原始宽度不变，高度可能会改变。 我们可以在index.html中修改适配模式，打开项目根目录下的index.html文件，找到data-scale-mode开始的代码行，将等号右边的内容修改为fixedWidth刷新页面，会发现，蓝色背景已经占满浏览器屏幕：
你还可以在项目代码里随时修改 this.stage.scaleMode = egret.StageScaleMode.FIXED_WIDTH;
注意 在Egret 2.5 （包括2.4.x）版之前的版本屏幕适配模式有所不同，Egret提供了几种常规的适配模式，刚才所说的不进行缩放是一种，在Egret中表示为NO_SCALE。占满屏幕是另一种，为SHOW_ALL。 我们可以在egret_loader.js中修改适配模式，打开项目launcher目录下的egret_loader.js文件，找到var scaleMode开始的代码行，将等号右边的内容修改为SHOW_ALL： var scaleMode = egret.StageScaleMode.SHOW_ALL;。 显示一些文字 显示文字是常用的功能，接下来，我们显示一段简单的文字。比如”I’m Jack, I will use Egret create a fantasy mobile game!”——当然，如果你不叫Jack，可以换成自己的名字。 var tx:egret.TextField = new egret.TextField();
tx.text = &I'm Jack, I will use Egret create a fantasy mobile game!&;
tx.size = 32;
this.addChild( tx );
跟绘制背景类似， 可以在参考查看API。 编译运行，结果如图：
格式有些乱，我们稍微调整一下。紧接着加入如下代码：
tx.x = 20;
tx.y = 20;
tx.width = this.stage.stageWidth - 40;
注意前两行，分别设置了文本对象的x和y坐标。在Egret中，设置坐标是以锚点为基准的，锚点默认位于显示对象的左上角。当然我们可以根据需要设置锚点的位置。 编译运行，结果如图：
在Egret中，我们可以对文字进行更复杂的设置，比如设定颜色、加粗、斜体，甚至可以设置不同的文字应用不同的格式。具体用法会在专门的章节中介绍。 响应用户操作不管我们制作游戏还是某种应用，用户的交互都是必备的。 在前一节的基础上，我们就对这段文字添加一些响应操作。比如，改变颜色：
tx.touchEnabled =
tx.addEventListener( egret.TouchEvent.TOUCH_TAP, this.touchHandler, this );
注意，第一行设置touchEnabled为true，意即允许该显示对象响应Touch事件，这是Egret中特别需要注意的问题。因为所有的显示对象，默认都是不响应Touch事件的，这是基于性能考虑，因为打开对这种事件的响应，是对性能有不可忽略的影响的。 其中第二行代码新增一个方法的引用，这就是事件处理函数，我们需要事件处理函数中对用户操作做出对应的反应。 在Main类中，加入如下代码：
private touchHandler( evt:egret.TouchEvent ):void{
var tx:egret.TextField = evt.currentT
tx.textColor = 0x00ff00;
编译运行，然后点击这段文字，会如下图改变颜色：
这里的事件处理函数是用一个类方法来实现，还有一种简写的方法，直接作为匿名函数传入：
tx.addEventListener( egret.TouchEvent.TOUCH_TAP
, function( evt:egret.TouchEvent ):void{
tx.textColor = 0x00ff00;
}, this );
本例主要是使用用户轻触事件。在Egret中，还有各种其他方面的事件，比如网络通信相关的事件、计时器相关事件等等。在需要这种事件的地方，我们……再进一步讲解。 资源加载到目前为止，我们所写的代码，都不需要加载任何外部资源，或者其他形式的网络通讯。 不可否认的是，创建内容生动的游戏，总是需要有足够的图片来表现内容。 Egret中所有的资源都是动态加载的。 资源加载清单Egret的资源加载方式，是以一个资源加载清单为基础的。 如果资源是我们要购买的若干物品，资源加载配置就好比是购物清单。我们首先把需要购买的物品条理清晰地列在清单上，就可以按步骤有条不紊的去购买其上所列出的物品。 在Egret中，我们使用json格式作为RES资源加载配置文件的格式。这种格式使用方便，你甚至可以用记事本来编写它。同时，json格式也是模式JavaScript支持的一种解析格式。我们可以得到最快的解析处理。 通常Egret中的资源加载配置文件位于项目目录的resource文件夹内，取名default.res.json。Egret项目在创建时已经包含该文件。 注意 在 Egret 2.5 版本之前的版本该文件名称为resource.json; 默认的default.res.json已经包含若干资源的配置： {
&resources&: [
&name&: &bgImage&,
&type&: &image&,
&url&: &assets/bg.jpg&
&name&: &egretIcon&,
&type&: &image&,
&url&: &assets/egret_icon.png&
&name&: &description&,
&type&: &json&,
&url&: &config/description.json&
&groups&: [
&name&: &preload&,
&keys&: &bgImage,egretIcon&
接下来，我们就从默认的配置来了解资源配置的规则。 配置文件中的”resource”我们可以视为资源库，当前游戏使用到的资源都可以放到这里。其中以资源为单位分别列出。每一项资源单位都包含三个属性：
name：表示这个资源的唯一标识符。注意资源比较多的项目应确定一套命名规则，避免不同资源命名之间重复或太接近而易混淆。 type：表示资源类型。紧跟着会进一步讲解其含义及取值规则。 url：表示当前资源文件的路径。通常我们约定配置类型的资源置于config子目录下；其他类型置于assets子目录下。 每个”resource”单位中的type，是Egret约定好的若干类型，最常用的有以下类型： image：表示各种常见的图片类型，包括PNG和JPG格式，载入后将解析为egret.Texture对象； text：表示文本类型，即文本文件，载入后将解析为string对象； json：也是一种文本类型，不过内容是json格式的，载入后将直接解析为json对象；
很多情况下，我们在某种游戏场合，需要同时加载若干资源，用以准备后续的游戏流程显示。Egret已经考虑到这种情况，使得我们可以将若干项资源定义为一个资源组。需要时，只需加载这个资源组即可。 “groups”是预加载资源组的配置，每项是一个资源组。 每一个资源组须包含两个属性：
name：表示资源组的组名 keys：表示这个资源组包含哪些资源，里面的逗号分隔的每一个字符串，都与”resource”下的资源name对应。
至此，resource目录中的结构及资源配置文件内容如图所示：
在程序中加载资源在Main.ts中的开头部分，我们会发现大量使用RES开头的代码，RES就是专门用来加载资源的类，这些代码我们稍后再分析，首先我们完成把这些图片载入所需的步骤。 注意，在onConfigComplete的最后，有一行加载资源组的代码： RES.loadGroup(&preload&); 很显然，loadGroup就是用来加载资源组的。由于我们将资源组命名为heroes，因此这里代码中的preload需要改成heroes。 资源加载结束后，我们需要判断所加载的资源是哪个资源组的，所以onResourceLoadComplete中的preload也需要改成heroes。 完成这些改动后，Egret将会加载heroes资源组，并且程序执行到createGameScene时，资源组已经加载完成。 在createGameScene最后添加如下代码： console.log( &createGameScene&, RES.getRes(&hero-01&) ); 编译，运行，打开浏览器的开发者工具，在Console栏会看到改行代码产生的输出：
如图，在createGameScene后面紧跟着一个Texture对象，说明载入图片是成功的！ 加载资源的代码分析在进一步显示图片前，我们了解一下资源加载的代码。 再回过头看看加载资源的代码。加载资源的过程整体分为两部分，第一步首先加载资源配置清单，第二步就是加载资源。 在onAddToStage方法中，有代码： RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
RES.loadConfig(&resource/default.res.json&, &resource/&);
这是专门用来加载资源配置的代码。 首先添加一个针对CONFIG_COMPLETE事件的侦听，然后执行加载。 配置加载完成时，即会执行onConfigComplete方法。 在onConfigComplete方法中，有如下 ： RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
RES.loadGroup(&heroes&);
第一行移除了对CONFIG_COMPLETE事件的侦听，这是一个推荐做法，因为我们不再需要加载配置文件，该侦听也就没有作用了。及时移除事件侦听可以删除不必要的引用，使得不再需要使用的对象能被垃圾回收及时清理，避免内存泄露。 接着，加入了对资源组事件的侦听。 首先是对资源组加载完成的侦听，这是必须的，因为程序的流程需要从这里进行，即程序需要在某种资源加载完成后进行预期的后续流程。 另外，任何加载都需要稳定的网络，而网络出现各种中断是很常见的情况，所以需要添加对加载错误事件的侦听，以在这种情况作出相应的处理，通常是重新加载或者是提示用户检查网络。 可选的，可以加入对加载进度的侦听，通常是通过某种样式的进度条显示给用户当前进度，这在所加载的内容需要耗时较长时对于用户体验非常重要。 对于加载错误和进度的侦听处理，我们这里不做过多说明。 在加载完成的处理，即onResourceLoadComplete中，通过检查当前加载完成的资源组名称，来做对应的处理。确认当前加载的资源组是heroes后，便进入程序的正式流程createGameScene中。 显示图片事实上，对于显示图片来说，相应资源加载完成，已经完成了95%的工作。接下来就是水到渠成了。 删掉文字部分的代码，即所有tx变量相关的代码。只留下绘制背景的代码。 显示第一个超级英雄然后加入如下代码，来显示我们所载入的图片资源： var batman:egret.Bitmap = new egret.Bitmap( RES.getRes(&hero-01&) );
batman.x = -30;
batman.y = 20;
this.addChild( batman );
显示所需的图片，在Egret对应的类就是Bitmap。 使用Bitmap创建一个图片时，在其构造函数中传入RES载入的资源，这里取得的是一个图片的资源，图片资源通过getRes获得的将是一个Texture对象。 这段代码用01号英雄图片资源创建了一个位图(Bitmap)显示对象，然后设定其坐标。最后添加到显示列表中。 编译运行，看看效果：
蝙蝠侠！看起来相当酷！ 查阅API参考在添加更多超级英雄前，我们先搞明白一个通用的问题。那就是，Bitmap构造函数的参数应该有几个，分别是什么类型，是否可选。 其实，之前我们绘制背景也用了几个方法，但是都直接给出代码。 如果自己写程序，应该给出怎样的参数，这些都是我们使用每一个API首先需要了解的。这里就说明一下如何来查阅API参考。 首先，我们官方提供了所有可用的类及其API参考网站：。
导航栏最上面是模块划分，Egret即表示核心的egret模块，GUI表示gui模块，RES表示RES模块,DB表示dragonBones模块，eui表示eui模块，other包括常用的全局函数Math和typescript中的数据类型。 首先选定所需模块，然后在导航栏会显示该模块所有可用的类，是按字母排序的。 可用滚动定位，也可以在搜索栏输入目标类的名称来快速定位。 选定后，会出现该类详细的API参考。
点击详情按钮可以查看 API 具体的更新情况。 注意： Egret 2.5 之前版本的 API，请使用 ,其中不包含 eui。 另外，在Wing中，也提供了快速查阅用法的功能。譬如，我们可能不了解Bitmap构造函数的具体用法，当我们输入括号时，即会自动弹出函数及参数用法提示信息：
显示更多超级英雄回到上面的代码中，接着我们再来几个超级英雄，为了让他们并列显示，我们给他们设置相同的Y坐标，并且设置X坐标比上一个增加100。紧接着上面的代码，添加另外三个英雄： var captain:egret.Bitmap = new egret.Bitmap( RES.getRes(&hero-02&) );
captain.x = 70;
captain.y = 20;
this.addChild( captain );
var superman:egret.Bitmap = new egret.Bitmap( RES.getRes(&hero-03&) );
superman.x = 170;
superman.y = 20;
this.addChild( superman );
var hulk:egret.Bitmap = new egret.Bitmap( RES.getRes(&hero-04&) );
hulk.x = 270;
hulk.y = 20;
this.addChild( hulk );
编译运行，看看排在一起的超级英雄：
美国大兵、超人，还有石头人！这个队形，酷毙了有木有！ 显示深度控制显示深度然后，看他们站队的先后顺序，看起来蝙蝠侠个子比美国大兵低一点，也许让蝙蝠侠排在前边看起来更协调一些。 之前我们了解过Egret的显示结构设计，这是整体的不同级别之间来说的。 那么这里，我们进一步了解在某一个显示容器内的显示对象结构，可以称之为显示列表。这是由于处于同一显示容器的显示对象，是以类似列表的方式来管理的，每一个显示对象都有其索引，并且索引是从0开始的整数。显示列表索引通常称为显示深度。 我们的眼睛对着屏幕，显示列表中显示对象的索引顺序在从屏幕到眼睛方向就是从0开始，依次递增的。 首先我们验证一下当前的显示深度，在createGameScene底部加入代码： console.log( &display indexes:&, this.getChildIndex( bg ), this.getChildIndex( batman ),
this.getChildIndex( captain ), this.getChildIndex( superman ), this.getChildIndex( hulk ) );
我们称这段代码为索引log代码，后边还会用到。 则会输出：
正是按照我们addChild的顺序依次递增的 修改显示深度我们确认一下，现在蝙蝠侠的深度是1，队长的深度是2。 接下来，完成我们刚才计划的调换，我们获取蝙蝠侠的深度，并直接设置蝙蝠侠的深度为这个值： this.setChildIndex( batman, this.getChildIndex( captain ) ); 然后再复制一份深度log代码在这行后边。 编译运行，看看发生了什么：
Cool!蝙蝠侠已经站到前边了。现在，再检查一下这两位超级英雄的深度如何变化： display indexes: 0 2 1 3 4 蝙蝠侠的深度为之前队长的深度2，这点毋庸置疑。队长的深度由之前的2变为1，这里需要说明一下关于显示深度的规则： A. 某一个显示深度只能对应一个显示对象，一个显示对象也只能有一个显示深度。 B. 显示深度总是从零开始连续的，当某个深度位置的显示对象被设置为其他深度时，原来的深度会自动被紧邻的比其深度值大1位置的显示对象占据，后续深度位置的显示对象会依次往前排。 C. 某一容器内的显示列表的深度最大值是显示列表长度-1。 可以理解每个深度位置是一个房间，这些房间从0开始依次编号。每个显示对象是一个人，显示列表维护总要确保每个人在一个自己的房间，并且这些房间之间没有空的，除非这些人都从0开始排满了前面的房间。 交换显示深度接下来，我们尝试让绿巨人也站到超人后边，就会形成前后两排的格局，这样也许会显得更整齐。 除了像上边的代码直接占据现有已被显示对象占据的深度，我们还可以直接交换两个显示对象的深度。 在createGameScene底部继续加入代码： this.swapChildren( superman, hulk );
同样再复制一份深度log代码在这行后边。 编译运行，看看结果：
如愿以偿，队形很整齐哦！ 可以看到两位英雄深度已经完成互换： display indexes: 0 2 1 4 3
不可逾越的显示深度最大值之前我们说明了显示深度规则，其中C说明了最大值。为了更深一步理解，我们可以给一个较大的深度值来验证一下。 队长的个头高，或许我们让队长排最前边会更显威风。我们给一个远超过最大值(5-1=4)的深度值20： this.setChildIndex( captain, 20 );
同样再复制一份深度log代码在这行后边。 编译运行，看看结果：
这是个看起来更有战斗力的队形！ 会发现队长的深度并没有变成20，而是自动取允许的最大值4： display indexes: 0 1 4 3 2
这是引擎自动处理的，也算是一种容错功能吧。 深度控制是显示编程的一个重要概念，如果没有完全理解，请自己反复使用本节所使用的深度控制API来测试验证。 Tween动画效果到目前为止，我们显示的内容都是静止的，是时候让我们来领略Egret强大的Tween动画控制功能了。所谓Tween动画，就是设计某种属性（比如位置、透明度和缩放）的两个不同状态，然后在给定的时间内从一个状态平滑过渡到另外一个状态。 我们制造几个简单的位移和透明度动画来初步体验。 认识锚点在继续动画之前，我们首先要清楚一个关于坐标定位的重要概念：锚点。 锚点用另一个易于理解的词来说，就是定位点。因此锚点是只存在于显示对象的概念。并且锚点是对显示对象自身设置的。 由于是用于坐标定位，锚点自然地包含了两个部分：X方向锚点和Y方向锚点。 锚点的设置是通过给出一个相对于显示对象本身的坐标值来实现的。具体来说就是以显示对象本身的左上角作为原点的，取值就是具体的像素值。 使用显示对象属性anchorOffsetX和anchorOffsetY来设置坐标值锚点。 比如我们设置一个显示对象的锚点坐标为：X方向30像素，Y方向40像素，那么如图所示，锚点就在两个方向箭头所指的黑色圆点位置：
代码： hulk.anchorOffsetX = 30;
hulk.anchorOffsetY = 40;
hulk.x += 30;
hulk.y += 40;
设置锚点后，我们还需要根据锚点的偏移修改坐标值，以使绿巨人还保持原先的显示位置：
确保以上四行代码已经置于createGameScene最后。 设计并实现一组Tween动画接下来，我们继续用这些超级英雄来展示强大的Tween功能。我们从不同的方面设计三个Tween动画： 第一步，让蝙蝠侠和超人互换位置； 第二步，让队长进行透明度变化，变透明然后再恢复； 第三步，让绿巨人缩小再放大（目前已经够大，所以不能再大了）； 操作方面为了便捷，我们设计为点击舞台，每次点击播放不同的动画。由于要分次显示不同的动画，我们用一个成员变量times来记录次数，在类内部建立该成员变量： private times:
并设计为在每次点击时增加1，并取余3，使得我们在点击一轮三次动画后，后续的点击还可以从头再运行。 这样关于点击次数控制的代码结构： this.times = -1;
var self =
this.stage.addEventListener( egret.TouchEvent.TOUCH_TAP, function(){
switch ( ++ self.times % 3 ) {
}, this );
接下，我们在switch-case的3种case中，分别完成三个Tween动画控制代码。 第一步，让两个超级英雄互换，直接设置目标X坐标为对方的当前X坐标即可： egret.Tween.get( batman ).to( { x:superman.x }, 300, egret.Ease.circIn );
egret.Tween.get( superman ).to( { x:batman.x }, 300, egret.Ease.circIn );
由于这两个动画设计为同时进行，我们分别设置其Tween即可。 这里先熟悉一下Tween的基本用法。 Tween.get内传入需要对其进行动画控制的对象，并返回一个Tween对象。然后可以设置Tween对象的动画，即调用to方法。 to方法包含三个参数。 首先是动画目标属性组，这个参数可以对目标对象本身的各项属性进行设定，就是动画结束时的状态，可以设定一个或多个属性。 第二个参数是动画时间，以毫秒计。 第三个参数是补间方程，即对动画区间内每个时间点的属性值设定分布。在egret.Ease已经提供了丰富的补间方程，可以根据自己的喜好选择。 第二步，队长的透明度分为两个阶段，使用egret.Tween来实现这两个阶段时，直接在同一个语句中，用连续写法即可： egret.Tween.get( captain ).to( { alpha:.3 }, 300, egret.Ease.circIn ).to( { alpha:1 }, 300, egret.Ease.circIn );
之所以可以这样用，是由于Tween提供的方法均会返回Tween对象。 另外，这种连续写法将这些动画过程按照先后关系形成一个队列。运行过程中，前面的动画执行完毕后，依次立即执行后续的动画。直到队列执行完毕。 上面的代码将实现队长的透明度变为0.3，之后再恢复为1。 第三步，该步动画同样分两个阶段，因此与第二步有些类似，用连续写法，依次写出： egret.Tween.get( hulk ).to( { scaleX:.4, scaleY:.4 }, 500, egret.Ease.circIn ).to( { scaleX:1, scaleY:1 }, 500, egret.Ease.circIn );
如代码所示，对尺寸放大缩小最便捷的方法就是设置X和Y方向的缩放因数。 注意，以上三个步骤的代码分别写在之前switch-case的三个case中。 注意 在 Egret 2.5 之前的版本中，Tween包含在 egret 核心中。在 Egret 2.5 中，tween成为一个单独的模块。对于不需要此功能的项目可以去掉该模块。项目模块化配置可以参考： 。 加入声音为了让我们能快速直观地学习Egret的用法，我们在前面的步骤都学习显示方面的内容。然而在游戏开发中，各种声音效果的配合也是非常重要的。 声音资源配置跟图片一样，声音也必须作为资源加载才可以播放。 首先我们要先将准备好的声音文件放入到assets文件夹。这里准备的文件为bonus.mp3。 在default.res.json中加入声音的配置，为简明我们没有新创建组，直接添加到原来的组成为：
{ &resources&: [
{ &name&:&hero-01&,&type&:&image&,&url&:&assets/hero-01.png& },
{ &name&:&hero-02&,&type&:&image&,&url&:&assets/hero-02.png& },
{ &name&:&hero-03&,&type&:&image&,&url&:&assets/hero-03.png& },
{ &name&:&hero-04&,&type&:&image&,&url&:&assets/hero-04.png& },
{ &name&:&bonus.mp3&,&type&:&sound&,&url&:&assets/bonus.mp3& }
&groups&: [
{&name&:&heroes&,&keys&:&hero-01,hero-02,hero-03,hero-04,bonus.mp3&}
播放声音 在程序中，就不需要做额外的处理，加入如下代码即可： var sound:egret.Sound = RES.getRes( &bonus.mp3& );
var channel:egret.SoundChannel = sound.play(0,1);
上面的代码生成了一个 sound 对象并调用 sound 的 play 方法，其中的第一个参数 0 表示播放的开始时间，第二个参数表示播放次数，这里我们只播放一次，如果将第二个参数设置为负数将循环播放。该方法返回了一个 SoundChannel 对象。通过操作 channnel 对象可以控制声音的音量大小停止播放等。 为了方便测试，我们不直接播放。而是将这段代码加到队长渐变的部分,即case 1代码段中。 编译运行，将会在每次队长渐隐渐显动画播放时听到所加声音播放。 注意 在 Egret 2.5 （包括 Egret 2.4） 之前的版本中不通过 SoundChannel 来控制声音。SoundChannel 为新增的API。
常规网络通讯注意 在 Egret 2.5 中，这部分内容包括在game兼容扩展库中，若要使用该部分内容，请确保项目中包括了game扩展库。项目模块化配置可以参考： 。 在游戏开发项目中，数据的通讯无疑是不可或缺的因素。 本节，我们就来通过一个简单的实例来学习网络通讯的基本用法。 URLRequestURLRequest 类封装了进行HTTP请求所需要的所有信息。 常用的HTTP请求有GET/POST两种类型。当进行HTTP请求时，可以直接在URLRequest实例上设置请求类型和实际数据。 HTTP请求首先需要URL，我们准备了一个专用于测试的URL，其返回当前浏览器的代理信息： http://httpbin.org/user-agent 使用URLRequest类，就要创建其实例，通常在构造函数中传入URL即可： var urlreq:egret.URLRequest = new egret.URLRequest( &http://httpbin.org/user-agent& );
URLLoaderURLRequest只是一个信息集合，实际通讯需要使用URLLoader。 URLLoader必须使用一个URLRequest实例来发挥作用，并且为了得到返回结果，需要加一个事件监听，代码如下： var urlloader:egret.URLLoader = new egret.URLLoader();
urlloader.addEventListener( PLETE, function( evt:egret.Event ):void{
console.log(evt.target.data);
}, this );
urlloader.load( urlreq );
编译运行，没有错误的话，控制台将会输出类似的代理信息log：
&user-agent&: &Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36& }
使用WebSocket通讯众所周知，WebSocket为Web应用提供了更高效的通讯方式。 本节介绍WebSocket的基本用法。 确保项目支持WebSocket从Egret1.5.0开始，以官方扩展模块的形式支持WebSocket。在现有的Egret项目中，修改egretProperties.json中的”modules”，添加”socket”模块： {
&name&: &socket&
注意 添加模块的时候要注意保证 json 的语法正确。 在项目所在目录内执行一次引擎编译： egret build -e 本步骤已经完成，现在项目中既可以使用WebSocket相关的API了。 WebSocket客户端用法我们通过一个最简单的示例来学习。 所有的通讯都是基于一个WebSocket实例，首先创建WebSocket对象。首先看基本代码。 private webSocket:egret.WebS
private createGameScene():void { this.webSocket = new egret.WebSocket();
this.webSocket.addEventListener(egret.ProgressEvent.SOCKET_DATA, this.onReceiveMessage, this);
this.webSocket.addEventListener(egret.Event.CONNECT, this.onSocketOpen, this);
this.webSocket.connect(&echo.websocket.org&, 80);
WebSocket对象主要有两个事件，一个是连接服务器成功，另一个是收到服务器数据。在正常的网络交互中，这两个事件都是要必须侦听的。加入侦听事件后，即可连接服务器。注意像所有的通讯协议一样，服务器需要支持WebSocket协议，为便于测试，WebSocket官方提供了一个专用于测试的服务器echo.websocket.org，连接其80端口即可测试。 在连接成功后，即可发送消息，消息的具体格式都是根据情况自己定义的，通常是json格式，便于解析。当然可以自定义其他的字符串格式： private onSocketOpen():void {
var cmd = &Hello Egret WebSocket&;
console.log(&The connection is successful, send data: & + cmd);
this.webSocket.writeUTF(cmd);
服务器根据约定的格式个客户端发送消息，则会触发SOCKET_DATA事件，在其事件处理函数onReceiveMessage中即可读取消息，读取到字符串后，即可根据约定的格式解析： private onReceiveMessage(e:egret.Event):void {
var msg = this.webSocket.readUTF();
console.log(&Receive data:& + msg);
编译运行，没有错误的话，控制台将会输出如下log信息： The connection is successful, send data: Hello Egret WebSocket Receive data: Hello Egret WebSocket
到此Egret小白教程结束
&&&&&&&&&&&
阅读(29887)
我可能需要关注的开源项目? >
我可以选择哪些技术支持? >
我可以选择哪些培训方式？>
过去的内容？>
(已满) (已满) (已满) (已满) (未满)
Copyright (C) . 京ICP备号 京公网安备02
