Как да направите игра с хвърляне на зарове за iPhone
В тази статия стъпка по стъпка ще създадем игра за хвърляне на зарове, както и ще научим как да оптимизираме приложения за всякакви размери на екрана. За да направим това, имаме нужда от Macbook или iMac с предварително инсталиран Xcode. Ще използваме Swift 3.0 като наш език за програмиране.
Създайте Xcode проект
Като начало, нека създадем нов проект в Xcode, а именно приложението за iOS „Single View Application“.
В следващия прозорец можем да въведем каквото си поискаме. Крайният резултат трябва да бъде нещо подобно:
Кликнете върху бутона "Напред" и запазете проекта на всяко удобно място на вашия компютър. Сега, когато новият проект Xcode е създаден, от лявата страна на екрана намираме Main.Storyboard и щракнете върху „Създаване на потребителски интерфейс“.
Потребителски интерфейс
В долния десен ъгъл на Xcode е панелът Libraries, където трябва да изберете раздела "Object".
Сега намерете елемента Label и го плъзнете върху Main.Storyboard. След това нашият проект трябва да изглежда така:
Засега не се притеснявайте за разположението на елементите на екрана, по-късно в проекта ще използваме функцията Auto Layout, която ще помогне за оптимизиране на нашето приложение за всички размери на екрана на iPhone.
В раздела "Инспектор панел" въвеждаме името на нашия елемент "Сумата е:".
Следващата стъпка е да добавите два елемента от Object към Main.Storyboard, а именно Image View. След като добавим към главния екран, нека ги направим квадратни. В резултат на това трябва да получим следния резултат:
Остава да добавим само един елемент - бутона. За да направите това, намерете елемента Button в долния десен ъгъл и го плъзнете към главния екран.
Във файловия мениджър въведете ново име за бутона - "Превъртане".
Използване на автоматично оформление
единЕдна от най-добрите функции в Xcode е Auto Layout, която оптимизира разположението на елементите на екрана за всякакъв размер. Първо, нека поставим два елемента Image View в Stackview. За да направите това, изберете ги на екрана или страничната лента, докато държите бутона "CMD".
След като изберете тези два елемента, щракнете върху бутона „Вграждане в стека“ в долната част на екрана, задайте параметъра Axis на хоризонтална позиция и задайте параметъра Spacing на 40. В резултат на това получаваме следното:
Ако по някаква причина нещо се обърка, винаги можем да натиснем "CMD + Z" и да повторим процедурата отначало.
След това добавяме останалите елементи към Stackview. За да направите това, задръжте натиснат "CMD" и ги изберете на екрана Main.Storyboard. В полето Axis задайте параметър Vertical .
След това щракнете върху бутона „Добавяне на нови ограничения“ и задайте параметрите, както на екранната снимка:
Сега трябва да изберете Stackview за всички елементи и да зададете полето Spacing на 50.
Свързване на елементи към код
За да работи нашето приложение, трябва да напишем някакъв код. За да направим това, свързваме визуални елементи с ViewController.swift. Елементите UIImageView и UILabel трябва да са от тип @IBOutlet, а UIButton трябва да бъде @IBAction. Това става с натиснат бутон CTRL и избран помощен редактор. В резултат на това трябва да получим следния резултат:
Добавяне на графики
Време е да добавите графики. За да направите това, изтеглете архива с изображения и го запазете навсякъде на вашия компютър. Добавяме ги към Assets.xcassets. За да направите това, отворете архива и плъзнете всички елементи в проекта (с изключение на папката с икони).
В резултат на това Assets.xcassets трябва да изглежда така:
Връщаме се на екрана Main.Storyboard и избираме за всяко ImageView някое от изображенията на зарове. Това се прави вИнспектор на атрибути.
За да добавим фоново изображение, трябва да вмъкнем допълнителен ImageView и да зададем опциите, посочени на екранната снимка:
След това изберете изображението "таблица" за нашия фон в инспектора на атрибутите. В резултат на това нашият проект ще изглежда така:
За да направите текста по-четлив, променете цвета му и увеличете размера на шрифта. Изберете надписа, задайте цвета на бяло и увеличете шрифта.
Избираме и изображение за бутона.
Писане на код
Отворете файла ViewController.swift и поставете следния код във функцията на бутона:
По този начин ние програмно променяме стойността на елементите. Като стартираме проекта и щракнем върху бутоните, трябва да видим тези стойности на екрана:
Последната стъпка е да напишете функция, която произволно ще избира стойности за заровете. Освен това нашият код ще покаже сумата от числата на екрана. За да направите това, нека създадем функция rollDice() и да поставим следния код в нея:
Сега премахнете целия код в бутона "rollACTION" и поставете rollDice() в него. След това поставяме тази стойност във функцията viewDidLoad():
Сега, при стартиране на играта, всеки път, когато натиснем бутона "Хвърли", ще получаваме различни стойности. Готовият проект може да бъде изтеглен от GitHub.