Egret引擎开发指南之视觉编程

显示对象和显示列表

“显示对象”，准确的含义是可以在舞台上显示的对象。可以显示的对象，既包括可以直接看见的图形、文字、视频、图片等，也包括不能看见但真实存在的显示对象容器。

在Egret中，视觉图形都是由显示对象和显示对象容器组成的。

如果我们要表达上图中的场景，我们应该如何通过树的方式来描述呢？

显示对象等级结构

在Egret中，显示对象被分为两大类：一种是可以包括其他显示对象的显示对象容器，简称为“容器”。另外一种是单纯的显示对象，除自身以外不能包括其他显示对象，简称“非容器对象”。

在实际的操作中，我们可以把这样一种结构看成一个树状结构，容器可理解为树枝，非容器对象则可以理解为树叶。

在这个树状结构中，处于最上层的，就是“舞台”。对应到程序中，我们可以看到一个 stage 对象。舞台是Egret显示架构中最根本的显示容器。每个Egret应用有且只有一个stage对象。舞台是这个显示树结构的根节点。

在舞台中，我们还拥有一个主容器。这个容器就是文档类所创建的容器。每一个Egret都会拥有一个文档类，这个文档类必须是一个显示对象容器。

在这个场景中，我们包含了一个场景背景，而背景是由背景图和一颗大树组成的。另外两个元素是由人物和一个草地组成的。

显示列表

上面我们所看到的树状显示对象结构图实际上就是Egret的“显示列表”。

使用显示列表管理容器和非容器对象是非常方便的，当某一个显示对象处在在显示列表中，我们就可以在画面中看到该对象。当我们将显示对象从显示列表中移除后，该对象则从画面中消失。

在Egret内部维护着一个显示列表，开发者无需关心该列表是如何运行的，你只需要对自己的显示对象进行相应的操作即可。

显示对象种类

Egret在架构设计过程中围绕显示列表的概念，对所有对象进行了严格的封装。在Egret中，所有的显示对象均继承自 DisplayObject 这个类。DisplayObject 类也就是我们前面描述的“显示对象”。在Egret中，所有的“容器”均继承自 DisplayObjectContainer。

为了统一管理显示列表，所有显示对象都统一于DisplayObject类。所有的显示对象都继承自DisplayObject，而DisplayObject则继承自EventDispatcher。也就是说所有的显示对象均可以发送事件。

DisplayObjectContainer显示对象容器的父类也是DisplayObject。

我们在实际操作中把概念再次简化，可以归纳为两条规则：

直接继承自DisplayObject的类都属于非容器。继承自DisplayObjectContainer的类都属于容器。

赞 (0)

相关推荐

  • Egret引擎开发指南之编译项目

    Egret的编译功能依赖于TypeScript的编译功能.实际上TypeScript的编译过程并非传统的将程序源代码翻译为机器可执行的二级制文件过程.由于浏览器能够识别执行的脚本只有JavaScript,所以TypeScript的编译仅仅是把TypeScript翻译为对应的JavaScript脚本. 我们无需理解里面复杂的过程,我们仅仅可以把编译过程理解为将TypeScript翻译成能够被浏览器执行的JavaScript代码即可. 这个"翻译"的过程也非常简单.我们仅仅需要执行一个简单

  • Egret引擎开发指南之运行项目

    Egret引擎开发指南之运行项目

    这是一个令人兴奋的小结,因为在这个小结中你终于能够看到你的第一个Demo的运行效果. 1.使用Egret工具运行游戏 运行Egret项目,我们需要一个已运行的HTTP服务器.在前面安装Egret的教程中,我们已经为大家推荐了一款HTTP服务器.现在我们来看一下如何使用我们egret提供的最简单的HTTP服务器来运行我们的项目. 和前面的教程一样,我们首相在终端中定位我们的项目,使用cd命令. 然后我们执行一个简单的命令来启动Egret的HTTP服务器,命令如下: egret startserve

  • Egret引擎开发指南之发布项目

    在Egret中,使用发布功能也非常的简单.你只需要使用如下命令即可: egret publish HelloWorld 此命令中egret publish为发布命令,HelloWorld是你当前项目的名称. 执行此命令后,egret会启动发布打包工作.此时的发布过程可能相对build功能耗时更长.因为Egret工具会对你的游戏代码做最终的发布工作,这个工作是非常严格的编译过程.其中的过程非常的复杂.我们只需要了解它的作用即可. 使用Egret的发布功能还需要安装Java7.你应该安装Java7或

  • Windows 系统下安装和部署Egret的开发环境

    Windows 系统下安装和部署Egret的开发环境

    需要安装的软件如下: Node.js TypeScript TypeScript代码编辑器 HTTP服务器(可选) Chrome(可选) Egret 这篇文档中,我们主要介绍在Windows环境中安装Egret.其安装步骤如下. 1.安装Node.js 1.1下载Node.js Node.js的安装方法非常简单,我们可以访问 Node.js官网,然后进点击页面中的INSTALL按钮,可直接下载Node.js的msi安装文件包. 本教程撰写时,Node.js版本为0.10.29,如果你的版本高于此

  • Egret引擎开发指南之创建项目

    Egret引擎开发指南之创建项目

    Egret提供非常方便的创建工具,我们把创建后的文件总和称之为项目.在后面的操作中,我们对创建的项目进行操作,具体创建步骤如下: 需要注意的是Egret支持Windows和Mac OS X 两个平台.在不同平台中,我们使用的Egret命令是相同.对于不同的命令,大家可以参考文档中相关平台的操作介绍. Egret在创建的时候,需要指定创建项目所在目录.Egret会将所有创建后的项目文件全部存放到指定目录中. 1.Windows系统中进入项目目录 我们在Windows中的命令行工具中敲入命令如下图:

  • Mac OS X 系统下安装和部署Egret引擎开发环境

    Mac OS X 系统下安装和部署Egret引擎开发环境

    概述 Egret基于TypeScript开发的,而TypeScript编译工具tsc是基于Node.js开发的.所以在安装过程中,我们先需要对于基础支持工具进行安装.需要安装的软件如下: Node.jsTypeScript代码编辑器HTTP服务器(可选)Chrome(可选)EgretJava 这篇文档中,我们主要介绍在Mac环境中安装Egret.其安装步骤如下. 1.安装Node.js 1.1下载Node.js Node.js的安装方法非常简单,我们可以访问Node.js官网,然后进点击页面中的

  • Egret引擎开发指南之视觉编程

    Egret引擎开发指南之视觉编程

    显示对象和显示列表 "显示对象",准确的含义是可以在舞台上显示的对象.可以显示的对象,既包括可以直接看见的图形.文字.视频.图片等,也包括不能看见但真实存在的显示对象容器. 在Egret中,视觉图形都是由显示对象和显示对象容器组成的. 如果我们要表达上图中的场景,我们应该如何通过树的方式来描述呢? 显示对象等级结构 在Egret中,显示对象被分为两大类:一种是可以包括其他显示对象的显示对象容器,简称为"容器".另外一种是单纯的显示对象,除自身以外不能包括其他显示对象

  • 详解Anyscript开发指南绕过typescript类型检查

    详解Anyscript开发指南绕过typescript类型检查

    目录 前言 场景设定 解决方法 注释忽略 场景用例 类型断言 场景用例 泛型转换 场景用例 总结 前言 随着越来越多的前端项目采用 typescript 来开发,越来越多前端开发者会接触.使用这门语言.它是前端项目工程化的一个重要帮手,结合 vscode 编辑器,给予了前端开发者更严谨.高效的编码体验.但同时,严格的类型检查也会使部分开发者的编码效率有所降低,将时间花费在解决类型冲突.类型不匹配上,从而导致望而却步,迟迟不敢上手. 本文描述了几种绕过 typescript 类型检查的方法,帮助t

  • AngularJS 中的指令实践开发指南(一)

    指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令.这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用.在这篇文章的最后(第二部分),我会指导你如何使用Angular指令来创建一个简单的记事本应用. 概述 一个指令用来引入新的HTML语法.指令是DOM元素上的标记,使元素拥有特定的行为.举例来说,静态的HTML不知道如何来创建和展现一个日期选择器控件.让HTML能识别这个语法,我们需要

  • node.js 开发指南 – Node.js 连接 MySQL 并进行数据库操作

    Node.js是一套用来编写高性能网络服务器的JavaScript工具包   通常在NodeJS开发中我们经常涉及到操作数据库,尤其是 MySQL ,作为应用最为广泛的开源数据库则成为我们的首选,本篇就来介绍下如何通过NodeJS来操作 MySQL 数据库. 安装MySQL模块到NodeJS中 我们需要让NodeJS支持MySQL,则需要将MySQL模块添加到系统支持库   想要快速了解Node.js ,赞生推荐亲看看 node.js_guide.pdf  - node.js 开发指南 :想要电

随机推荐