Статьи

Corona SDK: создание музыкального проигрывателя — настройка приложения

Январь 26, 2019

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

Шаг 1: Обзор приложения

фигура 1

Используя готовую графику, мы создадим развлекательную игру с использованием Lua и Corona SDK.

Пользователь сможет воспроизводить и контролировать заранее определенные аудиофайлы, а также просматривать информацию о них.

Шаг 2: Целевое устройство

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: Интерфейс

Corona SDK - Аудио плеер - Рисунок 3

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

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

Шаг 4: Экспорт графики

Corona SDK - Аудио плеер - Рисунок 4

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

Я использовал функцию « Настроить размер …» в приложении «Просмотр» в Mac OS X.

Не забудьте дать изображениям описательное имя и сохранить их в папке вашего проекта.

Шаг 5: Песни

Рисунок 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: Фон

Рисунок 6

Простое темно-коричневое изображение добавляется в качестве фона для интерфейса приложения.

1
2
3
4
— Graphics
— [Background]
 
local bg

Шаг 11: Информационная панель

Рисунок 7

Информационная панель будет содержать обложку альбома, название песни и исполнителя. Он будет размещен в центре сцены.

1
2
3
4
5
— [Info Bar]
 
local infoBar
local progressBar
local progress

Шаг 12: обложка альбома

Рисунок 8

Для хранения изображения обложки альбома создается переменная, эта картинка должна находиться в папке проекта. Подробнее об этом на последнем шаге.

1
2
3
4
— [Image Marker]
 
local imageMarker
local cdCover

Шаг 13: Информационный текст

Рисунок 9

Название песни и исполнитель хранятся в следующих переменных:

1
2
3
4
5
— [Info Bar Text]
 
local titleText
local byText
local artistText

Шаг 14: Панель кнопок

Рисунок 10

Эта панель отображает кнопки управления, а также индикатор выполнения и продолжительность песни.

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}

В следующий раз…

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

40
Share: