Tiled Liquidfun

Description

Here we will set up Gideros to work with Tiled, Liquidfun being the physics engine.

Tiled lets you use various layers: Tile Layer, Object Layer, Image Layer, Group Layer.

level1 using Collection of Images

level2 using Tileset Image

full demo available at the end!

LOAD YOUR TILED MAP

This is how you could load your Tiled maps in Gideros:

local currlevel = TiledLevels.new(pathtotiledlevel, ecs, liquidfun, layers)

An excerpt from the demo project where we call the TiledLevels Class:

LevelX = Core.class(Sprite)

function LevelX:init()
	application:setBackgroundColor(0x5500ff)
	-- plugins
	-- tiny-ecs
	self.tiny = require "classes/tiny-ecs"
	self.tiny.tworld = self.tiny.world()
	-- liquidfun
	local bworld = b2.World.new(0, 20, true) -- gravity x, gravity y, doSleep?
	-- layers
	local layers = {}
	layers["main"] = Sprite.new() -- one Sprite to hold them all
	layers["bg"] = Sprite.new() -- bg layer
	layers["actors"] = Sprite.new() -- actors layer
	layers["fg"] = Sprite.new() -- fg layer
	layers["player1input"] = Sprite.new() -- player1 input layer
	-- levels
	self.tiledlevels = {}
	self.tiledlevels[1] = "tiled/levels/level01" -- lua file without extension
	self.tiledlevels[2] = "tiled/levels/level02" -- lua file without extension
	-- ...
	-- here we build the level using Tiled
	local currlevel = TiledLevels.new(self.tiledlevels[g_currlevel], self.tiny, bworld, layers)
	-- ...

g_currlevel is a global variable declared in the "main.lua" file. The demo project has currently 2 Tiled levels available:

• g_currlevel = 1, level built using Tiled: New Tileset -> Collection of Images
• g_currlevel = 2, level built using Tiled: New Tileset -> Based on Tileset Image

main.lua:

-- ...
-- global vars
g_currlevel = 1 -- 1 = Collection of Images, 2 = Tileset
g_keyleft = KeyCode.LEFT -- player1 left
g_keyright = KeyCode.RIGHT -- player1 right
g_keyup = KeyCode.UP -- player1 up
-- ...

Below is the TiledLevels Class.

BUILD YOUR LEVEL

The TiledLevels Class will read a Tiled lua file and build the level in Gideros.

There are a couple of steps before building the level:

1. we need to link the Tiled Tileset images to their correct tile id
2. optionally it is best (performance wise) to pack the images
3. we create a parseImage function for each Tiled layers to call

We can then read each Tiled Layers and build our levels (deco layers and physics layers).

The Tiled layers are split in two categories:

• deco layers for displaying images and shapes on the screen
• physics layers consisting of shapes used for physics collisions

note: the layers names in the code correspond to the layers names in Tiled

Tiled Shapes can be both for decoration and physics. For the shapes which are decorative we call the buildShapes function and for the shapes which are for physics we call the buildLFShapes function.

Finally, each shapes functions will call the appropriate Class to build the shape (Ellipse, Point, Polygon, Polyline, Rectangle, Text).

You will find below the steps implemented in the TiledLevels Class.

BUILD YOUR LEVEL FULL CODE

TiledLevels = Core.class(Sprite)

function TiledLevels:init(tmpath, xtiny, xbworld, xlayers)
	local myformat = TextureBase.RGBA4444 -- perfs? XXX
	self.world = xbworld
	local tm = require(tmpath) -- eg.: "tiled/test" without ".lua" extension + exclude from execution!
	local tsimgpath -- "tiled/", Tiled root path to images
	if g_currlevel == 1 then tsimgpath = "tiled/levels/" -- level01
	elseif g_currlevel == 2 then tsimgpath = "tiled/levels/" -- level02
	-- ...
	end
	-- _______ _____ _      ______  _____ ______ _______ 
	--|__   __|_   _| |    |  ____|/ ____|  ____|__   __|
	--   | |    | | | |    | |__  | (___ | |__     | |   
	--   | |    | | | |    |  __|  \___ \|  __|    | |   
	--   | |   _| |_| |____| |____ ____) | |____   | |   
	--   |_|  |_____|______|______|_____/|______|  |_|   
	-- this is the classic
	for i = 1, #tm.tilesets do
		local tileset = tm.tilesets[i]
		-- add extra values (variables) to a tm.tilesets[i] table
		if tileset.image then -- only tileset tilemap layers
			tileset.numcols = math.floor(
				(tileset.imagewidth-tileset.margin+tileset.spacing)/
				(tileset.tilewidth+tileset.spacing)
			)
			tileset.numrows = math.floor(
				(tileset.imageheight-tileset.margin+tileset.spacing)/
				(tileset.tileheight+tileset.spacing)
			)
			tileset.lastgid = tileset.firstgid+(tileset.numcols*tileset.numrows)-1
			tileset.texture = Texture.new(tsimgpath..tileset.image, false,
				{ format=myformat, extend=false, } -- extend=false, true
			)
		end
	end
	-- classic tileset function
	local function gid2tileset(tm, gid)
		for i = 1, #tm.tilesets do
			local tileset = tm.tilesets[i]
			if tileset.image then -- only valid tileset layers
				if tileset.firstgid <= gid and gid <= tileset.lastgid then
					return tileset
				end
			end
		end
	end
	-- _______ _____ _      ______  _____ ______ _______ 
	--|__   __|_   _| |    |  ____|/ ____|  ____|__   __|
	--   | |    | | | |    | |__  | (___ | |__     | |   
	--   | |    | | | |    |  __|  \___ \|  __|    | |   
	--   | |   _| |_| |____| |____ ____) | |____   | |   
	--   |_|  |_____|______|______|_____/|______|  |_|   
	-- _____ __  __          _____ ______  _____ 
	--|_   _|  \/  |   /\   / ____|  ____|/ ____|
	--  | | | \  / |  /  \ | |  __| |__  | (___  
	--  | | | |\/| | / /\ \| | |_ |  __|  \___ \ 
	-- _| |_| |  | |/ ____ \ |__| | |____ ____) |
	--|_____|_|  |_/_/    \_\_____|______|_____/ 
	-- this one parses individual images
	local tilesetimages = {} -- table holding all the tileset images info (path, width, height)
	for i = 1, #tm.tilesets do
		local tileset = tm.tilesets[i]
		if not tileset.image then -- filter out tileset tilemap layers, only tileset images
			local tiles = tileset.tiles
			for j = 1, #tiles do
				-- populate the tilesetimages table based on the tile gid and id
				-- note: you may have to adjust the path (tsimgpath) to point to the image folder
				tilesetimages[tileset.firstgid + tiles[j].id] = {
					path=tsimgpath..tiles[j].image,
					width=tiles[j].width,
					height=tiles[j].height,
				}
			end
		end
	end
--[[
	-- this function is if you don't want to pack your Tiled images even though you should!
	local function parseImage(xobject, xlayer)
		local tex = Texture.new(tilesetimages[xobject.gid].path, false,
			{ format=myformat , extend=false, } -- extend=false, true
		)
		local bitmap = Bitmap.new(tex)
		bitmap:setAnchorPoint(0, 1) -- because I always forget to modify Tiled objects alignment
		-- supports Tiled image scaling
		local scalex, scaley = xobject.width/tex:getWidth(), xobject.height/tex:getHeight()
		bitmap:setScale(scalex, scaley)
		bitmap:setRotation(xobject.rotation)
		bitmap:setPosition(xobject.x, xobject.y)
		xlayer:addChild(bitmap)
	end
]]
	-- pack all the images for perfs (TexturePack)
	local tpt = {} -- texture pack table
	for i = 1, #tm.layers do
		local layer = tm.layers[i]
		if layer.name:match("bg_deco_images") or layer.name:match("fg_deco_images") then
			for i = 1, #layer.objects do
--				print("path", tilesetimages[layer.objects[i].gid].path)
				tpt[#tpt+1] = tilesetimages[layer.objects[i].gid].path
			end
		end
	end
	local tp = TexturePack.new(tpt, nil, nil, { format=myformat, } )
	-- tileset images function
	local function parseImage(xobject, xlayer)
		local bitmap = Bitmap.new(tp:getTextureRegion(tilesetimages[xobject.gid].path))
		bitmap:setAnchorPoint(0, 1) -- because I always forget to modify Tiled objects alignment
		-- supports Tiled image scaling
		local scalex, scaley = xobject.width/bitmap:getWidth(), xobject.height/bitmap:getHeight()
		bitmap:setScale(scalex, scaley)
		bitmap:setRotation(xobject.rotation)
		bitmap:setPosition(xobject.x, xobject.y)
		xlayer:addChild(bitmap)
	end
	-- ____  _    _ _____ _      _____    _      ________      ________ _      
	--|  _ \| |  | |_   _| |    |  __ \  | |    |  ____\ \    / /  ____| |     
	--| |_) | |  | | | | | |    | |  | | | |    | |__   \ \  / /| |__  | |     
	--|  _ <| |  | | | | | |    | |  | | | |    |  __|   \ \/ / |  __| | |     
	--| |_) | |__| |_| |_| |____| |__| | | |____| |____   \  /  | |____| |____ 
	--|____/ \____/|_____|______|_____/  |______|______|   \/   |______|______|
	for i = 1, #tm.layers do
		local layer = tm.layers[i]
		local tilemaps = {}
		local group -- group = Sprite.new()
		-- _______ _____ _      ______ _           __     ________ _____  
		--|__   __|_   _| |    |  ____| |        /\\ \   / /  ____|  __ \ 
		--   | |    | | | |    | |__  | |       /  \\ \_/ /| |__  | |__) |
		--   | |    | | | |    |  __| | |      / /\ \\   / |  __| |  _  / 
		--   | |   _| |_| |____| |____| |____ / ____ \| |  | |____| | \ \ 
		--   |_|  |_____|______|______|______/_/    \_\_|  |______|_|  \_\
		-- this is the classic tile layers
		-- please name your layers accordingly (background = bg, foreground = fg)
		if layer.type == "tilelayer" and (layer.name:match("bg") or layer.name:match("fg")) then
			if layer.name:match("bg") then group = xlayers["bg"]
			else group = xlayers["fg"]
			end
			for y = 1, layer.height do
				for x = 1, layer.width do
					local index = x + (y - 1) * layer.width
					local gid = layer.data[index]
					local gidtileset = gid2tileset(tm, gid)
					if gidtileset then
						local tilemap
						if tilemaps[gidtileset] then
							tilemap = tilemaps[gidtileset]
						else
							tilemap = TileMap.new(
								layer.width, layer.height,
								gidtileset.texture, gidtileset.tilewidth, gidtileset.tileheight,
								gidtileset.spacing, gidtileset.spacing,
								gidtileset.margin, gidtileset.margin,
								tm.tilewidth, tm.tileheight
							)
							tilemaps[gidtileset] = tilemap
							group:addChild(tilemap)
						end
						local tx = (gid - gidtileset.firstgid) % gidtileset.numcols + 1
						local ty = math.floor((gid - gidtileset.firstgid) / gidtileset.numcols) + 1
						tilemap:setTile(x, y, tx, ty)
					end
				end
			end
			group:setAlpha(layer.opacity)
		--  ____  ____       _ ______ _____ _______ _           __     ________ _____  
		-- / __ \|  _ \     | |  ____/ ____|__   __| |        /\\ \   / /  ____|  __ \ 
		--| |  | | |_) |    | | |__ | |       | |  | |       /  \\ \_/ /| |__  | |__) |
		--| |  | |  _ < _   | |  __|| |       | |  | |      / /\ \\   / |  __| |  _  / 
		--| |__| | |_) | |__| | |___| |____   | |  | |____ / ____ \| |  | |____| | \ \ 
		-- \____/|____/ \____/|______\_____|  |_|  |______/_/    \_\_|  |______|_|  \_\
		-- objects layers can be for decoration shapes or any physics shapes (cbump, liquidfun)
		elseif layer.type == "objectgroup" then
			local o
			local myshape, mytable
			local levelsetup = {}
			--     _                  _                           
			--    | |                | |                          
			--  __| | ___  ___ ___   | | __ _ _   _  ___ _ __ ___ 
			-- / _` |/ _ \/ __/ _ \  | |/ _` | | | |/ _ \ '__/ __|
			--| (_| |  __/ (_| (_) | | | (_| | |_| |  __/ |  \__ \
			-- \__,_|\___|\___\___/  |_|\__,_|\__, |\___|_|  |___/
			--                                 __/ |              
			--                                |___/               
			if layer.name:match("bg_deco_images") then
				for i = 1, #layer.objects do
					parseImage(layer.objects[i], xlayers["bg"])
				end
			elseif layer.name:match("fg_deco_images") then
				for i = 1, #layer.objects do
					parseImage(layer.objects[i], xlayers["fg"])
				end
			elseif layer.name:match("bg_deco_shapes") then
				for i = 1, #layer.objects do
					o = layer.objects[i]
					myshape, mytable = nil, nil
					local color = math.random(0xffffff)
					local tex = "gfx/textures/wdipagu_2K_Albedo.jpg_0007.png"
					mytable = {
						shapelinewidth=1, shapelinecolor=color,
						texpath=tex, istexpot=true, scalex=1,
						color=color,
					}
					levelsetup = {}
					for k, v in pairs(mytable) do levelsetup[k] = v end
					myshape = self:buildShapes(o, levelsetup)
					myshape:setPosition(o.x, o.y)
					xlayers["bg"]:addChild(myshape)
				end
			elseif layer.name:match("fg_deco_shapes") then
				for i = 1, #layer.objects do
					o = layer.objects[i]
					myshape, mytable = nil, nil
					local color = math.random(0xffffff)
					local tex = "gfx/textures/wdipagu_2K_Albedo.jpg_0007.png"
					mytable = {
						shapelinewidth=3, shapelinecolor=color,
						texpath=tex, istexpot=true, scalex=1,
						color=color,
					}
					levelsetup = {}
					for k, v in pairs(mytable) do levelsetup[k] = v end
					myshape = self:buildShapes(o, levelsetup)
					myshape:setPosition(o.x, o.y)
					xlayers["fg"]:addChild(myshape)
				end
			--       _               _            _                           
			--      | |             (_)          | |                          
			-- _ __ | |__  _   _ ___ _  ___ ___  | | __ _ _   _  ___ _ __ ___ 
			--| '_ \| '_ \| | | / __| |/ __/ __| | |/ _` | | | |/ _ \ '__/ __|
			--| |_) | | | | |_| \__ \ | (__\__ \ | | (_| | |_| |  __/ |  \__ \
			--| .__/|_| |_|\__, |___/_|\___|___/ |_|\__,_|\__, |\___|_|  |___/
			--| |           __/ |                          __/ |              
			--|_|          |___/                          |___/               
			-- add a physics body to the shapes (cbump, liquidfun)
			elseif layer.name == "physics_grounds" then
				for i = 1, #layer.objects do
					o = layer.objects[i]
					o.isfloor = true
					-- liquidfun
					local mylftable = {
						density=1, restitution=0, friction=1,
						BIT=G_BITSOLID, COLBIT=solidcollisions, ROLE=G_GROUND,
					}
					self:buildLFShapes(o, mylftable)
					-- graphics
					if g_currlevel == 1 then -- only for 1st level (Collection of Images)
						local tex = "gfx/textures/wdipagu_2K_Albedo.jpg_0007.png"
						mytable = {
							texpath=tex, istexpot=true, scalex=1.4,
							r=8*32/255, g=8*32/255, b=5.5*32/255,
							alpha=8*32/255,
						}
						levelsetup = {}
						for k, v in pairs(mytable) do levelsetup[k] = v end
						myshape = self:buildShapes(o, levelsetup)
						myshape:setPosition(o.x, o.y)
						xlayers["bg"]:addChild(myshape)
					end
				end
			--            _                 
			--           | |                
			--  __ _  ___| |_ ___  _ __ ___ 
			-- / _` |/ __| __/ _ \| '__/ __|
			--| (_| | (__| || (_) | |  \__ \
			-- \__,_|\___|\__\___/|_|  |___/
			elseif layer.name == "physics_players" then -- player1
				for i = 1, #layer.objects do
					o = layer.objects[i]
					local opos = vector(o.x, o.y)
					-- EPlayer1:init(xspritelayer, xpos)
					self.player1 = EPlayer1.new(self.world, xlayers["actors"], opos)
					xtiny.tworld:addEntity(self.player1)
				end
			end
			-- some cleaning?
			o = nil
			myshape, mytable = nil, nil
			levelsetup = {}
		end
	end
end

-- deco shapes
function TiledLevels:buildShapes(xobject, xlevelsetup)
	local myshape -- Tiled shapes: ellipse, point, polygon, polyline, rectangle, text
	local tablebase = {}
	if xobject.shape == "ellipse" then
		tablebase = {
			x=xobject.x, y=xobject.y,
			w=xobject.width, h=xobject.height,
			rotation=xobject.rotation,
		}
		for k, v in pairs(xlevelsetup) do tablebase[k] = v end
		myshape = Tiled_Shape_Ellipse.new(tablebase)
	elseif xobject.shape == "point" then
		tablebase = {
			x=xobject.x, y=xobject.y,
			rotation=xobject.rotation,
		}
		for k, v in pairs(xlevelsetup) do tablebase[k] = v end
		myshape = Tiled_Shape_Point.new(tablebase)
	elseif xobject.shape == "polygon" then
		tablebase = {
			x=xobject.x, y=xobject.y,
			coords=xobject.polygon,
			rotation=xobject.rotation,
		}
		for k, v in pairs(xlevelsetup) do tablebase[k] = v end
		myshape = Tiled_Shape_Polygon.new(tablebase)
	elseif xobject.shape == "polyline" then -- lines
		tablebase = {
			x=xobject.x, y=xobject.y,
			coords=xobject.polyline,
			rotation=xobject.rotation,
		}
		for k, v in pairs(xlevelsetup) do tablebase[k] = v end
		myshape = Tiled_Shape_Polyline.new(tablebase)
	elseif xobject.shape == "rectangle" then
		tablebase = {
			x=xobject.x, y=xobject.y,
			w=xobject.width, h=xobject.height,
			rotation=xobject.rotation,
		}
		for k, v in pairs(xlevelsetup) do tablebase[k] = v end
		myshape = Tiled_Shape_Rectangle.new(tablebase)
	elseif xobject.shape == "text" then
		tablebase = {
			x=xobject.x, y=xobject.y,
			text=xobject.text,
			w=xobject.width, h=xobject.height,
			rotation=xobject.rotation,
		}
		for k, v in pairs(xlevelsetup) do tablebase[k] = v end
		myshape = Tiled_Shape_Text.new(tablebase)
	else
		print("*** CANNOT PROCESS THIS SHAPE! ***", xobject.shape, xobject.name)
		return
	end

	return myshape
end

-- physics shapes
function TiledLevels:buildLFShapes(xobject, xlevelsetup)
	local myshape -- Tiled shapes: ellipse, point, polygon, polyline, rectangle
	local tablebase = {}
	if xobject.shape == "ellipse" then
		tablebase = {
			x = xobject.x, y = xobject.y,
			w = xobject.width, h = xobject.height, rotation = xobject.rotation,
		}
		for k, v in pairs(xlevelsetup) do tablebase[k] = v end
		myshape = Tiled_LF_Shape_Ellipse.new(self.world, tablebase)
	elseif xobject.shape == "point" then
		tablebase = {
			x = xobject.x, y = xobject.y,
			w = xobject.width, h = xobject.height, rotation = xobject.rotation, -- w and h = 0
		}
		for k, v in pairs(xlevelsetup) do tablebase[k] = v end
		myshape = Tiled_LF_Shape_Point.new(self.world, tablebase)
	elseif xobject.shape == "polygon" then
		tablebase = {
			x = xobject.x, y = xobject.y,
			coords = xobject.polygon, rotation = xobject.rotation,
		}
		for k, v in pairs(xlevelsetup) do tablebase[k] = v end
		myshape = Tiled_LF_Shape_Polygon.new(self.world, tablebase)
	elseif xobject.shape == "polyline" then
		tablebase = {
			x = xobject.x, y = xobject.y,
			coords = xobject.polyline, rotation = xobject.rotation,
		}
		for k, v in pairs(xlevelsetup) do tablebase[k] = v end
		myshape = Tiled_LF_Shape_Polyline.new(self.world, tablebase)
	elseif xobject.shape == "rectangle" then
		tablebase = {
			x = xobject.x, y = xobject.y,
			w = xobject.width, h = xobject.height, rotation = xobject.rotation,
		}
		for k, v in pairs(xlevelsetup) do tablebase[k] = v end
		myshape = Tiled_LF_Shape_Rectangle.new(self.world, tablebase)
	else
		print("*** CANNOT PROCESS THIS SHAPE! ***", xobject.shape, xobject.name)
		return
	end

	return myshape
end

TILED DECO SHAPES

Here are the classes to build the Tiled shapes for decoration: Tiled Deco Shapes

TILED PHYSICS SHAPES

Here are the classes to build the Tiled shapes for physics (Liquidfun): Tiled Physics Shapes

DEMO PROJECT

Media:Tiled demo lf.zip (tip: right click -> Save Link As)

Tiled

---

• Main Page
• Lua API
• Main API
• Plugins