[原创]Swift+Sprite Kit中文教程第一篇

本教程适用于入门开发者,我将会告诉你如何最快开发出小游戏,但所使用的未必是最佳方案。本教程将使用纯swift+storyboard进行开发,所以最好有一点点这两种技术的基础。

新建项目:

1.左侧选iOS,右侧选Game
2.语言Swift,技术Spritekit。

清理干净

删除GameScene.sks文件,目前我建议使用纯代码实现。
打开GameViewController.swift,删除extension SKNode扩展,大概十几行,这个是用来加载sks文件的。
然后进入viewDidLoad方法,将if let scene = ...这行改为let scene = GameScene(size:CGSizeMake(1334, 750))。我们不使用sks文件来加载场景,而是直接用GameScene类初始化了一个场景实例。

创建精灵

进入GameScene.swift文件,干掉didMoveToView和touchesBegan里的所有代码。注释写的比较清楚了,前者是一个view首次加载好并放到屏幕上的瞬间,会调用到的一个函数,在这里,你可以放所有你准备展示在玩家面前的内容(加载游戏内容)。后者是玩家点击屏幕的时候,会调用的一个函数(处理玩家操作)。以下简称load和touch
首先,在load中加入如下代码:

var plane = SKSpriteNode(imageNamed: "Spaceship")//可以在Assets中找到默认飞船图片
plane.position = CGPointMake(size.width * 0.5,size.height * 0.5)//self是指当前场景,左下角为坐标原点
addChild(plane) //添加精灵到场景中

可以运行一下,我们会发现屏幕中央多了一个飞机。

坐标系相关内容请参考这里

使用纹理

游戏中会用到很多素材,如果有多个相同的精灵,可以共用一套纹理,这样可以提高游戏运行效率。
在load中,初始化plane之前,添加如下代码:
var planeTexture = SKTexture(imageNamed: "Spaceship")
var plane = SKSpriteNode(imageNamed: "Spaceship")修改为var plane = SKSpriteNode(texture: planeTexture)
很简单吧,这样我们就使用了纹理技术来创建一个精灵。

纹理缩放

飞机好像太大了点,我们进入到Assets图片集里,选择spaceShip,将1x里的图拖拽到2x里,这样表示图片是支持retina2x的,在游戏中使用时长宽会被自动缩小一半,以显示出非常好的效果。
但是,运行一下会发现,好像飞机还是有点大,下面我们说一下如何缩放(你也可以试试将图片放在3x里,这是6+的屏幕规格)。

plane.xScale是横轴缩放值
plane.yScale是纵轴缩放值
plane.setScale()同时设置横轴纵轴

下面,在addChild调用之前,设置:plane.setScale(0.5),好了,你会发现飞机长宽被缩小了一半。

处理操作

我们要开始控制飞机飞行了。因为支持多点触摸,所以触摸时屏幕会收到一个触摸点集合(即使只有一个点),里面包含每个触摸点的数据。不过我们暂时只关心单点触摸,也就是只处理集合中的第一个点的数据。
首先,在集合中取出一个点,在touch中加入:
let location:CGPoint! = touches.first?.locationInNode(self)
这就从场景节点中取出了玩家所触摸的位置坐标,然后我们找出这个坐标所在位置的某个node,这样就可以判断我们是否点击到了飞机。为了方便判断,我们在addChild之前,设置飞机的名字为plane,给它贴上一个标签
plane.name = "plane"
然后,回到touch方法中,继续在下面加入:

var node = self.nodeAtPoint(location)
if node.name == "plane"{
    //you choose the plane
}

然后,我们需要两个新的函数,touchesMove和touchesEnded,前者在触摸并移动时触发,后者在触摸操作结束之后触发。同时,需要在类里添加一个成员属性isTouched,类型是bool,然后在update函数中,实时修改飞机坐标。最终代码如下:

class GameScene: SKScene {
    var planeTexture = SKTexture(imageNamed: "Spaceship")//可以在Images.xcassets中找到默认飞船图片
    var plane:SKSpriteNode!
    var isTouched = false
    
    override func didMoveToView(view: SKView) {
        /* Setup your scene here */
        plane = SKSpriteNode(texture: planeTexture)
        
        plane.position = CGPointMake(self.size.width * 0.5, self.size.height * 0.5)//self是指当前场景,左下角为坐标原点
        plane.setScale(0.5)
        plane.name = "plane"
        self.addChild(plane)
    }
    
    override func touchesBegan(touches: Set, withEvent event: UIEvent?) {
        /* Called when a touch begins */
        
        var location:CGPoint! = touches.anyObject()?.locationInNode(self)
        var node = self.nodeAtPoint(location)
        
        if node.name == "plane" {
            isTouched = true// 手指点击到飞机
        }
        
    }
    
    override func touchesMoved(touches: Set, withEvent event: UIEvent?) {
        if isTouched {
            var location:CGPoint! = touches.anyObject()?.locationInNode(self)
            plane.position = CGPointMake(location.x, location.y)
        }
        
    }
    
    override func touchesEnded(touches: Set, withEvent event: UIEvent?) {
        isTouched = false
    }
    
    override func update(currentTime: CFTimeInterval) {
        /* Called before each frame is rendered */
    }
} 

GameViewController的viewDidLoad代码如下:

override func viewDidLoad() {
    super.viewDidLoad()

    let scene = GameScene(size: CGSizeMake(750, 1334))
    // Configure the view.
    let skView = self.view as! SKView
    skView.showsFPS = true
    skView.showsNodeCount = true
    
    /* Sprite Kit applies additional optimizations to improve rendering performance */
    skView.ignoresSiblingOrder = true
    
    /* Set the scale mode to scale to fit the window */
    scene.scaleMode = .AspectFill
    
    skView.presentScene(scene)
}

现在,你可以在模拟器里,四处拖拽飞机进行移动了。

下一篇

你可能感兴趣的:([原创]Swift+Sprite Kit中文教程第一篇)