В этом уроке из двух частей мы будем использовать Corona SDK для создания привлекательного музыкального проигрывателя. Читай дальше!
Шаг 1: Обзор приложения
Используя готовую графику, мы создадим развлекательную игру с использованием Lua и Corona SDK.
Пользователь сможет воспроизводить и контролировать заранее определенные аудиофайлы, а также просматривать информацию о них.
Шаг 2: Целевое устройство
Первое, что нам нужно сделать, это выбрать платформу, в которой мы хотим запустить наше приложение, таким образом, мы сможем выбрать размер для изображений, которые мы будем использовать.
Платформа iOS имеет следующие характеристики:
- iPad: 1024×768 пикселей, 132 т / д
- iPhone / iPod Touch: 320×480 пикселей, 163 т / д
- iPhone 4: 960×640 пикселей, 326 точек на дюйм
Поскольку Android является открытой платформой, существует множество различных устройств и разрешений. Вот некоторые из наиболее распространенных характеристик экрана:
- Google Nexus One: 480×800 пикселей, 254 точек на дюйм
- Motorola Droid X: 854×480 пикселей, 228 пикселей на дюйм
- HTC Evo: 480×800 пикселей, 217 пикселей на дюйм
В этом уроке мы сконцентрируемся на платформе iOS с графическим дизайном, специально разработанной для распространения на iPhone / iPod touch, но представленный здесь код должен также применяться к разработке Android с Corona SDK.
Шаг 3: Интерфейс
Будет отображен темный, красивый интерфейс, включающий несколько фигур, кнопок, растровых изображений и многое другое.
Графические ресурсы интерфейса, необходимые для этого урока, можно найти в прилагаемой загрузке.
Шаг 4: Экспорт графики
В зависимости от выбранного устройства, вам может понадобиться экспортировать графику в рекомендованном PPI, вы можете сделать это в вашем любимом графическом редакторе.
Я использовал функцию « Настроить размер …» в приложении «Просмотр» в Mac OS X.
Не забудьте дать изображениям описательное имя и сохранить их в папке вашего проекта.
Шаг 5: Песни
Выберите несколько песен из вашей музыкальной библиотеки и поместите их в папку вашего проекта. Мы узнаем, как играть в них в следующих шагах.
Шаг 6: настройка приложения
Внешний файл будет использоваться для того, чтобы приложение работало на всех устройствах,
файл config.lua . Этот файл показывает исходный размер экрана и метод, используемый для масштабирования этого содержимого в случае, если приложение запускается с другим разрешением экрана.
|
1
2
3
4
5
6
7
8
9
|
application =
{
content =
{
width = 320,
height = 480,
scale = «letterbox»
},
}
|
Шаг 7: Main.lua
Давайте напишем заявку!
Откройте предпочитаемый вами редактор Lua (любой текстовый редактор будет работать, но у вас не будет подсветки синтаксиса) и приготовьтесь написать свое классное приложение. Не забудьте сохранить файл как main.lua в папке вашего проекта.
Шаг 8: Структура кода
Мы будем структурировать наш код, как если бы это был класс. Если вы знаете ActionScript или Java, вы должны найти структуру знакомой.
|
01
02
03
04
05
06
07
08
09
10
11
|
Necesary Classes
Variables and Constants
Declare Functions
contructor (Main function)
class methods (other functions)
call Main function
|
Шаг 9: Скрыть строку состояния
|
1
|
display.setStatusBar(display.HiddenStatusBar)
|
Этот код скрывает строку состояния. Строка состояния — это строка в верхней части экрана устройства, которая показывает время, сигнал и другие индикаторы.
Шаг 10: Фон
Простое темно-коричневое изображение добавляется в качестве фона для интерфейса приложения.
|
1
2
3
4
|
— Graphics
— [Background]
local bg
|
Шаг 11: Информационная панель
Информационная панель будет содержать обложку альбома, название песни и исполнителя. Он будет размещен в центре сцены.
|
1
2
3
4
5
|
— [Info Bar]
local infoBar
local progressBar
local progress
|
Шаг 12: обложка альбома
Для хранения изображения обложки альбома создается переменная, эта картинка должна находиться в папке проекта. Подробнее об этом на последнем шаге.
|
1
2
3
4
|
— [Image Marker]
local imageMarker
local cdCover
|
Шаг 13: Информационный текст
Название песни и исполнитель хранятся в следующих переменных:
|
1
2
3
4
5
|
— [Info Bar Text]
local titleText
local byText
local artistText
|
Шаг 14: Панель кнопок
Эта панель отображает кнопки управления, а также индикатор выполнения и продолжительность песни.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
— [Button Bar Bg]
local buttonBar
— [Buttons]
local playBtn
local stopBtn
local prevBtn
local nextBtn
— [Button Bar Text]
local current
local total
|
Шаг 15: Данные песен
XML, вероятно, будет лучшим способом обработки информации о песне, но, к сожалению, на данный момент в Corona нет собственного XML API. Хотя вы все еще можете использовать некоторые библиотеки Lua, такие как LuaXML, будет быстрее создать таблицу для короткого контента, как показано в следующих строках:
|
1
2
3
4
5
6
7
8
9
|
— URL, Name, Artist, Art
local song1Info = {‘song1.m4a’, ‘Here Without You’, ‘3 Doors Down’, ‘s1.png’}
local song2Info = {‘song2.m4a’, ‘Kriptonite’, ‘3 Doors Down’, ‘s2.png’}
local songsInfo = {song1Info, song2Info}
local song1 = audio.loadStream(song1Info[1])
local song2 = audio.loadStream(song2Info[1])
local songs = {song1, song2}
|
Как видно из приведенного выше кода, таблицы используются для хранения информации о песнях, которая впоследствии используется методом audio.loadStream() для создания объекта потоковой передачи звука.
Шаг 16: Проверка кода
Вот полный код, написанный в этом руководстве, вместе с комментариями, которые помогут вам идентифицировать каждую часть:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
— Audio Player
— Developed by Carlos Yanez
— Hide Status Bar
display.setStatusBar(display.HiddenStatusBar)
— Graphics
— [Background]
local bg
— [Info Bar]
local infoBar
local progressBar
local progress
— [Image Marker]
local imageMarker
local cdCover
— [Info Bar Text]
local titleText
local byText
local artistText
— [Button Bar Bg]
local buttonBar
— [Buttons]
local playBtn
local stopBtn
local prevBtn
local nextBtn
— [Button Bar Text]
local current
local total
— [Songs]
— URL, Name, Artist, Art
local song1Info = {‘song1.m4a’, ‘Here Without You’, ‘3 Doors Down’, ‘s1.png’}
local song2Info = {‘song2.m4a’, ‘Kriptonite’, ‘3 Doors Down’, ‘s2.png’}
local songsInfo = {song1Info, song2Info}
local song1 = audio.loadStream(song1Info[1])
local song2 = audio.loadStream(song2Info[1])
local songs = {song1, song2}
|
В следующий раз…
В этой части серии вы узнали интерфейс и базовые настройки приложения. Оставайтесь с нами во второй части, где мы рассмотрим логику приложения, поведение кнопок и многое другое. Увидимся в следующий раз!