Създаването на мега популярна игра за iOS е бързо и ще го докажем в тази серия с уроци : ). С тази статия започваме поредица от материали за създаване на игра за iPhone.
Ще използваме Sprite Kit и Swift на аматьорско ниво, за да създадем нещо като Mega Jump. Това е доста популярна игра за вертикално скачане в аркаден стил. Doodle Jump също може да се нарече негов аналог. Видеото по-долу показва как изглежда геймплеят на устройството …
Докато изграждаме играта, ще научите как да използвате функциите на Sprite Kit като откриване на сблъсък, контрол на акселерометъра, преходи на сцената. Ако сте напълно нови в Sprite Kit двигателя, можете да разгледате наръчника за начинаещи Sprite Kit на Ray и след това да преминете към тази серия уроци. Но ако сте уверени в себе си, тогава продължете!
Оригиналната статия на английски може да бъде намерена тук.
Забележка: За да играете, ще ви е необходим платен акаунт на програмист. И ако възнамерявате да използвате този урок максимално, тогава устройството за тестване също.
Започнете
Ще направим игра като Mega Jump. Както казва известната поговорка: „Както назовеш яхта, така тя ще плава“. За да стане играта наистина ярка, тя трябва да има ярко, запомнящо се име.
“Uber” е дори по-добър от “mega”, така че нека го наречем “Uber Jump” :).
Всъщност играта в духа на Mega Jump е физическа игра: главният герой е изхвърлен нагоре по екрана и от този момент той трябва да се бори с гравитацията, за да издържи възможно най-дълго.
Докато героят събира монети, той се изкачва все по-високо и платформите осигуряват временна почивка по пътя му. Нашата игра Uber Jump ще има същия модел: първо ще изхвърлим героя си и след това ще приложим постоянна гравитация към него. По пътя си той ще събира звезди, които ще му помогнат да се издигне нагоре, отговаряйки за движението по оста Y. Ако пропуснете твърде много звезди, тогава героят неизбежно ще падне надолу.
Акселерометърът ще контролира движението на играча по оста X. Като накланяте устройството надясно или наляво, можете да зададете посоката на движението на героя хоризонтално.
Резултатът ще се състои от динамичен компонент (тъй като ще прилагате две сили към играча), както и кинематичен компонент (тъй като директно ще промените скоростта му). Така че няма да скучаете!
Първо трябва да създадете нов Xcode проект с Sprite Kit двигателя. Стартирайте Xcode, изберете File \ New \ Project, след това IOS \ Application \ SpriteKit Game шаблон и щракнете върху Neх t.
В полето с името на продукта въведете UberJump, като език, изберете Swift, в раздела с устройства въведете iPhone и след това щракнете върху бутона “Напред”.
Изберете място за съхранение на проекта и щракнете върху бутона „Създаване“. Преди да започнете да работите, има някои предварителни настройки, които трябва да направите. Намерете файла GameScene .sks в навигатора. Няма да имаме нужда от него, затова го изберете и кликнете върху бутона „Изтриване“. Когато се появи прозорецът за предупреждение, щракнете върху „Премести в кошчето“.
Сега отворете GameViewController.swift и премахнете разширението unarchiveFromFile SKNode в горната част на файла, тъй като няма да имаме нужда от чужд код. След това заменете метода viewDidLoad със следното:
замяна func viewDidLoad() { супер .view DidLoad () позволявам skView = себе си .view as SKView skView.showsFPS = вярно skView.showsNodeCount = вярно позволявам сцена = GameScene(размер : skView.bounds.размер ) сцена .scaleMode = .AspectFit skView.presentScene (scene) } |
Щракнете върху Build, след това Run, за да се уверите, че засега всичко работи.
Не се притеснявайте, че текстовият етикет „Здравей, свят“ е съкратен. Можете да го намерите във файла GameScene.swift и да го замените с това, от което се нуждаете. Но първо трябва да направите последното нещо, което да настроите. Тъй като нашата игра ще използва акселерометър, трябва да се уверим, че завъртането на устройството не превключва приложението в хоризонтален режим.
В навигатора Xcode (където вашият проект е избран в момента) изберете UberJump, отидете в раздела Общи в настройките и намерете раздела Информация за внедряване. Уверете се, че портретната ориентация е единствената налична за устройството.
Подготвихме проекта, за да започнем да добавяме игрови компоненти. Нека започнем със снимките.
Импортиране на графики
Изтеглете графични ресурси (връзка за изтегляне в края на статията) за този проект и ги плъзнете и пуснете в Xcode. Уверете се, че са избрани „Дестинация: Копиране на елементи, ако е необходимо“ и UberJump.
Илюстрациите са разделени на фон (папка Backgrounds) и игра (папка Assets.atlas). Фоновите плочки са плочки, които ще се обръщат нагоре и надолу по екрана при движение на героя:
Игрите включват всички спрайтове, по-специално героя, плочите и звездите.
За да се подобри ефективността, ресурсите на играта трябва да се съхраняват в атлас за текстури. Можете да научите повече за текстурните атласи в Sprite Kit в този урок.
Изграждане на сцената
Може би сте забелязали, че класът GameScene вече е създаден в шаблона на проекта. Това е сцената на Sprite Kit, която в момента показва „Здравей, Свят!“ при стартиране на играта. Повечето от действията Uber Jump ще се проведат тук, затова отворете класа GameScene.swift и заменете съдържанието със следното:
внос SpriteKit class GameScene: SKScene { задължително в него ? (кодер aДекодер : NSCoder ) { супер .в него (кодер : aDecoder) } замяна в него (размер : CGSize ) { супер .в него (размер : size) Цвят на фона = SKColor.whiteColor () } } |
Щракнете върху Изграждане и изпълнение. GameScene вече не показва нищо повече от бял екран. Това е празно платно, върху което ще добавим основните обекти на играта. Mega Jump използва паралаксния ефект на слоевете, за да създаде реалистично рендиране на обема. Например обектите на преден план се движат по-бързо от фоновите обекти. В Uber Jump ще направим същия ефект, като създадем следните слоеве в сцената:
– Фон: забавен слой, изобразяващ далечен пейзаж.
– В средата: По-бърза декорация на клони на дървета.
– Преден план: бързо движещ се слой, съдържащ характера, звездите и платформите, които формират ядрото на геймплея.
– HUD: горен слой, който не се движи и показва етикети за оценяване.
Фоновият възел е първият, който се добавя. Отворете GameScene.swift и добавете следния метод:
func createBackgroundNode () -> SKNode { // 1 // Създаване на възел позволявам backgroundNode = SKNode() позволявам yРазмер = 64,0 ScaleFactor // 2 // Преминете през изображения, докато се изгради целият фон за индекс в 0...деветнадесет { // 3 позволявам възел = SKSpriteNode (imageNamed :Струна (формат : "Фон% 02d" , индекс + 1)) // 4 възел .setScale (ScaleFactor ) node.anchorPoint = CGPoint (х : 0,5 , у : 0,0 ) възел.позиция = CGPoint(x: себе си .размер.ширина / 2, у : yРазмер CGFloat (индекс )) // пет backgroundNode.addChild (node) } // 6 // Връща завършения фонов възел връщане backgroundNode } |
Нека разгледаме по-отблизо какво правим тук:
1. Първо, ние създаваме нов екземпляр на SKNode. Той няма визуално съдържание, но е позициониран на сцената. Това означава, че можем да го преместваме навсякъде и неговите дъщерни възли ще се движат с него.
интересни 6.1-инчови iPhone 12 и iPhone 12 Pro ще бъдат пуснати в продажба първи Apple ще обявят пускането на iPhone 12 от ден на ден
2. Имаме 20 фонови изображения, които трябва да бъдат подредени в ред, за да запълнят фона.
3. Всеки дъщерен възел се наследява от SKSpriteNode с добавяне на съответно фоново изображение, заредено от нашите ресурси.
4. Преместването на опорната точка на всеки възел в долния му център позволява възлите да бъдат лесно подредени един върху друг.
5. Добавяме всеки дъщерен възел към фоновия възел.
6. Накрая връщаме фоновия възел.
Сега е моментът да поставите фоновия възел на сцената. В GameScene.swift добавете следните свойства:
// Слоести възли позволявам backgroundNode = SKNode() позволявам midgroundNode = SKNode() позволявам foregroundNode = SKNode() позволявам hudNode = SKNode() // За настаняване iPhone 6 позволявам ScaleFactor : CGFloat = 0,0 |
Добавяме свойства за всеки от възлите, които ще бъдат използвани в играта. Засега се нуждаем само от фонов възел, но не боли да декларираме и други възли едновременно.
Можем да добавим и свойството ScaleFactor . Това е необходимо, за да могат графиките да бъдат правилно мащабирани и разположени на всички модели iPhone.
За да добавите фон към сцената, вмъкнете следния код в метода init (size 🙂 на класа GameScene.swift, веднага след реда, който задава цвета на фона:
scaleFactor = себе си .размер.ширина / 320,0 // Създаване на възлите на играта // Заден план backgroundNode = createBackgroundNode() addChild(backgroundNode) |
Графиката е проектирана така, че да отговаря на стандартен 320-пикселов широк екран, който повечето модели имат iPhone. Следователно тук се използва коефициент на мащаба, за да се адаптира към други размери на екрана. След инициализиране на фоновия възел, всичко, което трябва да направим, е да го добавим като дете към текущата сцена.
Щракнете върху Build and Run, за да се уверите, че нашият фонов възел се появява на сцената, както е показано по-долу:
Забележка: Въпреки че сме добавили 20 деца към фоновия възел, ще видите, че когато стартирате приложението на 4-инчово устройство, на сцената се показват само девет възела. И с 3,5-инчов екран – само осем. Sprite Kit е доста напреднал и показва само възлите, които трябва да се виждат в играта в момента.
Добавяне на възел на плейър (Node)
Време е да пуснем на сцената нашия “Super Jumper”. В GameScene.swift добавете следния метод:
func createPlayer () -> SKNode { позволявам плейър Node = SKNode() плейър Node.position = CGPoint(x: себе си .размер.ширина / 2, у : 80,0 ) позволявам спрайт = SKSpriteNode(imageNamed: "Играч" ) плейър Node.addChild (спрайт ) връщане playerNode } |
По същия начин, по който добавихме фонов възел, се създава SKNode и към него като дете се добавя SKSpriteNode, съдържащ спрайт на играча. Поставете възела на плейъра така, че да е в центъра на екрана хоризонтално и точно над дъното на сцената. Преди да добавите възела на плейъра към сцената, трябва да създадете преден план. Както беше обсъдено по-горе, възелът на преден план ще съдържа плейъра, звездите и платформите. Това означава, че когато го преместваме, тогава всички елементи на играта ще се движат с него.
Поставете следния код в метода init (size 🙂 веднага след реда, който добавя backgroundNode към сцената:
// Преден план foregroundNode = SKNode() addChild(foregroundNode) |
Сега, когато имаме възел на преден план за нашите елементи на играта, можем да добавим възел на играч към него. В горната част на GameScene.swift декларирайте следното свойство:
// Играч позволявам player = SKNode() |
Сега поставете възла на плейъра на сцената, като вмъкнете следния код в init (размер 🙂 точно след реда, който добавя foregroundNode към сцената:
// Добавяне на плейъра player = createPlayer() foregroundNode.addChild (player) |
Изграждайте и бягайте (Build and Run), за да видите Super Jumper готов да започне приключението:
Добавяне на гравитация и физическо тяло
Нашият герой изглежда твърде спокоен. Би било хубаво да добавите физика към играта и да видите какво ще се случи. Нека започнем с факта, че физиката на нашата игра е немислима без гравитация. В GameScene.swift добавете следния ред към init (size 🙂 веднага след реда, който задава цвета на фона:
// Добавете малко гравитация физикаСвят.гравитация = CGVector (dx : 0,0 , ди : -2.0 ) |
Правейки това, вие добавяте гравитационен вектор към физическия свят въз основа на сюжета на играта. Гравитацията не се проектира върху оста X; тя създава сила надолу по оста Y.
Изграждайте и бягайте, за да видите как гравитацията ще повлияе на възела на играча.
Хм … нищо не се случи. Защо вашият герой се грижи за гравитацията? Опитайте се да разберете сами, преди да погледнете отговора.
Отговор:
Силата, генерирана от гравитацията, има динамичен ефект само върху физическите тела на сцената. А обектите от класа SKNode, като възела на плейъра на нашия плейър, нямат физически тела, зададени по подразбиране. Следователно трябва да присвоим физическо тяло на възела на играча. В края на метода createPlayer добавете следния код преди оператора return:
// 1 playerNode.physicsBody = SKPhysicsBody (circleOfRadius : sprite.size.width / 2) // 2 playerNode.physicsBody? .dynamic = вярно // 3 playerNode.physicsBody? .allowsRotation = невярно // 4 playerNode.physicsBody?. възстановяване = 1.0 playerNode.physicsBody? .friction = 0,0 playerNode.physicsBody? .angularDamping = 0,0 playerNode.physicsBody? .linearDamping = 0,0 |
Горният код задава физическото тяло на плейъра. Нека да го разгледаме подробно:
1. Всяко физическо тяло трябва да има форма, която физическият двигател може да използва за откриване на сблъсъци. Най-удобната форма на тялото за използване при откриване на сблъсък е кръг (лесно е да се разбере кога кръговете се припокриват), а също така кръгът е много подходящ за възела на вашия играч. Радиусът му е половината от ширината на спрайта.
2. Физическите тела се подразделят на статични и динамични. Динамичните тела са под въздействието на физическия двигател и следователно зависят от силите и импулсите. Статичните тела не са засегнати, но все пак можем да ги използваме за откриване на сблъсък. Например, статично тяло като стена или твърда платформа никога няма да се движи, но други обекти могат да се блъснат в него. Тъй като искаме възелът на нашия играч да е под гравитация, задайте динамичното му свойство на true.
3. Необходимо е възелът на нашия играч да остане винаги във вертикално положение, така че изключваме въртенето на възела.
4. Тъй като ние се справяме независимо с сблъсъци в тази игра, ние задаваме параметрите на физическото тяло на възела на играча, така че да няма триене или затихване. Ние обаче зададохме неговото свойство за възстановяване на 1, за да предотвратим загубата на физическото тяло от част от инерцията си по време на сблъсъци.
Изграждайте и бягайте, за да видите как спрайтът на играча пада в дъното на екрана, докато гравитацията го привлича безмилостно към центъра на Земята.
Може да звучи малко мелодраматично, но как нашият герой ще намери своето място в този свят?
Продължение след седмица ….
Изтеглете графични ресурси за урока.