社区首页 >问答首页 >SpriteKit中具有深度的背景动画

SpriteKit中具有深度的背景动画
EN

Stack Overflow用户
提问于 2016-09-02 10:04:14
回答 3查看 2.1K关注 0票数 7

我正在构建我的第一个游戏使用Swift和SpriteKit,并希望添加一个背景。游戏在太空中进行,所以我想让背景中的星星以不同的速度运动。目前,我将通过使较大的恒星在屏幕上的移动速度比小的恒星更快的速度来实现3D的外观。是否有一种有效的方法来做到这一点,而不是像这样创建一个SKNode子类,并在DidMoveToView开始时将它作为子类添加?这个方法似乎相当密集,但我想在重复使用相同的图像之前,我应该尝试一下。

代码语言:javascript
代码运行次数:0
复制
class BackGroundAnimation:SKNode{

let theView:SKView
init(aView:SKView){

    theView = aView

    super.init()

    animate()
}


func animate(){


    for _ in 1...200{

        let randomSize = random(1, max: 3)
        var randomPosx = random(1,max: 1000)
        randomPosx = randomPosx/1000.0
        var randomPosy = random(1,max: 1000)
        randomPosy = randomPosy/1000.0

        let star:SKSpriteNode = SKSpriteNode(texture:starTexture)
        star.setScale(randomSize/60.0)



        star.position = CGPoint(x:(theView.scene?.size.width)! * randomPosx,y:(theView.scene?.size.width)! * randomPosy)//    (self.scene.size.width)*randomPosx, y:(self.scene.size.height) * randomPosy)

        //star.position = CGPoint(x: 200,y: 200)

        star.physicsBody = SKPhysicsBody(circleOfRadius: star.size.width/2 )
        star.physicsBody?.collisionBitMask = 0
        star.physicsBody?.categoryBitMask = 0
        star.physicsBody?.contactTestBitMask = 0

        star.physicsBody?.linearDamping = 0
        star.physicsBody?.velocity = CGVector(dx:1 * randomSize, dy:0)
        star.name = "star"

        //addChild(star)
        self.addChild(star)
        self.moveToParent(self.scene!)


    }


}




required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

}

任何帮助都会很好。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-09-02 16:23:14

正如我在评论中提到的,您可以使用粒子创建一个美丽的视差背景。

在类中的任何位置添加此函数。

代码语言:javascript
代码运行次数:0
复制
//Creates a new star field
func starfieldEmitterNode(speed speed: CGFloat, lifetime: CGFloat, scale: CGFloat, birthRate: CGFloat, color: SKColor) -> SKEmitterNode {
    let star = SKLabelNode(fontNamed: "Helvetica")
    star.fontSize = 80.0
    star.text = "✦"
    let textureView = SKView()
    let texture = textureView.textureFromNode(star)
    texture!.filteringMode = .Nearest

    let emitterNode = SKEmitterNode()
    emitterNode.particleTexture = texture
    emitterNode.particleBirthRate = birthRate
    emitterNode.particleColor = color
    emitterNode.particleLifetime = lifetime
    emitterNode.particleSpeed = speed
    emitterNode.particleScale = scale
    emitterNode.particleColorBlendFactor = 1
    emitterNode.position = CGPoint(x: CGRectGetMidX(frame), y: CGRectGetMaxY(frame))
    emitterNode.particlePositionRange = CGVector(dx: CGRectGetMaxX(frame), dy: 0)
    emitterNode.particleSpeedRange = 16.0

    //Rotates the stars
    emitterNode.particleAction = SKAction.repeatActionForever(SKAction.sequence([
        SKAction.rotateByAngle(CGFloat(-M_PI_4), duration: 1),
        SKAction.rotateByAngle(CGFloat(M_PI_4), duration: 1)]))

    //Causes the stars to twinkle
    let twinkles = 20
    let colorSequence = SKKeyframeSequence(capacity: twinkles*2)
    let twinkleTime = 1.0 / CGFloat(twinkles)
    for i in 0..<twinkles {
        colorSequence.addKeyframeValue(SKColor.whiteColor(),time: CGFloat(i) * 2 * twinkleTime / 2)
        colorSequence.addKeyframeValue(SKColor.yellowColor(), time: (CGFloat(i) * 2 + 1) * twinkleTime / 2)
    }
    emitterNode.particleColorSequence = colorSequence

    emitterNode.advanceSimulationTime(NSTimeInterval(lifetime))
    return emitterNode
}

然后再添加这个函数。这就是创造恒星层的功能。只需调用此函数,如在didMoveToView中。

代码语言:javascript
代码运行次数:0
复制
func createStarLayers() {
    //A layer of a star field
    let starfieldNode = SKNode()
    starfieldNode.name = "starfieldNode"
    starfieldNode.addChild(starfieldEmitterNode(speed: -48, lifetime: size.height / 23, scale: 0.2, birthRate: 1, color: SKColor.lightGrayColor()))
    addChild(starfieldNode)

    //A second layer of stars
    var emitterNode = starfieldEmitterNode(speed: -32, lifetime: size.height / 10, scale: 0.14, birthRate: 2, color: SKColor.grayColor())
    emitterNode.zPosition = -10
    starfieldNode.addChild(emitterNode)

    //A third layer
    emitterNode = starfieldEmitterNode(speed: -20, lifetime: size.height / 5, scale: 0.1, birthRate: 5, color: SKColor.darkGrayColor())
    starfieldNode.addChild(emitterNode)
}

这就是它的样子。

票数 9
EN

Stack Overflow用户

发布于 2017-11-03 22:20:33

Swift 4 / iOS 11更新@JozemiteApps解决方案

在类中的任何位置添加此函数。

代码语言:javascript
代码运行次数:0
复制
//Creates a new star field
func starfieldEmitterNode(speed speed: CGFloat, lifetime: CGFloat, scale: CGFloat, birthRate: CGFloat, color: SKColor) -> SKEmitterNode {
    let star = SKLabelNode(fontNamed: "Helvetica")
    star.fontSize = 80.0
    star.text = "✦"
    let textureView = SKView()
    let texture = textureView.texture(from: star)
    texture!.filteringMode = .nearest

    let emitterNode = SKEmitterNode()
    emitterNode.particleTexture = texture
    emitterNode.particleBirthRate = birthRate
    emitterNode.particleColor = color
    emitterNode.particleLifetime = lifetime
    emitterNode.particleSpeed = speed
    emitterNode.particleScale = scale
    emitterNode.particleColorBlendFactor = 1
    emitterNode.position = CGPoint(x: frame.midX, y: frame.maxY)
    emitterNode.particlePositionRange = CGVector(dx: frame.maxX, dy: 0)
    emitterNode.particleSpeedRange = 16.0

    //Rotates the stars
    emitterNode.particleAction = SKAction.repeatForever(SKAction.sequence([
        SKAction.rotate(byAngle: CGFloat(-Double.pi/4), duration: 1),
        SKAction.rotate(byAngle: CGFloat(Double.pi/4), duration: 1)]))

    //Causes the stars to twinkle
    let twinkles = 20
    let colorSequence = SKKeyframeSequence(capacity: twinkles*2)
    let twinkleTime = 1.0 / CGFloat(twinkles)
    for i in 0..<twinkles {
        colorSequence.addKeyframeValue(SKColor.white,time: CGFloat(i) * 2 * twinkleTime / 2)
        colorSequence.addKeyframeValue(SKColor.yellow, time: (CGFloat(i) * 2 + 1) * twinkleTime / 2)
    }
    emitterNode.particleColorSequence = colorSequence

    emitterNode.advanceSimulationTime(TimeInterval(lifetime))
    return emitterNode
}

然后再添加这个函数。这就是创造恒星层的功能。只需调用此函数,如在didMoveToView中。

代码语言:javascript
代码运行次数:0
复制
func createStarLayers() {
        //A layer of a star field
        let starfieldNode = SKNode()
        starfieldNode.name = "starfieldNode"
        starfieldNode.addChild(starfieldEmitterNode(speed: -48, lifetime: size.height / 23, scale: 0.2, birthRate: 1, color: SKColor.lightGray))
        addChild(starfieldNode)

        //A second layer of stars
        var emitterNode = starfieldEmitterNode(speed: -32, lifetime: size.height / 10, scale: 0.14, birthRate: 2, color: SKColor.gray)
        emitterNode.zPosition = -10
        starfieldNode.addChild(emitterNode)

        //A third layer
        emitterNode = starfieldEmitterNode(speed: -20, lifetime: size.height / 5, scale: 0.1, birthRate: 5, color: SKColor.darkGray)
        starfieldNode.addChild(emitterNode)
    }
票数 3
EN

Stack Overflow用户

发布于 2016-09-04 04:56:27

要做到这一点,没有粒子,你可以创建层,只需移动各个层。

所以创建一个背景SKNode,用你的背景精灵填充它

创建一个前台SKNode,用前景精灵填充它。

添加背景作为前景的子元素,给它至少-1的zPosition。

然后你移动前景,无论你移动前景,你移动的背景向相反的方向,通常以较小的百分比(我喜欢使用一半)。如果前景向左移动10个像素,则向右移动背景5个像素。

因为您的所有节点都在这些层中,所以当您移动该层时,所有节点都会移动。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39298383

复制
相关文章
Excel公式练习44: 从多列中返回唯一且按字母顺序排列的列表
导语:继续研究来自于excelxor.com的案例。这个案例似乎又有点复杂,但其中许多公式技术仍值得我们反复琢磨。
fanjy
2020/02/29
4.2K0
golang刷leetcode:使数组按非递减顺序排列
给你一个下标从 0 开始的整数数组 nums 。在一步操作中,移除所有满足 nums[i - 1] > nums[i] 的 nums[i] ,其中 0 < i < nums.length 。
golangLeetcode
2022/08/02
5500
词序:神经网络能按正确的顺序排列单词吗?
当学习第二语言时,最困难的挑战之一可能是熟悉单词顺序。词序在机器翻译中也很重要,因为翻译大致上是一种处理目标语言词汇的过程,它与源语言是对等的。也许你已经做过一个把打乱的单词或字母放在原来顺序的游戏。
AiTechYun
2018/03/05
1.1K0
词序:神经网络能按正确的顺序排列单词吗?
python中按字母排序_在Python中按字母顺序排序文本文件的内容
我想在文件内部按字母顺序排序。我当前执行此操作的代码不起作用,文件保持不变。这个程序本身就是一个基本的调查问卷,用来实验读写文件。在import time
用户7886150
2021/01/27
4.9K0
Notion系列-视图、过滤和排序
首次创建数据库时会使用默认视图的布局,之后就可以点击左上角+ New view按钮创建其他视图。
用户10002156
2023/09/10
6730
Notion系列-视图、过滤和排序
Octopress添加回到顶部功能
在Octopress当阅读到文章底部的时候,或多或少都想回到顶部,而默认的Octopress没有提供回到顶部的功能,于是一不做二不休,自己找个控件加上。
技术小黑屋
2018/09/04
6460
JavaScript 将对象数组按字母顺序排序
1.if条件语句 + sort() 2.localeCompare() + sort() 3.Collator() + sort()
唐志远
2023/08/01
2610
JavaScript 将对象数组按字母顺序排序
JavaScript 将对象数组按字母顺序排序
Chrome、IE、Edge、Firefox、Safari、Opera 等 都支持 sort() 方法。
唐志远
2023/07/26
6300
JavaScript 将对象数组按字母顺序排序
latex中的希腊字母表在哪里_表示角度的希腊字母
在写论文的过程中,编辑公式部分会有一些希腊字母需要用LaTeX形式,将其汇总如下,方便查阅。
全栈程序员站长
2022/11/07
8430
Vue 按条件添加类
Vue 按条件添加类 <el-card class="box-card"> <div class="question" ref="question" v-for="(question, index) in questionList" :key="question.id"> <h4>{{(index+1) +10*(currentPage-1)}}. {{question.ques}}</h4> <div v-for="option in question.opti
赤蓝紫
2023/01/02
9750
Vue 按条件添加类
为Hexo博客添加顶部加载条
 有时候会看到有的网页加载时上方出现进度条,一直想加到自己的博客上来,今天折腾了一番,终于成功了,记录下来。
零式的天空
2022/03/22
1.4K0
iOS给TabBar顶部黑线添加发光的阴影
技术实现关键点:通过layer.shadowOpacity和View.layer.shadowOffset实现
公众号iOS逆向
2021/07/29
1.4K0
为网站顶部添加彩色进度条
  进入本站阅读文章时,你会发现随着你的阅读,本站顶部的进度条随之改变,今天就分享给大家
倾城于你
2021/08/09
6660
给WordPress博客添加返回顶部和底部的教程
今天就给大家分享下返回顶部那块的制作教程,其实也不难,主要是用到html、css和一些jq代码。
小狐狸说事
2022/11/17
5330
给WordPress博客添加返回顶部和底部的教程
ABAP OOALV添加自定義按鈕及按鈕功能
DATA: gv_repid TYPE sy-repid, gv_sname TYPE sy-dynnr. TYPES: BEGIN OF gs_data. INCLUDE STRUCTURE spfli. TYPES: celtab TYPE lvc_t_styl. TYPES: END OF gs_data. DATA: gs_data1 TYPE gs_data. DATA: gt_data TYPE TABLE OF gs_data WITH HEADER LINE.
惨绿少年.
2021/02/24
1.1K0
iOS去掉TabBar的顶部黑线,并添加发光的阴影
2.1 效果 2.2 添加发光的阴影的代码实现 3.1 避免selectedViewController视图被TabBar挡住 3.2 iOS 13适配深色模式【设置UITabBarItem上tit
公众号iOS逆向
2021/07/05
1.6K0
iOS去掉TabBar的顶部黑线,并添加发光的阴影
Android RecyclerView添加搜索过滤器
搜索过滤功能,相信大家都能用到,一般都是针对列表进行过滤的。下面给大家提供一种过滤列表的方法。 老规矩,先上图 RecycleView搜索过滤器-getFilter() Android 提供了File
code_horse
2018/07/02
1.3K0
给网站顶部添加一个彩色横条
效果图片 开始  首先,我们需要图片,直接贴出来吧,需要的请直接右键另存为。 GIF滚动优化版   接着,在网站顶部适当位置添加一个Div,自定义一个id,当然你用class问题也不大。我命名的id为top-png.  添加以下CSS代码到样式表,当然,如果你的主题支持自定义样式就添加到自定义样式里。 #xiaobai { background: url(https://blog.xbbai.site/content/templates/Fys/sucai/dingbu.gi
奶糖味的代言
2018/04/16
8860
添加新磁盘
1.查看版本 [root@IBOYAA73 ~]# cat /proc/version
陈不成i
2021/05/25
9890
点击加载更多

相似问题

按角度按字母顺序排列菜单

115

按字母顺序排列的Reactjs过滤器列表

10

按字母顺序排列

21

按字母顺序排列

22

按字母顺序排列?

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文