Isometric & Hexagon maps support?

Mells · February 2013

Hi @atilim,

I see you have made a lot progress on BMFont, openGl 2.0, render to texture and probably next is wp8 (and clipping?)

I haveńt heard about isometric and hexagon maps support recently but it was listed in the roadmap before (see this tread linked in the faq).

Is that still on the roadmap? (I'm looking at all the successful social games that are currently popular and all use isometric).

Scouser · February 2013

@Mells: I seem to remember a thread (found it) where @Deniz said that Isometric Tilemaps were moved to the long term roadmap (but may be moved to near future) whereas Hexagon tilemaps were not going to be supported.

Mells · February 2013

thank you @Scouser

-> Long Term (6+ months)

the post was written in september (6 months ago) so things may have changed.

These features are something I think you should consider as it would be very difficult to create decent strategy games without them. 2D strategy games are a popular genre which would also help to get Gideros Studio across to a wider audience, both players and developers.

+1

Can you give us some informations? @atilim, @deniz.

phongtt · February 2013

I'm interested in Isometric too

Mells · February 2013

cc @atilim @deniz

alexzheng · February 2013

Is most rpg games use Isometric maps?

ar2rsawseen · February 2013

@Mells I think that @atilim and @deniz are still at startup event and will probably respond when they get back home

Mells · February 2013

@ar2rsawseen I see. there were several answers from atilim since so I didn't know about that.

@alexzheng
A lot do

Scouser · February 2013

Is most rpg games use Isometric maps?

@alexzheng: I think you should maybe look at these images (there are too many to add to post) for a hint at how many RPG games use Isometric maps, and also these images to see how many RTS games use Isometric maps.

techdojo · February 2013

I haven't tried it yet, but...

For isometric maps, could you just take a normal TileMap and as it's a sprite just rotate it by 45 degrees?, granted you'd have to do the sorting for any on-screen objects but you'd have to do that anyway.

Alternatively, here's a very quick demo I did a while back (can't remember if I posted it already) that uses Shapes to render a 3D landscape. I'm sure now that meshes are available it could probably be even easier.

-- -------------------------------------------------------
-- Create a simple height grid and dynamically update some Shapes from it...
-- Jon Howard (jon@whitetreegames.com / www.whitetreegames.com)
-- -------------------------------------------------------
 
application:setBackgroundColor(0)
WIDTH = application:getContentWidth()
HEIGHT = application:getContentHeight()
centerX = WIDTH * 0.5
centerY = HEIGHT * 0.5
 
-- ----------------------------
-- Stick your app data here...
 
GRID = {			-- Grid is 11x11 points, giving 10x10 shapes (might need to render them as two triangles!)
 
	-- Top left of map
 
	{50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,},
	{50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,},
	{0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,},
	{0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,},
	{50,0,0,0,0,0,0,0,0,0,50,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,100,100,100,100,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,},
	{50,0,0,10,10,0,0,0,0,0,50,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,100,200,100,100,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,},
	{50,0,0,10,10,0,0,0,0,0,50,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,100,100,100,100,100,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,},
	{0,0,0,0,0,0,0,0,0,0,50,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,},
	{0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,},
	{50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,},
	{50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,50,50,0,0,0,0,0,0,0,50,50,},
 
	-- Bottom left of map
}
 
GRID_SCRX = { }
GRID_SCRY = { }
GRID_COLS = { }
 
GRID_SIZE = 48
 
COLS,ROWS = 10,10	-- 54,10
numShapes = (COLS * ROWS)
 
camX,camY,camZ = (5*GRID_SIZE),centerY,-100
camDist = 250
 
shapePool = { }
 
 
function setup()
 
	local s,x,y,c
 
	-- Create the shape pool
	for i=1,numShapes do s = Shape.new(); stage:addChild(s); shapePool[i] = s	end
 
	-- Create the tables to hold the shape screen coordinates...
 
	y = 0
	c = 0x00FFFF
 
	for i=1,ROWS+1 do
 
		GRID_SCRX[i] = { }
		GRID_SCRY[i] = { }
		GRID_COLS[i] = { }
 
		x = 0
 
		for j=1,COLS+1 do
 
			GRID_SCRX[i][j] = x
			GRID_SCRY[i][j] = y
			GRID_COLS[i][j] = c
 
			x = x + GRID_SIZE
 
			if c == 0xFF0000 then c = 0x00FF00 else c = 0xFF0000 end
 
		end
 
		y = y + GRID_SIZE
 
	end
 
	-- add some cross hairs over the screen...
 
	s = Shape.new()
	s:setLineStyle(1,0xFF40FF,1); s:beginPath(); s:moveTo(centerX,0); s:lineTo(centerX,HEIGHT); s:endPath()
	stage:addChild(s)
 
	s = Shape.new()
	s:setLineStyle(1,0xFF40FF,1); s:beginPath(); s:moveTo(0,centerY); s:lineTo(WIDTH,centerY); s:endPath()
	stage:addChild(s)
 
end
 
-- ------------------------------------------------------------
 
function gridToScreen()
 
	local wx,wy,wz
	local cx,cy,cz
	local sx,sy,d
 
	wz = (ROWS * GRID_SIZE)		-- use a LEFT hand system (0,0,0 is the bottom left corner of the map)
 
	for i=1,ROWS+1 do
 
		wx = 0		-- x will increase from left to right
 
		for j=1,COLS+1 do
 
			-- Generate the world coords for this point (LEFT HAND with Z inverted)
			wy = GRID[i][j]		-- y will increase from bottom to top
 
			-- Translate into camera space
			cx = wx - camX
			cy = camY - wy
			cz = wz - camZ
 
			-- Translate into screen space
			d  = camDist / (camDist + cz)
 
 
			sx = centerX + (cx * d)
			sy = centerY + (cy * d)
 
			GRID_SCRX[i][j] = sx
			GRID_SCRY[i][j] = sy
 
 
			wx = wx + GRID_SIZE
		end
 
		wz = wz - GRID_SIZE
 
	end
 
end
 
-- ------------------------------------------------------------
 
function recreateShapes()
 
	local s,si
	local x1,y1,x2,y2
	local x3,y3,x4,y4
 
	si = 1
 
	for i=1,ROWS do
 
		for j=1,COLS do
 
			x1 = GRID_SCRX[i][j];     y1 = GRID_SCRY[i][j]
			x2 = GRID_SCRX[i+1][j];   y2 = GRID_SCRY[i+1][j]
			x3 = GRID_SCRX[i+1][j+1]; y3 = GRID_SCRY[i+1][j+1]
			x4 = GRID_SCRX[i][j+1];   y4 = GRID_SCRY[i][j+1]
 
			s = shapePool[si]; si = si + 1
 
			s:clear()
			s:setFillStyle(Shape.SOLID,GRID_COLS[i][j])
			s:beginPath()
			s:moveTo(x1,y1)
			s:lineTo(x2,y2)
			s:lineTo(x3,y3)
			s:lineTo(x4,y4)
			s:lineTo(x1,y1)
			s:endPath()
 
		end
 
	end
 
end
 
-- ------------------------------------------------------------
-- ------------------------------------------------------------
-- ------------------------------------------------------------
-- ------------------------------------------------------------
 
function loop(event)
 
	local t = (os.timer() * 100)
 
	camY = centerY
	camZ = -251 + (t % 500)
	camX = 5 * GRID_SIZE	-- t % (COLS * GRID_SIZE)
 
	camDist = 250	--t % 100
 
	-- seems to f*** up when camZ > camDist also if camZ == camDist error (div by 0?)
 
	gridToScreen()
	recreateShapes()
 
 
end
 
-- ------------------------------------------------------------
 
setup()
stage:addEventListener(Event.ENTER_FRAME,loop)
 
 
---[[
-- -------------------------------------------------------------------------
-- local methods required to put an FPS counter on the screen...
 
local frame = 0
local timer = os.timer()
local qFloor = math.floor
local fps	
 
-- -------------------------------------------------------------------------
 
local function updateFPS(self,e)
	frame = frame + 1
	if frame == 60 then
		local currentTimer = os.timer()
		fps:setText(""..qFloor(60 / (currentTimer - timer)))
		local width = fps:getWidth()
		fps:setPosition(WIDTH-(width+10), 28)	--HEIGHT-10)
		frame = 0; timer = currentTimer	
	end
end
 
-- -------------------------------------------------------------------------
 
local function initFPS(group)
	fps = TextField.new(nil,"")
	fps:setTextColor(0x00FFFF)
	fps:setScale(3,3)
	fps:addEventListener(Event.ENTER_FRAME,updateFPS,nil)
	group:addChild(fps)
end
 
initFPS(stage)	-- Add a quick FPS counter on the screen (REMOVE for final build)
--]]
 
-- End of file...

Scouser · February 2013

@techdojo: Unfortunately Isometric tiles aren't actually a square rotated 45deg. Isometric tiles are twice as wide as they are high like so

ar2rsawseen · February 2013

@Scouser but you can skew using Transformation matrix, can't you?

)

techdojo · February 2013

@Scouser - fair point, although it's be interesting to see what the difference @ar2rsawseen's idea would make.

I wonder how many so called iso-games are actually traditional 2D maps but with cleverly designed tilesets.

UPDATE:
Having played with one of my tilemap examples, the rotation point is in the top left, not a big issue granted, but you'll have to be careful with the onscreen positioning.

Also as @Scouser said - the maps look a little weird without the transformation matrix, another point would be the lack of implicit height. Most iso maps contain some base vertical offset on a cell by cell basis to allow for varying terrain height.

Still an interesting exercise all the same.

Mells · March 2013

cc @atilim @deniz

Mells · March 2013

Disappointed.

atilim · March 2013

@mells don't be disappointed

It's possible to implement isometric tilemaps by using meshes. And here is the implementation: https://github.com/gideros/Isometric-Tilemap

The project contains IsometricTileMap class, a loader function (taken from Desert example without modification) and an isometric tilemap example (exported with Tiled).

In the future, I'll also implement isometric tilemaps internally.

alexzheng · March 2013

great

)

paul_k_clark · March 2013

Yeahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh!!!!!!!!!!!!!!!!!!!!!!

techdojo · March 2013

@atilim - doesn't it do your heart good when you do something that makes people so obviously happy

)

Mells · March 2013

thank you @atilim

Mells · March 2013

Hi @atilim,

I have played a little with your code and I really like it.
I am looking forward to seeing it supported internally, but in the meantime it's great.

that was just a note to say "thank you" again.

Mells · March 2013

External resource : Quick Tip: Cheap ‘n’ Easy Isometric Levels on GameDev tuts+.

SinisterSoft · January 2014

Noticed that there is an isometric plugin now available, does anyone know when Hexagon maps will also be available?

ar2rsawseen · January 2014

well unfortunately that is not the plugin, but pure lua implementation, which also has some limitations (z-indexing) and was created to prove the concept.

Dunno about hexagons maps (do you want them isometric or top down view)?

SinisterSoft · January 2014

Isometric - as in they look like 3D cubes but are actually hexagonal.

(I've actually done them pre-rendered in my latest game - used in the map for 'What Rhymes With Martians?' as I also need to display 200+ level 'shields' with up to 3 stars and a level no and still keep the scrolling to 60hz, but it would be useful in future.)

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Isometric & Hexagon maps support?

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Isometric & Hexagon maps support?

Comments