Chapter 1 — Creating an App / Глава 1 – Создание приложении

Chapter 1 — Creating an App / Глава 1 - Создание приложении

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

Использование Corona

Corona Scripting

Corona использует Lua язык сценариев. Если вы когда - либо запрограммировать на любом языке, вы найдете Lua легкий переход. Наша Введение в Lua руководстве дается обзор Lua, или вы можете узнать на Lua YouTube . В очень короткое время, вы окажетесь писать , что большое приложение , которое вы мечтали о создании!

Если вы новичок в программировании, Lua по-прежнему легко узнать, и это руководство поможет вам вместе.

Текстовые редакторы

В дополнение к Corona , вам нужен текстовый редактор . Есть несколько редакторов , доступных и выбрать один очень походит на выбор автомобиля - у каждого есть свои собственные предпочтения , и вы должны исследовать , который подходит вам лучше всего.

Если у вас нет уже есть любимый текстовый редактор, рекомендуются следующие варианты:

Создание приложения

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

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

Запуск проекта

Создание нового проекта в Corona легко. За несколько простых шагов, которые вы будете готовы сделать свое первое приложение!

  1. Откройте Corona Simulator .

  2. Нажмите Новый проект от окна приветствия или выберите New Project ... из файла меню.

  1. Для проекта / имя приложения, тип BalloonTapи убедитесь , что Бланк выбран вариант шаблона. Оставьте остальные настройки по умолчанию и нажмите кнопку OK (Windows) илиNext (Mac). Это позволит создать основные файлы для вашей первой игры в папке (папка) , который вы указали. Это также папка , в которой вы будете размещать все ваши приложения файлов / активов, в том числе изображений, программные файлы и т.д.

в том числе изображения

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

файл Размер (Ш × В) Применение
background.png 360 × 570 Фон - чисто декоративные, так что мы не смотрели на черном фоне.
platform.png 300 × 50 Платформа / пол - держит воздушный шар от падения в нижней части экрана.
balloon.png 112 × 112 Воздушный шар.

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

  • Корона поддерживает PNG и JPG формат.
  • Изображения не должны содержать встроенный профиль ICC.
  • Избегайте прогрессивных файлов JPG, так как они будут принимать гораздо больше времени для загрузки.

Загрузка фона

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

С помощью выбранного текстового редактора, найдите и откройте main.luaфайл в папке проекта. main.luaФайл основополагающий "основной файл программы" каждого проекта Corona , и вы не можете создать приложение без него. Это файл Lua , с которой запускается приложение, каждый раз , когда вы запускаете приложение.

В этом main.luaфайле, введите команду:

local background = display.newImageRect( "background.png", 360, 570 )

Есть еще несколько аспектов, связанные с этой командой. Давайте разбить его:

  • Первое слово, localявляется команда Lua указывает , что следующее слово будет переменной . Переменная, так же , как вы узнали в математическом классе, используется для хранения значения. В этом случае, это значение будет изображение , используемое в качестве фона.Обратите внимание , что localвсегда в нижнем регистре и он используется здесь , чтобы объявить переменную; например, первый раз , когда вы используете переменную, вы должны добавить слово localперед ним.
  • Второе слово, backgroundявляется имя нашей переменной. Каждый раз , когда мы хотим внести изменения в изображения , хранящегося в background, мы будем использовать имя этой переменной.Не забывайте всегда использовать различные имена переменных каждый раз, когда вы используете переменную. Подобно тому, как это становится запутанным, если все в классе назван "Джон", используя то же имя переменной для всех ваших объектов создает путаницу в вашей программе.
  • =(Знак равенства) используется для присвоения переменной backgroundк изображению.
  • display.newImageRect()является одним из Corona API (Application Programming Interface). Он используется для загрузки изображения из файла , так что вы можете использовать его в приложении. Есть несколько способов ,чтобы загрузить изображение в приложение, но display.newImageRect()особенного в том , что он может изменить размер / масштабировать изображение (это будет объяснено в мгновение).
  • Внутри скобках приведены параметры , которые мы переходим к display.newImageRect(), который иногда называют в качестве аргументов . Первым параметром является имя файла изображения , который мы хотим загрузить, включая расширение файла ( .png).

Важный

Указанное имя должно совпадать с действительным именем файла точно, в том числе с учетом регистра соответствия! Например, если фактическое имя файла background.png, не не вводить его в качестве"BackGround.PNG".

Следующие два параметра, 360и 570указать размер , который мы хотим фоновое изображение будет. В этом случае мы просто будем использовать размеры пикселя на изображение, хотя , как было отмечено выше,display.newImageRect()позволяет изменять размер / масштабировать изображение с помощью этих чисел.

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

background.x = display.contentCenterX
background.y = display.contentCenterY

По умолчанию, Corona будет позиционировать центр объекта в точке координата , 0,0которая находится в верхнем левом углу экрана. Изменяя объекта xи yсвойства, однако, мы можем перенести фоновое изображение на новое место.

Для этого проекта мы разместим фона в центре экрана - но что , если мы не знаем точно , какие значения координат представляют собой центр? К счастью, Corona предоставляет некоторые удобные ярлыки для этого. При указании значения display.contentCenterXи display.contentCenterY, Corona установит координаты центра экране , как background.xи background.yсвойства.

Действие!

Давайте проверим результат вашего кода. Сохраните измененный main.luaфайл , а затем, внутри Corona Simulator, "перезапустить" его с помощью ⌘-R (Command-R) . Если все прошло хорошо, фон теперь должен показывать, в центре экрана.

Если вы получаете сообщение об ошибке или не может видеть фон, есть несколько возможностей относительно причины:

  • Одна из команд был введен неверно.
  • Файл изображения не находится в той же папке main.lua.
  • Указанное имя файла и / или расширение является неправильной или несогласованной в случае.

Загрузка платформы

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

local platform = display.newImageRect( "platform.png", 300, 50 )
platform.x = display.contentCenterX
platform.y = display.contentHeight-25

Как вы , наверное , заметили, есть одно небольшое изменение по сравнению с фоном: вместо того , чтобы позиционирование платформы в вертикальном центре, мы хотим его в нижней части экрана. С помощью команды display.contentHeight, мы знаем высоту области содержимого. Но помните , что platform.yпомещает центр объекта в указанном месте. Таким образом, так как высота этого объекта составляет 50 пикселов, вычесть 25 пикселей от значения, гарантируя , что вся платформа можно увидеть на экране.

Сохраните main.luaфайл и повторно запустить Simulator , чтобы увидеть платформы графики.

Загрузка Balloon

Чтобы загрузить воздушный шар, мы будем следовать тому же процессу. Ниже предыдущих команд, введите следующие строки:

local balloon = display.newImageRect( "balloon.png", 112, 112 )
balloon.x = display.contentCenterX
balloon.y = display.contentCenterY

Кроме того, чтобы дать Баллон слегка прозрачный внешний вид, мы понизим непрозрачность объекта (альфа) слегка. На следующей строке, установите аэростата alphaсобственность до 80% ( 0.8):

balloon.alpha = 0.8

Сохраните main.luaфайл и повторно запустить Simulator. Там должен быть воздушный шар в центре экрана.

Добавление физики

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

В том числе физика очень легко с Corona. Ниже предыдущей строки добавить:

local physics = require( "physics" )
physics.start()

Поясним эти две строки в немного более подробно:

  • Команда local physics = require( "physics" )загружает физический движок Box2D в ваше приложение и связывает его с локальной переменной physicsдля дальнейшего использования. Это дает вам возможность вызывать другие команды в библиотеке физики с помощью physicsпеременной пространства имен, как вы увидите в данный момент.
  • physics.start() делает именно то, что вы можете догадаться - он начинает физический движок.

Если сохранить и перезапустить вы не увидите никакой разницы в вашей игре ... пока . То есть , потому что мы не дали физический движок ничего общего. Для физики работать, нам нужно конвертировать изображения / объекты , которые были созданы в физические объекты. Это делается с помощью команды physics.addBody:

physics.addBody( platform, "static" )

Это говорит физический движок , чтобы добавить физическое "тело" к изображению , которое хранится в platform. Кроме того, второй параметр говорит Corona , чтобы рассматривать его как статический физический объект.Что это значит? В основном, статические физические объекты не подвержены под действием силы тяжести или других физических сил, так что в любой момент у вас есть объект , который не должен двигаться, установить его тип "static".

Теперь добавьте физическое тело к воздушному шару:

physics.addBody( balloon, "dynamic", { radius=50, bounce=0.3 } )

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

Заключительная часть этой physics.addBodyкоманды используется для настройки свойств тела аэростата - в этом случае мы дадим ему круглую форму и отрегулируйте его отскока / реституцию значение. Параметры должны быть помещены в фигурные скобки ( {}) (называемый таблицей в языке программирования Lua).

  • Поскольку воздушный шар круглый объект, мы присваиваем ему radiusсвойство со значением 50. Это значение в основном соответствует размеру нашего воздушного шара изображения, но вам может понадобиться ,чтобы настроить его немного , если вы создали свой собственный воздушный шар изображение.
  • bounceЗначение может быть любым неотрицательным десятичным или целое значение. Значение 0означает , что воздушный шар не имеет никакого отскока, в то время как значение 1будет сделать его в норму на 100% своей энергии столкновения. Значение 0.3, как показано выше, сделает его в норму на 30% своей энергии.

Заметки
  • bounceЗначение больше 1сделает объект отскочить назад с более чем 100% от энергии столкновения. Будьте осторожны , если вы установите значения выше , 1так как объект может быстро набирать обороты сверх того , что является типичным или ожидается.

  • Даже если вы измените аэростата bounceсвойство 0, он все равно будет отражаться от platformобъекта , потому что, по умолчанию, объекты имеют значение отскока от 0.2. Чтобы полностью удалить подпрыгивая в этой игре, установить как воздушный шар и платформу для bounce=0.

Сохраните main.luaфайл и повторно запустить Simulator. Как забавный эксперимент, вы можете попробовать корректировки bounceзначения и перезапустить проект , чтобы увидеть эффект.

функции

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

Для выполнения такого рода функции, языки программирования используют так называемые функции . Функции являются короткими (обычно) участки кода , которые выполняются только тогда , когда мы говорим им, например , когда игрок вводит воздушный шар.

Давайте создадим нашу первую функцию:

local function pushBalloon()

end

Функции имеют важное значение для разработки приложений с помощью Corona, поэтому давайте рассмотрим базовую структуру:

  • Как и прежде, мы используем ключевое слово , localчтобы объявить функцию.
  • Ключевое слово functionговорит Corona , что это функция , и что его набор команд будет называться именем pushBalloon.
  • Концовка круглые скобки ( ()) обязательны для заполнения. В последующих главах мы будем положить что - то в скобках, но теперь вы можете оставить это , как показано на рисунке.
  • Как уже упоминалось выше, функции автономные секции (блоки) кода , которые выполняются только тогда , когда мы говорим им. Таким образом, всякий раз , когда вы создаете функцию, вы должны закрыть его с ключевым словом end. Это говорит Lua , что функция закончена.

Отлично, теперь мы имеем функцию! К сожалению , это пустая функция в этой точке, так что он не будет на самом деле ничего делать , если мы запускаем его. Давайте исправить, добавив следующую строку кода внутри функции, между линией , где мы объявляем функцию и закрывающую endключевое слово:

balloon:applyLinearImpulse( 0, -0.75, balloon.x, balloon.y )

balloon:applyLinearImpulseэто действительно здорово команда. При применении к динамическим физическим объектом, как воздушный шар, он применяет "толчок" к объекту в любом направлении. Параметры, которые мы передаем сказать физический движок, сколько сил применять (как по горизонтали, так и по вертикали), а также, где на теле объекта, чтобы применить силу.

Первые два параметра, 0и -0.75, указывают количество направленной силы. Первое число является горизонтальным, или х направление, а второе число является вертикальным, или Y направление. Так как мы только хотим , чтобы толкать шар вверх (не влево или вправо) , мы используем в 0качестве первого параметра. Для второго параметра со значением -0.75, мы говорим физический движок , чтобы подтолкнуть шар вверх немного.Значение этого числа определяет величину силы, которая применяется: чем больше число, тем выше сила.

Заметка

Как показано на рисунке справа, положительные х значения в Corona распространяется на право, в то время как положительные у значения проходят вниз (не вверх ,как в декартовой системе координат). Именно поэтому мы используем отрицательное значение ( -0.75) , чтобы толкать шар вверх.

Третий и четвертый параметры, balloon.xи balloon.y, скажите физический движок , где применить силу, относительно самого баллона. Если применить силу в месте ,которое не является центром воздушного шара, это может вызвать воздушный шар , чтобы двигаться в неожиданном направлении или вращаться вокруг. Для этой игры, то мы будем держать сосредоточены на силу по центру баллона.

В целом, pushBalloonфункция должна выглядеть следующим образом :

local function pushBalloon()
    balloon:applyLinearImpulse( 0, -0.75, balloon.x, balloon.y )
end

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

Мероприятия

События это то , что создавать интерактивность и, во многих отношениях, Corona является событием на основе рамки , где отправляется информация в течение определенного события на слушателя событий . Является ли это событие является пользователем коснувшись кнопки / объекта, нажав на экран, или (в этой игре) нажав на воздушном шаре, Корона может реагировать, вызывая событие.

Добавление слушателя событий легко. Рассмотрим следующий пример:

balloon:addEventListener( "tap", pushBalloon )

Давайте проверять структуру этой команды:

  • Во- первых, мы должны сказать , какой объект Corona участвует в прослушивателя событий. Для этой игры, мы хотим , чтобы обнаружить событие , связанное непосредственно к balloonобъекту.
  • Сразу после этого добавьте двоеточие ( :), а затем addEventListener. В Lua, это называется метод объекта . По существу, addEventListenerпосле толстой кишки, сообщает Corona , что мы хотим добавить прослушиватель событий balloon, указанный перед двоеточием.
  • Внутри скобках приведены два параметра , которые завершают команду. Первый параметр является тип события , которое Corona будет слушать, в этом случае "tap". Второй параметр является функцией , которая должна быть запущена (называется) , когда происходит событие, в данном случае pushBalloonфункцию , которую мы писали в предыдущем разделе. По сути, мы говорим Corona , чтобы запустить pushBalloonфункцию каждый раз , когда пользователь вводит воздушный шар.
Действие!

То есть все - у вас есть функциональную игру прямо сейчас! Если вы сохраните main.luaфайл и повторно запустить имитатор, он должен быть готов к работе. Старайтесь изо всех сил , чтобы продолжить нажав / нажав на воздушный шар и предотвратить его от прикосновения к платформе!

Вот полная программа, на всякий случай, если вы что-то пропустили:

local background = display.newImageRect( "background.png", 360, 570 )
background.x = display.contentCenterX
background.y = display.contentCenterY

local platform = display.newImageRect( "platform.png", 300, 50 )
platform.x = display.contentCenterX
platform.y = display.contentHeight-25

local balloon = display.newImageRect( "balloon.png", 112, 112 )
balloon.x = display.contentCenterX
balloon.y = display.contentCenterY
balloon.alpha = 0.8

local physics = require( "physics" )
physics.start()

physics.addBody( platform, "static" )

physics.addBody( balloon, "dynamic", { radius=50, bounce=0.3 } )

local function pushBalloon()
    balloon:applyLinearImpulse( 0, -0.75, balloon.x, balloon.y )
end

balloon:addEventListener( "tap", pushBalloon )

 

Дополнительный кредит

Поздравляем, вы создали основную игру всего за 25 строк кода! Но есть что-то отсутствует, не существует? Не было бы хорошо, если игра отслеживал, сколько раз прослушивали воздушный шар? К счастью, это легко добавить!

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

Сразу же после трех линий, нагрузки и положение фона, добавьте следующие две строки:

local tapCount = 0
local tapText = display.newText( tapCount, display.contentCenterX, 20, native.systemFont, 40 )

Давайте проверять эти команды более подробно:

  • local tapCount = 0- Как и выше, эта линия создает локальную переменную Lua. В этом случае, однако, мы будем использовать его для хранения целое число , а не связывая его с изображением. Так как игрок должен начать игру, без очков, мы изначально установить его значение 0, но это может измениться позже.
  • Вторая строка начинается с local tapTextкоторой вы должны легко признать , как объявление переменной tapText.
  • display.newText()это еще один Corona API, но вместо загрузки изображения , как мы делали ранее, эта команда создает текстовый объект. Потому что мы присваиваем переменной tapTextдля этого объекта, мы сможем внести изменения в текст во время нашей игры, такие как изменение напечатанный номер , чтобы соответствовать , сколько раз был использован воздушный шар.
  • Внутри скобках указаны параметры , которые мы передаем display.newText(). Первый параметр является начальным печататься значение для текста, но обратите внимание , что вместо того , чтобы прямое значение строки , как "0"мы на самом деле присвоить переменную , которую мы объявленную на предыдущей строке ( tapCount). В Corona, это вполне допустимо указывать переменную в качестве параметра в API, до тех пор , как это действует переменная и API принимает тип переменной в качестве этого параметра.

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

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

Последний параметр является размер визуализированного текста.

Действие!

Давайте проверим результат этого нового кода. Сохраните измененный main.luaфайл и повторно запустить Simulator. Если все прошло хорошо, текстовый объект должен теперь показывать, расположенный в верхней части экрана.

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

tapText:setFillColor( 0, 0, 0 )

Проще говоря, эта setFillColor()команда изменяет цвет заливки объекта tapText. setFillColor()Команда принимает до четырех числовых параметров в диапазоне 0до1 , по одному для цветовых каналов красного , зеленого , синего и альфа . В этой игре мы наполнении объект с черным цветом, так что все каналы могут быть установлены на 0.

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

local function pushBalloon()
    balloon:applyLinearImpulse( 0, -0.75, balloon.x, balloon.y )
    tapCount = tapCount + 1
    tapText.text = tapCount
end

Давайте рассмотрим эти строки по отдельности:

  • tapCount = tapCount + 1Команда увеличивает tapCountпеременную на 1 каждый раз , когда баллон повернутым.
  • Наша вторая новая команда, tapText.text = tapCount, обновляет textсвойство нашего tapTextобъекта. Это позволяет быстро изменять текст без необходимости создавать новый объект каждый раз.

Посмотрите внимательно - обновить текст на экране, мы обновляем свойство текстового объекта, а не сам объект. В этом случае мы изменяем textсвойство tapTextв письменной форме tapText.text, а затем= , а затем его новое значение. Поскольку мы увеличиваем значение tapCountпеременной на линии непосредственно перед тем , азатем обновить текстовый объект с тем же значением переменной, визуальное отображение всегда будет отражать внутреннее tapCountзначение.

Это оно! Если вы сохраните main.luaфайл и повторно запустить Simulator, ваша игра будет закончена.

 

Глава Концепции

Мы рассмотрели много понятий в этой главе. Это может показаться немного подавляющим, но будьте терпеливы, посмотрите на свой код, и читать через секции снова , если этонеобходимо. Если вам нужна помощь, то Corona Форум предлагает дружественную место для общения с другими разработчиками Corona и персоналом.

Вот краткий обзор того, что вы узнали в этой главе:

Команда / Недвижимость Описание
display.newImageRect () Грузы и отображает изображение на экране.
object.x Устанавливает горизонтальное х положение объекта.
object.y Устанавливает вертикальное у положения объекта.
display.contentCenterX Ярлык для центра области содержимого вдоль х оси.
display.contentCenterY Ярлык для центра области содержимого вдоль у оси.
object.alpha Устанавливает уровень альфа-объекта (непрозрачность / прозрачность).
требуют () Загрузка данного модуля или библиотеки, например "physics".
physics.start () Запускает физический движок.
physics.addBody () Добавление физического тела к объекту.
Объект: applyLinearImpulse () Применяется смоделированный импульс силы на физический объект.
Объект: addEventListener () Добавляет прослушиватель событий к объекту, например "tap".
display.newText () Создает текстовый объект на экране.
Объект: setFillColor () Задает цвет заливки для текста и векторных объектов.

Language