Sprite Kit  教程:如何拖放精灵

目标:

1.拖放精灵与触摸的基础知识
2.如何通过滚动触摸视图本身
3.如何保持坐标直接在你的脑袋
4.如何使用手势识别与雪碧套件更是很酷的效果!

Getting Started:

1.创建工程:在   ViewController.m 中 替换一下内容

- (void)viewWillLayoutSubviews
{[super viewWillLayoutSubviews];// Configure the view.SKView * skView = (SKView *)self.view;if (!skView.scene) {skView.showsFPS = YES;skView.showsNodeCount = YES;// Create and configure the scene.SKScene * scene = [MyScene sceneWithSize:skView.bounds.size];scene.scaleMode = SKSceneScaleModeAspectFill;// Present the scene.[skView presentScene:scene];}
}

2. 在MyScene.m 中加入一下内容:

@interface MyScene () @property (nonatomic, strong) SKSpriteNode *background;
@property (nonatomic, strong) SKSpriteNode *selectedNode;@end

3.您将使用此字符串后,以确定您的移动节点。
Now add the following line before the @interface part.
static NSString * const kAnimalNodeName = @"movable";


4.初始化

- (id)initWithSize:(CGSize)size {if (self = [super initWithSize:size]) {// 1) Loading the background_background = [SKSpriteNode spriteNodeWithImageNamed:@"blue-shooting-stars"];[_background setName:@"background"];[_background setAnchorPoint:CGPointZero];[self addChild:_background];// 2) Loading the imagesNSArray *imageNames = @[@"bird", @"cat", @"dog", @"turtle"];for(int i = 0; i < [imageNames count]; ++i) {NSString *imageName = [imageNames objectAtIndex:i];SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:imageName];[sprite setName:kAnimalNodeName];float offsetFraction = ((float)(i + 1)) / ([imageNames count] + 1);[sprite setPosition:CGPointMake(size.width * offsetFraction, size.height / 2)];[_background addChild:sprite];}}return self;
}

1)LoadBackground

解释1:该方法的第一部分加载的背景图像的场景(蓝 - 拍摄stars.png)。需要注意的是它设置图像的锚点到图像的左下(0,0)。

解释2:在雪碧套件,当你设置一个节点的位置,你实际上是设置的节点的锚点。缺省情况下,定位点被设定为节点的正中心。然而,通过设置锚点到左下角,当你设置节点的位置,你现在在哪里设置的左下角。

解释3:该方法不设置背景的任何地方的位置,所以背景默认为位置(0,0)。因此,图像的左下角位于(0,0),因此图像(这是一个关于800分长)屏幕延伸关闭的权利。

 2)Loading the Images

解释1:该方法的下一部分依次通过图像加载的列表。对于每一个图像的一个节点创建并放置在场景。节点沿屏幕的长度分布,有一个很好的初始布局。它也将名称设置为kAnimal节点名。

解释2:设置一个节点的名称避免了拿着引用到一个节点,如果你以后需要它的需要。在创建子画面之后它被添加到后台节点。

解释3:


背景设置完成下面 进行点击事件 :

这个方法是一个辅助方法,它是做了三种不同的事情。

1.它会询问你的场景(个体经营)因为这是对位的触摸位置的节点。

2.后它得到匹配的节点,所述方法检查节点是相同的先前选定的节点。在这种情况下,有什么可以做,并且该方法返回。如果你感动了一个新的节点,或者你没有碰过一个节点呢。节点应该运行“摆动”的动画,所以你可以看到你选择哪个节点。但在开始动画之前,你要从当前所选节点的所有运行操作和运行一个旋转角度:时间:动作在当前节点上。这可以确保只有一个节点是动画和某个节点到其原始,未旋转的状态,当选择另一个节点。


3.这个if语句检查该被选择节点是动画节点之一。您可以轻松地检查这与您在initWithSize设置name属性:方法。如果选择了动画节点,创建所选节点上的序列(重排/删除应用程序时,像一个在主屏幕上),该做的“摆动”动画动作和运行茨艾伦序列。正常情况下,操作运行了你创建它的持续时间。为了避免“晃动”的动画从它完成后可以将其作为被永远重复的动作停止。

现在solver函数degToRad添加到文件底部:

Moving Sprites and the Layer based on Touches移动精灵和图层的基础上润色

时间让这些动物移动!其基本思想是将实现touchesMoved:withEvent:,并计算出触摸有多少自上一次移动。如果动物被选中,将移动此动物通过的量。如果动物没有被选中,这将移动整个层代替,使得用户可以滚动层从左至右。
之前你虽然添加任何代码,让我们花点时间来讨论如何滚动雪碧Kit中的一个节点。
首先采取看看下面的图片:

正如你所看到的,你已经设置了背景,使锚点(左下)为(0,0),其余扩展起飞的权利。黑色区域表示当前可见区域(窗口的大小)。
所以,如果你想要滚动图像100点的权利,你可以通过移动整个雪碧套件节点100点到左边,你可以在第二个图像看到。
你也想确保你没有滚动太远。例如,你不应该能够将层移动到右边,因为将有空白点。
现在,你在这样的背景信息武装起来,让我们看看是什么样子的代码!增加以下新的方法来你的文件的底部:



-(CGPoint)boundLayerPos:(CGPoint)newPos{

CGSize winSize = self.size;

CGPoint retval = newPos;

retval.x = MIN(retval.x, 0);

retval.x = MAX(retval.x , -[_background size].width + winSize.width);

retval.y = [self position].y;

return retval;

}

-(void)panForTranslation:(CGPoint)translation{

CGPoint position = [_selectedNode position];

if ([[_selectedNode name] isEqualToString:kAnimalNodeName]) {

[_selectedNode setPosition:CGPointMake(position.x + translation.x, position.y + translation.y)];

}else{

CGPoint newPos = CGPointMake(position.x + translation.x, position.y + translation.y);

[_background setPosition:[self boundLayerPos:newPos]];

}

}




第一种方法boundLayerPos:用于确保你不要滚动层以外的背景图像的边界。你通过在你想移动的层,它会修改你传递什么样的,以确保你不滚动太远。
如果您有任何麻烦,了解什么是怎么回事,请上面的图片,并绘制在纸上。
下一个方法panForTranslation:如果首先检查所选节点是动物节点,并基于一个传入的翻译的位置。如果选择的节点是在背景层将其设置的也是立场,但呼吁boundLayerPos:确保你无法滚动到遥远的左侧或右侧。





方法二 判断

还有另一种方式来完成你雪碧套件触摸操作只是做了 - 使用手势识别器,而不是!
手势识别是一个伟大的方式来探测不同的手势像水龙头,双水龙头,刷卡或平底锅。
而不必写一堆疯狂的寻找代码来检测水龙头,双水龙头,刷卡,平底锅,或捏之间的差别基本上,您只需创建要检测什么手势识别对象,并将其添加到视图。然后,它会给你一个回调时发生!
他们是非常容易使用,你可以用它们与雪碧套件,没有烦恼。让我们来看看是如何工作的。
首先,注释掉触摸操控方式,的touchesBegan:withEvent:和touchesMoved:withEvent:因为您将使用不同的方法了。



spriteKit 笔记三 —— Drog 精灵相关推荐

  1. J2EE学习笔记三:EJB基础概念和知识 收藏

    J2EE学习笔记三:EJB基础概念和知识 收藏 EJB正是J2EE的旗舰技术,因此俺直接跳到这一章来了,前面的几章都是讲Servlet和JSP以及JDBC的,俺都懂一些.那么EJB和通常我们所说的Ja ...

  2. tensorflow学习笔记(三十二):conv2d_transpose (解卷积)

    tensorflow学习笔记(三十二):conv2d_transpose ("解卷积") deconv解卷积,实际是叫做conv_transpose, conv_transpose ...

  3. Ethernet/IP 学习笔记三

    Ethernet/IP 学习笔记三 原文为硕士论文: 工业以太网Ethernet/IP扫描器的研发 知网网址: http://kns.cnki.net/KCMS/detail/detail.aspx? ...

  4. 深度学习入门教程UFLDL学习实验笔记三:主成分分析PCA与白化whitening

     深度学习入门教程UFLDL学习实验笔记三:主成分分析PCA与白化whitening 主成分分析与白化是在做深度学习训练时最常见的两种预处理的方法,主成分分析是一种我们用的很多的降维的一种手段,通 ...

  5. AT91RM9200Linux移植笔记(三)-移植Linux kernel 2.6.17

    AT91RM9200Linux移植笔记(三)-移植Linux kernel 2.6.17 手上板子原来自带的是2.4.19的内核, 打算移植新的2.6的内核,从网上下了2.6.17的kernel,下载 ...

  6. iView学习笔记(三):表格搜索,过滤及隐藏列操作

    iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...

  7. 吴恩达《机器学习》学习笔记三——多变量线性回归

    吴恩达<机器学习>学习笔记三--多变量线性回归 一. 多元线性回归问题介绍 1.一些定义 2.假设函数 二. 多元梯度下降法 1. 梯度下降法实用技巧:特征缩放 2. 梯度下降法的学习率 ...

  8. mysql数据库权威指南_MySQL_MySQL权威指南读书笔记(三),第二章:MYSQL数据库里面的数 - phpStudy...

    MySQL权威指南读书笔记(三) 第二章:MYSQL数据库里面的数据 用想用好MYSQL,就必须透彻理解MYSQL是如何看待和处理数据的.本章主要讨论了两个问题:一是SQL所能处理的数据值的类型:二是 ...

  9. Python基础学习笔记三

    Python基础学习笔记三 print和import print可以用,分割变量来输出 import copy import copy as co from copy import deepcopy ...

  10. python慕课笔记_MOOC python笔记(三) 序列容器:字符串、列表、元组

    Python Python开发 Python语言 MOOC python笔记(三) 序列容器:字符串.列表.元组 容器概念 容器是Python中的重要概念,分为有序与无序. 有序容器也称为序列类型容器 ...

最新文章

  1. 利用CodeBERT,这个VS Code扩展可以自动生成Python文档字符串
  2. python做小程序-【实战案例】利用Python做出趣味版防沉迷小程序
  3. 特征工程(2):特征构建
  4. jira在linux下面的安装和配置
  5. Iptables防火墙配置
  6. P3244-[HNOI2015]落忆枫音【dp】
  7. 学习、掌握运营岗位必备的基本能力和思维
  8. Mysql数据中文乱码问题处理
  9. 二维数组 赋值_数组,及二维数组
  10. 大数据可视化的意义在哪
  11. redis介绍和安装
  12. 在B/S开发中经常用到的javaScript技术(转载)
  13. 一个学习PCI Express的 不错去处
  14. EOS合约开发 - 钱包篇
  15. 2022年上半年软考高项考试真题(三个科目都有)
  16. 手机app开发成本预算
  17. python下载小说
  18. Windows安装mysql8并设置开机自启动
  19. body加背景图片没反应_css设置背景图片不显示问题
  20. 福禄克FLUKE TIX650红外热像仪3.5英寸高像素大屏

热门文章

  1. 怎么改自己手机的ip地址
  2. 聚焦基因组学研究,JMP参加第七届国际统计遗传学与基因组学高峰论坛
  3. 计算机内存die,从内存时序的角度告诉你 三星B-DIE为何成为高端所用
  4. 360显示服务器不可用,谢瑾:autodesk360服务不可用
  5. H264里面描述符的意思--------x264学习笔记ByMK
  6. SpringBoot 配置文件存放位置及读取顺序
  7. Deecamp 面试翻车记录
  8. 不等式计算机在线使用,不等式传递性在线计算器
  9. 【前端】三种方法将文字垂直居中
  10. 在上海社保千万不要断,如果断了,一定要这样做!