В этом уроке вы узнаете, как создать собственную версию классической игры Three Shell. Читай дальше!
Шаг 1: Обзор приложения
Используя готовую графику, мы создадим развлекательную игру с использованием Lua и API 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: настройка приложения
Для запуска приложения в полноэкранном режиме на всех устройствах будет использоваться внешний файл, файл config.lua . Этот файл показывает исходный размер экрана и метод, используемый для масштабирования этого содержимого в случае, если приложение запускается с другим разрешением экрана.
<Ч /> <h2> <span> Шаг 6: </ span> Main.lua </ h2> <p> Давайте напишем приложение! </ p> <p> Откройте предпочитаемый редактор Lua (любой текстовый редактор будет работать, но у вас не будет подсветки синтаксиса) и подготовьтесь к написанию своего замечательного приложения. Не забудьте сохранить файл как <em> main.lua </ em> в папке вашего проекта. </ P> <Ч /> <h2> <span> Шаг 7: </ span> структура кода </ h2> <p> Мы будем структурировать наш код, как если бы он был классом. Если вы знаете ActionScript или Java, вы должны найти структуру знакомой. </ P> [исходный код] Необходимые классы Переменные и константы Объявить функции contructor (Основная функция) методы класса (другие функции) вызов основной функции
Шаг 8: Скрыть строку состояния
|
1
|
display.setStatusBar(display.HiddenStatusBar)
|
Этот код скрывает строку состояния. Строка состояния — это строка в верхней части экрана устройства, которая показывает время, сигнал и другие индикаторы.
Шаг 9: Фон
Простая коричневая графика используется в качестве фона для интерфейса приложения, следующая строка кода сохраняет его.
|
1
2
3
4
|
— Graphics
— [Background]
local bg = display.newImage(‘bg.png’)
|
Шаг 10: Просмотр заголовка
Это заголовок, это будет первый интерактивный экран, который появится в нашей игре, эти переменные хранят его компоненты.
|
1
2
3
4
|
local title
local playBtn
local creditsBtn
local titleView
|
Шаг 11: Кредиты
Этот вид покажет кредиты, год и авторские права на игру. Переменная creditsView будет использоваться для его хранения.
|
1
|
local creditsView
|
Шаг 12: Банковские кредиты
Банковские кредиты являются эквивалентом жизни в этой игре.
|
1
2
|
local bank
local bankText
|
Шаг 13: Снаряды
Эти переменные используются, чтобы скрыть мяч и отвлечь игрока от правильного ответа:
|
1
2
3
4
|
local s1
local s2
local s3
local shells
|
Шаг 14: мяч
Цель игры — найти мяч, который хранится в следующей переменной:
|
1
|
local ball
|
Шаг 15: Панель кнопок
Эта панель содержит кнопку, которая запускает игру, и сообщение TextField, используемое для предоставления инструкций.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
— [Button Bar]
local buttonBar
— [Bet Button]
local betBtn
— [Message Text]
local msg
— [GameView]
local gameView — A group to store all the gameview graphics
|
Шаг 16: Оповещение
Предупреждение будет отображаться, когда все банковские кредиты исчезнут. Это сообщение будет отображать сообщение об окончании игры и инструкции по перезапуску.
|
1
|
local alert
|
Шаг 17: Проверка кода
Вот полный код, написанный в этом руководстве, вместе с комментариями, которые помогут вам идентифицировать каждую часть:
|
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
57
58
59
|
— Three Shell Game
— Developed by Carlos Yanez
— Hide Status Bar
display.setStatusBar(display.HiddenStatusBar)
— Graphics
— [Background]
local bg = display.newImage(‘bg.png’)
— [Title View]
local title
local playBtn
local creditsBtn
local titleView
— [Credits]
local creditsView
— [Alert]
local alert
— [Bank Credits]
local bank
local bankText
— [Shells]
local s1
local s2
local s3
local shells
— [Ball]
local ball
— [Button Bar]
local buttonBar
— [Bet Button]
local betBtn
— [Message Text]
local msg
— [GameView]
local gameView
|
В следующий раз…
В этой части серии вы узнали интерфейс и базовые настройки игры. Следите за второй частью, где мы рассмотрим логику приложения, поведение кнопок и многое другое. Увидимся в следующий раз!