Пишем простейшую игру для iPhone | OTUS
⚡ Открываем подписку на курсы!
Проходите параллельно 3 онлайн-курса в месяц по цене одного.
Подробнее

Курсы

Программирование
Программист 1С Реверс-инжиниринг. Продвинутый курс
-16%
Java Developer. Professional
-17%
JavaScript Developer. Professional
-18%
Flutter Mobile Developer
-15%
JavaScript Developer. Basic
-16%
Highload Architect
-10%
Нереляционные базы данных
-17%
Подготовка к сертификации Oracle Java Programmer (OCAJP)
-8%
Алгоритмы и структуры данных
-12%
Архитектура и шаблоны проектирования
-14%
Framework Laravel
-13%
IoT-разработчик
-12%
Team Lead
-15%
VOIP инженер Разработчик C# Разработчик на Spring Framework AWS для разработчиков Cloud Solution Architecture CI/CD Vue.js разработчик Разработчик Node.js Scala-разработчик Супер - интенсив по Kubernetes Symfony Framework Advanced Fullstack JavaScript developer
Специализации Курсы в разработке Подготовительные курсы
+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 комментариев
Для комментирования необходимо авторизоваться