Як створити гру «Кидання гральних кісток» для iPhone
У цій статті ми покроково створюватимемо гру для кидання гральних кісток, а також навчимося оптимізувати програми під будь-які діагоналі екранів. Для цього нам знадобиться Macbook або iMac із встановленим на нього Xcode. Як мову програмування ми будемо використовувати Swift 3.0.
Створення проекту Xcode
Для початку створимо новий проект у Xcode, а саме програму для iOS «Single View Application».
У наступному вікні ми можемо ввести все, що завгодно. У результаті має вийти щось подібне:
Натискаємо кнопку «Next» та зберігаємо проект у будь-якому зручному місці на комп'ютері. Тепер, коли створено новий проект Xcode, у лівій частині екрану знаходимо Main.Storyboard та натискаємо «Створювати інтерфейс користувача».
Інтерфейс користувача
У нижньому правому куті Xcode знаходиться панель бібліотек, де потрібно вибрати вкладку «Object».
Тепер знаходимо елемент Label і перетягуємо його на Main.Storyboard. Після цього наш проект має виглядати приблизно так:
Не варто зараз хвилюватися про розміщення елементів на екрані, пізніше в проекті ми скористаємося функцією Auto Layout, яка допоможе оптимізувати нашу програму під усі діагоналі екранів iPhone.
У вкладці Inspector Pane вводимо назву для нашого елементу The sum is:.
Наступним кроком буде додавання в Main.Storyboard двох елементів з Object, а саме Image View. Після додавання на головний екран зробимо квадратними. У результаті ми маємо отримати наступний результат:
Залишилося додати лише один елемент – кнопку. Для цього в нижньому правому кутку знаходимо елемент Button і перетягуємо його на головний екран.
У файловому менеджері вводимо нову назву для кнопки Roll.
Використання функції Auto Layout
Однієюз найкращих функцій у Xcode є Auto Layout, вона оптимізує розміщення елементів на екрані під будь-який розмір. В першу чергу помістимо два елементи Image View у Stackview. Для цього вибираємо їх на екрані або бічній панелі із кнопкою «CMD».
Вибравши ці два елементи, натисніть на кнопку Embed In Stack, яка знаходиться внизу екрана, виставте параметр Axis в позицію Horizontal і встановіть параметр Spacing значення 40. У результаті отримаємо наступне:
Якщо з якихось причин щось пішло не так, ми завжди можемо натиснути CMD + Z і повторити процедуру спочатку.
Далі нам додайте елементи в Stackview . Для цього затискаємо CMD і вибираємо їх на екрані Main.Storyboard. У полі Axis виставляємо параметр Vertical.
Після цього натисніть кнопку «Add New Constraints» та виставте параметри, як на скріншоті:
Тепер потрібно вибрати Stackview для всіх елементів та в полі Spacing встановити значення 50.
Підключення елементів до коду
Щоб наша програма запрацювала, нам потрібно написати код. Для цього з'єднуємо візуальні елементи з ViewController.swift. Елементи UIImageView і UILabel повинні бути типу @IBOutlet, а UIButton - @IBAction. Робиться це із затиснутою кнопкою «CTRL» і вибраним Assistant Editor. У результаті ми маємо отримати наступний результат:
Додавання графіки
Настав час додати графіку. Для цього завантажуємо архів із зображеннями та зберігаємо у будь-якому місці на вашому комп'ютері. Додаємо їх у Assets.xcassets. Для цього відкриваємо архів та перетягуємо всі елементи в проект (крім папки icon).
В результаті Assets.xcassets має виглядати так:
Повертаємося до екрану Main.Storyboard та вибираємо для кожного ImageView будь-яке із зображень гральних кісток. Робиться це вAttributes Inspector.
Щоб додати фонове зображення, нам потрібно вставити додатковий ImageView та встановити параметри, позначені на скріншоті:
Далі вибираємо зображення "table" для нашого фону в Attributes Inspector. В результаті наш проект виглядатиме так:
Щоб зробити текст читальнішим, змінимо його колір і збільшимо шрифт. Вибираємо напис, встановлюємо білий колір та збільшуємо шрифт.
Також вибираємо зображення для кнопки.
Написання коду
Відкриваємо файл ViewController.swift і вставляємо у функцію кнопки наступний код:
Таким чином, ми програмно змінюємо значення елементів. Запустивши проект і натиснувши на кнопки, ми маємо побачити ці значення на екрані:
Завершальним етапом буде написання функції, яка випадково вибиратиме значення для гральних кісток. Також наш код виводитиме суму чисел на екрані. Для цього створимо функцію rollDice() і помістимо до неї наступний код:
Тепер видаляємо весь код усередині кнопки rollACTION і вставляємо туди rollDice() . Потім поміщаємо це значення у функцію viewDidLoad() :
Тепер при запуску гри щоразу, натискаючи кнопку «Roll», ми отримуватимемо різні значення. Готовий проект можна завантажити на GitHub.