Статьи

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

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


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

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

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


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

Платформа iOS имеет следующие характеристики.

  • iPad 1/2 / Mini: 1024×768 пикселей, 132 PPI
  • iPad Retina: 2048×1536, 264 PPI
  • iPhone / iPod Touch: 320×480 пикселей, 163 PPI
  • iPhone / iPod Retina: 960×640 пикселей, 326 PPI
  • iPhone 5 / iPod Touch: 1136×640, 326 PPI

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

  • Asus Nexus 7 Tablet: 800×1280 пикселей, 216 PPI
  • Motorola Droid X: 854×480 пикселей, 228 PPI
  • Samsung Galaxy SIII: 720×1280 пикселей, 306 PPI

В этом уроке мы сосредоточимся на платформе iOS с графическим дизайном, специально разработав ее для распространения на iPhone / iPod touch. Код, представленный здесь, должен также применяться для разработки Android с Corona SDK.


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

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


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

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

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


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

1
2
3
4
5
6
7
8
9
application =
{
    content =
    {
        width = 320,
        height = 480,
        scale = «letterbox»
    },
}

Давайте напишем заявку!

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


Мы будем структурировать наш код, как если бы это был класс . Если вы знаете 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

1
display.setStatusBar(display.HiddenStatusBar)

Этот код скрывает строку состояния. Строка состояния — это строка в верхней части экрана устройства, которая показывает время, сигнал и другие индикаторы.


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

1
2
3
4
— Physics
 
local physics = require(‘physics’)
physics.start()

Простая графика используется в качестве фона для интерфейса приложения. Следующая строка кода хранит его.

1
2
3
4
5
— Graphics
 
— [Background]
 
local bg = display.newImage(‘bg.png’)

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

1
2
3
4
5
6
— [Title View]
 
local title
local playBtn
local creditsBtn
local titleView

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

1
2
3
— [CreditsView]
 
local creditsView

Ящики создают уровень. В этом приложении есть три размера.


В начале игры появится сообщение с инструкциями. Это будет отключено через две секунды.

1
2
3
— Instructions
 
local ins

Это изображение шара. Цель игры — поместить этот предмет в поле для ворот.

1
2
3
— Ball
 
local ball

В этом коде хранится изображение поля цели.

1
2
3
— Goal Box
 
local gBox

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

1
2
3
— Alert
   
local alertView

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

1
2
3
— Sounds
 
local win = audio.loadSound(‘win.caf’)

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

1
2
3
— Variables
 
local lvlImg — stores the current level image title

Объявите все функции как локальные в начале.

01
02
03
04
05
06
07
08
09
10
11
— Functions
 
local Main = {}
local startButtonListeners = {}
local showCredits = {}
local hideCredits = {}
local showGameView = {}
local addBox = {}
local removeBox = {}
local onCollision = {}
local alert = {}

Далее мы создадим функцию, которая будет инициализировать всю игровую логику.

1
2
3
function Main()
    — code…
end

Теперь мы помещаем TitleView в сцену и вызываем функцию, которая добавит прослушиватели касаний к кнопкам.

1
2
3
4
5
6
7
8
function Main()
    titleBg = display.newImage(‘titleBg.png’, 84, 12)
    playBtn = display.newImage(‘playBtn.png’, 220, 150)
    creditsBtn = display.newImage(‘creditsBtn.png’, 204, 202)
    titleView = display.newGroup(titleBg, playBtn, creditsBtn)
     
    startButtonListeners(‘add’)
end


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