18 November 2013

Любовь в пикселях или что такое Love2d

ProgrammingGame developmentLua
Что же такое Love2d и о чем этот пост? Это кроссплатформенный фреймворк для разработки 2d игр. Почему именно love2d? Потому что это бесплатный, легкий, кроссплатформенный, с открытым исходным кодом, а главное сделанный с любовью движок.


Подготовка

Писать игры на нем можно хоть в блокноте, но я буду использовать Sublime Text 2, так как он прост и гибок. Скачать love можно вот здесь под все популярные десктопные платформы. Запускаем Sublime text и сразу идем в Tools->Build System->New Build System… И пишем туда вот такое:

{
    "selector": "source.lua",
    "cmd": ["c:\\Program Files\\LOVE\\love", "${project_path:${folder}}"]
}

(Если у вас x64 меняем путь к love)

Это для удобства запуска, теперь все, что нужно это нажать Ctrl+B. Создаем папку где мы будем хранить нашу игру. В ней создаем main.lua. В этом файле будет хранится основа нашей игры. А в Sublime text добавляем папку в проект. Все готово. Должно получиться что то вроде этого:

.

Хочу код!

Вся логика будет обновляться в функции love.update(dt), а прорисовка у нас в love.draw(), инициализация происходит love.load(). Поэтому давайте сразу напишем их:

function love.load()
	
end

function love.update(dt)
	
end

function love.draw()

end


Теперь давайте добавим загрузим картинку и сразу ее нарисуем. Картинки загружаются с помощью функции love.graphics.newImage(filename), а рисуются в love.graphics.draw(image, x, y). Добавляем в папку вот эту картинку. И пишем код:

local habrImage, width, height

function love.load()
	habrImage = love.graphics.newImage("habr.png")
	width = love.graphics.getWidth()
	height = love.graphics.getHeight()
end

function love.update(dt)
	
end

function love.draw()
	love.graphics.draw(habrImage, width / 2 - habrImage:getWidth() / 2, height / 2 - habrImage:getHeight() / 2)
end


Ctrl + B и у нас что-то не красивое, давайте подправим и сделаем фон белым. Добавим в начале отрисовки вот такую строчку:

love.graphics.setBackgroundColor(255, 255, 255)


И вот, приятная глазу, картинка.

Это все, конечно круто, но давайте добавим жизни нашей игре и сделаем действия с картинкой, а именно:
— По клавише R картинка будет крутится
— По клавише S картинка будет увеличиваться\уменьшаться
— По клавише M картинка будет двигаться.

Чтобы это реализовать, добавим переменные state (будет отвечать за происходящие), rotation (угол картинки), scale (ее размер), ox, ox (смещение центра картинки) и delta(эта переменная будет отвечать за апдейт переменных). Теперь о инпуте, в love когда клавиша опускается вызывается функция love.keypressed(key, unicode), а при поднятии love.keyreleased(key). Мы будем отслеживать опускание клавиш. Теперь сам код:

local habrImage, width, height, state, rotation, scale, ox, oy, delta

--инициализируем все
function love.load()
	habrImage = love.graphics.newImage("habr.png")
	width = love.graphics.getWidth()
	height = love.graphics.getHeight()
	state = "none"
	resetVariables()
end

--никто не любит писать одно и тоже много раз
function resetVariables()
	rotation = 0
	scale = 1
	ox = 0
	oy = 0
	delta = 1
end

--смотрим что было нажато
function love.keypressed(key, unicode)
	if key == "r" then
		state = "rotation"
		resetVariables()
	elseif key == "s" then
		state = "scalling"
		resetVariables()
	elseif key == "m" then
		state = "moving"
		resetVariables()
	elseif key == "space" then -- чтобы не залипать (:
		state = "none"
		resetVariables()
	end
end

--логика игры
function love.update(dt)
	if state == "rotation" then
		--крутим картинку
		rotation = rotation + delta * dt
	elseif state == "scalling" then
		--увеличиваем
		scale = scale + delta * dt
	elseif state == "moving" then
		--здесь немного посложнее, но все же просто:
		--каждый раз мы увеличивыем дельту
		--а потом берем ее за угол для косинису и синуса
		--и крутим картинку
		delta = delta + delta * dt
		local radius = 50
		ox = radius * math.sin(delta)
		oy = radius * math.cos(delta)
	end
end

--рисуем
function love.draw()
	--рисуем белым
	love.graphics.setBackgroundColor(255, 255, 255)
	--рисуем картинку
	love.graphics.draw(habrImage, width / 2 - habrImage:getWidth() / 2, height / 2 - habrImage:getHeight() / 2, rotation, scale, scale, ox, oy)
end


На этом все, господа. Удачи с созданием игр! Для помощи вот вам вики и офф сайт.

Продолжение.

З.Ы. Это все писалось на 0.8.0.
З.З.Ы. Не забудьте выбрать Build System, чтобы запускать.
Tags:Gamedevlualove2dtutorial
Hubs: Programming Game development Lua
+14
37.9k 121
Comments 25