SpriteKit之轻量级瓦片地图生成工具SDmapNode详解

SDmapNode简介

---

近来,一直研究SpriteKit游戏框架,但是发现网上的相关资料并不是太全面,比如瓦片地图的创建方式,网上只有TML地图文件的创建方式,想直接直接使用数组形式创建和txt文件形式创建,网上并没有比较好的实现方式,大部分是需要自己封装,所以,我就封装了一个瓦片地图的生成的类SDmapNode,对于上述的三种形式的创建方式SDmapNode都是支持的.并且使用起来比较简便,只需要根据提示属于对应的参数即可,想TML文件创建形式,只需要在工程中导入TML文件,然后在生成方法填写TML文件名称生成即可.

SDmapNode使用说明

---

注意:使用SDmapNode之前需要导入libz.tbd,这是TML文件形式创建所必须的库.

瓦片地图的创建形式是由三种的,下面我们就这三种创建形式来逐一说明.

1.数组形式创建

数组形式创建形式应该是最接近根源的一种形式.在SDmapNode中,使用数组形式创建瓦片地图我们需要注意一下几项.

必看❗️❗️❗️❗️

1.每一个图片的大小尺寸必须一致,比如一张图片是16x16的,那么其他的都要16x16.
2.需要导入纹理集文件.
3.纹理图片允许png和jpg格式,想要支持其他格式,请联系骚栋,或者修改源码.
4.图片的名称必须为单个字母.
5.4中所说图片的名称为单字母的缘由是为了数组做准备的.
6.数组中的每一个元素都是一个字符串.

先导入纹理集文件.这里就不多废话了.

接着,我们看一下,SDmapNode中是如何实现使用数组创建瓦片地图的.我们需要往初始化方式中传三个参数,分别是纹理集合的名称,瓦片的大小尺寸和瓦片地图的矩阵数组.初始化方式如下.

-(instancetype)initWithAtlasName:(NSString *)atlasName tileSize:(CGSize)tileSize tileCodes:(NSArray*)tileCodes;

接着,我们说一下实现原理.首先我们先分解我们的数组,并且拆分每一个字符串,获取字符串每一个字符所对应的瓦片纹理.代码如下

for (int row = 0; row 

获取完成之后,我们需要根据每一个字符去我们的纹理集中寻找对应的纹理.如果找不到,那么就创建一个空的对象,并且大小与瓦片地图的大小相同.因为纹理集中的图片名名称是带有后缀的,所以目前只设置了判断png和jpg类型,如果有其他类型,可以自行修改源码.

#pragma mark ---- 获取对应的瓦片 ----

-(SKSpriteNode *)nodeForCode:(NSString *)tileCode{
    
    //如果纹理集合为空,返回空.
    if (nil == self.atlas) {
        
        return nil;
    }
    
    
    // 查看当前的纹理集中是否包含名为tileCode的纹理
    if ([self isIncludeTextureWithTextureName:tileCode]) {
        
        SKSpriteNode *tile = [SKSpriteNode spriteNodeWithTexture:[self.atlas textureNamed:tileCode]];
        
        //设置过滤模式
        tile.texture.filteringMode = SKTextureFilteringNearest;
        
        return tile;
        
        
    }else{
        
        
        SKSpriteNode *tile = [SKSpriteNode spriteNodeWithTexture:[SKTexture textureWithImageNamed:@""]];
        
        tile.size = self.tileSize;
        
        return tile;
        
        
    }
    
    
}

接着上一块的判断当前的纹理集中是否包含该纹理

#pragma mark ---- 查看当前的纹理集中是否包含名为textureName的纹理 ----
-(BOOL)isIncludeTextureWithTextureName:(NSString *)textureName{

    for (NSString *anyName in self.atlas.textureNames) {

        if ([anyName isEqualToString:[NSString stringWithFormat:@"%@.jpg",textureName]]) {
            
            return YES;
        }
        
        
        if ([anyName isEqualToString:[NSString stringWithFormat:@"%@.png",textureName]]) {
            
            return YES;
        }
  
    }

    return NO;

}

上面的创建单元完成之后,接下来我们就需要根据瓦片的大小以及init中遍历的下标来对单元的position信息进行设置,代码如下

#pragma mark --- 根据数组下标返回瓦片的位置信息 ----

-(CGPoint )positionWithRow:(int)row col:(int)col{

    CGFloat x = col *_tileSize.width + _tileSize.width/2;
    
    CGFloat y = row *_tileSize.height + _tileSize.height/2;
    
    return CGPointMake(x, y);

}

那么我们看一下我们在场景如何调用的,首先我们导入SDmapNode.h头文件,只需要一个设置一个数组,即可.

#import "GameScene.h"

#import "SDmapNode.h"

@implementation GameScene

-(void)didMoveToView:(SKView *)view{

    [super didMoveToView:view];
    
    SDmapNode *mapNode = [[SDmapNode alloc]initWithAtlasName:@"map" tileSize:CGSizeMake(16, 16) tileCodes:[self tileCodesArray]];
    
    mapNode.position = CGPointMake(self.size.width/2, self.size.height/2);

    [self addChild:mapNode];

}
//地图的二维数组
-(NSArray *)tileCodesArray{

    return @[
             @"xwxxx",
             @"xqqqx",
             @"xooox",
             @"xooox",
             @"xooox"
             ];
}

效果图

2.txt文本形式创建

txt文本创建形式和数组创建形式的原理是一样的,不同的就是txt文本形式创建是把瓦片地图所有的创建信息放在一个txt文件中.初始化方式如下.

-(instancetype)initWithTextFileName:(NSString *)fileName;

必看❗️❗️❗️❗️

1.txt文本形式创建中txt文本形式必须严格按照txt模板进行.
2.要先导入纹理集文件夹.

首先我们在工程中创建一个txt文本.command +N ,然后选择Other选项,创建Empty.如图所示.

完成之后,我们就按照规范的txt文档形式填入瓦片地图的相关信息.规范如下.

接下来,我们就说一下txt文本形式创建的原理,首先,我们在代码中获取到txt文件的路径信息,然后获取到txt文本中的信息字符串,然后拆分成数组.接下来的如同数组的创建的步骤,创建瓦片地图.获取txt文本信息的代码如下.

    //获取txt的文件路径字符串
    NSString *txtPath =[[NSBundle mainBundle] pathForResource:fileName ofType:nil];
    
    //如果不存在路径
    if (nil == txtPath || [txtPath isEqualToString:@""]) {
        
        NSLog(@"txt文件路径不存在!");
        
        return nil;
    }
    
    NSError *error = nil;
    
    //获取文本中的字符串
    NSString *txtContents = [NSString stringWithContentsOfFile:txtPath encoding:NSUTF8StringEncoding error:&error];
    
    
    if (error != nil && txtContents ==nil) {
        
        NSLog(@"获取txt文本内容错误");
        
        return nil;
        
    }
    
    //分割txtContents字符串成数组
    NSArray *txtContentArray = [txtContents componentsSeparatedByString:@"\n"];
    
    //获取纹理集的名称
    NSString *atlasName = txtContentArray[0];
    
    //获取每一个纹理的宽度和高度
    NSArray *tileSizeArray = [txtContentArray[1] componentsSeparatedByString:@"*"];
    
    int tileWidth = [tileSizeArray[0] intValue];
    
    int tileHeight = [tileSizeArray.lastObject intValue];
    
    CGSize tileSize =CGSizeMake(tileWidth, tileHeight);
    
    //获取瓦片地图排列组合
    NSArray *tileCodes = [txtContentArray subarrayWithRange:NSMakeRange(2, txtContentArray.count-2)];
   

接下来创建txt形式的瓦片地图.参数只有一个,只需要输入txt文件名即可.

#import "GameScene.h"

#import "SDmapNode.h"

@implementation GameScene

-(void)didMoveToView:(SKView *)view{

    [super didMoveToView:view];
    
    SDmapNode *mapNode = [[SDmapNode   alloc]initWithTextFileName:@"background"];

    mapNode.position = CGPointMake(self.size.width/2, self.size.height/2);
    
    [self addChild:mapNode];

}

效果图

3.TML地图文件形式创建.

关于如何TML文件的创建点击这里
TML地图文件形式创建比较也是比较简单,输入tml文件名称即可,初始化方式如下.

-(instancetype)initWithTMLFileName:(NSString *)TMLFileName;

必看❗️❗️❗️❗️

1. TML地图文件形式创建需要导入的文件有两个,一个是tml文件,另外一个是TexturePacker生成的纹理集图片.不是纹理集文件夹!!!!
   2.使用TML地图文件形式创建地图之前,我们需要先导入libz.tbd这个库

因为JSTileMap做的TML的瓦片地图比较成熟,所以我就在此基础上直接封装了一层,接下来看一下我们使用TML地图文件形式创建瓦片地图的代码.

#import "GameScene.h"

#import "SDmapNode.h"

@implementation GameScene

-(void)didMoveToView:(SKView *)view{

    [super didMoveToView:view];

    SDmapNode *mapNode = [[SDmapNode alloc]initWithTMLFileName:@"map.tmx"];
    
 
    mapNode.position = CGPointMake(self.size.width/2, self.size.height/2);
    
    [self addChild:mapNode];

}

效果图如下所示.

---

SDmapNode相关使用详解就说到这了,如果有疑问,可以联系骚栋,谢谢.最后附上SDmapNode的下载.

SDmapNode的github传送门.