Seed引擎学习之display

介绍一款游戏引擎Seed，是用Lua封装的API，文章最后有相关资源链接。

摘要：Seed引擎主要分为：事件（event）、显示（display）、输入（input）、物理（physics）

和声音（audio）这5个包。

今天先把显示(display)总结出来：

显示是最基本的功能，也是学习Seed最直观的入口。

1.首先，从 display：newBgColorStage()这个方法开始学习。

local bgstage = display:newBgColorStage()
bgstage.red, bgstage.green, bgstage.blue = 1,1,1

这两行代码会创建一个白色的背景。

newBgColorStage()方法会创建一个用于清除屏幕的渲染阶段，此函数返回一个display.BgColorStage对象。

如果采用:符号调用，那么创建的BgColorStage会被立刻添加到渲染序列。如果采用.符号调用，则不会添加。

如果不添加清除屏幕的渲染阶段，那么根据平台的不同，屏幕上有可能会残留一些不确定的内容。

如果你有一张足以覆盖整个屏幕的贴图，那么就不需要BgColorStage了。使用模拟器运行小鸟运动的程序时，

如果不加上newBgColorStage()就会看到小鸟移动过后还有残影存在。其实，这个方法表面上只是执行一次，

其实具体实现是每一帧都会刷新屏幕的。

2.给屏幕添加图片：display：newStage2D()

newStage2D()会创建一个用于二维场景的渲染阶段，此函数返回一个display.Stage2D对象，

在它上面可以添加Image。

local w, h = display:getViewSize()
local bgstage = display:newBgColorStage()
--bgstage.red, bgstage.green, bgstage.blue = 1,1,1

local stage = display:newStage2D()
local bg = stage:newImageRect("scene1.jpg", w, h)
bg:setAnchor(-0.5,-0.5)

这段代码在背景层上添加了一副图片，效果如图所示：

这里添加图片用到了stage:newImageRect("scene1.jpg", w, h)函数，会创建一个静态图片，

w和h分别表示图片的宽和高。这是一个代理方法，来自于display.presentations.newImageRect。

这种创建图片的方法可以对一张大图进行裁剪，还有另一种创建图片的方法：stage：newImage(imageUri), 

创建一个子结点，其表现为一个静态图片。该方法返回一个Stage2D.Node对象，它同时具备Image的所有方法。

这也是一个代理方法，来自于display.presentations.newImage。这种方式创建的图片只是显示一张完整的图片，

不能进行裁剪。

local w, h = display:getViewSize() 这行代码获取真实设备的分辨率，单位是像素。还有另一个方法：

display.getContentSize()   获取游戏画面的逻辑分辨率，即适配后的“虚拟尺寸”。

bg:setAnchor(-0.5,-0.5)  这是设置图片的锚点，Seed引擎中默认的锚点是（0，0），坐标系统的原点在屏幕的

左上角，x轴向右为正方向，y轴向下是正方向。

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

  另外，解释一下代理方法：

• 创建结点的代理方法

说明：

凡位于display.presentations包下的用于创建表现对象的函数，如newImageRect和newSprite，均会在Stage2D和Stage2D.Node两个类型上产生代理方法。 代理方法增加了隐含参数self:，应当使用冒号调用。后续的参数会被透传给原始函数。 原始函数返回后，代理方法会创建一个新的结点，并将原始函数的返回值指定为新创建结点的presentation属性。 因此，假设你要自定义一个新表现类型，将相应的创建方法加入display.presentations包，即可在所有的Stage2D和Stage2D.Node对象上产生代理方法，便于使用。

• 结点表现的代理方法

说明：

为一个Stage2D.Node指定presentation（或者通过代理方法创建Node）之后，如果presentation是一个对象（内置类型或表），那么该Node也会获得该presentation的所有方法。 譬如使用Stage2D的self:newSprite创建一个表现为Sprite的结点之后，该结点也可以直接使用Sprite的方法如changeAction、playAction等。其效果和调用表现的相应方法一致。 这种代理方法只会影响相应的结点，不会影响其它的普通结点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3. display.Stage2D用于二维场景绘制的渲染阶段，相当于一个“图层”。

其中可以容纳大量Stage2D.Node对象，可以单独移动、旋转、缩放每个结点。 

Stage2D本身还可以指定camera2D属性，用于控制镜头位置。

属性：self.camera , self.firstChild 和 self.lastChild，其中camera表示该场景的摄像机。

该场景在绘制时，会使用摄像机指定的视口区域进行绘制，可以设置camera的x、y、width

和height属性来实现。

方法：

self：clear() ----> 清除场景下的所有结点

self：render() ----> 绘制场景。当做渲染阶段添加到display之后，此方法每帧会被自动调用。

self：newNode() ----> 创建一个新的结点。

self：screenToWorld(x,y) ----> 把一个坐标从屏幕坐标转换到Stage2D的世界坐标系

self：insertBefore(node,target) ----> 在当前Stage2D对象的节点target之前插入另一个已存在的节点node

self：insertAfter(node,target) ----> 在当前Stage2D对象的target节点之后插入另一个已存在的节点node

self：insertFront(node) ----> 在当前stage2D对象中插入一个已存在的节点node，新插入的对象显示在最前方。

self：insertBack(node) ----> 在当前stage2D对象中插入一个已存在的节点node，新插入的对象显示在最后方。

self：newImage(uri) ----> 创建一个子结点，其表现为一个静态图片。同时具备Image的所有方法

self：newImageRect(uri，width，height) ----> 创建一个结点，其表现为一个静态图片。同时具备ImageRect的所有方法

self：newSprite(rtAgent，sheet，set[,action]) ---->指定一个图集和一个动作序列表，创建一个结点，

活动的精灵动画对象。rtAgent表示一个runtime.Agent对象，此精灵动画的运行速度将依赖此Agent；

sheet是一个display.Sheet对象，精灵动画的动作图集；

set是一个display.SpriteSet对象，精灵动画的动作序列表；action是可选参数，表示初始动作，默认为一个不存在的动作（即不显示）。

self：setSortMode(sortMode) ---->设置该stage下面所有直接子节点的绘制顺序，设置子节点的z属性后可看到效果

sortMode有三个可选项：

nosort 不排序.

ascending 按照Z轴的大小升序排列.

descending 按照Z轴的大小降序排列.

4. 节点：display.Stage2D.Node，在Stage2D中容纳的结点对象，

可以进行旋转、移动、缩放等。单独使用时，相当于一个独立的对象。其下还可以容纳多个结点，

此时结点相当于一个group。

其属性有：

self.firstChild  -->获取第一个加入的子节点

self.lastChild   -->获取最后一个加入的子节点

self.pre            ----->获取结点所在的链表中的上一个结点

self.next          ---->获取结点所在的链表中的下一个结点

self.parent      ----->获取父结点。直接在Stage2D中创建的结点没有父结点

self.presentation   ----> 决定此结点的表现。

self.x，self.y，self.z -----> 这三个属性得到坐标系中的位置，z可以控制用于结点自动排序的深度值。

self.rotation   ------> 旋转角度

self.scalex   -----> 水平放大倍数

self.scaley   ----->  纵向放大倍数 

  其常用的方法有：self：hide() -->隐藏节点，self：show() -->显示节点，self：isVisible() -->节点是否隐藏

 self：remove() ----> 删除此结点及所有子结点；

 self：setAlpha() ----> 设置此节点的透明度；self：getAlpha() ----> 获取此节点的透明度；

 self：toFront() ------> 让当前节点显示在所有兄弟节点的最前方

 self：toBack() ------> 让当前节点显示在所有兄弟节点的最后方

4.外观表现：display.presentations，包含了所有的表现类型及其初始化函数。

 此包内的所有函数均会在display.Stage2D对象及display.Stage2D.Node上产生代理方法，

参见Stage2D与Stage2D.Node的代理方法。 每个表现类型都可以指定为display.Stage2D.Node

的presentation属性，负责展示其结点的外观。

presentations一共有3种：

display.presentations.Image -----> 有两个属性：width和height ，

有三个方法：self：setAnchor(x,y) ,self：getAnchor() 和 self：render() ---->渲染此图片

display.presentations.ImageRect -----> 比Image多了三个方法：self:setSrcRect({left, top, width, height})、

self:getSrcRect({left, top, width, height}) 

和self:setDestRect({left, top, width, height}) ------>left, top, width, height分别表示表示渲染到

本地坐标的左坐标、上坐标、宽度、高度.

display.presentations.Sprite ------> 用于展现一个活动的精灵动画对象。

设置为Stage2D.Node的presentation属性后，该Node也会具备Sprite的所有方法。

参见结点表现的代理方法.

有九个方法：

self：render() ---->渲染此精灵动画。

self：pause() ---->暂停此精灵动画的播放。

self：resume() ---->继续已暂停的精灵动画的播放。

self：resume(action) ---->从头开始循环播放一个指定的动作。action是动作名（字符串表示）

self：changeAction(action) ---->切换到一个指定的动作。动作不会从头开始播放，而是试图从当前动作的对应帧开始播放。

self：playAction(action[, onOver, onCancel]) ---->播放一次指定的动作。后面两个参数是可选的，表示事件回调函数。

self：setFlip(flipx,flipy) ---->设置sprite对象的翻转状态, 参数用true和false表示，分别对应x轴和y轴上的翻转。

self：setAnchor(x,y) 和 self：getAnchor() -----> 锚点设置

创建方法：

display.presentations：newImage()

display.presentations：newImageRect()

display.presentations：newSprite()

 这三个方法就是在节点中生成的代理方法，也就是说那些代理方法其实是调用了这三个方法。

5.display.ScissorStateEffect，用来对图片或者节点进行方形裁剪效果的。

可根据属性 self.enabled 设置裁剪效果的可用状态，true为可用，false为不可用。

 方法：

display.ScissorStateEffect.new() ------>新建裁剪效果对象

   self:setIrect(centerX, centerY, width, height) -------->设置裁剪区域

    self:addEffect(effect) -----> 通过addEffect函数给要裁剪的节点添加裁剪效果才能实现裁剪效果

注意：子节点会继承父节点的裁剪效果（即该节点内的任何子节点都按照父节点的裁剪区域进行裁剪），

有裁剪效果的节点只会显示裁剪框内的部分。

例子：

local eff = display.ScissorStateEffect.new(); --新建剪裁效果
eff.enabled = true; --设置该裁剪效果为true，即是可用状态
eff:setIrect(300,600,60,62); --设置剪裁区域，参数为[左上角坐标(300,600),要裁剪区域的宽跟高]

local stage = display.newStage2d();
local parentNode = stage:newImage("bg.png");
parentNode:setAnchor(-0.5, -0.5);
parentNode:addEffect(eff); --为node节点添加剪裁效果
local childNode = parentNode:newImage("splashBG.png"); --子节点childNode会显示父节点(parentNode)被剪裁之后的区域范围
childNode:setAnchor(-0.5,-0.5);

6. display_BgColorStage，专门用来渲染背景色的渲染阶段。

上面已经接触到这个对象了，只有5个属性：self.red, self.green, self.blue, self.alpha 和 self.colorbuffer。

这个比较容易，不多做介绍了。

7.render2d，此包中包含了与渲染基本几何体有关的函数，如绘制点、线、矩形、圆等：

把这个绘图的包也放在这里介绍了，反正都是与显示相关的。

主要有7个基本绘制方法：

render2d.drawPoint(x,y) --------> 根据x，y坐标绘制一个点.

render2d.drawLine(fromx,fromy，tox，toy) --------> 根据两点坐标绘制一条线段

render2d.drawChain(points) -------->绘制一条由多个点组成的折线。

render2d.drawRect(left, top，with，height) -------->绘制一个矩形框。

render2d.fillRect(left, top，with，height) -------->绘制一个填充颜色的矩形.

render2d.drawCircle(centerx,centery, radius) -------->绘制一个圆.

render2d.fillCircle(centerx,centery, radius) --------> 绘制一个填充颜色的圆.

绘制基本几何体的函数应当作为display.presentations来使用，否则只会在调用处绘制一次，具体用法如下：

1 2 3 4 5

local node = stage:newNode() --创建一个node node:setMaskColor(1,0,0) --设置node的颜色 node.presentation = function() --将node的presentation设置为自定义的绘制函数 render2d.fillRect(100, 120, 262, 220) end

关于显示的相关内容已全部介绍完了，后面将要综合应用显示的对象来做一些小游戏。

参考资源：

1. API参考网址：http://www.ieatmobile.cn/docs/api/

2. seed引擎百度云盘地址：http://pan.baidu.com/s/1gdJ02NT

3. seed插件百度云盘地址：http://pan.baidu.com/s/1iwRUm