Cocos2d-x: Пишем на Lua

Доброго времени суток.
Начнем с того, что я не нашел на хабре туториалов по Cocos2d и Lua, поэтому мне пришлось много страдать и чтобы вы не повторяли моих ошибок я решил написать пост. В этой статье я расскажу как создать простую игру используя Сocos2d-x, Cocos Code IDE и Lua. Ранее, я уже писал про создание игр на Love2d. В этой статье я адаптирую старый туториал для кокоса и как это запустить на андроиде (Ни яблока, ни мака у меня нету).

Что нам понадобится?

Список важных вещей:

• Java JDK
• Сам Cocos2d-x. На момент выхода этой статьи вышел Cocos2d-x 3.2 и скачать его можно здесь. Нужно скачать той же разрядности, что и JDK
• IDE для lua. Разработчики движка постарались и выпустили свой IDE на основе Eclipse. Качаем здесь.
• [Windows-only]Python 2.7. Лежит вот тут.

Если вы хотите писать игры под андроид, то придется скачать еще пару вещей, а именно:

• Android SDK. Если вы не собираетесь писать под андроид, то лучше найти вкладку «GET THE SDK FOR AN EXISTING IDE»
• Android NDK. Я использую Android NDK r9, а с r10 возможны проблемы
• Apache Ant. У меня стоит 1.9.4

Установка

Сначала поставим Java JDK и Python. После распакуйте cocos2d-x и Cocos Code IDE (Если вы скачивали zip версию, если нет, просто запустите установку) в удобное для вас место. Распаковываем Android SDK, NDK и Apache Ant так же в удобное место. Путь к ним не должен содержать пробелов во избежание проблем. Открываем папку с SDK, находим SDK Manager. Запускаем и ставим нужные для нас версии API и всю папку Tools.
Запускаем Cocos Code IDE. В Window->Preferences->Cocos указываем нудные пути. У меня это выглядит так:
.
Теперь кликаем по вкладке Lua которая находится во вкладке Cocos и выбираем путь к cocos2d-x:

Настроено.

Немного теории

Cocos2d-x — кроссплатформенный движок, написанный на С++, был создан как копия Cocos2d. Cocos2d использует Object C и может использоваться только для iOS.
Теперь поговорим о базовой механике движка и сравним ее с Love2D. У кокоса все объекты находятся в слоях, а слои находятся в сценах. В Love2D ни слоев, ни сцен нету. Плюсы сцен и слоев в том, что с их помощью можно создавать гибкое приложение более простыми способами. Минусы в том, что для просто игры это может быть слишком громоздко и неудобно. В кокосе все представленно объектами и чтобы что-то появилось на экране надо просто добавить это на сцену, а в love2d все представленно простыми переменными и чтобы что-то появилось на экране нужно это каждый кадр рисовать. Это можно описывать достаточно долго поэтому я скажу вывод сейчас, а разницу вы сможете почувствовать сами. Cocos2d-x — большой движок с большим количеством возможностей, однако доступ к ним часто сделан не так как хотелось бы. Love2d — простой, не требующий много знаний, движок с отзывчивым коммьюнити, но с отсутствием многих нужных вещей, которые впоследствии пишут сами пользователи, но делают это вполне удачно.

А теперь сам код

Создадим новый проект. И у нас будет два файла в исходниках: hello2.lua и main.lua. Если вы не хотите посмотреть на чудо китайского гейм дева, то первый можно сразу удалять, а второй очистить. Он создан лоя демонстрации возможностей require. Открываем main.lua и видим кучу кода которая нужна чтобы понять как использовать порт под lua. Чтобы увидеть, что это такое нажимаем F11. Можно поиграться. Вот это бегающие существо это собака, а не белка как вы могли подумать. Посмотрели, поигрались и хватит. Удалите hello2.lua и весь код в main.lua и очизаем папку res. В папку res добавляем картинку и называем ее habr.png. Теперь пишем в main следующий код:

--Все классы кокоса require "Cocos2d" --Все константы кокоса require "Cocos2dConstants"  -- Функция вывода сообщений cclog = function(...)     print(string.format(...)) end  -- Эта функция выводит ошибки function __G__TRACKBACK__(msg)     cclog("\n----------------------------------------")     cclog("LUA ERROR: " .. tostring(msg))     cclog(debug.traceback())     cclog("----------------------------------------")     return msg end  collectgarbage("collect") -- Предотвращает утечку памяти collectgarbage("setpause", 100) collectgarbage("setstepmul", 5000)  --Теперь можно использовать файлы которые лежат в папках "src" и "res" cc.FileUtils:getInstance():addSearchResolutionsOrder("src"); cc.FileUtils:getInstance():addSearchResolutionsOrder("res");  --Записываем в константы гирину и высоту экрана SCREEN_WIDTH = cc.Director:getInstance():getWinSize().width SCREEN_HEIGHT = cc.Director:getInstance():getWinSize().height   local function main()     print("Resolution: " .. SCREEN_WIDTH .. "x" .. SCREEN_HEIGHT)     --Запускаем главную сцену     require "mainScene.lua" end  --Вызываем функцию main local status, msg = xpcall(main, __G__TRACKBACK__) if not status then     error(msg) end 

В функции main мы вызываем файл mainScene.lua. В нем находится главная сцена игры. Создадим его и напишем туда следующий код:

-- Константы local NONE = 0 local ROTATION = 1 local SCALLING = 2 local MOVING = 3  -- Переменные local state, rotation, scale, ox, oy, delta, habrImage, moving  -- Эта функция будет вызываться когда палец касается экрана local function onTouchBegan(touch, event)     -- Включаем следующие состояние     state = (state + 1) % 4     -- И возвращаем переменные к дефолту     resetVariables() end  -- Эта функция вызывается постоянно, а в dt хранится время с -- прошлого вызова. Если dt == 1.0, то с прошлого вызова прошла -- одна секунда local function update(dt)     if state == ROTATION then         --крутим картинку         rotation = rotation + delta * dt     elseif state == SCALLING then         --увеличиваем         scale = scale + dt * delta     elseif state == MOVING then         --Здесь немного посложнее, но все же просто:         --Каждый раз мы увеличивыем переменную moving, а         --потом берем ее за угол для косинису и синуса         --и крутим картинку по кругу         moving = moving + delta * dt         local radius = 50         ox = radius * math.sin(moving)         oy = radius * math.cos(moving)     end           -- В love2d мы использовали эти параметры при рисовании     -- Здесь у нас спрайт и нам нужно постоянно менять ему     -- все вручную          -- Меняем размер     habrImage:setScale(scale)     -- Меняем угол     habrImage:setRotation(rotation)     -- Меняем позицию     habrImage:setPosition(cc.p(SCREEN_WIDTH / 2 + ox, SCREEN_HEIGHT / 2 + oy)) end  local function init()     print("Creating main scene")     -- Создаем сцену     local mainScene = cc.Scene:create()     -- Создаем слой с фоновым цветом     -- Здесь я бы хотел поставить паузу и рассказать более подробно     -- потому что у меня ушло 2 часа чтобы узнать как мне изменить цвет     -- фона. 1) В C++ нету функции cc.c4b(r,g,b,a) поэтому мне пришлось     -- догадаться, что нужно смотреть не на C++  таких случаях, а на     -- cocos2d-x-js, т.к. он более популярен чем cocos2d-x-lua     -- и если вы не можете найти нужную функцию в C++, то ищите ее в     -- JavaScript версии, однако это не поможет с евентами     local gameLayer = cc.LayerColor:create(cc.c4b(255, 255, 255, 255))     -- Создаем спрайт     habrImage = cc.Sprite:create("res/habr.png")     --Ставим его смещение по центру     habrImage:setAnchorPoint(0.5, 0.5)     --Ставим позицию на центр экрана     habrImage:setPosition(cc.p(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2))     --Добавляем его к слою     gameLayer:addChild(habrImage)      state = 0     resetVariables()          -- Чтобы функция update вызывалась нужно сообщить кокосу, что ее нужно     -- вызывать     cc.Director:getInstance():getScheduler():scheduleScriptFunc(update, 0, false)     -- Создаем лисениры для событий. Хочу обратить внимание, что для каждого     -- типа событий есть свой лисенер.     local listener = cc.EventListenerTouchOneByOne:create()     -- Говорим лисениру, что такой то тип событий связвн с такой то функцией     listener:registerScriptHandler(onTouchBegan, cc.Handler.EVENT_TOUCH_BEGAN )     -- Добавляем лисенер к слою     local eventDispatcher = gameLayer:getEventDispatcher()     eventDispatcher:addEventListenerWithSceneGraphPriority(listener, gameLayer)     --Добавляем слой к сцене     mainScene:addChild(gameLayer)          --Запускаем или если уже что-либо запущено заменяем сцену     if cc.Director:getInstance():getRunningScene() then         cc.Director:getInstance():replaceScene(mainScene)     else         cc.Director:getInstance():runWithScene(mainScene)     end end  function resetVariables()     rotation = 0     scale = 1     ox = 0     oy = 0     delta = 20     moving = 0 end  --Запускаем сцену init() 

Теперь немного о помощи с поиском ответов. Во-первых: Порт на луа практически идентичен С++ и основные отличия можно прочесть здесь. Во-вторых: как я ранее писал, если вы не можете найти что-либо в порте С++, то попробуйте поискать эту проблему для JS движка. Он более популярен чем луа, однако в нем есть множество отличий, но очень часто он мне помогал. Чтобы запустить то, что у нас вышло нажмите F11. Чтобы запустить на андроид нажмите на кнопку «Debug configurations» и выберите андроид. Для запуска нужен настроенный adb, но про это и так много статей, поэтому я не буду писать здесь об этом. На этом все Спасибо за прочтение (:

Вот что вышло в итоге: