iOS 10平台SpriteKit新特性之Tile Maps(上)

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看341 回复回复2 收藏收藏1 分享淘帖 转播转播 分享分享 微信
查看: 341|回复: 2
收起左侧

iOS 10平台SpriteKit新特性之Tile Maps(上)

[复制链接]
游戏人生 发表于 2016-9-28 00:46:58 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑


1、简介

苹果公司在WWDC 2016大会上向人们展示了一大批新的好东西。其中之一就是SpriteKit Tile Editor。这款工具易于上手,而且看起来速度特别快。

在本教程中,你将了解关于Tile Editor中瓦片图片的所有内容,包括如何在Tile Editor中导入和渲染瓦片图片。具体地说,我要介绍在设计自己的新游戏Rubber Duckie Rescue(“拯救橡胶鸭子”)时如何使用这种新技术来实现如何使橡胶鸭子沿着指定线路行走。

iOS 10平台SpriteKit新特性之Tile Maps(上) 1

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 1





2、准备工作

首先,请下载游戏Rubber Duckie Rescue的初始工程,并确保你已经安装了Xcode 8。注意:本文写作之时,它仅仅发行了beta版本。

目前,该游戏还只是刚刚开始;到本教程结尾之时,你会控制一辆小车,你将驾驶小车通过一片令人兴奋的风景区去拯救那些令人讨厌的鸭子。

现在,请构建并运行一下你下载的上述程序。此时,你会看到你有一辆小车,而且小车可以响应你的触控。你可以通过触摸把车送到一个特定的位置,或平移它让车跟随触摸轨迹。目前,背景只是纯灰色的。但别担心!你会随时改变的。

iOS 10平台SpriteKit新特性之Tile Maps(上) 2

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 2





3、何谓瓦片地图(Tile Map)?

创建背景时,你可以选择使用较大的图像或使用较小的图像,它们都称为“瓦片”(tiles)。然后,把这些瓦片小心地一块接一块地放在一起,便创建一个完整的图像。

例如,如果你正在创建一个高尔夫游戏,你可能需要使用草瓦片和沙坑瓦片。你还可能需要使用定义草和沙坑的边缘的瓦片。



3.1、使用瓦片地图的优点

控制:以前,每一个瓦片都对应一个新的SKSpriteNode,因此仅仅放置这些结点就是一场噩梦。

现在,你只需要放一个SKTileMapNode,然后在它上面渲染瓦片即可。把单个的瓦片放上去是很容易的,而且在几秒钟内就可以渲染生成整个背景。你甚至还可以绘制动画瓦片呢!

你可以将一个村庄放在一个瓦片层上,而把草放到较低层上去。若要实现从夏天到冬天的更改,只需要把茂盛翠绿的青草层替换成一个荒凉赤褐色的层即可,而村庄层保持不变。

性能:除了绘制瓦片方便外,性能也将得到很大改善。大图像会占用大内存,而小瓦片可以重复使用,因而占用较少的资源。

灵活性:每个瓦片都可以在代码中控制。这意味着,你需要清楚了解你的游戏主角所在的瓦片位置。

在本教程中,你制作的游戏背景环境使用草和水瓦片,它们对于汽车的运动会产生不同的影响。此外,你还要创建瓦片铺成的区域,鸭子会随机放置在那里,由你开车来拯救它们。



3.2、瓦片地图类型

游戏中共有四种类型的瓦片集。具体地说,你可以创建网格型、等距型、 六角形尖型或六角形扁平型的瓦片集。实际开发中,你只需根据你的游戏的样式选择瓦片类型即可。

iOS 10平台SpriteKit新特性之Tile Maps(上) 3

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 3


本文中的Rubber Ducky Rescue游戏使用的是一个正方形网格。这是一个自上而下的游戏,但是你也可以使用网格瓦片来实现左右滚屏。

等距的瓦片都是钻石形状,就像Ravenwood Fair游戏中使用的那样。

有两种放置六角形的方法:把尖部或平面放到上面。下图中展示的是尖部朝上的六角平铺网格的示例:

iOS 10平台SpriteKit新特性之Tile Maps(上) 4

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 4


游戏Sid Meier’s Civilization在其Civ 4版本中使用的是等距型网格,而在Civ 5版本中使用的是六角形的。




4、如何创建瓦片地图

在橡胶鸭子救援游戏中,你会先用草和水画两个简单的背景瓦片地图,取代当前的灰色背景。以后,你将在后台编码中使用汽车需要收集的对象来创建新的瓦片地图。

要创建瓦片地图,你首先需要一些瓦片图像。幸运的是,有一些可以免费使用的资源网站提供给开发人员免费使用一些现成的游戏图像数据。

我们的游戏中将使用来自于kenney.nl的资源。这是一个伟大的网站,它提供了大量的可以免费使用的瓦片和其他可用的精灵。



4.1、使用Asset Catalog管理图像数据

前面的初始项目中已经有一个资源目录,名字是Assets.xcassets。其中,包含了本教程所需要的所有瓦片和精灵图像。

iOS 10平台SpriteKit新特性之Tile Maps(上) 5

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 5


瓦片图像存在于纹理地图集中,而不是独立存在于文件夹下。纹理地图集的外观和行为就像一个文件夹,只是其对应的图标是四个小方块,而不是一个大方块。

使用纹理地图集的优点是性能方面。当渲染你的游戏时,SpriteKit会针对你发送给它的每一个纹理向GPU发送“绘制调用”命令。如果将多个图像组合到一个纹理中——称为纹理地图,那么将产生唯一的一次“绘制调用”命令,而不是多次调用,从而具有更高的效率。

Asset Catalog可以自动将你的精灵图像组合到纹理地图集中,而你不需要担心如何算出精灵图像在纹理地图中的位置——SpriteKit自动为你处理所有相关操作。

在本游戏中,你也将使用Asset Catalog中的图像来创建瓦片集。



4.2、创建瓦片集合

在深入讨论细节之前,你将先快速了解一下瓦片创建和绘画过程。以后,你会学习创建和绘制一个更复杂的瓦片集。

首先,请定位到路径File\New\File,然后选择iOS\Resource\SpriteKit Tile Set模板并点击“Next”按钮。请参考下图。

iOS 10平台SpriteKit新特性之Tile Maps(上) 6

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 6


命名瓦片集合为Tiles,然后点击“Create”命令。

接下来,从工程导航器中选择文件Tiles.sks,系统将为你自动创建一个网格瓦片集和瓦片组。对应于每一个瓦片集都有一个组。在本教程中,你需要为草和水创建组。

iOS 10平台SpriteKit新特性之Tile Maps(上) 7

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 7


首先,选择Tile Set。随后,在属性检查器中,把瓦片集重命名为Groud Tiles。

iOS 10平台SpriteKit新特性之Tile Maps(上) 8

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 8


现在,在瓦片集列表面板中选择new tile group。再在属性检查器中重命名它为Water Tile。

然后,在属性检查器下部,选择Media Library。如果你之前没有使用过媒体库,你很快就会发现用它来创建瓦片集是很方便的。

iOS 10平台SpriteKit新特性之Tile Maps(上) 9

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 9


定位到WaterCenter图片文件,把它拖动到空的瓦片区。

iOS 10平台SpriteKit新特性之Tile Maps(上) 10

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 10


[注1]瓦片集编辑器允许你在设计时将图像直接从Finder中拖动到Tile Group中。这看起来好像能够正常工作,但是当你运行应用程序时,它们会显示一个红色的 X。要避免这种情况,需要将你的图像导入到Asset Catalog中,然后通过媒体库在瓦片集编辑器中找到它们。

上面定义的是第一个瓦片组,现在你将创建第二个瓦片组。

[注3]在目前Xcode 8的测试版中,如果你只是创建一个瓦片组,那么当你绘制瓦片时场景瓦片编辑器(Scene Tile Editor)可能无法识别它。要解决这个问题,你只需要添加第二个组即可。

现在,请在集合列表面板中选择Ground Tiles,单击底部的加号(+),然后选择“New Single Tile Group”,请参考下图。

iOS 10平台SpriteKit新特性之Tile Maps(上) 11

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 11


选择“new tile group”并在属性检查器中把新创建的瓦片组名字更改为“Grass Tile”。然后,定义到媒体库的图像文件GrassCenter1并把它拖动到空的瓦片区。

iOS 10平台SpriteKit新特性之Tile Maps(上) 12

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 12





5、使用瓦片变体(Tile Variants)

用鼠标左键单击屏幕中央的草瓦片,见下图。

iOS 10平台SpriteKit新特性之Tile Maps(上) 13

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 13


在屏幕底部,你可以添加新的瓦片变体(variant)。当你绘制瓦片时,编辑器将自动随机选择这些变体之一;这样,你在你的地图中就会获得许多变体。每个变体都可以在属性检查器中设置一个Placement Weight值。例如,如果你给一个变体设置Placement Weight值为1,第二个变体设置为2,那么第二个变体在你绘制时其水平放置尺寸将成为原来的2倍。

将图像GrassCenter2拖动到空的变体插槽(slot)处,然后再把GrassCenter3图像拖动到相邻的空的变体插槽。请参考下图。

iOS 10平台SpriteKit新特性之Tile Maps(上) 14

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 14


现在,你已经创建了你的第一个瓦片集,接下来的任务就是进行绘制了。




6、瓦片地图编辑器

请选择文件GameScene.sks。目前,该场景中仅包含一个小车精灵。然后,从右下部的对象库中把一个Tile Map结点拖动到场景中。

iOS 10平台SpriteKit新特性之Tile Maps(上) 15

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 15


在属性检查器中你的Ground Tiles集被自动选为项目中唯一的瓦片集。其中,Tile Size被自动设置为该瓦片集中瓦片的大小。然后,把地图的大小更改为32列X24行。确保位置X和Y都设置为0且X和Y方向的缩放比例都设置为 1。

iOS 10平台SpriteKit新特性之Tile Maps(上) 16

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 16


双击场景编辑器中的瓦片地图节点启动瓦片编辑器。或者,在选定瓦片地图节点的情况下选择Editor\Edit Tile Map也可以启动瓦片编辑器。如果你已经建立了瓦片地图节点层的话,第二种菜单选项方式更方便。

iOS 10平台SpriteKit新特性之Tile Maps(上) 17

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 17


如果你没有看到一个网格,你可以放大场景编辑器,直到看到为止。

在场景编辑器视图的顶部有一个新的工具栏,其中的刷子工具已经被选中,而且默认使用了水瓦片。现在,你可以在瓦片地图上点击并拖动开始绘制了。

iOS 10平台SpriteKit新特性之Tile Maps(上) 18

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 18


为了改变瓦片,你可以点击工具栏中的刷子图标左边的紧邻的图标并从下拉列表框中选择Grass瓦片。

iOS 10平台SpriteKit新特性之Tile Maps(上) 19

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 19


继续绘制。你会注意到已经绘制了三个随机的Grass变体。当然,稍后你会看到更有趣的事情。

iOS 10平台SpriteKit新特性之Tile Maps(上) 20

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 20


工具栏上的图标类似于其他绘制程序中的图标,一般都是从左向右使用的。

iOS 10平台SpriteKit新特性之Tile Maps(上) 21

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 21


  • 抓手工具(Hand):允许你随意拖动场景。
  • 吸管工具(Eyedropper):用于从那些已经绘制的瓦片中挑选某一瓦片。
  • 你已经看到瓦片选择工具(Select Tile)和画笔工具(Brush)的用法,在此不再介绍。
  • 填充工具(Flood Fill):用于使用你所选的瓦片填充连续的瓦片。
  • 擦除工具(Erase):将删除瓦片。
  • 如果你要绘制大片地区,选择画笔大小工具(Select Brush Size)允许你改变笔刷的大小。
  • 两个图章工具很有趣。选择创建邮票工具(Create Stamp)(标记有小圆圈图章工具)。然后,在一个正方形中单击,然后单击另一个正方形(右边且稍往下)从而以矩形选区方式选择瓦片(可能多个)。现在,你已经创建了一张邮票。
  • 选择选择邮票工具(Select Stamp)(标记有小图章工具的那个),于是,你刚刚创建的所有邮票都会显示于一个下拉菜单中。单击并选择一张邮票,然后就可以使用它作画了。显示有阴影的区域显示邮票将贴到的位置。这个工具使得绘制大区域相当容易。
  • 随机工具(Randomize)能够清除现有瓦片并使用当前所选的瓦片随机绘制。这也是绘制大区域的好方法。


当你已经完成试验后(如果第一次使用,你可以先随意地试用一下),选择水瓦片来填充整个地图。你可以迅速填充空白区域。这将生成游戏背景。当然,你可能通过第二瓦片地图节点实现覆盖更多细节。

iOS 10平台SpriteKit新特性之Tile Maps(上) 22

iOS 10平台SpriteKit新特性之Tile Maps(上) - 敏捷大拇指 - iOS 10平台SpriteKit新特性之Tile Maps(上) 22


现在,你已经了解了如何创建和绘制瓦片,接下来我们要使用边缘瓦片创建一个更复杂的瓦片集,请看《iOS 10平台SpriteKit新特性之Tile Maps(下)》。

想更多地了解有关细节,你不妨观看一下苹果WWDC 2016大会的有关视频(https://developer.apple.com/videos/play/wwdc2016/610/ ),好好学习Swift,天天想上Swifthumb




相关内容

iOS 10平台SpriteKit新特性之Tile Maps(上)

iOS 10平台SpriteKit新特性之Tile Maps(下)



都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

历史的天空 发表于 2016-9-28 13:52:34 | 显示全部楼层
想起了魔兽游戏里的地图编辑器
转行的 发表于 2016-9-28 18:25:16 | 显示全部楼层
历史的天空 发表于 2016-9-28 13:52
想起了魔兽游戏里的地图编辑器

那个是工具,这是开发。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表