SpriteKit之使用精灵SKSpriteNode

精灵是创建场景内容的基石,用SKSpriteNode表示。美工创建好图像,游戏内加载图像作为纹理,然后使用纹理创建精灵并添加到场景中。

本文使用的是Xcode8.0,语言是Swift3.0。

1 创建精灵

最简单的利用图片创建精灵方式:

let ship = SKSpriteNode(imageNamed: "Spaceship")
ship.position = view!.center
addChild(ship)

如下:

屏幕快照 2017-02-05 上午11.26.27.png

这种方式创建的精灵,有很多默认的行为:

  • 精灵的尺寸和图片的size相同
  • 精灵以图片的中心位置来渲染
  • 精灵在帧缓冲区中是半透明的
  • 一个SKTexture对象被创建并附加到了精灵上。

2 定制精灵

精灵从创建到呈现到界面,会经过四个阶段:定位、调整尺寸、着色、混合,这四个阶段我们都是可以通过修改精灵的属性来进行控制的。

2.1 使用锚点移动精灵的frame

精灵的anchorPoint属性决定frame的哪一点定位在精灵的位置上,锚点在单位坐标系中指定,单位坐标系如下:

屏幕快照 2017-02-05 上午11.18.50.png

设置锚点:

//使用锚点,移动ship,锚点范围0--1,默认为(0.5, 0.5)
ship.anchorPoint = CGPoint(x: 0.5, y: 1)
屏幕快照 2017-02-05 上午11.27.25.png

指定锚点后,如果对精灵进行旋转,则会围绕着锚点旋转,如下:

//旋转90度
ship.zRotation = CGFloat(M_PI_2)
屏幕快照 2017-02-05 上午11.31.09.png

2.2 调整尺寸

精灵的尺寸有它的三个属性决定的:

  • size属性是精灵的基准尺寸,该值和纹理的尺寸相等。
  • xScale与yScale属性,对基准尺寸进行缩放。
        //使用Scale属性对精灵进行缩放
        ship.xScale = 0.3
        ship.yScale = 0.3

如下:

屏幕快照 2017-02-05 上午11.39.22.png

2.3 着色

纹理应用到精灵之前,可以使用color和colorBlendFactor进行着色,color决定颜色,colorBlendFactor属性是混合因子,默认为0。如下,我们给飞船添加一个红色色调:

        //使用color和colorBlendFactor属性对精灵进行着色,默认混合因子colorBlendFactor为0
        ship.color = SKColor.red
        ship.colorBlendFactor = 0.5

如图:

屏幕快照 2017-02-05 上午11.43.08.png

添加一个颜色变化的动画:

        //颜色动画
        let pulseRed = SKAction.sequence([SKAction.colorize(with: SKColor.red, colorBlendFactor: 0.5, duration: 0.2),
                                          SKAction.wait(forDuration: 0.1),
                                          SKAction.colorize(withColorBlendFactor: 0, duration: 0.1)])
        ship.run(SKAction.repeatForever(pulseRed))
2017-02-05 12_00_53.gif

2.4 混合精灵到帧缓冲区

渲染的最终阶段是把精灵的纹理混合到目标帧缓冲区,默认是使用纹理的alpha值混合纹理与目标像素,但是,当想添加其它特效到场景时,可以使用其它混合模式。可以使用BlendMode属性来控制精灵的混合行为:

        //使用BlendMode属性控制精灵混合行为
        ship.blendMode = .add

3 使用纹理对象

虽然我们可以用上面的方法一个一个的创建精灵,但是,假如有很多精灵共用一个图像时,使用使用图像创建出纹理,然后通过纹理创建精灵是更好的方式,使用纹理创建的好处是不用每次都去bundle加载图像,只需要加载一次到纹理中即可。

我们给场景添加一个功能,当点击某一点时,在该点生成一架飞船,再次点击时,上一次生成的飞船往下掉,知道飞出屏幕,代码如下:

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        let touch = touches.first
        addTextureShip(touch!)
    }
    
    func addTextureShip(_ touch: UITouch) {
        //使用小部分纹理,我们可以在原纹理的基础上,只使用其中的某一部分
        let texture = SKTexture(rect: CGRect(x: 0, y: 0.5, width: 1.0, height: 0.5), in: shipTexture)
        
        let ship = SKSpriteNode(texture: texture, size: CGSize(width: 40, height: 40))
        ship.position = touch.location(in: self)
        ship.name = "Ship"
        ship.zRotation = CGFloat(M_PI)
        
        enumerateChildNodes(withName: "Ship") { (node, _) in
            let current = node as! SKSpriteNode
            if current.physicsBody == nil {
                current.physicsBody = SKPhysicsBody(rectangleOf: current.size)
            }
        }
        
        addChild(ship)
    }
    
    override func didSimulatePhysics() {
        enumerateChildNodes(withName: "Ship") { (node, _) in
            if node.position.y < 0 {
                node.removeFromParent()
            }
        }
    }

最终效果:

2017-02-05 12_01_33.gif

结语

本文学习了精灵的创建,修改等操作,精灵是游戏的基石。

本文代码(game02):https://github.com/flywo/SwiftGame

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,423评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,147评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,019评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,443评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,535评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,798评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,941评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,704评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,152评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,494评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,629评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,295评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,901评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,978评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,333评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,499评论 2 348

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,761评论 25 707
  • 纹理(Textures) 我们已经了解到,我们可以为每个顶点使用颜色来增加图形的细节,从而创建出有趣的图像。但是通...
    IceMJ阅读 5,626评论 2 13
  • 本文来自于CSDN博客,作者:晏博,已获授权,版权归原作者所有,未经作者同意,请勿转载。 背景 陆陆续续一年多,总...
    passiontim阅读 849评论 0 5
  • 文|舍舍鱼 不知道是否每个男孩子,都有一个武侠梦? 作为一个时而淑女,时而汉子的双鱼座女生,我是有的。 年少的时候...
    舍舍鱼阅读 2,970评论 16 13
  • 独自 徘徊在楼梯口 彷徨在这 熟悉 却又陌生的校园 我想回到那个夏天 一起写卷子 一起跑一千 一起打篮球 一起骂老...
    弦断阅读 199评论 0 0