Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
Isometric & Hexagon maps support? — Gideros Forum

Isometric & Hexagon maps support?

MellsMells Guru
edited February 2013 in Roadmap
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).
twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps

Comments

  • @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.
  • MellsMells Guru
    edited 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.
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • ar2rsawseenar2rsawseen Maintainer
    edited February 2013
    @Mells I think that @atilim and @deniz are still at startup event and will probably respond when they get back home ;)
  • MellsMells Guru
    edited February 2013
    @ar2rsawseen I see. there were several answers from atilim since so I didn't know about that.

    @alexzheng
    A lot do
    image
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • 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.
  • 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...
    WhiteTree Games - Home, home on the web, where the bits and bytes they do play!
    #MakeABetterGame! "Never give up, Never NEVER give up!" - Winston Churchill
  • ScouserScouser Guru
    edited 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
    image
  • ar2rsawseenar2rsawseen Maintainer
    edited February 2013
    @Scouser but you can skew using Transformation matrix, can't you? :))
  • techdojotechdojo Guru
    edited 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.
    WhiteTree Games - Home, home on the web, where the bits and bytes they do play!
    #MakeABetterGame! "Never give up, Never NEVER give up!" - Winston Churchill
  • twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • Disappointed.
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • atilimatilim Maintainer
    edited 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.
    +1 -1 (+5 / -0 )Share on Facebook
  • Yeahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh!!!!!!!!!!!!!!!!!!!!!!
  • @atilim - doesn't it do your heart good when you do something that makes people so obviously happy :))
    WhiteTree Games - Home, home on the web, where the bits and bytes they do play!
    #MakeABetterGame! "Never give up, Never NEVER give up!" - Winston Churchill
  • thank you @atilim
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • 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.
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • External resource : Quick Tip: Cheap ‘n’ Easy Isometric Levels on GameDev tuts+.
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • Noticed that there is an isometric plugin now available, does anyone know when Hexagon maps will also be available?
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • 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)? :)
  • SinisterSoftSinisterSoft Maintainer
    edited 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.)
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
Sign In or Register to comment.