Ну вот мы и подошли к последней, заключительной части нашего урока. В предыдущих частях: части 1, части 2, части 3, мы создали физику игры, подключили графическую оболочку и научили нашего героя реагировать на наклон устройства. Осталось совсем немного – сделать подсчет очков и дописать кое-какие мелочи по коду. В результате у нас получится настоящая игра, готовая для размещения в App Store…

Создание HUD

Перед тем как начать считать очки, мы должны обеспечить их отображение на экране HUD, чтобы игрок мог видеть набранные баллы и количество звезд.
В левом верхнем углу сцены на нашем HUD будет отображаться общее число собранных звезд, а текущий счет – в правом верхнем углу. Для этого нам нужно создать два лейбла класса SKLabelNodes.

Создайте следующие свойства в файле GameScene.swift:

// Labels for score and stars
var lblScore: SKLabelNode!
var lblStars: SKLabelNode!

Чтобы скомпоновать HUD, добавьте следующий код в метод init(size:) класса GameScene.swift сразу перед строкой, которая инициализирует MotionManager:

// Build the HUD
 
// Stars
// 1
let star = SKSpriteNode(imageNamed: "Star")
star.position = CGPoint(x: 25, y: self.size.height-30)
hudNode.addChild(star)
 
// 2
lblStars = SKLabelNode(fontNamed: "ChalkboardSE-Bold")
lblStars.fontSize = 30
lblStars.fontColor = SKColor.whiteColor()
lblStars.position = CGPoint(x: 50, y: self.size.height-40)
lblStars.horizontalAlignmentMode = SKLabelHorizontalAlignmentMode.Left
 
// 3
lblStars.text = String(format: "X %d", GameState.sharedInstance.stars)
hudNode.addChild(lblStars)
 
// Score
// 4
lblScore = SKLabelNode(fontNamed: "ChalkboardSE-Bold")
lblScore.fontSize = 30
lblScore.fontColor = SKColor.whiteColor()
lblScore.position = CGPoint(x: self.size.width-20, y: self.size.height-40)
lblScore.horizontalAlignmentMode = SKLabelHorizontalAlignmentMode.Right
 
// 5
lblScore.text = "0"
hudNode.addChild(lblScore)

Рассмотрим детально этот блок кода:

1. Сначала мы добавили графику для звезды в левом верхнем углу сцены, чтобы показать игроку, что стоящее рядом с ней число — это количество собранных звезд.

2. Рядом со звездой, мы размещаем SKLabelNode, в котором текст выровнен по левому краю.

3. Мы отобразили на лейбле количество звезд, взятого из класса GameState.

4. Мы добавили в правый верхний угол сцены лейбл SKLabelNode с текстом, выровненным по правому краю.

5. Мы отобразили на этом лейбле ноль, так как в настоящее время никакого счета ещё нет.

Постройте и запустите. Вы увидите два лейбла в верхней части экрана.

Начисление очков

Наконец пришло время, чтобы начать начислять игроку очки за его тяжкий труд. В Uber Jump набрать очки можно двумя способами: подниматься вверх по сцене и собирать звезды.

Для того, чтобы настроить получение очков за звезды, откройте GameObjectNode.swift и просто добавьте следующий код в нижнюю часть метода collisionWithPlayer класса StarNode сразу перед оператором return:

// Award score
GameState.sharedInstance.score! += (starType == .Normal ? 20 : 100)

И это всё! Мы добавляем 20 очков к счету за обычную звезду и 100 очков за звезду специального типа.

Чтобы отобразить обновленный счет, давайте вернёмся к методу didBeginContact в GameScene.swift. Напомним, что в первой части этого урока в этом методе мы устанавливали значение true для флага с именем updateHUD в случае необходимости изменять отображаемые в HUD значения.

Заключите следующие две строчки кода между фигурных скобок условия if updateHUD {…} внутри этого метода (сейчас там должен быть комментарий с текстом «TODO: Update HUD in Part 2»):

lblStars.text = String(format: "X %d", GameState.sharedInstance.stars)
lblScore.text = String(format: "%d", GameState.sharedInstance.score)

Постройте и запустите. Нажмите, чтобы начать игру. По мере того как вы будете собирать звезды, ваш счет станет увеличиваться.

Чтобы понимать, когда именно нужно начислять очки за путешествие вверх по экрану, вы должны хранить самую высокую точку по оси Y, которой достиг герой в течение текущей игры. Мы будем использовать эти данные, чтобы увеличивать счет только тогда, когда герой добирается до новой наивысшей точки, а не присуждать очки постоянно, пока игрок прыгает вверх и вниз по экрану.

Добавьте следующее свойство класса в файл GameScene.swift:

// Max y reached by player
var maxPlayerY: Int

Узел героя начинает движение, когда его координата по оси Y равна 80, поэтому вы должны присвоить свойству maxPlayerY значение 80, если ,конечно, не хотите дать игроку 80 очков только за то, что начал игру. ;]

Добавьте следующую строчку в метод init(size:) класса GameScene.swift сразу после строки, которая устанавливает цвет фона:

// Reset
maxPlayerY = 80

Чтобы начислять игроку очки за перемещение вверх экрана, откройте начало метода update: и добавьте следующие строки:

// New max height ?
// 1
if Int(player.position.y) > maxPlayerY! {
  // 2
  GameState.sharedInstance.score! += Int(player.position.y) - maxPlayerY!
  // 3
  maxPlayerY = Int(player.position.y)
  // 4
  lblScore.text = String(format: "%d", GameState.sharedInstance.score)
}

Этот код лучше рассмотреть детально:

1. Во-первых, нужно проверить, поднялся ли узел героя выше максимальной отметки, которой достигал в пределах данного цикла игры.

2. Если да, то мы добавляем к счету разницу между текущей высотой и максимальной.

3. Теперь мы устанавливаем новое максимальное значение y.

4. Наконец, мы обновляем лейбл, отображающий счет, в соответствии с новым значением.

Постройте и запустите. Нажмите, чтобы начать. Начните играть и вы увидите, как ваш счет будет увеличиваться по мере продвижения вверх.

Теперь обратим внимание на подсчет звезд. Мы должны увеличивать его каждый раз, когда узел игрока пересекается со звездой, поэтому откройте GameObjectNode.swift и добавьте следующий код в метод collisionWithPlayer класса StarNode сразу после строки, которая начисляет очки:

// Award stars
GameState.sharedInstance.stars! += (starType == .Normal ? 1 : 5)

Это все, что нужно было сделать! Постройте и запустите. Нажмите, чтобы начать. Следите за увеличением количества звезд по мере того, как будете собирать их.

Во время вашей игры вы могли заметить, что когда вы падаете, все пересекаемые героем игровые объекты всё ещё остаются в игре. “Эй!” Вы наверняка думаете: “Я достаточное много играл в Mega Jump, чтобы с уверенностью утверждать, что там такого не было!” Да верно, но это легко исправить.

Напомним, что мы добавляли метод под названием checkNodeRemoval в класс GameObjectNode, который проверяет, нужно ли удалять узел. Пришло время, чтобы вызвать этот метод в каждом кадре.

Добавьте следующий код в метод update класса GameScene.swift, сразу перед строкой, которая проверяет, превышает ли ордината позиции узла героя значение 200:

// Remove game objects that have passed by
foregroundNode.enumerateChildNodesWithName("NODE_PLATFORM", usingBlock: {
  (node, stop) in
  let platform = node as PlatformNode
  platform.checkNodeRemoval(self.player.position.y)
})
 
foregroundNode.enumerateChildNodesWithName("NODE_STAR", usingBlock: {
  (node, stop) in
  let star = node as StarNode
  star.checkNodeRemoval(self.player.position.y)
})

Здесь мы перечисляем все платформы в узле переднего плана и вызываем метод checkNodeRemoval для каждой из них. Потом тоже самое делаем для звёзд.

Постройте и запустите. Нажмите, чтобы начать. Теперь, когда вы будете падать, то не почувствуете под ногами ничего, кроме чистого неба.

Game Over!

Игра заканчивается тогда, когда герой падает в нижнюю часть сцены или поднимается на вершину уровня. В этот момент нам нужно отобразить финальный счет и наивысший балл. Мы осуществим это посредством перехода к сцене конца игры.

Создайте новый Cocoa Touch Class с именем EndGameScene и сделайте его подклассом SKScene.

EndGameScene будет представлять из себя обычный экран, отображающий счет игрока, количество собранных звезд и наивысший балл. Мы добавим все узлы в метод init(size:):, поэтому откройте EndGameScene.swift и замените всё содержимое файла на следующее:

import SpriteKit
 
class EndGameScene: SKScene {
 
  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
  }
 
  override init(size: CGSize) {
    super.init(size: size)
 
    // Stars
    let star = SKSpriteNode(imageNamed: "Star")
    star.position = CGPoint(x: 25, y: self.size.height-30)
    addChild(star)
 
    let lblStars = SKLabelNode(fontNamed: "ChalkboardSE-Bold")
    lblStars.fontSize = 30
    lblStars.fontColor = SKColor.whiteColor()
    lblStars.position = CGPoint(x: 50, y: self.size.height-40)
    lblStars.horizontalAlignmentMode = SKLabelHorizontalAlignmentMode.Left
    lblStars.text = String(format: "X %d", GameState.sharedInstance.stars)
    addChild(lblStars)
 
    // Score
    let lblScore = SKLabelNode(fontNamed: "ChalkboardSE-Bold")
    lblScore.fontSize = 60
    lblScore.fontColor = SKColor.whiteColor()
    lblScore.position = CGPoint(x: self.size.width / 2, y: 300)
    lblScore.horizontalAlignmentMode = SKLabelHorizontalAlignmentMode.Center
    lblScore.text = String(format: "%d", GameState.sharedInstance.score)
    addChild(lblScore)
 
    // High Score
    let lblHighScore = SKLabelNode(fontNamed: "ChalkboardSE-Bold")
    lblHighScore.fontSize = 30
    lblHighScore.fontColor = SKColor.cyanColor()
    lblHighScore.position = CGPoint(x: self.size.width / 2, y: 150)
    lblHighScore.horizontalAlignmentMode = SKLabelHorizontalAlignmentMode.Center
    lblHighScore.text = String(format: "High Score: %d", GameState.sharedInstance.highScore)
    addChild(lblHighScore)
 
    // Try again
    let lblTryAgain = SKLabelNode(fontNamed: "ChalkboardSE-Bold")
    lblTryAgain.fontSize = 30
    lblTryAgain.fontColor = SKColor.whiteColor()
    lblTryAgain.position = CGPoint(x: self.size.width / 2, y: 50)
    lblTryAgain.horizontalAlignmentMode = SKLabelHorizontalAlignmentMode.Center
    lblTryAgain.text = "Tap To Try Again"
    addChild(lblTryAgain)
  }
}

Здесь много кода, но после всего того, что вы сделали в этом уроке, вас уже ничего не должно пугать.

По сути мы создаем три лейбла, которые будут служить для отображения количества собранных звезд, финального счета и наивысшего балла. Мы присваиваем им значения, взятые из синглтона GameState. Мы также добавляем лейбл, который подсказывает пользователю, что ему нужно коснуться экрана для начала новой игры.

Чтобы отслеживать, закончилась игра или нет, добавьте следующую булевую переменную в свойства класса GameScene.swift:

// Game over dude!
var gameOver = false

В конце игры нужно сохранить текущее состояние в синглтон GameState и осуществить переход к новой сцене. Добавьте следующий метод в GameScene.swift:

func endGame() {
  // 1
  gameOver = true
 
  // 2
  // Save stars and high score
  GameState.sharedInstance.saveState()
 
  // 3
  let reveal = SKTransition.fadeWithDuration(0.5)
  let endGameScene = EndGameScene(size: self.size)
  self.view!.presentScene(endGameScene, transition: reveal)
}

Давайте рассмотрим его детально:

1. Сначала мы устанавливаем переменной gameOver значение true.

2. Затем сообщаем синглтону GameState, чтоб он записал состояние игры в файл пользовательских настроек.

3. И, наконец, мы создаём экземпляр класса EndGameScene и делаем переход к нему путём затухания экрана в течение 0,5 секунд.

Метод endGame нужно вызывать, когда узел героя либо падает на дно экрана, либо достигает максимальной высоты уровня. Мы проверяем оба эти случая в методе update главной сцены.

Добавьте следующий код в тот же класс GameScene.swift, в конец метода update:

// 1
// Check if we've finished the level
if Int(player.position.y) > endLevelY {
  endGame()
}
 
// 2
// Check if we've fallen too far
if Int(player.position.y) < maxPlayerY - 800 {
  endGame()
}

Взгляните на эти проверки:

Помните, мы загружали endLevelY из листа свойств? Это то значение координаты Y, при которой игрок должен заканчивать уровень.

Если узел героя падает более чем на 800 ниже максимальной отметки, которой он достиг, то игра заканчивается.

Прежде чем запустить игру для того, чтобы увидеть сцену конца игры, мы должны убедиться, что метод endGame не вызывается более одного раза. А это произойдёт, как только метод update() сработает в следующем кадре.

Добавьте следующую строку в начало метода Update () в GameScene.swift:

if gameOver {
  return
}

Теперь при вызове метода update(), прежде чем сделать переход, он проверяет, закончилась ли игра.

Постройте и запустите. Нажмите, чтобы начать, поиграйте немного, а затем дайте «ультра прыгуну» упасть. Произойдёт переход на сцену конца игры.

Перезапуск

Чтобы иметь возможность перезапустить игру, находясь на конечной сцене, мы должны модифицировать класс EndGameScene так, чтобы он по событию касания осуществлял переход обратно на основную сцену.

Откройте EndGameScene.swift и добавьте следующий метод в этот класс для обработки касаний:

override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
  // Transition back to the Game
  let reveal = SKTransition.fadeWithDuration(0.5)
  let gameScene = GameScene(size: self.size)
  self.view!.presentScene(gameScene, transition: reveal)
}

Этот код просто создаёт переход на новую сцену GameScene подобно тому, как он осуществлялся при первом запуске приложения.

Остался последний штрих и всё будет готово! Откройте GameScene.swift. В методе init(size:), там где мы сбрасывали значение maxPlayerY, добавьте следующий код:

GameState.sharedInstance.score = 0
gameOver = false

Мы обнуляем счёт в синглетоне GameState, а также сбрасываем флаг GameOver, чтобы игра могла начаться заново.

Постройте и запустите. Нажмите, чтобы начать и играйте. А теперь постарайтесь побить самый высокий балл! ;]

Что можно сделать еще?

Поздравляю, вы создали игру в стиле Mega Jump!

Под статьей вы найдете ссылку на готовый проект с полным кодом уроков.

В четырех частях мы охватили весь процесс создания игры на физическом движке. Вы многое узнали о том, как настроить обнаружения столкновений и как построить свою игровую логику для обработки столкновений.

Но вы можете сделать гораздо больше! Откройте файл конфигурации plist и подумайте о новых уровнях и возможностях, которые сможете реализовать. Просто скопируйте исходный plist и создавайте любое количество уровней, меняя конфигурацию внутри файла.

Сыграйте в Mega Jump и вдохновитесь! Сможете ли вы воплотить идеи, которые будут лучше, чем в оригинальной игре?

И последнее, но не менее важное: если вы хотите узнать больше о Sprite Kit, прочитайте книгу iOS Games by Tutorials, в которой вы узнаете, как сделать пять полных игр: от «зомби экшинов» до автомобильных гонок и перестрелок в космосе!

И, конечно, если у вас есть какие-либо вопросы или комментарии, то пожалуйста, присоединяйтесь к обсуждению.

Скачать готовый проект и код игры.

Добро пожаловать на третью часть урока, в котором мы создаем игру в стиле Mega Jump на Sprite Kit и Swift. В предыдущих части 1 и части 2 мы создали игру на движке Sprite Kit под названием Uber Jump. Мы добавили графику, спрайт героя и некоторые элементы геймплея.
В третьей части мы будем использовать этот фундамент для построения полного уровня игры, включая систему подсчета очков. Мы также добавим поддержку акселерометра, чтобы наш «ультра прыгун» мог двигаться из стороны в сторону и вверх и вниз. Когда мы все закончим, вы будете иметь абсолютно полноценную игру, которую сможете потом расширять в разных направлениях. Как и первые части урока, этот материал потребует от вас знания основ Sprite Kit. Итак, добро пожаловать на новый уровень!

Продолжение

Оригинал статьи на английском языке доступен здесь.

Скачайте полную копию проекта из первой части, если вы не делали его сами.
Наш уровень будет содержать много звезд и платформ. Чтобы не структурировать данные вручную, скачайте этот файл конфигурации уровня, затем перетащите Level01.plist в ваш проект Xcode. Убедитесь, что поставлена галочка для опции “Destination: Copy items if needed” и выбран таргет UberJump.

Откройте Level01.plist и изучите его содержимое. По сути он состоит из трех элементов:

- EndY определяет высоту, которую герой должен достичь, чтобы закончить уровень.
- Stars определяет положение всех звезд на уровне.
- Platforms определяет положение всех платформ в уровне.

Элементы Stars и Platforms содержат в себе по два вложенных элемента:

- Patterns содержит ряд шаблонов для звезд и платформ.
- Positions определяет месторасположение шаблонов звезд и платформ по всей площади уровня.

Для лучшего понимания структуры файла, откройте элемент Stars/Positions/Item 0. Он содержит три вложенных элемента, в которых находится информация такого содержания: звезды нужно расположить крест-накрест в точке с координатами 160 и 240.

Теперь взгляните на Patterns/Cross, и вы увидите шаблон, содержащий пять элементов, в том числе координаты X и Y относительно позиции, заданной в Stars/Positions, а также тип звезды. Нормальный тип обозначен нулём, а специальный – единицей.

Это достаточно удобный способ многоразового использования шаблонов звезд и платформ без необходимости задавать позицию в коде для каждого отдельного объекта.

Загрузка уровня с данными

Чтобы добавить возможность загрузки параметров уровня из файла Level01.plist, откройте GameScene.swift и добавьте к классу следующее свойство:

// Height at which level ends
let endLevelY = 0

ЕndLevelY будет хранить высоту или ординату, которой игрок должен будет достичь, чтобы закончить уровень.
Вставьте следующий код в метод init(size:), сразу перед строчками, которые создают и добавляют платформу:

// Load the level
let levelPlist = NSBundle.mainBundle().pathForResource("Level01", ofType: "plist")
let levelData = NSDictionary(contentsOfFile: levelPlist!)!
 
// Height at which the player ends the level
endLevelY = levelData["EndY"]!.integerValue!

Этот код загружает данные из списка свойств в словарь с названием levelData, а потом берет оттуда значение свойства EndY и сохраняет его в переменную endLevelY.
Теперь займемся звездами и платформами. Начнём с платформ: в методе init(size:), замените следующие строки:

// Add a platform
let platform = createPlatformAtPosition(CGPoint(x: 160, y: 320), ofType: .Normal)
foregroundNode.addChild(platform)

этим кодом:

// Add the platforms
let platforms = levelData["Platforms"] as NSDictionary
let platformPatterns = platforms["Patterns"] as NSDictionary
let platformPositions = platforms["Positions"] as [NSDictionary]
 
for platformPosition in platformPositions {
  let patternX = platformPosition["x"]?.floatValue
  let patternY = platformPosition["y"]?.floatValue
  let pattern = platformPosition["pattern"] as NSString
 
  // Look up the pattern
  let platformPattern = platformPatterns[pattern] as [NSDictionary]
  for platformPoint in platformPattern {
    let x = platformPoint["x"]?.floatValue
    let y = platformPoint["y"]?.floatValue
    let type = PlatformType(rawValue: platformPoint["type"]!.integerValue)
    let positionX = CGFloat(x! + patternX!)
    let positionY = CGFloat(y! + patternY!)
    let platformNode = createPlatformAtPosition(CGPoint(x: positionX, y: positionY), ofType: type!)
    foregroundNode.addChild(platformNode)
  }
}

Здесь очень много всего происходит, но эти вещи достаточно просты. Мы загрузили словарь платформ (Platforms) из levelData, а затем запустили цикл позиций платформ из этого словаря. Для каждого элемента мы получили соответствующий шаблон и инициировали экземпляр PlatformNode нужного типа с заданными позициями X и Y. И, наконец, мы добавили все узлы платформ в узел переднего плана, который должен содержать все игровые объекты.
Постройте и запустите. Вы увидите ряд из трех платформ, выровненных по горизонтали, которые имеют тип “Triple” , заданный в файле в Level01.plist.

Теперь сделайте то же самое для звезд. Внутри GameScene.swift, замените следующую строку в init(size:):

// Add a star
let star = createStarAtPosition(CGPoint(x: 160, y: 220), ofType: .Special)
foregroundNode.addChild(star)

кодом:

// Add the stars
let stars = levelData["Stars"] as NSDictionary
let starPatterns = stars["Patterns"] as NSDictionary
let starPositions = stars["Positions"] as [NSDictionary]
 
for starPosition in starPositions {
  let patternX = starPosition["x"]?.floatValue
  let patternY = starPosition["y"]?.floatValue
  let pattern = starPosition["pattern"] as NSString
 
  // Look up the pattern
  let starPattern = starPatterns[pattern] as [NSDictionary]
  for starPoint in starPattern {
    let x = starPoint["x"]?.floatValue
    let y = starPoint["y"]?.floatValue
    let type = StarType(rawValue: starPoint["type"]!.integerValue)
    let positionX = CGFloat(x! + patternX!)
    let positionY = CGFloat(y! + patternY!)
    let starNode = createStarAtPosition(CGPoint(x: positionX, y: positionY), ofType: type!)
    foregroundNode.addChild(starNode)
  }
}

Здесь всё в точности тоже самое, что мы сделали при создании платформ, но в этом случае мы используем словарь Stars вместо словаря Platforms.
Постройте и запустите. Это уже становится похожим на настоящую игру!

Слой среднего плана

В графическом плане можно сделать еще одну вещь, которая добавит игре иллюзию объема – это слой среднего плана. Он будет представлять собой узел, содержащий графику декораций.
Добавьте следующий метод в GameScene.swift:

func createMidgroundNode() -> SKNode {
  // Create the node
  let theMidgroundNode = SKNode()
  var anchor: CGPoint!
  var xPosition: CGFloat!
 
  // 1
  // Add some branches to the midground
  for index in 0...9 {
    var spriteName: String
    // 2
    let r = arc4random() % 2
    if r > 0 {
      spriteName = "BranchRight"
      anchor = CGPoint(x: 1.0, y: 0.5)
      xPosition = self.size.width
    } else {
      spriteName = "BranchLeft"
      anchor = CGPoint(x: 0.0, y: 0.5)
      xPosition = 0.0
    }
    // 3
    let branchNode = SKSpriteNode(imageNamed: spriteName)
    branchNode.anchorPoint = anchor
    branchNode.position = CGPoint(x: xPosition, y: 500.0 * CGFloat(index))
    theMidgroundNode.addChild(branchNode)
  }
 
  // Return the completed midground node
  return theMidgroundNode
}

Рассмотрим этот код подробнее:

1. Мы добавляем в midgroundNode десять веток, расположенных равномерно по всему уровню.
2. Есть два различных изображения: на одном ветки растут из левой части экрана, на другом – из правой. Мы берем одно случайное из них.
3. Мы располагаем ветки с интервалом в 500 точек по оси у в узле среднего плана.

Теперь добавим узел среднего плана на сцену, вставив следующий код в init(size:), сразу после строки, которая добавляет фоновый узел:

// Midground
midgroundNode = createMidgroundNode()
addChild(midgroundNode)

Постройте и запустите.
Смотрите! Появились ветви разного вида, а некоторые даже с розовыми бабочками!

Примечание: розовые бабочки появляются, если случайно выбранная ветвь является той, которая нарисована для правой стороны экрана. Изображение для левой ветви не содержит бабочек.

Нажмите, чтобы начать игру, и вы увидите спрайт героя, взлетающего вверх экрана. Однако, когда «ультра прыгун» поднимается, игровой мир пока остается на месте.

Слои переднего, среднего и заднего плана должны двигаться вместе с узлом героя, чтобы удерживать его спрайт в центре экрана. С этим мы и собираемся разобраться в следующей главе.

Параллакс

Чтобы добавить в свою игру эффект параллакса, мы будем перемещать узлы переднего, среднего и заднего плана с различными скоростями по мере того, как герой будет путешествовать вверх и вниз по сцене. Sprite Kit в каждом кадре вызывает метод update() (обновление) для нашей сцены, поэтому это самое место, чтобы реализовать логику по обеспечению плавной анимации.

Откройте GameScene.swift и добавьте следующий метод:

override func update(currentTime: NSTimeInterval) {
  // Calculate player y offset
  if player.position.y > 200.0 {
    backgroundNode.position = CGPoint(x: 0.0, y: -((player.position.y - 200.0)/10))
    midgroundNode.position = CGPoint(x: 0.0, y: -((player.position.y - 200.0)/4))
    foregroundNode.position = CGPoint(x: 0.0, y: -(player.position.y - 200.0))
  }
}

Мы проверяем, чтоб узел героя поднялся по экрану более чем 200 точек, потому что в противном случае мы не хотим перемещать фон. Если условие выполняется, мы двигаем три узла вниз с различными скоростями, чтобы создать эффект параллакса:

- Перемещаем узел переднего плана с той же скоростью, что и узел героя, фактически не давая герою выходить за пределы экрана.
- Перемещаем узел среднего плана со скоростью, составляющей 25% от скорости узла героя, потому что этот слой должен быть дальше от зрителя.
- Перемещаем фоновый узел со скоростью, составляющей 10% от скорости узла героя, потому что он должен быть еще дальше.

Постройте и запустите. Нажмите, чтобы начать игру. Вы увидите, что все слои теперь перемещаются с героем, а различные скорости узлов фонового и среднего плана узлов производят очень приятный эффект параллакса.

Отличная работа! Но ещё рано почивать на лаврах. Для того, чтобы допрыгнуть до звёзд, нужно сначала порыть землю.

Движение с акселерометром

Пришло время задействовать акселерометр. Движение вдоль вертикальной оси у нас отлажено хорошо, но что насчёт движения по горизонтальной оси? Так же, как в Mega Jump, пользователь будет управлять своим «ультра прыгуном» с помощью акселерометра.

Примечание: чтобы тестировать акселерометр, вам нужно будет запускать игру на реальном устройстве. iPhone Simulator не отрабатывает акселерометр.

Для обработки входных сигналов акселерометра потребуется библиотека Core Motion, поэтому в верхней части GameScene.swift добавьте следующую строчку:

import CoreMotion

Затем добавьте следующие свойства к классу GameScene:

// Motion manager for accelerometer
let motionManager: CMMotionManager = CMMotionManager()
 
// Acceleration value from accelerometer
var xAcceleration: CGFloat = 0.0

Мы собираемся использовать MotionManager для доступа к данным акселерометра устройства, а также будем хранить последнее расчетное значение ускорения в переменной xAcceleration, которая нам понадобится позже при задании скорость узла героя по оси X.
Чтобы создать экземпляр CMMotionManager, добавьте следующий код в метод init(size:) сразу после строки, которая добавляет tapToStartNode в HUD:

// CoreMotion
// 1
motionManager.accelerometerUpdateInterval = 0.2
// 2
motionManager.startAccelerometerUpdatesToQueue(NSOperationQueue.currentQueue(), withHandler: {
  (accelerometerData: CMAccelerometerData!, error: NSError!) in
  // 3
  let acceleration = accelerometerData.acceleration
  // 4
  self.xAcceleration = (CGFloat(acceleration.x) * 0.75) + (self.xAcceleration * 0.25)
})

Здесь очень много всего происходит, поэтому давайте окунёмся поглубже:

1. Свойство accelerometerUpdateInterval определяет количество секунд между обновлениями значений акселерометра. Значение 0,2 обеспечивает наиболее плавную частоту обновления.
2. Мы запускаем акселерометр и задаём блок кода для выполнения во время каждого обновления значений акселерометра.
3. Внутри блока мы получаем информацию, связанную с ускорением, из последних данных акселерометра, переданных в блок.
4. Здесь мы вычисляем ускорение узла героя по оси X. Можно получить это значение непосредственно из данных акселерометра, но движение будет гораздо плавнее, если использовать значение, сложив три четверти ускорения акселерометра вдоль оси X и одну четверть текущего ускорения по той же оси.

Теперь, когда у нас есть значение ускорения по оси абсцисс, мы можем использовать его для задания горизонтальной скорости узла героя.
Так как вы непосредственно будете управлять скоростью узла героя, важно, чтобы Sprite Kit в первую очередь обрабатывал физику.

У Sprite Kit есть метод, называемый didSimulatePhysics, который подойдёт для этой цели. Sprite Kit также будет вызвать этот метод один раз за кадр после того, как физика была просчитана и выполнена.
Добавьте следующий метод в GameScene.swift:

override func didSimulatePhysics() {
  // 1
  // Set velocity based on x-axis acceleration
  player.physicsBody?.velocity = CGVector(dx: xAcceleration * 400.0, dy: player.physicsBody!.velocity.dy)
  // 2
  // Check x bounds
  if player.position.x < -20.0 {
    player.position = CGPoint(x: self.size.width + 20.0, y: player.position.y)
  } else if (player.position.x > self.size.width + 20.0) {
    player.position = CGPoint(x: -20.0, y: player.position.y)
  }
}

Здесь происходит несколько вещей:

1. Мы изменяем горизонтальную составляющую значения скорости узла героя, используя значение xAcceleration. Далее умножаем её на 400, потому что масштаб акселерометра не соответствует масштабу реальной физики и, увеличивая значение, мы получаем более реалистичный эффект. Значение скорости по оси Y мы оставляем без изменений, потому что акселерометр на него никоем образом не влияет.
2. В Mega Jump, когда герой выходит за пределы экрана слева или справа, он потом возвращается с противоположной стороны. Мы используем то же поведение здесь, проверяя границы экрана и оставляя границу в 20 точек за пределами экрана.

Постройте и запустите на вашем устройстве. Используйте акселерометр, чтобы поднять спрайт героя насколько высоко, насколько сможете!

Система подсчета очков

В целом наша игра Uber Jump будет включать в себя три вида информации, имеющей отношение к герою:

1. Текущий счет. Счёт будет начинаться с нуля. Чем выше герой добирается, тем больше очков добавляется к вашему счету. Вы также будете получать очки за каждую собранную звезду.
2. Наивысший балл. В конце каждого цикла игры всегда будут финальные очки. Uber Jump будет записывать самые высокие значения в файл с настройками пользователя (user defaults), для чтобы игрок знал рекорды, которые нужно побить.
3. Звезды. В отличие от текущего счета, который будет сбрасывается в начале каждой игры, звезды героя будут накапливаться от игры к игре. В будущей версии Uber Jump вы можете сделать из звезд специальную валюту игры, за которую пользователи смогут покупать обновления и дополнительные опции. Мы не будем этого делать в рамках текущего урока, но добавим такую возможность на случай, если вы захотите это сделать по своему усмотрению.

Мы собираемся сохранять текущий счет, наивысший балл и количество собранных звезд в классе синглетоне под названием GameState. Этот класс в свою очередь будет записывать наивысший балл и количество звезд в файл на устройстве для того, чтобы значения хранились между запусками игры.

Создайте новый iOS/Source/Swift File с именем GameState. Добавьте следующее описание класса и свойства в GameState.swift:

class GameState {
  var score: Int
  var highScore: Int
  var stars: Int
 
  class var sharedInstance: GameState {
    struct Singleton {
      static let instance = GameState()
    }
 
    return Singleton.instance
  }
}

Заданные три свойства будут предоставлять доступ к текущему счету, наивысшему баллу и к количеству звезд. Переменная класса sharedInstance будет давать доступ к единственному экземпляру класса GameState.
Нам также необходим метод для инициализации GameState, который будет обнулять текущий счет, а также загружать наивысший балл (если такой существует) и количество звезд из файла с настройками пользователя.
Добавьте следующий метод инициализации для GameState.swift:

init() {
  // Init
  score = 0
  highScore = 0
  stars = 0
 
  // Load game state
  let defaults = NSUserDefaults.standardUserDefaults()
 
  highScore = defaults.integerForKey("highScore")
  stars = defaults.integerForKey("stars")
}

Использование класса NSUserDefaults является простым способом для хранения небольшого количества данных на устройстве. Он предназначен для пользовательских настроек, но в этом примере он служит для хранения наивысшего балла и количества звезд. В реальном приложении, вы скорее всего захотите использовать что-то более надежное, чем NSUserDefaults, чтобы никто не смог с легкостью поменять хранимые там данные и записать себе больше звезд чем он заработал!

Примечание: Для получения более подробной информации по хранению данных игры, посмотрите урок How to Save your Game Data.

Для хранения заданных значений нам понадобится метод в GameState. Добавьте следующий метод в GameState.swift:

func saveState() {
  // Update highScore if the current score is greater
  highScore = max(score, highScore)
 
  // Store in user defaults
  let defaults = NSUserDefaults.standardUserDefaults()
  defaults.setInteger(highScore, forKey: "highScore")
  defaults.setInteger(stars, forKey: "stars")
  NSUserDefaults.standardUserDefaults().synchronize()
}

Вот класс GameState, который синхронизируется с хранилищем на устройстве.

У нас получился почти работающий проект, в следующей финальной части, мы доведем все до ума получим настоящее игровое приложение!

Мы продолжаем учебный курс по созданию игры для iPhone на Sprite Kit и Swift. В первой части у нас получилось создать игровую сцену на которой находится наш герой, и даже заставить его подчиняться законам гравитации. В этом уроке мы научим гороя взаимодействовать с внешним миром, ловить “звезды” и подпрыгивать на платформах…

“Нажмите, чтобы начать”

Оригинал статьи на английском языке можно прочитать здесь.
Теперь, когда гравитация в игре работает, нужно сделать физическое тело героя неподвижным до тех пор, пока пользователь не решит начать игру. Внутри файла GameScene.swift найдите строку в методе createPlayer, которая устанавливает свойство dynamic физическому телу объекта playerNode. Измените его значение на false, так как показано здесь:

playerNode.physicsBody?.dynamic = false

Мы собираемся написать код, который позволит пользователю начать игру нажав на экран. И об этом его нужно предупредить какой-нибудь надписью. Например: “Tap to start” (Нажмите, чтобы начать). Давайте разместим эту инструкцию на экране.

Поскольку инструкции будут располагаться в слое HUD, создайте его первым. В методе init(size:) сразу после места, где вы добавили узел переднего плана на сцену, вставьте следующий код:

// HUD
hudNode = SKNode()
addChild(hudNode)

Графические ресурсы включают в себя изображение, на которое нужно нажать для начала игры. По этому добавьте следующую переменную к свойствам в верхней часть GameScene.swift:

// Tap To Start node
let tapToStartNode = SKSpriteNode(imageNamed: "TapToStart")

Чтобы отобразить созданный узел, добавьте следующий код в метод init(size:) сразу после строки, которая добавляет узел героя:

// Tap to Start
tapToStartNode.position = CGPoint(x: self.size.width / 2, y: 180.0)
hudNode.addChild(tapToStartNode)

Постройте и запустите, чтобы увидеть надпись “Tap to start” чуть выше спрайта героя:

Для обработки касаний и для начала игры, добавьте следующий метод в класс GameScene.swift:

override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
  // 1
  // If we're already playing, ignore touches
  if player.physicsBody!.dynamic {
    return
  }
 
  // 2
  // Remove the Tap to Start node
  tapToStartNode.removeFromParent()
 
  // 3
  // Start the player by putting them into the physics simulation
  player.physicsBody?.dynamic = true
 
  // 4
  player.physicsBody?.applyImpulse(CGVector(dx: 0.0, dy: 20.0))
}

Давайте рассмотрим этот метод детально:

1. Мы должны убедится в том, что узел героя стал динамическим. Если это так, то просто игнорируем событие касания.

2. Удаляем узел с надписью “Tap to start”.

3. Делаем физическое тело узла героя динамическим для того, чтобы физический движок мог влиять на него.

4. Сообщаем узлу героя начальный импульс, направленный вверх, чтобы он начал движение.

Постройте и запустите. При нажатии на экран, надпись «Tab to start» исчезнет, а спрайт героя подбросится вверх, но ненадолго – сила тяжести берет своё.

Игровые объекты: дотянуться до звезд!

Чтобы вашему герою было чем заняться, кроме как просто прыгать вверх, самое время добавить “звезды”. Звезды играют важную роль в Uber Jump: именно их игрок должен собирать для перехода на следующий уровень.

Для начала вам достаточно будет создать в игре одну звезду и заставить её полностью функционировать, а в следующей части урока мы завершим уже весь уровень.

По сценарию игры Uber Jump, как и Mega Jump, когда спрайт героя поднимается на определенное расстояние выше звезды, платформы или любого другого объекта, этот объект удаляется со сцены. Так как и узлы и звезды и платформы попадают под это условие, имеет смысл создать подкласс SKNode для всех игровых объектов.

Создайте новый класс Cocoa Touch Class с названием GameObjectNode и сделайте его подклассом SKNode. Убедитесь, что в качестве языка установлен Swift.

Класс GameObjectNode будет включать в себя следующий функционал:

1. Удаление из сцены того объекта, от которого узел героя отдалился на расстояние, больше чем заданное.

2. Обнаружение столкновений между узлом героя и объектом. Этот метод вернет булевое значение, которое будет уведомлять, произошло ли пересечение героя с каким-либо объектом игры, которое приведет к необходимости обновления слоя HUD. Например, если игрок набрал очки.

Замените код в GameObjectNode.swift на следующий:

import SpriteKit
 
class GameObjectNode: SKNode {
  func collisionWithPlayer(player: SKNode) -> Bool {
    return false
  }
 
  func checkNodeRemoval(playerY: CGFloat) {
    if playerY > self.position.y + 300.0 {
      self.removeFromParent()
    }
  }
}

Мы вызываем метод collisionWithPlayer всякий раз, когда узел героя сталкивается с объектом, а также вызываем checkNodeRemoval в каждом кадре, чтоб была возможность сразу удалить ненужный узел со сцены.

В классе GameObjectNode метод collisionWithPlayer представляет из себя просто заглушку. Мы зададим полный метод отдельно в каждом из подклассов, которые будут созданы для ваших игровых объектов.

Метод checkNodeRemoval проверяет, переместился ли узел героя на расстояние более чем 300 точек от этого узла. Если это так, то метод удаляет узел из его родительского узла и, таким образом, убирает его со сцены.

Класс звезды

Теперь, когда у нас есть базовый класс для интерактивных узлов игры, мы можем создать класс для звезд. Чтобы не усложнять, добавим все подклассы GameObjectNode сразу в файл GameObjectNode.swift. Добавьте следующий код после класса GameObjectNode.

class StarNode: GameObjectNode {
  override func collisionWithPlayer(player: SKNode) -> Bool {
    // Boost the player up
    player.physicsBody?.velocity = CGVector(dx: player.physicsBody!.velocity.dx, dy: 400.0)
 
    // Remove this Star
    self.removeFromParent()
 
    // The HUD needs updating to show the new stars and score
    return true
  }
}

Столкновение со звездой подбрасывает узел героя вверх по оси ординат. Вы можете спросить: “почему для этого мы не используем силу или импульс физического движка?”

Если бы мы задействовали силу или импульс, нужный эффект был бы не всегда. Например, если узел героя двигается вниз экрана и врезается в звезду, то сила воздействия на героя будет гораздо меньше, чем когда он двигается вверх.

Следующая диаграмма очень наглядно это показывает:

Решение данной проблемы заключается в непосредственном изменении скорости узла игрока. Как известно, вектор скорости складывается из горизонтальной и вертикальной составляющих.

Скорость по оси X не должна изменяться, так как на неё влияет только акселерометр, который мы реализуем позже. В вышеуказанном способе при столкновении мы устанавливаем фиксированное значение скорости вертикальной проекции – 400. Чтобы столкновение имело одинаковые последствия независимо от того, что делал игрок перед тем как столкнуться со звездой.

Откройте GameScene.swift и добавьте следующий метод:

func createStarAtPosition(position: CGPoint) -> StarNode {
  // 1
  let node = StarNode()
  let thePosition = CGPoint(x: position.x * scaleFactor, y: position.y)
  node.position = thePosition
  node.name = "NODE_STAR"
 
  // 2
  var sprite: SKSpriteNode
  sprite = SKSpriteNode(imageNamed: "Star")
  node.addChild(sprite)
 
  // 3
  node.physicsBody = SKPhysicsBody(circleOfRadius: sprite.size.width / 2)
 
  // 4
  node.physicsBody?.dynamic = false
 
  return node
}

Код, представленный выше, должен быть вам уже знаком:

1. Мы создаем экземпляр класса StarNode и устанавливаем его позицию.

2. Затем добавляем графику звезды, используя SKSpriteNode.

3. Добавляем к узлу физическое тело в форме круга, которое нам понадобится для обнаружения столкновений с другими объектами игры.

4. Наконец, мы делаем физическое тело статическим, потому что не хотим, чтобы гравитация или любые другие физические симуляции влияли на звезды.

Теперь добавьте следующий код в метод init(size:), сразу перед тем местом, где мы создали узел героя. Мы хотим, чтобы звезды размещались позади игрока, но тоже находились на узле переднего плана, поэтому мы должны добавить их раньше, чем узел игрока.

// Add a star
let star = createStarAtPosition(CGPoint(x: 160, y: 220))
foregroundNode.addChild(star)

Постройте и запустите игру. Нажмите на кнопку начала игры и посмотрите, как спрайт героя будет сталкиваться со звездой.

Наш Ульта прыгун ударился головой об звезду. Это было не по плану! Как вы думаете, почему так произошло? Попробуйте догадаться.

А вот решение:

Физический движок обрабатывает столкновения между героем и узлами звезд. Физическое тело узла героя пересекает физическое тело узла звезды, которое является статическим и, следовательно, неподвижным. Узел звезды останавливает движение узла игрока.

Обнаружение столкновений и битовые маски

Для обнаружения столкновений между героем и узлами звезд, нам нужно получить событие столкновения и вызвать метод collisionWithPlayer класса GameObjectNode.

Самое время рассмотреть тему пересечения битовых масок в Sprite Kit.

Для сообщения физическим телам информации о столкновениях существуют три свойства, связанные с битовыми масками, которые вы можете использовать, чтобы определить способ взаимодействия физического тела с другими физическими телами игры.

1. categoryBitMask определяет категорию столкновения, к которой относится физическое тело.

2. collisionBitMask устанавливает категорию столкновения тел, с которыми данное тело будет пересекаться. Здесь слово “пересекаться” означает, что объекты будут именно сталкиваться друг с другом. Например, играя в качестве стрелка от третьего лица, вам будет нужно, чтобы спрайт героя сталкивался с вражескими спрайтами, но проходил сквозь спрайты других игроков.

3. contactTestBitMask сообщает движку Sprite Kit, чтобы он уведомлял вас, когда данное физическое тело вступает в контакт с физическими телами, принадлежащими к одной из указанных вами категорий. Например, в нашей игре мы хотим, чтобы Sprite Kit сообщал нам, когда спрайт игрока касается звезды или платформы. Используя правильные сочетания настроек для contactTestBitMask и collisionBitMask, можно запрограммировать Sprite Kit так, чтобы объекты проходили друг сквозь друга, а он уведомлял вас, когда это происходит. Таким образом мы можем инициировать события.

Первое, что нужно сделать, это задать свои категории. Откройте GameObjectNode.swift и добавьте следующую структуру над определениями классов:

struct CollisionCategoryBitmask {
  static let Player: UInt32 = 0x00
  static let Star: UInt32 = 0x01
  static let Platform: UInt32 = 0x02
}

Вернитесь в GameScene.swift. Чтобы задать поведение героя во время столкновений, добавьте следующий код в нижнюю часть метода createPlayer, сразу перед оператором return:

// 1
playerNode.physicsBody?.usesPreciseCollisionDetection = true
// 2
playerNode.physicsBody?.categoryBitMask = CollisionCategoryBitmask.Player
// 3
playerNode.physicsBody?.collisionBitMask = 0
// 4
playerNode.physicsBody?.contactTestBitMask = CollisionCategoryBitmask.Star | CollisionCategoryBitmask.Platform

Давайте повнимательней рассмотрим этот блока кода:

1. Так как эта игра на быстрое движение, Sprite Kit должен использовать точное обнаружение столкновений для физического тела узла героя. Ведь весь сюжет Uber Jump строится на этих столкновениях. Поэтому нам нужно, чтобы они фиксировались настолько точно, насколько возможно! (будет задействовано несколько циклов процессора)

2. Мы назначаем категорию битовой маски физического тела. Она относится к категории CollisionCategoryPlayer.

3. Приравняв collisionBitMask к нулю, мы сообщаем Sprite Kit, что не хотим, чтобы он имитировал какие-либо столкновения узла игрока. Это потому, что мы собираемся обрабатывать эти столкновения сами!

4. Мы сообщаем Sprite Kit, что хотим получать уведомления, когда узел героя будет касаться каких-либо звезд или платформ.

Теперь настроим узел звезды. Добавьте следующий код в нижней части метода createStarAtPosition перед оператором return:

node.physicsBody?.categoryBitMask = CollisionCategoryBitmask.Star
node.physicsBody?.collisionBitMask = 0

Здесь всё аналогично настройке узла героя. Мы назначаем категорию звезды и обнуляем свойство collisionBitMask, поэтому она не будет ни с чем сталкиваться. Однако здесь мы не назначаем contactTestBitMask, это значит, что Sprite Kit не будет уведомлять нас, когда какой-либо объект будет касаться звезды. Мы ведь уже поручили Sprite Kit отправлять уведомления при соприкосновении героя со звездой, а кроме звезды он ни с чем соприкасаться не будет, поэтому нет никакой необходимости отправлять уведомления со стороны звезды.

Sprite Kit посылает уведомления о контактах выбранных нами узлов, вызывая метод didBeginContact делегата SKPhysicsContactDelegate. В качестве делегата физического мира установите саму сцену, добавив протокол SKPhysicsContactDelegate к определению класса GameScene. Это должно выглядеть примерно так:

class GameScene: SKScene, SKPhysicsContactDelegate {
  // Layered Nodes
  ...

Теперь назначьте сцену делегатом для получения контактных уведомлений, добавив следующую строку в init(size:), сразу после строки, которая устанавливает гравитацию:

// Set contact delegate
physicsWorld.contactDelegate = self

И, наконец, добавьте следующий метод в GameScene.swift для обработки событий столкновений:

func didBeginContact(contact: SKPhysicsContact) {
  // 1
  var updateHUD = false
 
  // 2
  let whichNode = (contact.bodyA.node != player) ? contact.bodyA.node : contact.bodyB.node
  let other = whichNode as GameObjectNode
 
  // 3
  updateHUD = other.collisionWithPlayer(player)
 
  // Update the HUD if necessary
  if updateHUD {
    // 4 TODO: Update HUD in Part 2
  }
}

Давайте рассмотрим этот код поподробнее:

1. Мы инициализируем флаг updateHUD, который будем использовать в конце метода, чтобы обновлять HUD во время этих столкновений и подсчитывать очки.

2. SKPhysicsContact не гарантирует, какое физическое тело выступит в роли bodyA, а какое в роли bodyB. Но мы знаем, что все столкновения в этой игре будут между узлом героя и узлом GameObjectNode. Поэтому эта строка определяет, какой из них не является узлом героя.

3. После того, как мы определили, какой объект не является узлом героя, мы вызываем метод collisionWithPlayer: в классе GameObjectNode.

4. Здесь мы обновляем HUD, если это требуется. Реализацию HUD мы будем делать во второй части урока, поэтому здесь кроме комментария пока ничего нет.

Постройте и запустите игру. Нажмите, чтобы начать. При столкновении звезда подбрасывает спрайт героя на определенную высоту, а затем удаляется со сцены. Хорошая работа!

Ну что, было проделано много тяжелой работы! Возьмем заслуженный перерыв. В следующем разделе нам предстоит добавить новый типы звезды uber star, а также звуковой эффект.

Примечание: Если вы хотите узнать больше об определении контактов и столкновений в Sprite Kit, то изучите руководство “iOS Games by Tutorials“, в котором содержится три больших главы по физике движка.

Несколько видов звезд

Uber Jump будет содержать два вида звезд: те, которые добавляют одно очко и специальные звезды, добавляющие сразу пять очков. Звезда каждого типа будет иметь свою графику. Идентифицировать тип звезды нам поможет коллекция в классе StarNode.

В верхнюю часть GameObjectNode.swift добавьте следующую коллекцию:

enum StarType: Int {
  case Normal = 0
  case Special
}

Для хранения типа звезды, добавьте следующее свойство в верхнюю часть класса StarNode:

var starType: StarType!

Теперь при создании звезды нам нужно будет указывать её тип, поэтому в GameScene.swift добавьте параметр starType к сигнатуре метода createStarAtPosition:, чтобы это выглядело так:

func createStarAtPosition(position: CGPoint, ofType type: StarType) -> StarNode {

Внутри createStarAtPosition(position: ofType:), замените три строчки кода (которые создают и добавляют SKSpriteNode) на следующие:

node.starType = type
var sprite: SKSpriteNode
if type == .Special {
  sprite = SKSpriteNode(imageNamed: "StarSpecial")
} else {
  sprite = SKSpriteNode(imageNamed: "Star")
}
node.addChild(sprite)

Сначала мы установили тип звезды. Затем, проверяем тип при создании спрайта, чтобы добавить соответствующую картинку.

Осталось только указать тип звезды при её создании. В методе init(size:) класса GameScene.swift найдите строку, в которой вызываем createStarAtPosition и измените его следующим образом:

let star = createStarAtPosition(CGPoint(x: 160, y: 220), ofType: .Special)

Назначаем нашей звезде тип StarType.Special.

Постройте запустите. Наша звезда стала розовой! Позже мы добавим систему подсчета очков и различия в типах звезд станут более понятными.

Звон! Добавление звукового эффекта

Было бы неплохо, если бы столкновение героя со звездой сопровождалось звуковым сигналом. Скачайте звуковой эффект для звезды отсюда и перетащите файл в наш проект Xcode. Убедитесь, что указана опция “Destination: Copy items if needed” и что выбран таргет UberJump.

Для воспроизведения звуков в Sprite Kit используется SKAction. Откройте GameObjectNode.swift и добавьте следующее свойство класса выше StarNode:

let starSound = SKAction.playSoundFileNamed("StarPing.wav", waitForCompletion: false)

Теперь осталось только воспроизвести звуковой эффект во время столкновения героя со звездой.

В методе collisionWithPlayer() класса StarNode замените self.removeFromParent() на:

// Play sound
runAction(starSound, completion: {
  // Remove this Star
  self.removeFromParent()
})

Код запускает SKAction, воспроизводит звуковой файл и удаляет звезду, когда действие закончено.

Постройте и запустите. Как только спрайт героя столкнётся со звездой, вы услышите звенящий звук.

Игровые объекты: платформы

Наш следующая задача – добавление платформы. Мы создадим для платформ новый подкласс класса GameObjectNode. Как и в случае со звездами, нам понадобятся два типа платформ: платформы одного типа должны быть неразрушимыми, а другие должны исчезать в тот момент, когда герой спрыгивает с них.

В GameObjectNode.swift добавьте следующую коллекцию над определением класса GameObjectNode, чтобы задать два типа платформ:

enum PlatformType: Int {
  case Normal = 0
  case Break
}

Далее нам нужно создать класс PlatformNode. Добавьте следующий код в GameObjectNode.swift:

class PlatformNode: GameObjectNode {
  var platformType: PlatformType!
 
  override func collisionWithPlayer(player: SKNode) -> Bool {
    // 1
    // Only bounce the player if he's falling
    if player.physicsBody?.velocity.dy < 0 {
      // 2
      player.physicsBody?.velocity = CGVector(dx: player.physicsBody!.velocity.dx, dy: 250.0)
 
      // 3
      // Remove if it is a Break type platform
      if platformType == .Break {
        self.removeFromParent()
      }
    }
 
    // 4
    // No stars for platforms
    return false
  }
}

Давайте подробней остановим своё внимание на этом коде:

1. В соответствии со сценарием игры, узел героя должен отскакивать от платформы только при падении, т.е тогда, когда он имеет отрицательное значение dy своей скорости (свойство velocity). Эта проверка также позволяет узлу героя не пересекаться с платформами, двигаясь вверх по экрану.

2. Мы сообщаем узлу героя скорость, направленную вверх, чтобы он отскочил от платформы. Это делается также, как раньше мы это сделали для звезд, но с меньшим значением. Звезды ведь круче, не так ли?

3. Если платформа относится к типу platformType.Break, то мы удаляем её со сцены.

4. Ультра прыгун не получает очки ни когда спрыгивает с платформы, ни когда запрыгивает на нее, поэтому нет никакой необходимости обновлять HUD.

Для добавления платформы для сцену откройте GameScene.swift и впишите следующий метод:

func createPlatformAtPosition(position: CGPoint, ofType type: PlatformType) -> PlatformNode {
  // 1
  let node = PlatformNode()
  let thePosition = CGPoint(x: position.x * scaleFactor, y: position.y)
  node.position = thePosition
  node.name = "NODE_PLATFORM"
  node.platformType = type
 
  // 2
  var sprite: SKSpriteNode
  if type == .Break {
    sprite = SKSpriteNode(imageNamed: "PlatformBreak")
  } else {
    sprite = SKSpriteNode(imageNamed: "Platform")
  }
  node.addChild(sprite)
 
  // 3
  node.physicsBody = SKPhysicsBody(rectangleOfSize: sprite.size)
  node.physicsBody?.dynamic = false
  node.physicsBody?.categoryBitMask = CollisionCategoryBitmask.Platform
  node.physicsBody?.collisionBitMask = 0
 
  return node
}

Этот метод очень похож на createStarAtPosition (_: OfType : ), но обратите внимание на следующие основные моменты:

1. Мы создаем экземпляр PlatformNode и задаем его позицию, имя и тип.

2. Выбираем соответствующее изображение для SKSpriteNode в зависимости от типа платформы.

3. Создаем физику платформы, в том числе тип столкновений.

Теперь, чтобы добавить платформу, вставьте следующий код в метод init(size:), сразу перед строчкой, которая создает звезду:

// Add a platform
let platform = createPlatformAtPosition(CGPoint(x: 160, y: 320), ofType: .Normal)
foregroundNode.addChild(platform)

Постройте и запустите игру. Нажмите, чтобы начать и посмотрите, как спрайт героя зарядится энергией от звезды, а затем подпрыгнет на платформе!

Куда идти дальше?

Отлично! Как вы уже поняли, создание игры подобной Mega Jump – это не так уж и сложно. С помощью Uber Jump мы изучили все базовые основы, которые сможем использовать далее, на пути к созданию отличной игры.

В конце статьи вы можете скачать проект Xcode содержащий всё, что мы изучали в этом курсе.

В следующей части мы задействуем акселерометр для управления перемещением героя по оси Х. А также будем загружать ряд свойств из внешнего файла plist и добавим систему подсчёта очков. Много всего интересного ещё предстоит.

Если у вас есть какие-либо вопросы, мысли или предложения для будущих уроков, пожалуйста, оставьте ниже свой комментарий.

Продолжение через неделю….
Скачать Исходник Xcode.
Скачать графические ресурсы для урока.

Сделать мега популярную игру под iOS совсем несложно, и мы это докажем в этой серии уроков . Этой статьей мы начинаем серию материалов по созданию игры для iPhone.
Мы будем использовать Sprite Kit и Swift на любительском уровне, чтобы создать что-то подобное Mega Jump. Это довольно популярная игра, выполненная в стиле аркады с вертикальными прыжками. Аналогом ее также можно назвать Doodle Jump. На видео ниже можно посмотреть, как игровой процесс выглядит на устройстве…

По мере того как мы будем создавать игру, вы научитесь использовать возможности Sprite Kit, такие как: обнаружение столкновений, управление акселерометром, переходы между сценами. Если вы совсем не знакомы с движком Sprite Kit, то можете ознакомится с ним в статье Рэя Sprite Kit Tutorial for Beginners, а потом приступить к этой серии уроков. Но если вы уверенны в себе, тогда вперёд!

С оригиналом статьи на английском, можно ознакомиться здесь.

Примечание: Для игры вам понадобится платный аккаунт разработчика. И если вы намерены использовать этот урок в полной мере, то и устройство для тестирования.

Начало

Мы собираемся создать игру подобную Mega Jump. Как гласит известная пословица: “как Вы яхту назовёте, так она и поплывет”. Чтобы игра стала по-настоящему яркой, она должна иметь яркое, запоминающееся название.
“Uber” – это ещё лучше, чем “mega”, поэтому давайте назовём ее “Uber Jump” .

По сути игра в духе Mega Jump является физической игрой: главный герой подбрасывается вверх экрана и с этого момента он должен бороться с силой тяжести, чтобы продержаться максимально долго.

По мере того, как герой собирает монеты, он поднимается все выше, а платформы обеспечивают временную передышку на его пути. Наша игра Uber Jump будет иметь такую же модель: сначала мы подбросим нашего персонажа вверх, а затем будем применять к нему постоянную силу тяжести. На своём пути он будет собирать звезды, которые помогут ему подниматься вверх, отвечая за движение вдоль ось Y. Если пропустить слишком много звезд, то герой неизбежно упадете вниз.

Акселерометр будет управлять движением игрока вдоль ось X. Наклоняя устройства в право или влево можно задать направление движение героя по горизонтали.

Результат будет состоять из динамической составляющей (так как вы будете прикладывать две силы к игроку), а также из кинематической (так как вы непосредственно будете изменять его скорость). Так что скучать не придется!

Для начала Вам нужно создать новый Xcode проект с движком Sprite Kit. Запустите Xcode, выберите File \ New \ Project, затем IOS \ Application \ SpriteKit Game шаблон и нажмите кнопку “Далее” (Next).

В поле с названием продукта введите UberJump, в качестве языка выберите Swift, во вкладке с устройствами укажите iPhone, а затем нажмите кнопку “Далее”.

Выберите место для хранения проекта и нажмите кнопку “Создать”. Перед тем, как приступить к делу, нужно сделать некоторые предварительные настройки. Найдите файл GameScene.sks в навигаторе. Он нам не понадобится, поэтому выделите его и нажмите кнопку “Удалить”. Когда появится окно оповещения, нажмите “Переместить в корзину”.

Теперь откройте GameViewController.swift и удалите расширение unarchiveFromFile SKNode в верхней части файла, так как нам не понадобится никакой посторонний код. Затем замените метод viewDidLoad следующим :

override func viewDidLoad() {
  super.viewDidLoad()
 
  let skView = self.view as SKView
 
  skView.showsFPS = true
  skView.showsNodeCount = true
 
  let scene = GameScene(size: skView.bounds.size)
  scene.scaleMode = .AspectFit
 
  skView.presentScene(scene)
}

Нажмите Build, затем Run, чтобы убедится, что на данный момент всё работает.

Не беспокойтесь о том, что текстовый лейбл “Hello, World” усечён. Вы сможете найти его в файле GameScene.swift и заменить на то, что нужно. Но сперва необходимо сделать последнюю вещь по настройке. Так как наша игра будет использовать акселерометр, мы должны быть уверены, что поворот устройства не переключит приложение в ландшафтный режим.

В навигаторе Xcode (там , где сейчас выбран Ваш проект) выберите пункт UberJump, перейдите на вкладку General в настройках и найдите раздел Deployment Info. Убедитесь, что портретная ориентация является единственной доступной для устройства.

Мы подготовили проект к тому, чтобы начать добавление компонентов игры. Начнем с картинок.

Импортирование графики

Скачайте графические ресурсы (ссылка на скачивание в конце статьи) для этого проекта и перетащите их мышкой в Xcode. Убедитесь, что выбрана опция “Destination: Copy items if needed” и пункт UberJump.

Иллюстрации разделены на фоновые (папка Backgrounds) и игровые (папка Assets.atlas). Фоновые представляют собой плитки, которые будут перелистываться вверх и вниз по экрану во время движения героя:

Игровые включают все спрайты, в частности персонаж, плиты и звезды.

В целях повышения эффективности, игровые ресурсы должны хранится в атласе текстур. Вы можете узнать поподробнее об атласах текстур в Sprite Kit в этом уроке.

Построение сцены

Вы наверное заметили, что в шаблоне проекта уже создан класс GameScene. Он представляет собой сцену Sprite Kit, которая на данный момент отображает надпись “Hello, World!” при запуске игры. Большинство действий игры Uber Jump будут происходить здесь, поэтому откройте класс GameScene.swift и замените содержимое следующим:

import SpriteKit
 
class GameScene: SKScene {
 
  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
  }
 
  override init(size: CGSize) {
    super.init(size: size)
    backgroundColor = SKColor.whiteColor()
  }
}

Нажмите Build и Run. GameScene теперь отображает ничто иное, как белый экран. Это чистый холст, на который мы будем добавлять основные объекты игры. Mega Jump использует эффект параллакса слоев, чтобы произвести реалистичную визуализацию объема. Например, объекты на переднем двигаются быстрее, чем фоновые объекты. В Uber Jump мы собираемся сделать тот же эффект, создав следующие слои в сцене:

- Background: слой с медленным движением, отображающий далекий пейзаж.
- Midground: более быстрая декорация из веток деревьев.
- Foreground: быстро движущийся слой, содержащий персонаж, звезды и платформы, которые составляют ядро геймплея.
- HUD: верхний слой, который не двигаться и отображает лейблы подсчета очков.

Фоновый узел – это первый, который нужно добавить. Откройте GameScene.swift и добавьте следующий метод:

func createBackgroundNode() -> SKNode {
  // 1
  // Create the node
  let backgroundNode = SKNode()
  let ySpacing = 64.0 * scaleFactor
 
  // 2
  // Go through images until the entire background is built
  for index in 0...19 {
    // 3
    let node = SKSpriteNode(imageNamed:String(format: "Background%02d", index + 1))
    // 4
    node.setScale(scaleFactor)
    node.anchorPoint = CGPoint(x: 0.5, y: 0.0)
    node.position = CGPoint(x: self.size.width / 2, y: ySpacing * CGFloat(index))
    //5
    backgroundNode.addChild(node)
  }
 
  // 6
  // Return the completed background node
  return backgroundNode
}

Давайте подробно разберем, что мы здесь делаем:

1. Во – первых, мы создаем новый экземпляр SKNode. Он не имеет никакого визуального содержимого, но располагается на сцене. Это означает, что мы можем перемещать его в любое место и вместе с ним будут двигаться его дочерние узлы.

2. У нас есть 20 фоновых изображений, которые нужно расположить в ряд, чтобы заполнить задний план.

3. Каждый дочерний узел унаследован от SKSpriteNode с добавлением соответствующего фонового изображения, загруженного из наших ресурсов.

4. Смещение якорной точки каждого узла в его нижний центр позволяет легко расположить узлы друг над другом.

5. Мы добавляем каждый дочерний узел в фоновой узел.

6. Наконец, Мы возвращаем фоновый узел.

Теперь самое время поместить фоновый узел на сцену. В GameScene.swift добавьте следующие свойства:

// Layered Nodes
let backgroundNode = SKNode()
let midgroundNode = SKNode()
let foregroundNode = SKNode()
let hudNode = SKNode()
 
// To Accommodate iPhone 6
let scaleFactor: CGFloat = 0.0

Мы добавляем свойства для каждого из узлов, которые будет использоваться в игре. На данный момент нам нужен только фоновый узел, но не помешает заодно объявить и другие узлы.
Мы также можем добавить свойство scaleFactor. Это нужно для того, чтобы графика правильно масштабировалась и позиционировалась на всех моделях iPhone.
Чтобы добавить фон к сцене, вставьте следующий код в метод init(size:) класса GameScene.swift сразу после строки, которая устанавливает цвет фона:

scaleFactor = self.size.width / 320.0
 
// Create the game nodes
// Background
backgroundNode = createBackgroundNode()
addChild(backgroundNode)

Графика рассчитана на стандартный экран, шириной в 320 точек, который имеют большинство моделей iPhone. Поэтому здесь используется масштабный коэффициент для адаптации под другие размеры экрана. Все, что нам нужно сделать после инициализации фонового узла, это добавить его в качестве дочернего к текущей сцене.
Нажмите Build и Run, чтобы удостовериться в том, что наш фоновый узел отображается на сцене так, как показано ниже:

Примечание: несмотря на то, что в фоновый узел мы добавили 20 дочерних, вы увидите, что при запуске приложения на устройстве с 4- х дюймовым экраном, на сцене отображаются только девять узлов. А с экраном в 3,5 дюйма – всего восемь. Sprite Kit достаточно продвинут, и отображает только те узлы, которые должны быть видны в игре на данный момент.

Добавление узла игрока (Node)

Настало время выпустить на сцену нашего “Супер Прыгуна”. В GameScene.swift, добавьте следующий метод:

func createPlayer() -> SKNode {
  let playerNode = SKNode()
  playerNode.position = CGPoint(x: self.size.width / 2, y: 80.0)
 
  let sprite = SKSpriteNode(imageNamed: "Player")
  playerNode.addChild(sprite)
 
  return playerNode
}

По такому же принципу, как мы добавляли фоновый узел, создается SKNode и в него в качестве дочернего добавляется узел SKSpriteNode, содержащий спрайт игрока. Расположим узел игрока таким образом, чтоб он был в центре экрана по горизонтали и чуть выше нижней части сцены. Перед тем как добавить узел игрока на сцену, нужно создать передний план. Как уже говорилось выше, узел переднего плана будет содержать игрока, звезды и платформы. Это означает то, что, когда мы будем его перемещать, то вместе с ним будут двигаться все игровые элементы.

Вставьте следующий код в метод init(size:) сразу после строки, которая добавляет backgroundNode на сцену:

// Foreground
foregroundNode = SKNode()
addChild(foregroundNode)

Теперь, когда для элементов геймплея есть узел переднего плана, мы можем добавить к нему узел игрока. В верхней части GameScene.swift объявите следующее свойство:

// Player
let player = SKNode()

Теперь поместите узел игрока на сцену, вставив следующий код в init(size:) сразу после строки, которая добавляет на сцену foregroundNode:

// Add the player
player = createPlayer()
foregroundNode.addChild(player)

Постройте и запустите (Build и Run), чтобы увидеть Супер Прыгуна, который готов началу приключения:

Добавление гравитации и физического тела

Наш герой выглядит слишком расслабленным. Было бы неплохо добавить физику в игру и посмотреть, что из этого получится. Начнём с того, что физика нашей игры не мыслима без гравитации. В GameScene.swift, добавьте следующую строку в init(size:) сразу после строки, которая устанавливает цвет фона:

// Add some gravity
physicsWorld.gravity = CGVector(dx: 0.0, dy: -2.0)

Этим самым вы добавляете вектор силы тяжести в физический мир, основываясь на сюжете игры. Сила тяжести не имеет проекции на ось X, она производит усилие, направленное вниз вдоль оси Y.
Постройте и запустите, чтобы посмотреть, как гравитация будет влиять на узел игрока.

Хм … ничего не произошло. Почему гравитация Вашему герою нипочем? Попробуйте выяснить это сами, прежде чем посмотреть ответ.

Ответ:
Сила, создаваемая гравитацией оказывает динамический эффект только на физические тела сцены. А такие объекты класса SKNode, как игрок узел нашего игрока, не имеют физических тел, заданных по умолчанию. Поэтому нам нужно задать физическое тело узлу игрока. В конце метода createPlayer добавьте следующий код перед оператором return:

// 1
playerNode.physicsBody = SKPhysicsBody(circleOfRadius: sprite.size.width / 2)
// 2
playerNode.physicsBody?.dynamic = true
// 3
playerNode.physicsBody?.allowsRotation = false
// 4
playerNode.physicsBody?.restitution = 1.0
playerNode.physicsBody?.friction = 0.0
playerNode.physicsBody?.angularDamping = 0.0
playerNode.physicsBody?.linearDamping = 0.0

Приведенный выше код задает физическое тело для узла игрока. Давайте рассмотрим его детально:

1. Каждое физическое тело должно иметь форму, которую физический движок может использовать для обнаружения столкновений. Наиболее удобная форма тела для использования в обнаружении столкновений – круг (легко определить, когда круги перекрывают друг друга) и , к тому же, круг очень хорошо подходит для узла Вашего игрока. Его радиус составляет половину ширины спрайта.

2. Физические тела подразделяются на статические и динамические. Динамические тела находятся под воздействием физического движка и поэтому зависят от сил и импульсов. Статические тела не попадают под это воздействие, но мы все равно можем использовать их для обнаружения столкновений. Например, такое статическое тело, как стена или твердая платформа никогда не будет двигаться, но в него могут врезаться другие объекты. Поскольку мы хотим, чтобы узел нашего игрока был под воздействием силы тяжести, установите его свойству dynamic значение true.

3. Нужно, чтобы узел нашего игрока оставаться всегда в вертикальном положении, поэтому отключаем вращение узла.

4. Поскольку мы самостоятельно обрабатываем столкновения в этой игре, то устанавливаем параметры физического тела узла игрока таким образом, чтобы не было ни трения ни демпфирования. Однако, мы устанавливаем его свойству restitution значение 1, чтобы физическое тело не потеряло часть своего импульса во время столкновений.

Постройте и запустите, чтобы увидеть как спрайт игрока падает в нижнюю часть экрана, поскольку гравитация безжалостно тянет его к центру Земли.

Возможно, это звучит немного мелодраматически, но как наш герой собирается найти своё место в этом мире?

Продолжение через неделю….
Скачать графические ресурсы для урока.

Количество устройств работающий на операционной системе iOS с каждым годом растет. Это статья для web-мастеров, которые оптимизируют свои сайты для просмотров с iPhone и iPad. Для того, чтобы при добавлении в закладки браузера Safari или при добавлении на рабочий стол iPhone показывалась нужная иконка сайта, необходимо специально создать изображений. Иконка favicon в данном случае не работает.
Для сайтов, где нет такой иконки, в закладках Safari показывается серая заглушка, а на рабочем столе создается иконка на основе скриншота первой страницы. Это не очень красиво. Но достаточно потратить всего несколько минут, чтобы сделать свою иконку сайта для iPhone…

Как создать иконку сайта для iPhone

1. Нужно создать изображение в формате PNG размером 152×152px в любом графическом редакторе. Если вы работаете в Photoshop, то это формат PNG 24. Можно даже задать прозрачность.

2. Сохранить файл под названием “apple-touch-icon.png“.

3. Загрузить получившийся файл по FTP на сервер, в корневую папку сайта. Например http://iphone-gps.ru/apple-touch-icon.png.

Теперь при добавлении закладки на ваш сайт, в Safari появится созданная вами иконка. А если вы выберите “Добавить в Домой”, то и на рабочем столе.

Сразу отвечу на возможные вопросы.

Нужно ли что-то прописывать в самом HTML документе?
Нет, ничего специально прописывать в mete не нужно. Браузеры мобильный устройств сами ищут этот файл на вашем сайте. Более того, если такого файла там нет, то сервер выдает в ответ 404 ошибку. Посмотрите в логи на сервере, там много таких запросов. Кроме того – эти файлы “ищутся” не только в момент добавления сайта на домашний экран, а при каждом посещении!
И, вы наверно удивитесь, но Android устройства тоже используют значки apple-touch-icon.png при добавлении закладки сайта на рабочий стол .

А как же Retina, нужно делать несколько изображений под разное разрешение?
Раньше нужно было делать несколько картинок, сейчас достаточно одной большой (152×152px). В принципе, в Apple регулярно меняют разрешения экранов и стандарты для разработчиков. Вполне вероятно, что когда вы будете читать эту статью, что-то уже поменяется. Но, самый актуальный размер всегда можно узнать по ссылке http://www.apple.com/apple-touch-icon.png. Это самый правильный формат иконки .

Всем привет! Я продолжаю свой курс уроков по программированию под iOS на Objective-C языке. Как вы помните, в третьем уроке мы с вами писали программу «Книга рецептов», при этом мы использовали UITableView. В этом уроке будет рассказано, как использовать для вывода элементов из массива UICollectionView.

UICollectionView относительно молодой элемент в Objective-C. Он пришел вместе с iOS 6 в позопрошлом году. Чем же он отличается от UITableView? Главное их отличие в том, что UICollectionView позволяет выводить объекты при помощи сетки. Например, он используется в стандартном приложении «Фото» в iOS, то есть

Нашу программу мы будем строить на основе контролера UICollectionView. При помощи этого элемента мы будем выводить фотографии наших рецептов через сетку. В этом уроке мы не будем углубляться в повторное написание книги рецептов, но если вы хорошо усвоили наш третий урок, то для вас не составит труда переписать приложение под данный тип вывода, ибо настоящий программист должен легко осваивать логику программы. Отметим лишь, что сам принцип кодового построения UITableView и UICollectionView очень похожи.

Обратите внимание, что в ячейку UICollectionView можно вставить не только картинку, но и, например, UILabel, UITextField и т.д. Также стоит отметить, что можно использовать разные типы ячеек в контролере и назначать им разные размеры.

Чтобы ничего не пропустить, подписывайтесь на мой канал на YouTube.

Сегодня мы продолжаем наш четвертый урок, в котором начали писать парсер новостей из сайта-блога. В этой части урока будет рассказано, как сделать вывод комментариев к каждой новости, а также мы напишем функцию Pull to Refresh для таблицы с записями.

Итак, в основе движка Loutskiy CMS есть функция комментариев к постам, которые мы будем выводить и в нашем приложении. Их показ будет осуществляться на отдельном ViewController, а вывод будет происходить в таблицу UITableView.

Сами комментарии мы будем получать из базы данных MySQL в JSON-формате. Для этого, из класса DetailViewController мы будем передавать уникальный номер ID страницы-поста в класс CommentsViewController. Это нужно, чтобы сделать запрос к API скрипту, чтобы тот вывел именно те комментарии, которые относятся к этой записи.

Разработка под iOSВ блоке комментария мы будем выводить имя пользователя, дату и текст. Так как мы делаем статическую высоту ячейки в таблице, а текст комментария может быть слишком большим, мы будем выводить его через TextView. То есть, мы сможем внутри блока с комментарием прокручивать его текст. А получение комментария будет завязано на том же классе JSONLoader.

Теперь нам осталось реализовать только функцию Pull to refresh, которая позволяет делать обновление данных в таблице, путем оттягивающего свайпа сверху вниз. Данный формат очень удобен, для его активации добавьте следующий код в функцию viewDidLoad:

UIRefreshControl *refreshControl = [[UIRefreshControl alloc] init];
[refreshControl addTarget:self action:@selector(refresh:) forControlEvents:UIControlEventValueChanged];
[self.tableView addSubview:refreshControl];

ВИДЕО

Чтобы ничего не пропустить, подписывайтесь на мой канал на YouTube.

Как вы помните, в прошлом уроке мы создавали программу «Книга рецептов» для iOS. Главным минусом той программы было то, что все данные были статичными, а для того, чтобы их обновить нужно было дописывать код приложения и отправлять его на повторную модерацию в AppStore. В сегодняшнем уроке будет рассказано, как эту проблему можно решить. Сразу стоит отметить, что для этого урока у вас должен быть веб-сервер, имеющий выход в интернет. Все примеры в данной серии уроков будут написаны на языке PHP, поэтому ваш сервер должен базироваться на Apache или ngnix.

Большинство новостных сайтов используют SQL-БД, но стоит отметить, что наше приложение не будет делать прямой SQL-запрос к таблице, потому как нет соответствующего фреймворка в Xcode. Зато Apple дала возможность формировать массивы из JSON-файла. Поэтому мы напишем собственное API, которое будет формировать данный файл. А именно, мы сделаем PHP-скрипт, который будет делать SQL-запрос, а потом автоматически генерировать динамический файл с JSON-структурой. Конечно же, можно использовать и XML формат, но практика показывает, что тогда программа будет гораздо медленнее обрабатывать результат.

Как вы наверняка знаете, все новостные сайты имеют свою CMS (система управления контентом), при этом, многие используют так называемые «открытые» CMS — WordPress, Joomla, Drupal и т.д. Так как партнером нашего канала является группа LWTS, то мы разберем создание парсера новостей на основе их CMS, которую вы можете скачать по этой ссылке – http://loutskiy.ru/products/1. Впрочем, для веб-разработчика не составит большого труда преобразовать данный скрипт под другие движки.

Итак, наша программа будет получать и выводить новости списком, через таблицу UITableView, а также по нажатию на ячейку открывать страницу с полным текстом статьи. Если со списком новостей все понятно, то полный текст новости будет работать следующим образом: будет открываться страница с UIWebView, которая, в свою очередь, будет подгружать динамичную страницу PHP с текстом новости.

Итак, чтобы приступить к изучению урока, вам нужно скачать нашу библиотеку, состоящую из Objective-C класса и PHP файлов, которые генерируют JSON-страницу и файл с текстом новости.

ВИДЕО

В следующем уроке мы разберем, как организовать вывод комментариев к статьям в приложении.

Чтобы ничего не пропустить, подписывайтесь на мой канал на YouTube.

Сегодня четверг, и как водится, мы публикуем новый материал по программированию на iOS. Как вы помните, в предыдущих двух частях третьего урока, мы создавали приложение «Книга рецептов» для iOS. В сегодняшнем уроке мы закончим разработку данной программы и исправим все оставшиеся недочеты. В этой серии мы сделаем подробное описание для каждого из рецептов, присвоим уникальное изображение для каждого из блюд и разберем небольшую кастомизацию Navigation Bar Controller.

Итак, основной сегодняшней нашей задачей будет добавление полного описания для каждого рецепта в программе. Для этого мы будем передавать в новый класс номер-идентификатор нажатой ячейки в таблице. Так как нам известно какому рецепту принадлежит какой номер, то мы в классе DetailViewController применим конструкцию условия if else. То есть мы будем сравнивать номер идентификатора с числами, и в случае, если результат будет положительным (true), то программа выведет нужное описание к блюду.

Следующим шагом будет добавление уникальных изображений к нашим рецептам. Определять какую картинку нужно вывести программа будет при помощи той же конструкцииif else. А само изображение в рецептах выводить будем при помощи функции UIImageView. Располагать все элементы по своим местам будем в Storyboard.

Ну и наконец, мы расскажем вам как можно легко кастомизировать Navigation Bar Controller, а именно, как изменить начертание шрифта, кегль, цвет, фон и тд. Это делается достаточно просто, путем добавления нескольких строчек кода в файл AppDelegate.m.

Итак, в третьем уроке мы создали полноценное приложение, но как вы заметили, все рецепты хранятся в статическом виде внутри кода — то есть, если вы захотите добавить новый рецепт, то нужно будет выпускать обновление приложения. Поэтому в следующем уроке я расскажу, как получать данные из сети Интернет.

Чтобы ничего не пропустить, подписывайтесь на мой канал на YouTube.

Я продолжаю свой курс уроков по программированию на Objective-C под iOS, и сегодня вас ждет вторая часть третьего урока, в котором мы начали создавать приложение «Книга рецептов» для iPhone.

Напомним, что в предыдущей части было рассказано, как выводить информацию из массива в таблицу, через стандартный объект UITableView. Разобрали создание статического одномерного массива NSArray, а также рассмотрели контейнер Navigation Bar Controller.

В сегодняшней части мы уделим внимание страницам с описанием рецептов, создадим вкладку через TabBar Controller, в которой разместим статичную HTML-страницу, при помощи объекта UIWebView, а также сделаем поиск в нашей таблице с рецептами по массиву с данными.

Итак, основной акцент мы сделаем на возможность выбора строки в UITableView, чтобы можно было перейти на новую страницу, на которой будет находиться уникальный рецепт для каждого из блюд. В этой части урока мы сделаем так, чтобы на странице с описанием показывалось только имя рецепта, а в третьей части будет рассказано, как добавить туда подробное описание приготовления блюд.

Затем будет рассказано, как можно пользоваться объектом UIWebView, который позволяет подгружать в себя HTML-страницу с информацией. Сам UIWebView использует движок Apple WebKit, что позволяет использовать такие технологии, как HTML 5 и ССS 3. Если вы хотите, чтобы вместо HTML страницы открывался сайт, то вставьте следующий код:

NSURL* url = [NSURL URLWithString:@"http://loutskiy.ru"]; //Вместо loutskiy.ru указывайте свой сайт или страницу на сайте

Вместо:

NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle]pathForResource:@»about.html» ofType:nil]];

Также в этом уроке будет рассказано про то, как сделать стандартный поиск по таблице, через объект Search Display Controller. Данная функция будет искать элементы массива по совпадению символов и выводить результаты поиска в таблицу.

ВИДЕО

Чтобы ничего не пропустить, подписывайтесь на мой канал на YouTube.