Разработка игр под iOS – пошаговая инструкция создания игры на iPhone с нуля

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

Для работы нужен MacBook (подходят большинство моделей) и iPhone (необязательно).

Что разрабатываем?

Вместе мы разработаем игру под iOS Хай-лоу (разновидность покера). Концепции, которые мы описываем здесь, являются фундаментальными. Они актуальны при разработке любых приложений для iOS.

Обучение на практике – наиболее эффективный, необходимый способ для освоения ios-разработки. Все действия, описанные в этой статье, повторяйте на вашем компьютере. Чтобы росло ваше понимание и развивалась мышечная память, набирайте код вручную.

 

Что вас ждет в этом руководстве:

• Установка и настройка среды разработки Xcode.
• Создание пользовательского интерфейса в iOS-разработке.
• Основы программирования на языке Swift.
• Добавление дополнительных возможностей в ios-игру.

1. Устанавливаем Xcode

Программа бесплатная. Загрузите Xcode из AppStore на вашем макбуке. Чтобы открыть App Store, нажмите на значок Apple в левом верхнем углу экрана, затем кликайте App Store.

В строку поиска в правом верхнем углу введите Xcode. Установите приложение на ноутбук.

2. Создаем новый проект в Xcode

После инсталляции запустите Xcode. Сразу отображается такая заставка:

Кликайте «Create a new Xcode project» и выберите шаблон, предложенный программой. Мы создаем игру на айфон. Поэтому в верхнем меню выбираем вкладку iOS и жмем «Single View App».

В следующем окне указываем название игры и жмем «Далее» (Next)

На этом этапе ваш Xcode выглядит примерно так:

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

Откройте основную раскадровку в конструкторе интерфейсов Xcode. Для этого щелкните на главной раскадровке в панели слева. Если она не отображается, нажмите сочетание клавиш CMD+1.

Конструктор интерфейсов

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

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

Инспектор атрибутов

Найдите в правой части экрана Панель инспектора. Здесь несколько вкладок. Чтобы задать цвет, кликаем Инспектор атрибутов.

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

После того, как выбрали цвет, сохраняем файл, нажав CMD+S.

4. Запускаем iOS-приложение

На этом этапе мы узнаем как запустить наше приложение на эмуляторе. В верхнем углу слева отображается кнопка Play, Stop, название проекта и симулятор, на котором запускаем нашу игру.

В нашем случае выбран симулятор iPhone 7. Вы можете выбрать любой.

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

Теперь попробуйте самостоятельно изменить цвет фона в Инспекторе атрибутов и запустить повторно приложение.

5. Добавляем фоновое изображение

Добавим это изображение:

Для этого нужно создать представление изображения. Откройте библиотеку объектов, в правом верхнем углу нажмите кнопку Home как на старом айфоне или нажмите сочетание клавиш CMD+Shift+L. В строку поиск вводим название нашего изображения.

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

Добавляем изображение в наш проект Xcode. В левой панели навигации откройте файл Assets.xcassets (или нажмите CMD+1). Затем в нижней части экрана нажмите «плюс»:

Выбираем New Image Set (Новый набор изображений), перетаскиваем изображение из Mac Finder в один из слотов:

Открываем панель Инспектора атрибутов и меняем параметр Scales на Single Scale.

Изменим название изображения на background-image:

Далее открываем резервную копию файла Main.storyboard. Определяем вид изображения и переходим в инспектор атрибутов (CMD+Option+4). Выбираем фоновое изображение, задаем режим содержимого на Aspect Fill.

Последний шаг в установке фонового изображения: настраиваем ограничения для представления изображения. Ограничения – это правила, которые указывают iOS, где рисовать те или иные представления. Щелкните на кнопке «Tie-fighter» в нижней части конструктора интерфейса. Убедитесь, что для всех ограничений установлено значение 0. Затем выделите все линии ограничений, чтобы они выделились ярко-красным цветом. Выберите Add Constraints (Добавить ограничения).

Запускаем приложение кнопкой Play или сочетанием клавиш CMD+R. Результат:

6. Добавляем кнопки

Создаем кнопки для нашей игры на iOS. Открываем библиотеку объектов (CMD+Shift+L), вбиваем в поиск button.

Теперь давайте отредактируем наши две кнопки, чтобы они стали более заметными. Я изменю цвет фона на черный с непрозрачностью 60% и цвет шрифта на белый. Эти параметры мы зададим в инспекторе атрибутов (CMD+Option+4). Перед открытием инспектора атрибутов убедитесь, что кнопка выделена.

Делаем кнопки более заметными. Изменяем цвет фона на черный. Для этого выделяем кнопку и заходим в Инспектор атрибутов (CMD+Option+4). Задаем параметры:

• непрозрачность 60%;
• шрифт – белый.

Результат:

7. Добавляем текст

Задаем текст для счета (Score) в игре. Открываем библиотеку объектов (CMD+Shift+L) и вбиваем запрос Label:

Перетаскиваем Label в верхнюю часть представления и заменяем текст через Инспектор атрибутов (CMD+Option+4), пишем Score: 0. Выбираем для текста белый цвет и размер 40px.

В нашей игре карты будем представлять цифрами от 1 до 13, где:

• 1 – туз,
• 11 – валет,
• 12 – королева,
• 13 – король.

В центр экрана добавляем ноль. Возвращаемся в библиотеку объектов (CMD+Shift+L) и перетаскиваем метку на экран. Задаем номер «0», выбираем размер и цвет шрифта:

Изображения игровых карт добавим позже. Теперь начинаем кодить.

8. Программируем на языке Swift

Swift – язык программирования от Apple. На нем разрабатывают нативные приложения для iOS, macOS, watchOS и tvOS. Swift – легко читаемый язык и отлично подходит для начинающих разработчиков, которые никогда не писали код.

Итак, удерживаем клавишу Option на клавиатуре, кликаем на файл ViewController.swift в Project Navigator (CMD+1). Xcode должен открыть файл рядом с нашим пользовательским интерфейсом:

IBOutlets

IBOutlet подразумевает связь элемента UI (кнопки или лейбла) с его ссылкой в коде.

Слева находится пользовательский интерфейс, справа – код. С помощью IBOutlet соединяем пользовательский интерфейс приложения с кодом. Для этого удерживаем клавишу ctrl, кликаем на нужный элемент мышкой и перетаскиваем метку числа в код:

Далее переименовываем метку в коде, задаем имя cardLabel:

Таким же способом перетаскиваем в код счет (Score) и кнопки High и Low. После этого Теперь тем же методом перетащите в свой код счет, кнопку high и кнопку low. После этого наш код выглядит так:

    import UIKit

    class ViewController: UIViewController {
    
        @IBOutlet weak var cardLabel: UILabel!
        @IBOutlet weak var scoreLabel: UILabel!
        @IBOutlet weak var highButton: UIButton!
        @IBOutlet weak var lowButton: UIButton!
    
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.

9. Создаем случайные игровые числа

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

Функция random в языке Swift позволяет нам легко это сделать. Добавляем эту строку кода в функцию viewDidLoad()

    // Do any additional setup after loading the view, typically from a nib.
var currentCardValue = Int.random(in: 1 ... 13)

Эта строка кода присваивает переменной с именем currentCardValue случайное число. var в Swift определяет переменную. Функция Int.random(in: 1 … 13) генерирует случайное целое число от 2 до 14.

Переменные – это контейнеры, в которых хранятся данные. На эту информацию можно ссылаться и изменять ее. Мы можем присваивать данные переменной с помощью символа “=”. В нашей игре мы используем переменную currentCardValue для отслеживания текущей отображаемой карты.

Что такое целые числа, наверняка знает каждый. Далее мы присваиваем целое число нашей метке. Добавляем эту строку в viewDidLoad() как показано ниже:

    cardLabel.text = String(currentCardValue)

UILabels имеет свойство text, которое представляет собой тип String. Вы можете присвоить текст метке, установив это свойство. Перед тем как присвоить текст метке, нам необходимо преобразовать наше значение curentCardValue в строку.

Теперь наш файл ViewController.swift должен выглядеть так:

    import UIKit

    class ViewController: UIViewController {
    
        @IBOutlet weak var cardLabel: UILabel!
        @IBOutlet weak var scoreLabel: UILabel!
        @IBOutlet weak var highButton: UIButton!
        @IBOutlet weak var lowButton: UIButton!
    
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
            var currentCardValue = Int.random(in: 1 ... 13)
            cardLabel.text = String(currentCardValue)
        }
    }    

Запускаем приложение (CMD+R). На экране должно появиться случайное число. При повторном запуске приложения должно появится новое рандомное число от 1 до 13.

Далее нужно сделать так, чтобы число менялось в зависимости от нажатия на кнопку. Для этого добавляем в код IBAction наших кнопок. Нажимаем на кнопку High или Low, открываем ее инспектор соединений (CMD+Option+6).

Перетаскиваем точку Touch Up Inside в наш код:

Назовем их highButtonPressed и lowButtonPressed.

    @IBAction func lowButtonPressed(_ sender: Any) {
    }
    
    @IBAction func highButtonPressed(_ sender: Any) {
    }    

Теперь мы можем добавить код, который активизируется при нажатии кнопок. Оборачиваем наш предыдущий случайный код в функцию randomizeCard, вызываем ее из viewDidLoad().

Функции – это контейнеры кода, которые можно вызывать несколько раз. Они похожи на код многократного использования.

Вот так должен выглядеть наш randomizeCard:

    func randomizeCard() {
        var currentCardValue = Int.random(in: 1 ... 13)
        cardLabel.text = String(currentCardValue)
    }

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

    import UIKit

    class ViewController: UIViewController {
    
        @IBOutlet weak var cardLabel: UILabel!
        @IBOutlet weak var scoreLabel: UILabel!
        @IBOutlet weak var highButton: UIButton!
        @IBOutlet weak var lowButton: UIButton!
    
        override func viewDidLoad() {
            super.viewDidLoad()
            randomizeCard()
            // Do any additional setup after loading the view, typically from a nib.
        }
    
    
        func randomizeCard() {
            var currentCardValue = Int.random(in: 1 ... 13)
            cardLabel.text = String(currentCardValue)
        }
    
        @IBAction func lowButtonPressed(_ sender: Any) {
            randomizeCard()
        }
    
        @IBAction func highButtonPressed(_ sender: Any) {
            randomizeCard()
        }
    }

Запускаем наше приложение для iOS (CMD+R) и кликаем кнопки.Теперь при нажатии кнопок числа рандомизируются:

10. Добавляем подсчет очков

Игроки получают очко, когда угадывают каким будет следующее число: больше или меньше. Нам нужно добавить простую логику подсчета очков, чтобы отслеживать их количество.

Чтобы определить, угадал ли игрок правильно или нет, понадобится переменная, в которой будет храниться предыдущее значение карточки. Добавим эту переменную над нашим IBOutlets. Изначально задаем ей значение “0”. Также переносим объявление переменной CurrentCardValue на самый верх.

    var previousCardValue = 0
    var currentCardValue = 0

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

    func randomizeCard() {
        previousCardValue = currentCardValue
        currentCardValue = Int.random(in: 1 ... 13)
        cardLabel.text = String(currentCardValue)
    }

Для отслеживания результатов нужна переменная score. Добавляем ее в верхнюю часть файла:

    var score = 0

Добавляем простую логику для каждого нажатия кнопки, чтобы определить, следует ли увеличивать счет или сбрасывать его. Для кнопки low мы будем увеличивать счет, если currentCardValue меньше previousCardValue, в противном случае мы сбросим счет в 0.

    @IBAction func highButtonPressed(_ sender: Any) {
        setLabelToRandomNumber()
        if currentCardValue >= previousCardValue {
            increaseScore()
        } else {
            gameOver()
        }
    }

Теперь создаем функцию increaseScore, которая будет обновлять текст на экране и score:

    func increaseScore() {
        score = score + 1
        scoreLabel.text = "Score: " + String(score)
    }

Для функции gameOver мы обнулим счет и изменим текст на «Game Over!».

    func gameOver() {
        scoreLabel.text = "Game over!"
        score = 0
    }

На этом этапе весь наш код выглядит примерно так:

    import UIKit

    class ViewController: UIViewController {
        var previousCardValue = 0
        var currentCardValue = 0
        var score = 0
    
        @IBOutlet weak var cardLabel: UILabel!
        @IBOutlet weak var scoreLabel: UILabel!
        @IBOutlet weak var highButton: UIButton!
        @IBOutlet weak var lowButton: UIButton!
    
        override func viewDidLoad() {
            super.viewDidLoad()
            randomizeCard()
            // Do any additional setup after loading the view, typically from a nib.
        }
    
        func randomizeCard() {
            previousCardValue = currentCardValue
            currentCardValue = Int.random(in: 1 ... 13)
            cardLabel.text = String(currentCardValue)
        }
    
        func increaseScore() {
            score = score + 1
            scoreLabel.text = "Score: " + String(score)
        }
    
        func gameOver() {
            scoreLabel.text = "Game over!"
            score = 0
        }
    
        @IBAction func lowButtonPressed(_ sender: Any) {
            randomizeCard()
            if currentCardValue < previousCardValue { increaseScore() } else { gameOver() } } @IBAction func highButtonPressed(_ sender: Any) { randomizeCard() if currentCardValue >= previousCardValue {
                increaseScore()
            } else {
                gameOver()
            }
        }
    }

Запускаем игру. Теперь она должна работать.

Видим, что иногда текст в игре обрезается. Чтобы исправить это, открываем Main.storyboard и перетаскиваем эти представления, чтобы они стали больше:

11. Добавляем изображения карт

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

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

Нажимаем на цифру в центре и удаляем ее. Добавляем изображение через библиотеку объектов (CMD+Shift+L) и перетаскиваем изображение на экран.

Размещаем изображение на экране, задаем ему нужный размер и перетаскиваем его в код. Если код закрыт, удерживайте клавишу option и нажмите ViewController.swift чтобы открыть.

Удаляем из кода метку cardLabel. Теперь мы будем устанавливать изображение в соответствии с номером, а не менять текст метки.

Изменяем функцию randomizeCard:

    func randomizeCard() {
        previousCardValue = currentCardValue
        currentCardValue = Int.random(in: 1 ... 13)
        cardImageView.image = UIImage(named: String(currentCardValue))
    }

Весь код выглядит так:

    import UIKit

    class ViewController: UIViewController {
        var previousCardValue = 0
        var currentCardValue = 0
        var score = 0
    
        @IBOutlet weak var scoreLabel: UILabel!
        @IBOutlet weak var highButton: UIButton!
        @IBOutlet weak var lowButton: UIButton!
        @IBOutlet weak var cardImageView: UIImageView!
    
        override func viewDidLoad() {
            super.viewDidLoad()
            randomizeCard()
            // Do any additional setup after loading the view, typically from a nib.
        }
    
        func randomizeCard() {
            previousCardValue = currentCardValue
            currentCardValue = Int.random(in: 1 ... 13)
            cardImageView.image = UIImage(named: String(currentCardValue))
        }
    
        func increaseScore() {
            score = score + 1
            scoreLabel.text = "Score: " + String(score)
        }
    
        func gameOver() {
            scoreLabel.text = "Game over!"
            score = 0
        }
    
        @IBAction func lowButtonPressed(_ sender: Any) {
            randomizeCard()
            if currentCardValue < previousCardValue { increaseScore() } else { gameOver() } } @IBAction func highButtonPressed(_ sender: Any) { randomizeCard() if currentCardValue >= previousCardValue {
                increaseScore()
            } else {
                gameOver()
            }
        }
    }

Запускаем приложение (CMD+R). Поздравляем, вы создали игру для iOS!