Статьи

Создайте физическую игру-головоломку — добавьте взаимодействие

Это вторая часть нашего учебного пособия по физике Corona SDK. В сегодняшнем уроке мы добавим наш интерфейс и взаимодействие с игрой. Читай дальше!


  1. Создайте физическую игру-головоломку — Создание интерфейса
  2. Создайте физическую игру-головоломку — добавьте взаимодействие

Обязательно прочитайте первую часть учебника, чтобы полностью понять и подготовиться к этому учебнику.


Эта функция добавляет необходимых слушателей к кнопкам TitleView .

1
2
3
4
5
6
7
8
9
function startButtonListeners(action)
    if(action == ‘add’) then
        playBtn:addEventListener(‘tap’, showGameView)
        creditsBtn:addEventListener(‘tap’, showCredits)
    else
        playBtn:removeEventListener(‘tap’, showGameView)
        creditsBtn:removeEventListener(‘tap’, showCredits)
    end
end

Экран кредитов отображается, когда пользователь нажимает кнопку о . Прослушиватель касаний добавляется в представление кредитов, чтобы удалить его.

1
2
3
4
5
6
function showCredits:tap(e)
    playBtn.isVisible = false
    creditsBtn.isVisible = false
    creditsView = display.newImage(‘credits.png’, -130, display.contentHeight-140)
    transition.to(creditsView, {time = 300, x = 65, onComplete = function() creditsView:addEventListener(‘tap’, hideCredits) end})
end

При нажатии на экран кредитов, он будет отключен со сцены и удален.

1
2
3
4
5
function hideCredits:tap(e)
    playBtn.isVisible = true
    creditsBtn.isVisible = true
    transition.to(creditsView, {time = 300, y = display.contentHeight+creditsView.height, onComplete = function() creditsView:removeEventListener(‘tap’, hideCredits) display.remove(creditsView) creditsView = nil end})
end

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

1
2
function showGameView:tap(e)
    transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners(‘rmv’) display.remove(titleView) titleView = nil end})

Следующие строки добавляют сообщение с инструкциями. Мы покажем это в течение двух секунд, а затем исчезнем.

1
2
3
4
5
6
— Instructions Message
     
    local ins = display.newImage(‘ins.png’, 32, 182)
    transition.from(ins, {time = 200, alpha = 0.1, onComplete = function() timer.performWithDelay(2000, function() transition.to(ins, {time = 200, alpha = 0.1, onComplete = function() display.remove(ins) ins = nil end}) end) end})
     
    lvlImg = display.newImage(‘level.png’, 202, 2)

Этот код создает прямоугольник в нижней части сцены для использования в качестве пола.

1
2
3
— Floor
     
local floor = display.newRect(0, 320, 480, 1)

Эта часть обрабатывает создание уровня. Это начинается с создания коробок на сцене. Мы узнаем больше об этой функции в следующих шагах.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
— Level boxes
     
    addBox(‘g’, 60, 272)
     
    addBox(‘s’, 148, 284)
    addBox(‘s’, 148, 248)
    addBox(‘s’, 148, 212)
    addBox(‘s’, 148, 176)
     
    addBox(‘n’, 297, 272)
    addBox(‘n’, 297, 224)
    addBox(‘n’, 297, 176)
     
    addBox(‘w’, 148, 164)

Этот код добавляет мяч на уровень.

1
2
3
4
— Ball
 
ball = display.newImage(‘ball.png’, 234, 138)
ball.name = ‘ball’

Здесь мы добавляем физику в пол и мяч.

1
2
3
4
5
    — Add Physics
     
    physics.addBody(floor, ‘static’)
    physics.addBody(ball, ‘dynamic’, {radius = 12})
end

Следующая функция использует три параметра для создания объекта box. Вы можете указать тип поля в первом параметре и его положение в следующих двух. С помощью этого метода вы можете создавать сложные уровни, используя всего несколько строк кода. Это добавит физику в новую коробку так же как слушателя касания.

01
02
03
04
05
06
07
08
09
10
function addBox(type, X, Y)
    local b = display.newImage(type .. ‘Box.png’, X, Y)
    physics.addBody(b, ‘dynamic’)
     
    if(type ~= ‘g’) then
        b:addEventListener(‘tap’, removeBox)
    elseif(type == ‘g’) then
        b:addEventListener(‘collision’, onCollision)
    end
end

Эта функция удаляет поле назначения, когда оно коснулось.

1
2
3
function removeBox(e)
    display.remove(e.target)
end

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

1
2
3
4
5
6
function onCollision(e)
    if(e.other.name == ‘ball’) then
        display.remove(ball)
        alert()
    end
end

Функция оповещения создает представление оповещения, оживляет его и завершает игру.

01
02
03
04
05
06
07
08
09
10
11
function alert(action)
    gameListeners(‘rmv’)
     
    if(action == ‘lose’) then
        alertView = display.newImage(‘lose.png’, 110, 218)
    else
        alertView = display.newImage(‘win.png’, 110, 218)
    end
     
    transition.from(alertView, {time = 200, alpha = 0.1})
end

Чтобы начать игру, необходимо вызвать функцию Main . Мы сделаем это с помощью следующего кода.

1
Main()

Файл default.png — это изображение, которое будет отображаться сразу после запуска приложения. Он будет автоматически добавлен компилятором Corona, когда вы добавите его в исходную папку вашего проекта.


Используя графику, которую вы создали ранее, вы можете создать красивый значок. Размер значка для iPhone без изображения Retina составляет 57x57px , но версия Retina составляет 114x114px, а для магазина iTunes требуется версия 512x512px . Я предлагаю сначала создать версию 512×512 и уменьшить ее для других размеров.

Это не должно иметь закругленные углы или прозрачные блики. iTunes и iPhone сделают это за вас.


Пришло время сделать финальный тест. Откройте Corona Simulator, перейдите в папку вашего проекта и нажмите «Открыть». Если все работает, как ожидалось, вы готовы к последнему шагу!


В симуляторе Corona зайдите в File> Build и выберите ваше целевое устройство. Заполните необходимые данные и нажмите кнопку « Создать» . Подождите несколько секунд, и ваше приложение будет готово для тестирования устройства и отправки для распространения!


В этой серии мы узнали о физическом поведении, прослушивании касаний и столкновениях. Это навыки, которые могут быть действительно полезны в большом количестве игр.

Поэкспериментируйте с конечным результатом и попробуйте создать собственную версию игры!

Надеюсь, вам понравилась эта серия, и она показалась вам полезной. Спасибо за чтение!