Sprite Kit教程：动画和纹理图集 2

最新推荐文章于 2020-12-30 20:23:14 发布

孙启超

最新推荐文章于 2020-12-30 20:23:14 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sqc3375177/article/details/17003165

本文详细介绍了如何使用SpriteKit为游戏角色添加动画，并通过触摸屏幕控制其移动方向与位置。通过调整代码，使角色能够响应用户的触摸输入，实现灵活的交互体验。

注：本文译自Sprite Kit Tutorial: Animations and Texture Atlases

改变动画运动的方向

看起来不错哦！下面我们就来看看如何通过触摸屏幕上的点来控制熊的运动方向。在MyScene.m文件中做如下改动：

 
  // Add these new methods
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{

    CGPoint location = [[touches anyObject] locationInNode:self];
    CGFloat multiplierForDirection;

    if (location.x <= CGRectGetMidX(self.frame)) {
        //walk left
        multiplierForDirection = 1;
    } else {
        //walk right
        multiplierForDirection = -1;
    }

    _bear.xScale = fabs(_bear.xScale) * multiplierForDirection;
    [self walkingBear];
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
}
 
 

上面的代码会根据tap的位置，让touchesEnded方法判断tap处于屏幕正中间的左边还是右边。通过该方法，决定熊的朝向。熊的方向是通过Sprite Kit来改变的(通过负值乘以xScale就可以让熊朝向左边。)

编译并运行程序，一切正常的话，当你在屏幕上点击时，会发现熊的朝向发生了改变。

在屏幕上让熊移动

下面我们让熊可以移动到屏幕的各个位置。

在MyScene.m文件中做如下改动：

 
  // Comment out the call to start the bear walking
//[self walkingBear];

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    //Stuff from below!
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
}

//add this method
-(void)bearMoveEnded
{
    [_bear removeAllActions];
}
 
 

如上所示，移除了touchesEnded方法中的所有代码。下面我们一步一步的往里面添加代码。

当想要停止动画的时可以调用方法bearMoveEnded。

下面就从touchesEnded方法开始吧：

1) 确定触摸的位置并定义一个变量代表熊的朝向

 
  CGPoint location = [[touches anyObject] locationInNode:self];
CGFloat multiplierForDirection;

如上代码，利用常见的一个方法将触摸的位置转换为node坐标系中的位置。

2) 设置速度

 
  CGSize screenSize = self.frame.size;
float bearVelocity = screenSize.width / 3.0;

如上，定义了熊移动的速度。可知熊从移动长度为屏幕宽度这么长时，需要3秒钟。由于不同设备的屏幕宽度可能会不同，所以在这里使用了self.frame.size，所以熊的速度应该是屏幕宽度/3秒。

3) 计算出熊在X和Y轴中移动的量

 
   CGPoint moveDifference = CGPointMake(location.x - _bear.position.x, location.y - _bear.position.y);

通过简单的利用触摸位置减去熊的位置，计算出熊在X和Y轴上应该移动的距离。

4) 计算出实际的移动距离

 
  float distanceToMove = sqrtf(moveDifference.x * moveDifference.x + moveDifference.y * moveDifference.y);

上面的代码是计算出熊实际移动的直线距离(一个直角三角形的斜边：熊当前的位置和触摸位置)。关于游戏中涉及到的数学知识可以看看这本书：Trigonometry for Game Programming。

5) 计算出移动实际距离所需要花费的时间

 
  float moveDuration = distanceToMove / bearVelocity;

通过移动的实际距离除以移动速度计算出需要花费的时间。

6) 需要的话对动画做翻转(Flip)处理

 
  if (moveDifference.x < 0) {
    multiplierForDirection = 1;
} else {
    multiplierForDirection = -1;
}
_bear.xScale = fabs(_bear.xScale) * multiplierForDirection;
 
 

上面的代码：确定熊往左还是往右移动。如果小于0，则往左移动，否则往右移动。

在这里，你的第一直觉可能是利用图片编辑器创建并使用对应另一个方向的图片。不过，之前我们学习过了如果通过乘法来改变sprite的xScale，进而改变sprite的方向。

7) 运行一些action

 
  if ([_bear actionForKey:@"bearMoving"]) {
    //stop just the moving to a new location, but leave the walking legs movement running
    [_bear removeActionForKey:@"bearMoving"];
} //1

if (![_bear actionForKey:@"walkingInPlaceBear"]) {
    //if legs are not moving go ahead and start them
    [self walkingBear];  //start the bear walking
} //2

SKAction *moveAction = [SKAction moveTo:location duration:moveDuration];  //3
SKAction *doneAction = [SKAction runBlock:(dispatch_block_t)^() {
        NSLog(@"Animation Completed");
        [self bearMoveEnded];
}]; //4

SKAction *moveActionWithDone = [SKAction sequence:@[moveAction,doneAction]]; //5

[_bear runAction:moveActionWithDone withKey:@"bearMoving"]; //6
 
 

停止已有的移动action(因为要准备告诉熊移动到别的地方)。这里使用的key可以开始和停止以此命名的动画的运行。
如果熊还没有准备移动腿，那么就让熊的腿开始移动，否则它该如何走到新的位置呢。这里使用了我们之前使用过的方法，这个方法可以确保不启动一个已经运行着的动画(以key命名)。
创建一个移动action，并制定移动到何处，以及需要花费的时间。
创建一个done action，当熊到达目的地后，该action利用一个block调用一个方法来停止动画。
将上面的两个action设置为一个顺序action链，就是说让这两个action按照先后顺序运行(第一个运行完之后，再运行第二个)。
让熊开始运行action，并制定一个key为：”bearMoving”。记住，这里的key用来判断熊是否需要移动到新的位置。

注意：Sprite Kit支持两种action：sequential和grouped。sequential action表示action按照顺序执行。如果想要action同时运行，那么就使用grouped。

当然，也可以在sequential action中包含grouped action，反之亦然。更多相关内容请看Sprite Kit Programming Guide中的Adding Actions to Nodes章节。

当动画执行完毕之后，bearMoveEnded会被调用，所有的动画都将被停止，并等待下一个移动方位。

搞定了！

现在编译并运行程序，一切正常的话，那么当点击屏幕时，熊会跟着移动。