首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >新年开工啦,放个小烟花庆祝一下

新年开工啦,放个小烟花庆祝一下

作者头像
HelloWorld杰少
发布于 2022-08-04 06:40:32
发布于 2022-08-04 06:40:32
8720
举报
文章被收录于专栏:HelloWorld杰少HelloWorld杰少

1前言

2022年大年初八,正式开工大吉啦!我的技术输出路线也准备在今天正式开始营业。首先咱们今天就用 Apple 的 SpriteKit 2D 引擎给大家画一个小烟花吧!

2SpriteKit 简单入门

SpriteKit 是苹果官方推出的 2D 游戏开发引擎。它利用 Metal 来实现高性能渲染,同时提供简单的编程界面,使创建游戏变得容易。

工程创建

Xcode 中新建 Game 工程,游戏类型选择 SpriteKit。

image

image

配置粒子文件

将事先准备好的粒子素材加入到工程之中。

image

image

image

image

生成粒子对象

初始化 SKSpriteNode 对象,并为它加上粒子特效,代码如下:

代码语言:javascript
AI代码解释
复制
func generateNewSpriteNode(color: UIColor) -> SKSpriteNode{
        let node = SKSpriteNode(color: color, size: CGSize(width: 30, height: 30))
        node.position = CGPoint(x: 0, y: -500)
        node.physicsBody = SKPhysicsBody(circleOfRadius: 30)
        node.physicsBody?.isDynamic = true
        node.physicsBody?.restitution = 0
        
        let fire = SKEmitterNode(fileNamed: "Fire")
        fire?.targetNode = self
        fire?.particleColorBlendFactor = 1.0
        fire?.particleColorSequence = nil
        fire?.particleColor = color
        node.addChild(fire!)
        
        self.addChild(node)
        
        return node
    }

接下来就是要如何将节点发射出去,我们可以使用 applyImpulse 函数,为节点添加某一方向的脉冲力。

为了让节点能够像烟花一样散开,可以采用随机角度的发射方式,给节点施加脉冲,代码如下:

代码语言:javascript
AI代码解释
复制
func fire(){
        // create particle
        let random = Int(arc4random_uniform(UInt32(self.colors.count)))
        let node: SKSpriteNode = generateNewSpriteNode(color: colors[random])
        let randomAngle = Int.random(in: -100...100)
        node.physicsBody?.applyImpulse(CGVector(dx: randomAngle, dy: 300))
    }

计时器

开启一个定时器,让节点能够每隔一段时间就自动发射节点,让烟花看起来更饱满更绚丽,代码如下:

代码语言:javascript
AI代码解释
复制
 // 定时器
        Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { time in
            self.fire()
        }

好了,一个小烟花就做好了,来看下效果吧!

image

3最后

本篇文章到此就结束了,虽然篇幅比较短,但是里面却包含了游戏客户端引擎的一些常用知识点,粒子特效,物体碰撞,刚体,向量等。这些内容和我们日常接触的 iOS 开发还是有些区别的,感兴趣的同学可以自己创建一个工程体验一下。最后,新的一年祝大家开工大吉,一帆风顺,升职加薪,Bug 全部退散。

项目地址:https://github.com/ShenJieSuzhou/Fireworks

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-02-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 HelloWorld杰少 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
前端之HTML内容
一、HTML介绍 1、Web服务本质   当我们在浏览器中输入一个url后打开一个页面这个过程实质是一个网络编程中的sockt服务端接受指令并发送指令的一个过程。本质顺序是: 浏览器发请求——>HTTP协议——>服务端接受请求——>服务端返回响应——>服务端把HTML文件内容发给浏览器——>浏览器渲染页面 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn
新人小试
2018/04/12
3.2K0
【Python3】HTML基础
BS(Browser-Server)模式:顾名思义为浏览器-服务器的意思,对比的话类似我们PC上面浏览器使用的产品即为BS模式产品,例如google doc、各类网站等。
py3study
2020/01/06
1K0
HTML基础
HTML基础 ---- HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、javascript三者的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的
用户1667431
2018/04/18
4.3K0
HTML基础
html基础
HTML 不是一种编程语言,而是一种标记语言 (markup language) HTML 使用标记标签来描述网页
超蛋lhy
2018/08/31
2.5K0
html基础
01.前端之HTML
  浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
changxin7
2019/09/10
1.4K0
HTML
一个完整的网页是由HTML(超文本标记语言),css(层叠样式表)JavaScript(动态脚本语言)三部分组成.
Wyc
2018/09/11
2.8K0
HTML
HTML基础
一 html html结构 !DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档 <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是
用户1214487
2018/01/24
1.9K0
HTML基础
html标签详解
<!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。 <!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 <!DOCTYPE html> <head>内的标签 标签意义 <title></title> 定义网页标题 <style></style> 定义内部样式表 <script></script> 定义JS代码或引入外部JS文件 <link/> 引入外部
人生不如戏
2018/04/12
3.3K0
第59节:Java中的html和css语言
html是超文本标记语言,是网页语言的基础知识,html是通过标签来定义的语言,所有代码都是由标签所组成的,在html代码中不用区分大小写.
达达前端
2019/07/04
2.4K0
第59节:Java中的html和css语言
《HTML简单入门》
HTML指的是一种超文本标记语言,全称是HyperText Makeup Language。
叶茂林
2023/07/30
7860
《HTML简单入门》
17.HTML
HTML简介 htyper text markup language  即超文本标记语言。 超文本: 就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 标准模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>主体内容</p>
zhang_derek
2018/04/11
4.1K0
17.HTML
HTML是什么?
html就是要告诉浏览器我的某个东西是什么,没错,这就是它的主要功能。html的实质,他就是一种标签,一种人和浏览器交流的标签,我们只有告诉浏览器这是什么,他才能帮助我们显示.
PM吃瓜
2019/08/13
2.2K0
html初识
浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、猎豹浏览器、Safari和Opera等
py3study
2018/08/03
2K0
w3c标准html5手册_在w3c中规定html决定页面的
下面的图是我在网上看到的一张图,总结的非常好。转: HTML常用标签及其用法
全栈程序员站长
2022/09/30
1.5K0
w3c标准html5手册_在w3c中规定html决定页面的
HTML
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上
用户1173509
2018/01/17
1.9K0
HTML
HTML
浏览器(browser application)是用来访问和浏览万维网页面的客户端软件,是显示、运行网页的平台。
用户9615083
2022/12/25
4.5K0
HTML
初识HTML
coders
2018/01/04
1.9K0
初识HTML
HTML基础知识
div用于存放需要显示的数据,css用于指定如何显示数据样式,做到结构与样式相互分离。
达达前端
2020/03/27
3.4K0
HTML——学习笔记
HTML不是一种编程语言,它是一种超文本标记语言(Hyper Text Markup Language),标记语言是一套标记标签(Markup tag),浏览器通过HTML标记标签来构造描述我们访问的网页。
IMWeb前端团队
2019/12/03
1.2K0
HTML——学习笔记
「学习笔记」HTML基础
「网页」主要是由文字、图像和超链接等元素构成,当然除了这些元素,网页中还可以包括音频、视频以及Flash等。
小城故事
2023/03/10
5K0
「学习笔记」HTML基础
相关推荐
前端之HTML内容
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
首页
学习
活动
专区
圈层
工具
MCP广场
首页
学习
活动
专区
圈层
工具
MCP广场