12.玲珑进阶之理论篇

12.精灵进阶篇

前言：
在实际游戏开发中，庞大的内容被切割成多个场景(SKScene)，而单个场景由各式节点组成，例如:SKLabelNode、SKSpriteNode、SKLightNode、SKVideoNode等，它们继承于SKNode这个“老父亲”，但自身又习出一身本领，专门从事某一方面工作。然而，SKSpriteNode这个“儿子”表现尤为突出，他是场景的基石(basic building blocks)，构成了绝大部分，因此首先咱先来对它探究一二，至于其他节点，后文陆续给出。

01.正文

主角SKSpriteNode，不禁要问如何创建？回答是随性，你可以将其绘制为一个有纹理(何为纹理，点击这里)的长方形，也可以是一个上色、无纹理的长方形.想比较而言，纹理精灵较为常用，试想下，为了让内容更为生动、绚丽，我们会聘请设计师帮我们设计人物，背景等图片，游戏将其以纹理形式加载，我们就可以用它们来创建一个个有纹理的精灵，然后添加到场景中。

02.创建一个有纹理的精灵

创建有纹理精灵的最简单方式是同时生成纹理(texture)和精灵(sprite)。首先你要将设计好的图片导入到app中，然后在应用运行时加载它们。下面提供代码例子：

    let spaceship = SKSpriteNode(imageNamed:"rocket")//注 这里同时创建了rocket纹理和精灵
    spaceship.postion = CGPointMake(100,100)
    self.addChild(spaceship)

当以这种样式代码创建精灵时，尽管你只设置了纹理(如果还不理解，你可以将其理解成可复用的图片吧！)和位置属性，但是其他默认属性都将自动配置。如下：

• 精灵所创建的frame属性一定于纹理的size属性相匹配，理解如下，frame无非就是一个明确了放置位置的矩形(100,100,200,300),放置在(100,100)这个点，宽度200,高度300。而纹理无非就是一张图片，所谓匹配就是，frame这个矩形刚刚能包裹住这个图片。粗浅理解。
• 精灵渲染时，以矩形区域为单位来渲染，也就是frame。此外精灵以position(上面代码)居中,例如position设置为(400,400),而纹理的大小为(300,200)，那么frame的放置点应该这么计算，因为postion就是矩形的中心点，那么矩形左下角那个点就是(400-300/2,400-200/2)=(250,300),frame即(250,300,300,300)。
• The sprite texture is alpha blended into the framebuffer.暂时不理解
• SKTexture对象从创建到附着于精灵上呈现到场景想必大家或多或少有点理解了。深入讨论纹理对象，当精灵放置于场景中时呈现时，纹理对象就会自动加载texture data；反之精灵被移除后，Sprite Kit自而然而就会删除texture data了。这不禁让人想到内存自动管理，貌似简化了不少，但这并不意味你就可以当一个甩手掌柜，你仍然需要手动来管理这些asset。

03.定制一个纹理精灵

我们能够修改每个精灵的属性来”私人定制”，看下面四个不同阶段的方式：

• 使用锚点(Anchor)来移动精灵的框架(Frame)。
• 调整精灵的大小。有时候我们将纹理应用到精灵上时却发现纹理太大了，这时候我们需要调整精灵的大小了。
• 给纹理着色后附着到精灵上。
• 使用其他混合模式将精灵中的内容与帧缓存中的内容相联系。

通常来说，我们配置一个精灵就是执行以上四个阶段，放置位置、调整大小、着色和混合，当然这些都是基于纹理精灵来说的。

04.使用锚点来移动精灵的位置

默认来说，精灵的frame以及texture，将被居中放置到positon上，有点拗口，不过换种说法就是，放置一个点(300,300)到场景中，现在有一个矩形200*200，它的中心点和先前放置的点(300,300)重合，这样就理解了何为居中。如此一来纹理总能将中心位置处的“最美一面”呈现给大家，然而有时候，我们可能希望将纹理其他部分的图片放置于节点的position上。

精灵节点中有一个属性叫做anchorPoint，称之为锚点或者定位点。它的作用是决定将frame(看做是一个矩形区域)中的某一个点放置到精灵的position上。锚点是在单位坐标系中明确指定，请看下图。单位坐标系的原点被放置在(0,0)，与之相对的(1,1)被放置于右上角，注：在单位坐标系，范围只有0-1。默认情况下，精灵的锚点是(0.5,0.5)，即frame的中心点。

如何修改一个精灵的锚点呢？

    //切记锚点是在单位坐标系中决定，范围0-1
    rocket.anchorPoint = CGPointMake(0.5,1.0)

如下图：

05.调整精灵的大小

精灵的frame属性由其他三种属性的值决定：

• 精灵的size属性持有sprite的基本尺寸(也就是未经过放缩的)。前文提到过一个初始化精灵实例的方法，如此精灵的属性值就等于精灵纹理的尺寸！
• sprite的基本尺寸是能够调整大小的，通过设定xScale和yScale属性值即可，它们都是SKNode的家伙，而SKSpriteNode继承自它，自然也有这属性喽！

举例来说，如果一个精灵的基本属性为32x32像素，如果设定xScale值为1.0，yScale值为2.0,那么frame就变成了32x64，灰常简单。

06.给精灵着色

使用color和colorBlendFactor属性给纹理上色，之后将纹理附着到精灵上。默认的colorBlendFator是等于0.0(最高1.0),意味着纹理是未经上色的。你尝试慢慢增加这个数值，从0.0、0.1、0.3慢慢增加，你会发现你设置的color会越来越”浓郁”！

    //步骤一：设置颜色
    monsterSprite.color = SKColor.redColor()
    //步骤二：设置混合属性
    monsterSprite.colorBlendFator = 0.5

貌似不是很给力，我们来做一个渐变色的动画吧！

    var pulseRed = SKAction.sequence([
        //在0.15秒钟慢慢着色到1.0程度！
        SKAction.colorizeWithColor(SKColor.redColor(), 
                    colorBlendFactor: 1.0, duration: 0.15)
        SKAction.waitForDuraton(0.1)
        SKAction.colorizeWithColorBlendFactor(0.0,duration:0.15)
    ])
    monsterSprite.runAction(pulseRed)

07.Blending The Sprite into the Framebuffer

暂时理解是两个纹理之间的混合，至于混合程度设定由alpha value决定。设定额外的混合模式来模拟灯光代码如下：

    lightFlareSprite.blendMode = SKBlendModeAdd

这里我很抱歉，暂时理解不是很清楚，以后补上！