16.06, ООО «ВК»
16.06, ООО «ВК»
16.06, ООО «ВК»

Как создать игру «Бросание игральных костей» для iPhone

Аватар Ярослав Сарницкий
Отредактировано

6К открытий6К показов
Как создать игру «Бросание игральных костей» для iPhone

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

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

Для начала создадим новый проект в Xcode, а именно приложение для iOS «Single View Application».

Как создать игру «Бросание игральных костей» для iPhone 1

В следующем окне мы можем ввести все, что угодно. В итоге должно получится нечто подобное:

Как создать игру «Бросание игральных костей» для iPhone 2

Нажимаем кнопку «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 и вставляем в функцию кнопки следующий код:

			@IBAction func rollACTION(_ sender: UIButton) {
        
    label.text = "Hello Dice"
    leftImageView.image = UIImage(named: "Dice6")
    rightImageView.image = UIImage(named: "Dice6")
}
		

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

Как создать игру «Бросание игральных костей» для iPhone 3

Завершающим этапом будет написание функции, которая случайным образом будет выбирать значения для игральных костей. Также наш код будет выводить сумму чисел на экране. Для этого создадим функцию 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.

Как создать игру «Бросание игральных костей» для iPhone 4
Следите за новыми постами
Следите за новыми постами по любимым темам
6К открытий6К показов