前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >摄影机-跟随玩家并添加背景视差

摄影机-跟随玩家并添加背景视差

作者头像
iOSDevLog
发布2019-03-11 14:32:41
1.2K0
发布2019-03-11 14:32:41
举报
文章被收录于专栏:iOSDevLogiOSDevLog

在本节中,我们将了解任何游戏中的基本元素:相机。在大多数标志性的平台游戏中,如Mario,Metroid,Super Meat boy,相机的良好实现使整个游戏体验更加完美。

相机工作下载

要学习本教程,您将需要Xcode 9,您可以下载最终项目,以帮助您与自己的进度进行比较。

场景中的CameraNode

打开GameScene.sks文件。在右侧,在对象库中搜索相机。将Camera拖放到场景中并将其命名为cameraNode。让我们将cameraNode的位置更改为(x:0,y:0)。单击文档大纲中的场景,然后选择摄像机的cameraNode

小心!你不能将cameraNode命名为 “camera”,因为Xcode已经有了一个内置名称,你不想在这两个元素之间造成混淆。

代码中的CameraNode

现在我们已经在场景中实现了相机,让我们将它定位到播放器。结果,相机将跟随播放器。

相机声明

Nodes部分中,在声明joystickKnob之后,为cameraNode创建一个新变量。

初始化CAMERANODE

didMove方法中,将我们的新变量cameraNode分配给我们在场景中设置的cameraNode。

相机位置

在“ 游戏循环”部分中,标记新的子部分并将其命名为“ 相机”。为了使相机跟随播放器,我们将把相机的x位置改变为与播放器的x位置相同。

副作用

通过使相机跟随播放器,游戏中的其他元素可能会从屏幕上消失。在我们的例子中,它是操纵杆。让我们应用相同的逻辑,以便操纵杆跟随相机。在GameScene.sks中,记住操纵杆的位置是(x:-300,y:-100)。因此,在相机位置之后,让操纵杆跟随相机。

禁区

每个游戏都有禁区,那些是玩家无法通过的地方。我们也将这个概念应用于约束玩家,否则他将陷入虚空。

关闭限制

在“ 媒体库”中,选择第一个选项:“ 颜色精灵”,在场景中拖放,即您希望关闭限制区域的位置。将节点的高度更改为375。选择“Bounding Rectangle ”的 “Body Type” ,取消选中“ 动态Dynamic”,“ 允许旋转Allows Rotation ”和“ 受重力影响Affected By Gravity”。将其命名为EndZone,并将Alpha**属性更改为0。复制,粘贴并在每个端点放置一个。

视差动画

它是一种动画,背景中的不同元素以不同的速度移动,并且在游戏中给出了深度的幻觉。

变量

让我们声明山脉,月亮和星星的变量,以使视差动画成为可能。

声明变量

didMove方法中,初始化变量。

视差效应

为了实现视差动画,我们需要以不同的速度移动每个元素。要计算速度,您需要将每个层的速度加倍。顶层将被分配最高编号,因为我们希望它比其他层移动得更快。为每个场景节点创建一个动作并运行它们。

代码语言:javascript
复制
// Background Parallax
    
let parallax1 = SKAction.moveTo(x: player?.position.x)!/(-10), duration: 0.0)
mountains1?.run(parallax1)
    
let parallax2 = SKAction.moveTo(x: player?.position.x)!/(-20), duration: 0.0)
mountains2?.run(parallax2)
    
let parallax3 = SKAction.moveTo(x: player?.position.x)!/(-40), duration: 0.0)
mountains3?.run(parallax3)
    
let parallax4 = SKAction.moveTo(x: (cameraNode?.position.x)!, duration: 0.0)
moon?.run(parallax4)
    
let parallax5 = SKAction.moveTo(x: (cameraNode?.position.x)!, duration: 0.0)
stars?.run(parallax5)

请注意,在这里,我们只希望山脉受到视差动画的影响。他们将以不同的速度跟随玩家的动作。由于这些山脉最接近他,玩家将以比山2 1更快的速度通过山3。月亮和星星将跟随相机,使它们保持静止。如果我们不添加这些移动动作,当玩家离开时它们将从场景中消失。

时间线动画

它是一种使用您运行时间来创建动画的关键帧的动画。在场景中,您可以轻松制作时间轴动画而无需一行代码。

动画与纹理

首先,在媒体库中,将jewel / 0拖放到场景中。使用Scale属性并放入(x:0.2,y:0.2)。然后,将它命名为宝石。选择Alpha Mask作为主体类型并取消选中允许旋转受重力影响。启用底部的Action Editor View,您将看到场景中所有节点的列表。在对象库中搜索AnimateWithTexture并将其放在宝石的时间轴内。在属性检查器中,选中“ 调整大小”。在媒体库中,将其余的宝石图像拖放到纹理中框。在SpriteKit场景中,您不必总是运行模拟器来预览动画。点击Animate,瞧,宝石现在已经动画了!要使其循环,请单击循环图标并选择无限图标。

结论

到目前为止,我们的游戏看起来很棒!我们实施了相机并让它跟随播放器。我们学会了如何使一些元素与相机一起移动,例如操纵杆。为了结束本节,我们做了一些视差和时间轴动画。

原文: https://designcode.io/spritekit-camera

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.02.28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 相机工作下载
  • 场景中的CameraNode
  • 代码中的CameraNode
    • 相机声明
      • 初始化CAMERANODE
        • 相机位置
        • 副作用
        • 禁区
          • 关闭限制
          • 视差动画
            • 变量
              • 声明变量
                • 视差效应
                • 时间线动画
                  • 动画与纹理
                  • 结论
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档