iOS Sprite Kit教程之滚动场景

滚动场景

在很多的游戏中,场景都不是静止的,而是滚动的,如在植物大战僵尸的游戏中,它的场景如图2.26所示。


图2.26  植物大战僵尸

在图2.26中,用黑色框框住的部分是在屏幕上显示的,即玩家是可以看到的。右边的这些内容玩家就看不到了,为了让玩家可以熟悉场景中的内容,此游戏在开始时,首先对屏幕中的场景进行滚动。本节将为开发者实现场景滚动的功能。

Sprite Kit中让场景进行滚动

以下是如何让一个场景进行滚动的具体实现方法。

1.创建项目以及添加图像

从上文的内容中可以看到场景的背景颜色具有单一性,即场景的背景颜色是红色,场景就为红色。一般所说的滚动场景其实就是滚动背景,所以在滚动场景时,场景的滚动效果是看不出来的。为了可以看到滚动效果,背景需要使用图像实现。首先我们需要添加图像background1.png和background2.png到创建的项目中。添加图像的具体步骤如下:

(1创建一个Game类型的项目,命名为2-2。

(2右击2-2项目中的Supporting Files文件夹,弹出快捷菜单,如图2.27所示。

图2.27  添加图像1

(3选择Add Files to "2-2"…命令,弹出选择文件对话框,如图2.28所示。

 

图2.28  添加图像2

(4选择需要添加的图像后,单击Add按钮,实现图像的添加。添加后的图像就会显示在Supporting Files文件夹中。

2.修改设备的方向

单击项目名称,打开目标窗口,选择General选项,打开General面板,在其中找到Device Orientation,选择其中的Landscape Left和Landscape Right单选框。让运行的模拟器方向变为横向,如图2.29所示。

 

图2.29  修改设备方向

3.删除多余的代码

打开GameScene.swift文件,删除多余代码,剩余的代码如下:

  • import SpriteKit
  • class GameScene: SKScene {
  • override func didMoveToView(view: SKView) {
  • }
  • override func update(currentTime: CFTimeInterval) {
  • }
  • }

打开GameViewController.swift文件,删除多余代码,剩余的代码如下:

  • import UIKit
  • import SpriteKit
  • class GameViewController: UIViewController {
  • override func viewDidLoad() {
  • super.viewDidLoad()
  • }
  • }

4.编写实现滚动场景的代码

(1打开GameScene.swift文件,添加一个新的框架,以及实现运算符的重载,使其可以实现两个点的加法赋值运算以及乘法运算。代码如下:

  • import CoreGraphics
  • //“+”加法运算符的重载
  • func + (left: CGPoint, right: CGPoint) -> CGPoint {
  •     return CGPoint(x: left.x + right.x, y: left.y + right.y)
  • }
  • //“+=”赋值加法运算符的重载
  • func += (inout left: CGPoint, right: CGPoint) {
  •     left = left + right
  • }
  • //“*”乘法运算符的重载
  • func * (point: CGPoint, scalar: CGFloat) -> CGPoint {
  •     return CGPoint(x: point.x * scalar, y: point.y * scalar)
  • }

(2添加一个backgroundNode()方法,此方法实现的功能是将两个图像作为场景中的背景,如图2.30所示。代码如下:

  • func backgroundNode() -> SKSpriteNode {
  • //创建并设置backgroundNode对象
  • let backgroundNode = SKSpriteNode()
  •     backgroundNode.anchorPoint = CGPointZero
  • backgroundNode.name = "background"
  • //创建并设置backgroundNode1对象
  • let background1 = SKSpriteNode(imageNamed: "background1")
  • background1.anchorPoint = CGPointZero
  • background1.position = CGPoint(x: 0, y: 0)
  • backgroundNode.addChild(background1)
  • //创建并设置backgroundNode2对象
  • let background2 = SKSpriteNode(imageNamed: "background2")
  • background2.anchorPoint = CGPointZero
  • background2.position = CGPoint(x: background1.size.width, y: 0)
  • backgroundNode.addChild(background2)
  • //设置backgroundNode对象的尺寸
  •  backgroundNode.size = CGSize(
  •         width: background1.size.width + background2.size.width,
  •         height: background1.size.height)
  • return backgroundNode
  • }

图2.30  场景的背景

注意,在此代码中的背景添加使用的是SKSpriteNode类实现的,对于此类,我们会在后面进行讲解。

(3在didMoveToView(view: SKView方法中编写代码,将设置的背景添加到场景中,代码如下:

  • override func didMoveToView(view: SKView) {
  • let background = backgroundNode()                                                //实例化对象
  • background.anchorPoint = CGPointZero                                         //设置描点
  • background.position = CGPointZero                                                //设置位置
  • background.name = "background"
  • addChild(background)
  • }

(4添加变量到GameScene.swift文件中,代码如下:

  • let backgroundMovePointsPerSec: CGFloat = 200.0                            //背景在每秒中移动的点
  • var dt: NSTimeInterval = 0                                                                          //时间间距
  • var lastUpdateTime: NSTimeInterval = 0                                       //上一次更新的时间

(5添加一个moveBackground()的方法,在此方法中编写代码,使其实现背景的移动,代码如下:

  • func moveBackground() {
  • enumerateChildNodesWithName("background") { node, _ in
  • let background = node as SKSpriteNode                                          //将node转换为SKSpriteNode
  • let backgroundVelocity =CGPoint(x: -self.backgroundMovePointsPerSec, y: 0)  //背景的速度
  • let amountToMove = backgroundVelocity * CGFloat(self.dt)                                         //偏移量
  •  background.position += amountToMove                                                                    //背景的位置
  • }
  • }

(6在update(currentTime: NSTimeInterval)方法中编写代码,实现数据的更新,进而实现场景的滚动,代码如下:

  • override func update(currentTime: NSTimeInterval) {
  • //判断lastUpdateTime是否大于0
  • if lastUpdateTime > 0 {
  • dt = currentTime - lastUpdateTime
  • } else {
  • dt = 0
  • }
  • lastUpdateTime = currentTime
  •   moveBackground()                                                          //调用
  • }

(7打开GameViewController.swift文件,编写代码,实现场景的显示,代码如下:

  • override func viewDidLoad() {
  • super.viewDidLoad()
  •  let scene = GameScene(size:CGSize(width: 2048, height: 1536))
  • let skView = self.view as SKView
  • skView.showsFPS = true
  • skView.showsNodeCount = true
  • skView.ignoresSiblingOrder = true
  • scene.scaleMode = .AspectFill
  • skView.presentScene(scene)
  • }

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

 

图2.31  运行效果

Sprite Kit中的永无休止的滚动场景

在2.5.1小节中,当单击运行按钮后,可以看到场景中的背景图像实现了滚动,进而实现了场景的滚动,但是,将这两个图像都滚动完毕后,场景还在进行滚动,此时背景图像就慢慢的退出了场景,如图2.32所示。本小节将为开发者解决在上一小节中的不足。实现一个永无休止的滚动场景功能,即背景循环滚动。具体的操作步骤如下:

 

图2.32  滚动场景

(1打开GameScene.swift文件,添加一个变量,代码如下:

let backgroundLayer = SKNode()            //实例化一个节点

(2修改didMoveToView(view: SKView)方法中的代码,修改后的代码如下“

  • override func didMoveToView(view: SKView) {
  • //变量0到1的范围
  • for i in 0...1 {
  • //设置并添加背景
  •  let background = backgroundNode()
  •         background.anchorPoint = CGPointZero
  •         background.position =CGPoint(x: CGFloat(i)*background.size.width, y: 0)
  •         background.name = "background"
  •         addChild(background)
  • }
  • }

(3修改moveBackground()方法中的代码,修改后的代码如下:

  • func moveBackground() {
  • enumerateChildNodesWithName("background") { node, _ in
  • let background = node as SKSpriteNode
  • let backgroundVelocity =CGPoint(x: -self.backgroundMovePointsPerSec, y: 0)
  • let amountToMove = backgroundVelocity * CGFloat(self.dt)
  • background.position += amountToMove
  • let backgroundScreenPos = self.backgroundLayer.convertPoint(background.position, toNode: self)
  • //判断x的值是否小于背景的-width的值
  • if backgroundScreenPos.x <= -background.size.width {
  • //设置背景的位置
  •   background.position = CGPoint(
  •                 x: background.position.x + background.size.width*2,
  •                 y: background.position.y)
  • }
  • }
  • }

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

 

图2.33  运行效果

本文选自:iOS游戏框架Sprite Kit基础教程——Swift版大学霸内部资料,转载请注明出处,尊重技术尊重IT人!

iOS Sprite Kit教程之滚动场景的更多相关文章

  1. iOS Sprite Kit教程之真机测试以及场景的添加与展示

    iOS Sprite Kit教程之真机测试以及场景的添加与展示 IOS实现真机测试 在进行真机测试之前,首先需要确保设备已经连在了Mac(或者Mac虚拟机)上,在第1.9.1小节开始,设备就一直连接在 ...

  2. iOS Sprite Kit教程之场景的切换

    iOS Sprite Kit教程之场景的切换 Sprite Kit中切换场景 每一个场景都不是单独存在的.玩家可以从一个场景中切换到另外一个场景中.本小节,我们来讲解场景切换.在每一个游戏中都会使用到 ...

  3. iOS Sprite Kit教程之场景的设置

    iOS Sprite Kit教程之场景的设置 Sprite Kit中设置场景 在图2.8所示的效果中,可以看到新增的场景是没有任何内容的,本节将讲解对场景的三个设置,即颜色的设置.显示模式的设置以及测 ...

  4. iOS Sprite Kit教程之编写程序以及Xcode的介绍

    iOS Sprite Kit教程之编写程序以及Xcode的介绍 Xcode界面介绍 一个Xcode项目由很多的文件组成,例如代码文件.资源文件等.Xcode会帮助开发者对这些文件进行管理.所以,Xco ...

  5. iOS Sprite Kit教程之编敲代码以及Xcode的介绍

    iOS Sprite Kit教程之编敲代码以及Xcode的介绍 Xcode界面介绍 一个Xcode项目由非常多的文件组成,比如代码文件.资源文件等.Xcode会帮助开发人员对这些文件进行管理.所以,X ...

  6. iOS Sprite Kit教程之申请和下载证书

    iOS Sprite Kit教程之申请和下载证书 模拟器虽然可以实现真机上的一些功能,但是它是有局限的.例如,在模拟器上没有重力感应.相机机等.如果想要进行此方面的游戏的开发,进行程序测试时,模拟器显 ...

  7. iOS Sprite Kit教程之使用帮助文档以及调试程序

    iOS Sprite Kit教程之使用帮助文档以及调试程序 IOS中使用帮助文档 在编写代码的时候,可能会遇到很多的方法.如果开发者对这些方法的功能,以及参数不是很了解,就可以使用帮助文档.那么帮助文 ...

  8. ios游戏开发 Sprite Kit教程:初学者 1

    注:本文译自Sprite Kit Tutorial for Beginners 目录 Sprite Kit的优点和缺点 Sprite Kit vs Cocos2D-iPhone vs Cocos2D- ...

  9. Sprite Kit教程:初学者

    作者:Ray Wenderlich 原文出处:点击打开链接 http://www.raywenderlich.com/42699/spritekit-tutorial-for-beginners 转自 ...

随机推荐

  1. Session详解、ASP.NET核心知识(8)

    介绍一下Session 1.作用 Cookie是存在客户端,Session是存在服务器端,目的是一样的:保存和当前客户端相关的数据(当前网站的任何一个页面都能取到Session). 在本篇博文的姊妹篇 ...

  2. 关于数据区间变换及numpy数组转图片数据的python实现

    python实现区间转换.numpy图片数据转换 需求: 客户的需求是永无止境的,这不?前几天,用户提出了一个需求,需要将一组数据从一个区间缩放到另一区间? 思路: 先将数据归一化,再乘以对应区间的差 ...

  3. oracle02--多表关联查询

    1. 多表(关联)查询 多表查询也称之为关联查询.多表关联查询等,主要是指通过多个表的关联来获取数据的一种方式. 1.1. 多表映射关系 一对多:A表的一行数据,对应B表中的多条.如:一个部门可以对应 ...

  4. Strusts2笔记5--数据验证

    数据验证: 输入验证分为客户端验证与服务器端验证.客户端验证主要通过JavaScript脚本进行,而服务器端验证主要是通过Java代码进行验证. 分为以下四种情况: (1)手工编写代码,对Action ...

  5. mipi 调试经验【转】

    转自:http://blog.csdn.net/g_salamander/article/details/9163455 版权声明:本文为博主原创文章,未经博主允许不得转载. 以下是最近几个月在调试 ...

  6. STM8CubeMx来了

    几年前出来的STM32CubeMx是众多stm32开发者的福音,大大缩短了开发者的开发周期.就在前几天,st官网宣布针对stm8的图形配置工具stm8cube横空出世. 如果你还不知道STM32Cub ...

  7. Django 基于类的视图(CBV)执行流程 CBV 源码分析

    一.CBV(基于类的视图) 视图是可以调用的,它接受请求并返回响应,这不仅仅是一个函数,Django提供了一些可以用作视图的类的例子,这些允许您通过继承或mixin来构建视图并重用代码. 基本示例 D ...

  8. Ubuntu下apache2启动、停止、重启、配置

    Linux系统为Ubuntu 一.Start Apache 2 Server /启动apache服务# /etc/init.d/apache2 startor$ sudo /etc/init.d/ap ...

  9. CxGrid 表格列内容居中

    首先每一列 Cxgrid 都不知道要当成什么来出来,所以每一列都有个properties 让你来设置,告诉cxgrid 这列的内容是什么,然后根据你给出的内容 再来决定用什么居中方式: 就是说 官方再 ...

  10. Executor

    一.为什么需要Executor?为了更好的控制多线程,JDK提供了一套线程框架Executor,帮助开发人员有效的进行线程控制.他们都在java.util.concurrent包中,是JDK并发包的核 ...