Создайте игру Endless Runner / бесконечно бегущий человечек с нуля: Меню игры

() translation by (you can also view the original English article)

Добро пожаловать в последнюю версию серии Endless Runner. В сегодняшнем уроке вы узнаете, как создавать игровое меню с помощью класса Director. Давайте начнем!

Поздравляем вас с этим знаменательным событием! Мы долго шли к этому дню, и теперь у нас есть функциональная игра и, надеюсь, базовое понимание того, как добавить свои собственные компоненты для расширения функционала. Шаг, который мы собираемся сделать сейчас, - это добавить маленький уровень в систему меню, чтобы игра выглядела более полноценной.

Мы будем использовать Director класс, который представляет собой небольшую, и одновременно, профессиональную библиотеку Рикардо Раубера, которая будет делать всю работу за вас. Как только вы увидите, насколько это легко, вы сможете быстро реализовать свои самые интересные идеи.

Первое, что вам нужно сделать, это перейти сюда и загрузить последнюю версию класса. Когда вы загрузите, вы увидите много файлов. Director класс поставляется с с их большим количеством , включает примеры, шаблоны и дополнительные функции, которые могут облегчить вашу жизнь, поэтому не стесняйтесь изучить все, что тут есть. Если вам не нужны все эти дополнения, вы можете загрузить только те файлы, которые нужны нам для урока.

Теперь, когда у нас есть файл director.lua, поместите его в ту же папку, что и ваш main.lua. Говоря о файле main.lua, перейдите к нему и переименуйте. Неважно, какое имя вы ему присвоите, т.к. мы все равно его позже удалим. После этого создайте три новых файла в этой папке. И назовите их main.lua, menu.lua и game.lua. Суть того, как это будет работать, в том, что main.lua будет вызван для запуска игры. Это будет основой нашей программы, в то время как menu.lua и game.lua будут выступать в качестве компонентов (displayGroups), которые отображаются вместе с displayGroup внутри main.lua, почти так же, как и все другие группы в нашей игре, все они содержатся и отображаются на экране displayGroup в нашей текущей игре.

Итак, во-первых, давайте создадим новый файл main.lua. Откройте его и вставьте этот код:


display.setStatusBar(display.HiddenStatusBar)
--by telling Corona to require "director" we are
--telling it to include everything in that file,
--giving us easy access to its functions. This is
--also how you would include any functions or
--"classes" that you created in outside files.
local director = require("director")
local mainGroup = display.newGroup()
local main = function()
     --this creates a view that we will use to load
     --the other scenes into, so as our game progresses
     --technically we are staying in the main.lua file
     --and just loading new views or scenes into it
     mainGroup:insert(director.directorView)
     --we tell the director to load the first scene which
     --is going to be the menu
     director:changeScene("menu")
end
--be sure to actually call the main function
main()

Вот и все! Уберите комментарии, и вы увидите, что для запуска director класса требуется всего 5 строк. Как говорится в комментариях, способ, который действительно работает, - main.lua запускается первым, но затем вместо того, чтобы процесс игры был определён в файле main.lua, мы разрешаем классу сделать это. Мы создаем display.newGroup и сохраняем его как основной вид. Поэтому, когда игра действительно загружается, все, что вы видите, фактически просматривается из файла main.lua внутри этой группы. Здорово, не так ли! Итак, как только вы создаёте представление, нам просто нужно сказать классу Director, что сцена будет загружена, и он автоматически перенесёт нас туда. Удобно, правда?

Следующее, что нам нужно сделать, чтобы на самом деле все работало, - создать вид меню. Код действительно прост, большинство которого мы уже видели, поэтому я сначала опубликую весь файл, а затем объясню несколько простых вещей. Давайте откроем menu.lua и посмотрим, как легко создать простую систему меню. Скопируйте следующее в меню menu.lua:


--this line is required so that director knows that
--this is a scene that can be loaded into its view
module(..., package.seeall)
--we need to be able to access the director class of
--course so be sure to include this here
local director = require("director")
local sprite = require("sprite")
--everything that you want this scene to do should be
--included in the new function. Everytime the director
--loads a new scene it will look here to figure out what
--to load up.
new = function( params )
     --this function will be returned to the director
     local menuDisplay = display.newGroup()
     --everything from here down to the return line is what makes
     --up the scene so... go crazy
     local background = display.newImage("background.png")
     background.x = 240
     background.y = 160
     local spriteSheet = sprite.newSpriteSheet("monsterSpriteSheet.png", 100, 100)
     local monsterSet = sprite.newSpriteSet(spriteSheet, 1, 7)
     sprite.add(monsterSet, "running", 1, 6, 600, 0)
     local monster = sprite.newSprite(monsterSet)
     monster:prepare("running")
     monster:play()
     monster.x = 60
     monster.y = 200
     local monster2 = sprite.newSprite(monsterSet)
     monster2:prepare("running")
     monster2:play()
     monster2.x = 420
     monster2.y = 200
     monster2.xScale = monster2.xScale * -1
     local title = display.newImage("title.png")
     title.x = 240
     title.y = 80
     local playButton = display.newImage("playButton.png")
     playButton.x = 240
     playButton.y = 220
     menuDisplay:insert(background)
     menuDisplay:insert(monster)
     menuDisplay:insert(monster2)
     menuDisplay:insert(title)
     menuDisplay:insert(playButton)
     --this is what gets called when playButton gets touched
     --the only thing that is does is call the transition
     --from this scene to the game scene, "downFlip" is the
     --name of the transition that the director uses
     local function buttonListener( event )
          director:changeScene( "game", "downFlip" )
          return true
     end
     --this is a little bit different way to detect touch, but it works
     --well for buttons. Simply add the eventListener to the display object
     --that is the button send the event "touch", which will call the function
     --buttonListener everytime the displayObject is touched.
     playButton:addEventListener("touch", buttonListener )
     --return the display group at the end
     return menuDisplay
end

Здесь есть и кое-что новое director: changeScene(). Это работает так, как вы себе это представляете. Тем не менее, я хотел указать на второй параметр - downFlip. Есть много встроенных переходов, которые могут сделать вашу игру очень привлекательной при переключении между сценами, это зависит от того, как вы хотите, чтобы ваша игра выглядела. Вот образец нашего прогресса.

Не забудьте попробовать несколько разных переходов, чтобы найти тот, который лучше всего подходит для вашей игры. Вы можете найти их полный список в файле director.lua. Посмотрите все различные эффекты и дайте своим идеям волю. Еще несколько примеров, которые вы можете попробовать, но не хотите далеко копать, - это crossfade", "overfromtop", и "flipFromBottom, и это лишь некоторые из них! Итак, кроме этого, осталось совсем немного того, чего вы не видели раньше. Все это просто создаёт примитивный экран главного меню. Там есть пара вещей, которые вы должны принять к сведению, что потребуется в каждой сцене, которая нужна director. Первое:

1
2	module(..., package.seeall)

Легко и просто. Вам нужно, чтобы точная строка в верхней части каждого файла *.lua, а именно director использовалась в качестве сцены. После этого у вас есть функция new(), которая вызывается при входе в сцену, и все, что вы хотите, чтобы сцена выполняла, это была включенной. Первое, что вам нужно сделать, это отобразить Object, который будет возвращен к управляющему классу, который и будет показан, а затем убедитесь что он вернул значение в конце новой функции. Это всё. Звучит просто? Это действительно так! Класс director действительно делает все проще. Пока ваши изображения находятся справа в меню, вы должны запустить файл main.lua и запустим его без каких-либо проблем.

До сих пор у нас был основной файл и файл меню. Последнее, что нам нужно сделать, это внести некоторые изменения в игровой файл. Это тоже будет легко. Откройте файл game.lua и добавьте следующий код:


module(..., package.seeall)
local director = require("director")
new = function( params )
  local gameDisplay = display.newGroup()
	--paste code here
	return gameDisplay
end

Это то, что вам нужно для сцены. Кстати, это все, что вам нужно, чтобы получить ваш старый файл main.lua в файл game.lua. Если он у вас уже есть, единственное, что вам нужно сделать, это скопировать весь файл old.lua и вставить его там, где сказано «вставить код здесь». Сделайте это, и вы закончили… .почти! Мы собираемся внести некоторые изменения в то, как будет отображаться наша игра над сообщениями. Вместо того, чтобы создавать большую кнопку, мы возвращаемся в меню. Давайте изменим здесь кое-что (обратите внимание, что файл gameOver.png был изменен, это даст ему возможность соответствовать новому расположению кнопок. Размеры изображения по-прежнему остаются такими же, поэтому вам не придется делать никаких других корректировок). Первыми изменениями станут новые кнопки в игре.

Добавьте этот код туда, где мы добавим все остальные изображения в верхней части файла:


local yesButton = display.newImage("yesButton.png")
yesButton.x = 100
yesButton.y = 600
local noButton = display.newImage("noButton.png")
noButton.x = 100
noButton.y = 600

Затем обязательно добавьте их и на экран. А также в остальные вкладки экрана:

1
2	screen:insert(yesButton)
3	screen:insert(noButton)

Следующий этап - это переход к функции touched () и удаление первого оператора if/else, вот так он будет выглядеть:


function touched( event )
if(monster.isAlive == true) then
	if(event.phase == "began") then
		if(event.x < 241) then
			if(onGround) then
				monster.accel = monster.accel + 20
			end
			else
				for a=1, blasts.numChildren, 1 do
					if(blasts[a].isAlive == false) then
						blasts[a].isAlive = true
						blasts[a].x = monster.x + 50
						blasts[a].y = monster.y
						break
					end
				end
			end
		end
	  end
     end

Делая это, он делает функцию touched той, которая только обрабатывает внутриигровые взаимодействия. Мы собираемся переместить логику, которая перезапускает игру до ее собственной функции. Добавьте эти функции ниже функции touched():


function noListener(event)
	director:changeScene( "menu", "downFlip" )
	return true
end
function yesListener(event)
	restartGame()
	return true
end

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

1
2	yesButton:addEventListener("touch", yesListener )
3	noButton:addEventListener("touch", noListener )

Итак, последние несколько вещей, которые мы должны сделать, это изменение позиции на две кнопки, когда наш монстр умирает, и когда мы перезагружаем игру. Вот дополнения, которые нам нужны, чтобы убедиться, что они работают правильно. В функции restartGame() добавьте следующее:


noButton.x = 100
noButton.y = 600
yesButton.x = 100
yesButton.y = 600

Затем перейдите к функции collisions check(), где вы должны увидеть эти строки повторяющиеся несколько раз:

1
2	gameOver.x = display.contentWidth*.65
3	gameOver.y = display.contentHeight/2

Добавьте этот блок в любой его экземпляр (всего должно быть 4, по одному для каждого пути):


yesButton.x = display.contentWidth*.65 - 80
yesButton.y = display.contentHeight/2 + 40
noButton.x = display.contentWidth*.65 + 80
noButton.y = display.contentHeight/2 + 40

После того, как вы внесете все изменения, вы должны быть готовы запустить игру из файла main.lua и вернуться к игре через меню, погибнуть, и затем выбрать хотите ли вы продолжить игру или выйти в меню. Итак, если все хорошо, это конец, теперь у нас есть наша игра. Мы делали всё очень быстро, большую часть времени. Если у вас возникнут какие-либо проблемы на любом этапе, дайте мне знать в комментариях, и я помогу вам с этим. Новая папка в загруженном файле также содержит конечный продукт, и также вы всегда можете использовать его в качестве образца. Надеюсь, эта серия помогла вам в том, что теперь вы начали заниматься разработкой игр с помощью Corona SDK. Corona SDK является мощным и очень дружественным инструментом, когда вы освоите основы. Надеюсь, вы сможете продвигаться вперед и создавать разные удивительные игры.

У нас будет ещё один урок в этой серии, в нём мы не будем менять игру, а сосредоточимся на отправке вашей игры в магазин приложений, поскольку это большое приключение, когда вы делаете это впервые. Желаю вам хорошего кода и спасибо за чтение!