Пишем простейшую игру для iPhone | OTUS
🔥 Начинаем BLACK FRIDAY!
Максимальная скидка -25% на всё. Успейте начать обучение по самой выгодной цене.
Выбрать курс

Курсы

Программирование
iOS Developer. Basic
-25%
Python Developer. Professional
-25%
Разработчик на Spring Framework
-25%
Golang Developer. Professional
-25%
Python Developer. Basic
-25%
iOS Developer. Professional
-25%
Highload Architect
-25%
JavaScript Developer. Basic
-25%
Kotlin Backend Developer
-25%
JavaScript Developer. Professional
-25%
Android Developer. Basic
-25%
Unity Game Developer. Basic
-25%
Разработчик C#
-25%
Программист С Web-разработчик на Python Алгоритмы и структуры данных Framework Laravel PostgreSQL Reverse-Engineering. Professional CI/CD Vue.js разработчик VOIP инженер Программист 1С Flutter Mobile Developer Супер - интенсив по Kubernetes Symfony Framework Advanced Fullstack JavaScript developer Супер-интенсив "Azure для разработчиков"
Инфраструктура
Мониторинг и логирование: Zabbix, Prometheus, ELK
-25%
DevOps практики и инструменты
-25%
Архитектор сетей
-25%
Инфраструктурная платформа на основе Kubernetes
-25%
Супер-интенсив «IaC Ansible»
-16%
Разработчик программных роботов (RPA) на базе UiPath и PIX
-25%
Administrator Linux. Professional MS SQL Server Developer Безопасность Linux PostgreSQL Reverse-Engineering. Professional CI/CD VOIP инженер Супер-практикум по работе с протоколом BGP Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Administrator Linux.Basic Супер-интенсив «ELK»
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

Пишем простейшую игру для iPhone

ios_Deep_28.4-5020-79b081.png

Осваивать программирование лучше всего на практике. В этой статье мы пошагово создадим простую игру с игральными костями, а также оптимизируем её под любые диагонали экранов. Для работы вам потребуется iMac или Macbook с предустановленным Xcode. Писать приложение для iOS будем на Swift.

Создание проекта

В первую очередь следует создать новый проект: в нашем случае речь идёт об iOS-приложении «Single View Application»:

1_1_1-20219-ec6cb8.png

Далее просто вводим желаемые значения:

2_1_1-20219-c7992b.png

Теперь нажимаем «Next», сохраняя проект в нужной папке. Потом в левой части экрана Xcode находим Main.Storyboard и нажимаем «Создать интерфейс пользователя».

3_1_e1499895131746_1-20219-407853.png

Теперь можно переходить к следующему этапу.

Интерфейс пользователя

Справа снизу есть панель библиотек, выбираем там вкладку «Object».

4_1_1-20219-012d23.png

Далее находим элемент Label, а потом перетаскиваем его на Main.Storyboard. В результате соданный вами проект должен выглядеть приблизительно следующим образом:

5_1_e1499895226692_1024x719_1-20219-2692e7.png

На данном этапе не волнуйтесь относительно размещения элементов на экране, т. к. оптимизацией мы займёмся позже. Сейчас же введём название для элемента «The sum is:» во вкладке «Inspector Pane»:

6_2_1-20219-1cf381.png

Далее добавим в Main.Storyboard два элемента из Object, а конкретнее, Image View. После того, как добавим их на главный экран, их нужно будет сделать квадратными. В результате получим:

7_1_1-20219-7d371f.png

Останется добавить кнопку. Чтобы это сделать, найдём элемент Button в правом нижнем углу и перетянем его на главный экран.

8_2_1-20219-a220fa.png

И введём в файловом менеджере новое название для кнопки — «Roll».

9_1_1-20219-f5316f.png

Используем функцию Auto Layout

Auto Layout — одна из лучших функций в Xcode. С её помощью можно оптимизировать размещение элементов на экране под любой необходимый размер. Давайте сначала поместим 2 элемента Image View в Stackview, выбрав их на экране либо боковой панели с зажатой кнопкой «CMD»:

10_1_1-20219-19e2b1.png

Теперь нажимаем на кнопку «Embed In Stack», выставляем параметр Axis в позицию Horizontal и устанавливаем параметр Spacing в значение 40:

11_1_1-20219-b3b541.png

Если что-то пойдёт не так, можно нажать «CMD + Z» и повторить процедуру. Теперь нужно добавить оставшиеся элементы в Stackview. Зажимаем «CMD», а потом выбираем их на экране Main.Storyboard. И выставляем параметр Vertical в поле Axis.

12_1_1024x346_1-20219-6aa8d9.png

Теперь нажимаем кнопку «Add New Constraints» и выставляем параметры, показанные на скриншоте:

13_1_1-20219-79f818.png

Осталось выбрать Stackview для всех элементов, а потом в поле Spacing установить значение 50.

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

Подключаем элементы к коду

В первую очередь соединяем визуальные элементы с ViewController.swift. При этом элементы UILabel и UIImageView должны быть типа @IBOutlet, а UIButton — @IBAction. Выполняем эту операцию с зажатой кнопкой «CTRL» и выбранным Assistant Editor. По итогу получим:

14_1_1024x544_1-20219-084f37.png

Добавляем графику

Теперь пришёл черёд для графики. Давайте скачаем архив с изображениями и добавим их в Assets.xcassets. Откроем архив и перетянем все элементы в проект за исключением папки icon.

15_1_1-20219-1a784b.png

По итогу Assets.xcassets должен выглядеть следующим образом:

16_2_1024x563_1-20219-f791ba.png

Вернёмся к экрану Main.Storyboard и выберем для каждого ImageView любое изображение игральных костей. Это следует делать в Attributes Inspector:

17_1_1024x501_1-20219-0ed940.png

Для добавления фонового изображения вставляем дополнительный ImageView и устанавливаем параметры, которые указаны на скриншоте:

18_1_1-20219-1f4ebe.png

Для нашего фона в Attributes Inspector выбираем изображение «table»:

19_1_1-20219-cc85c1.png

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

20_2_1-20219-da1aa1.png

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

21_1_1-20219-0a29f0.png

Пишем код

Вот мы и дошли до кода. Откроем файл ViewController.swift и вставим в функцию кнопки следующее:

@IBAction func rollACTION(_ sender: UIButton) {

    label.text = "Hello Dice"
    leftImageView.image = UIImage(named: "Dice6")
    rightImageView.image = UIImage(named: "Dice6")
}

В результате мы программно поменяем значения элементов. Если мы запустим проект и нажмём на кнопки, то увидим эти значения на экране:

22_1-20219-a50f20.png

Завершающий шаг — написание функции, которая будет случайно выбирать значения для наших игральных костей. Также код станет выводить сумму чисел на экране. Создадим функцию rollDice(), а потом поместим в неё код:

 func rollDice(){

        let numberOne = arc4random_uniform(6) + 1
        let numberTwo = arc4random_uniform(6) + 1
        label.text = "The sum is: \(numberOne + numberTwo)"
        leftImageView.image = UIImage(named: "Dice\(numberOne)")
        rightImageView.image = UIImage(named: "Dice\(numberTwo)")
    }

Далее надо удалить код внутри кнопки «rollACTION» и вставить туда rollDice(). Потом поместим это значение в функцию viewDidLoad():

// Функция, вызываемая при старте нашего приложения  
override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        rollDice()
    }

// Значения для кнопки 
 @IBAction func rollACTION(_ sender: UIButton) {
         rollDice()
    }

Вот и всё, теперь можно запускать игру. При этом каждый раз при нажатии кнопки «Roll» мы будем получать различные значения. Кстати, готовый проект есть на GitHub.

23_1-20219-02e3ae.png

По материалам «How To Make A Dice Roll iPhone App».

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться
🎁 Максимальная скидка!
Черная пятница уже в OTUS! Скидка -25% на всё!