iOS游戏框架Sprite Kit技术详解
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.4 设置精灵

本节将讲解对精灵的一些设置，如精灵位置、锚点、着色、缩放、旋转等内容。

3.4.1 设置精灵的位置

在图3.11和图3.12中可以看到代表精灵的图像并没有完全地显示在场景中，而是只有一部分。此时需要开发者对精灵的位置进行设置。设置精灵的位置需要使用到position属性。其语法形式如下：

var position: CGPoint

其中，position属性的类型为CGPoint。它是一个简单的结构，由x和y组成，其形式如下：

struct CGPoint {
        var x: CGFloat
        var y: CGFloat
}

其中，x表示在x轴中的位置，y表示在y轴中的位置。

【示例3-3】以示例3-2为基础，改变精灵的位置，从而让图像全部显示在场景中，代码如下：

import SpriteKit
class GameScene: SKScene {
    override func didMoveToView(view: SKView) {
        var splash=SKSpriteNode(imageNamed:"1.jpg")
        //改变精灵的位置
        splash.position = CGPointMake(CGRectGetMidX(self.frame), 
        CGRectGetMidY(self.frame))
        self.addChild(splash)
    }
}

此时运行程序，会看到如图3.13所示的效果。

图3.13 运行效果

3.4.2 设置锚点

默认情况下，精灵的框架及其纹理的中心定位在精灵的位置上。然而，开发者可能想要将纹理的不同部分出现在精灵显示的位置上。SKSpriteNode节点的anchorPoint属性决定框架的哪一点定位在精灵的位置上。这个点就被称为锚点。其语法形式如下：

var anchorPoint: CGPoint

其中，anchorPoint的属性类型也为CGPoint。锚点是一个很抽象的概念，可以想象用图钉在墙上钉上一张卡片，卡片就相当于节点，墙壁就相当于设备的屏幕或者场景，而图钉就是锚点。锚点在单位坐标系（unit coordinate system）中指定如图3.14所示。

图3.14 单位坐标系

单位坐标系的原点位于框架的左下角，而（1,1）位于框架的右上角。精灵的锚点默认为（0.5,0.5），对应于框架的中心。

【示例3-4】以示例3-3为基础，使用锚点改变精灵的位置，代码如下：

import SpriteKit
class GameScene: SKScene {
    override func didMoveToView(view: SKView) {
        var splash=SKSpriteNode(imageNamed:"1.jpg")
        splash.position = CGPointMake(CGRectGetMidX(self.frame), 
        CGRectGetMidY(self.frame))
        //设置锚点
        splash.anchorPoint=CGPointMake(1.0, 0.5)
        self.addChild(splash)
    }
}

此时运行程序，会看到如图3.15所示的效果。

图3.15 运行效果

3.4.3 对精灵着色

为精灵着色在很多的化妆类游戏中经常使用到，如图3.16所示。

图3.16 Nail Salon

图3.16是Nail Salon游戏的截图，当玩家为手选择肤色后，就会将手的颜色自动变为选择的颜色。为精灵着色需要开发者使用color和colorBlendFactor属性实现。其中color属性的语法形式如下：

var color: UIColor

colorBlendFactor属性的语法形式如下：

var colorBlendFactor: CGFloat

其中，colorBlendFacto属性是一个CGFloat，它是一个浮点值，这个值的范围在0.0到1.0之间。默认情况下的颜色混合因子为0.0，这表明纹理未经更改地使用。

【示例3-5】以下将为显示在场景中的精灵进行着色，具体操作步骤如下：

（1）创建一个Game类型的项目，命名为3-2。

（2）添加图像1.jpg到创建项目的Supporting Files文件夹中。

（3）将设备的方向设置为水平方向。

（4）打开GameScene.swift文件，将此文件中多余的代码删除，然后编写新的代码，此代码实现的功能是显示一个精灵到场景中，并对此精灵进行着色。代码如下：

import SpriteKit
class GameScene: SKScene {
    override func didMoveToView(view: SKView) {
        var splash=SKSpriteNode(imageNamed:"1.jpg")
        splash.position = CGPointMake(CGRectGetMidX(self.frame), 
        CGRectGetMidY(self.frame))
        //为精灵着色
        splash.color=SKColor.greenColor()
        splash.colorBlendFactor=0.5
        self.addChild(splash)
    }
}

此时运行程序，会看到如图3.17所示的效果。

图3.17 运行效果

3.4.4 调整精灵的尺寸

精灵的size属性用于指定精灵的尺寸，此尺寸是无缩放的。当一个纹理精灵初始化时，这个属性的值被初始化为与精灵的纹理的尺寸相等的尺寸。当然也可以单独地对精灵的尺寸进行修改，其语法形式如下：

var size: CGSize

其中，size属性的类型为CGSize。CGSize和CGPoint一样也是一个简单的结构，由width和height组成，其形式如下：

struct CGSize {
        var width: CGFloat
        var height: CGFloat
}

其中，width用来设置宽度，height用来设置高度。

【示例3-6】以下将为显示的场景中的精灵重新设置尺寸，具体操作步骤如下：

（1）创建一个Game类型的项目，命名为3-3。

（2）添加图像1.jpg到创建项目的Supporting Files文件夹中。

（3）将设备的方向设置为水平方向。

（4）打开GameScene.swift文件，将此文件中多余的代码删除，然后编写新的代码，此代码实现的功能是显示一个精灵到场景中，并对此精灵的尺寸进行设置。代码如下：

import SpriteKit
class GameScene: SKScene {
    override func didMoveToView(view: SKView) {
        var splash=SKSpriteNode(imageNamed:"1.jpg")
        splash.position = CGPointMake(CGRectGetMidX(self.frame), 
        CGRectGetMidY(self.frame))
        splash.size=CGSizeMake(1440, 900)                   //设置尺寸
        self.addChild(splash)
    }
}

此时运行程序，会看到如图3.18所示的效果。

图3.18 运行效果

注意：size属性不仅可以对精灵的尺寸进行设置，还可以获取精灵的尺寸。

【示例3-7】以下将以示例3-6为基础，使用size属性获取精灵的尺寸，代码如下：

import SpriteKit
class GameScene: SKScene {
    override func didMoveToView(view: SKView) {
        var splash=SKSpriteNode(imageNamed:"1.jpg")
        splash.position = CGPointMake(CGRectGetMidX(self.frame), 
        CGRectGetMidY(self.frame))
        splash.size=CGSizeMake(1440, 900)
        //获取精灵的尺寸并输出
        let mySize = splash.size
        println("Size: \(mySize)")
        self.addChild(splash)
    }
}

此时运行程序，会在应用程序输出窗口看到如图3.19所示的效果。

图3.19 运行效果

3.4.5 缩放精灵

缩放精灵是游戏中最常见到的效果，如在超级玛丽中，当玛丽吃了蘑菇后就会变大，如图3.20所示。

图3.20 超级玛丽

其实精灵的缩放可以使用setScale()方法实现，其语法形式如下：

func setScale(_ scale: CGFloat)

其中，_ scale用来表示精灵缩放的倍数。

【示例3-8】以下将场景中显示的精灵使用setScale()方法放大4倍。具体的操作步骤如下：

（1）创建一个Game类型的项目，命名为3-4。

（2）添加图像1.jpg到创建项目的Supporting Files文件夹中。

（3）将设备的方向设置为水平方向。

（4）打开GameScene.swift文件，将此文件中多余的代码删除，然后编写新的代码，此代码实现的功能是显示一个精灵到场景中，并对此精灵放大4倍。代码如下：

import SpriteKit
class GameScene: SKScene {
    override func didMoveToView(view: SKView) {
        var splash=SKSpriteNode(imageNamed:"1.jpg")
        splash.position = CGPointMake(CGRectGetMidX(self.frame), 
        CGRectGetMidY(self.frame))
        splash.setScale(4.0)                                                    //放大精灵
        self.addChild(splash)
    }
}

此时运行程序，会看到如图3.21所示的效果。

图3.21 运行效果

注意：setScale()方法进行缩放时，将宽度和高度都以相同的倍数进行缩放。这样可以使图片不会产生变形。如果开发者只想要实现将宽度或者高度进行缩放该怎么办呢？如果只想缩放宽度，需要使用xScale属性，其语法形式如下：

var xScale: CGFloat

如果只想缩放高度，需要使用yScale属性，其语法形式如下：

var yScale: CGFloat

【示例3-9】以下将场景中显示的精灵的宽度通过xScale属性放大2倍。具体的操作步骤如下：

（1）创建一个Game类型的项目，命名为3-5。

（2）添加图像1.jpg到创建项目的Supporting Files文件夹中。

（3）将设备的方向设置为水平方向。

（4）打开GameScene.swift文件，将此文件中多余的代码删除，然后编写新的代码，此代码实现的功能是显示一个精灵到场景中，并对此精灵的宽度放大2倍。代码如下：

import SpriteKit
class GameScene: SKScene {
    override func didMoveToView(view: SKView) {
        var splash=SKSpriteNode(imageNamed:"1.jpg")
        splash.position = CGPointMake(CGRectGetMidX(self.frame), 
        CGRectGetMidY(self.frame))
        splash.xScale=2                                                        //缩放精灵
        self.addChild(splash)
    }
}

此时运行程序，会看到如图3.22所示的效果。

图3.22 运行效果

3.4.6 旋转精灵

游戏中经常会进行精灵的旋转，如在过山车游戏中，当过山车遇到上坡时，过山车就会进行相应的角度的旋转，如图3.23所示。

图3.23 过山车

如果想要让精灵进行旋转，需要使用到zRotation属性，其语法形式如下：

var zRotation: CGFloat

其中，zRotation属性的类型为一个CGFloat，它是一个浮点型的数值。默认情况下该值为0，表示没有旋转。正值表示逆时针旋转，负值表示顺时针旋转。

【示例3-10】以下将场景中显示的精灵进行45度旋转，具体的操作步骤如下：

（1）创建一个Game类型的项目，命名为3-6。

（2）添加图像1.jpg到创建项目的Supporting Files文件夹中。

（3）将设备的方向设置为水平方向。

（4）打开GameScene.swift文件，将此文件中多余的代码删除，然后编写新的代码。此代码实现的功能是显示一个精灵到场景中，并对此精灵逆时针旋转45度。代码如下：

import SpriteKit
class GameScene: SKScene {
    override func didMoveToView(view: SKView) {
        var splash=SKSpriteNode(imageNamed:"1.jpg")
        splash.position = CGPointMake(CGRectGetMidX(self.frame), 
        CGRectGetMidY(self.frame))
        splash.zRotation=CGFloat(M_PI) / 4          //旋转
        self.addChild(splash)
    }
}

此时运行程序，会看到如图3.24所示的效果。

图3.24 运行效果

3.4.7 设置精灵的透明度

透明度在游戏中是经常出现的，在忍者的游戏中，都会使用透明度来实现一些隐身效果。在化妆的游戏中可以使用透明度来实现一些类似指甲的效果，如图3.25所示。

图3.25 Nail Salon

精灵的透明度可以使用alpha属性进行设置，其语法形式如下：

var alpha: CGFloat

其中，alpha属性的类型为一个CGFloat，它是一个浮点型的数值，默认情况下该值为1，表示不透明。这个值的范围在0.0～1.0之间。

【示例3-11】以下将场景中显示的精灵设置为半透明，即透明度为0.5。具体的操作步骤如下：

（1）创建一个Game类型的项目，命名为3-7。

（2）添加图像1.jpg到创建项目的Supporting Files文件夹中。

（3）将设备的方向设置为水平方向。

（4）打开GameScene.swift文件，将此文件中多余的代码删除，然后编写新的代码，此代码实现的功能是显示一个精灵到场景中，并对此精灵的透明度进行设置。代码如下：

import SpriteKit
class GameScene: SKScene {
    override func didMoveToView(view: SKView) {
        var splash=SKSpriteNode(imageNamed:"1.jpg")
        splash.position = CGPointMake(CGRectGetMidX(self.frame), 
        CGRectGetMidY(self.frame))
        splash.alpha=0.5                                            //设置透明度
        self.addChild(splash)
    }
}

此时运行程序，会看到如图3.26所示的效果。

图3.26 运行效果

3.4.8 隐藏精灵

精灵的隐藏一般会使用在连连看等一系列的配对游戏中，如图3.27所示。

图3.27 水果连连看

图3.27是关于水果连连看的截图，当玩家找到两个相同的水果后，就将这两个水果进行隐藏。隐藏设置一般需要使用hidden属性，其语法形式如下：

var hidden: Bool

其中，hidden属性的类型为Bool类型。当Bool值为true时，表明隐藏精灵；当Bool值为false时，表明不隐藏精灵。

【示例3-12】以下将场景中出现的精灵使用hidden属性进行隐藏。具体的操作步骤如下：

（1）创建一个Game类型的项目，命名为3-8。

（2）添加图像1.jpg到创建项目的Supporting Files文件夹中。

（3）将设备的方向设置为水平方向。

（4）打开GameScene.swift文件，将此文件中多余的代码删除，然后编写新的代码，此代码实现的功能是显示一个精灵到场景中，并对此精灵进行隐藏。代码如下：

import SpriteKit
class GameScene: SKScene {
    override func didMoveToView(view: SKView) {
        var splash=SKSpriteNode(imageNamed:"1.jpg")
        splash.position = CGPointMake(CGRectGetMidX(self.frame), 
        CGRectGetMidY(self.frame))
        splash.hidden=true                                          //隐藏精灵
        self.addChild(splash)
    }
}

此时运行程序，会看到如图3.28所示的效果。

图3.28 运行效果

上一章目录下一章