Isometric (Tiled) Map Rotation - GameCreators Forum

Author

Message

Sph!nx

17

Years of Service

User Offline

Joined: 3rd Dec 2008

Location: The Netherlands

Posted: 15th May 2014 02:47

Link

Hey everybody!

I'm experimenting a little with a 2D Isometric tile engine. I know, DBP is a 3D Engine, but it works surprisingly well!

I got placement and "camera" (Tile) movement covered but I cannot seem to be able to make it rotate.

Here is the array for each tile:

+ Code Snippet

global tile_image_nr as integer

// Output Strings
// Console Media Array
type t_tile
	sprite_nr as integer
	px as integer
	py as integer
endtype
// File Array (Made from Type)
dim tile(0) as t_tile
empty array tile(0)

This is the code I use to move and rotate the camera (tiles). Movement, no problem but I have no clue on how to get the new x,y positions for rotation.

+ Code Snippet

function tiles_upd()

	for ID = 0 to array count(tile(0))
		paste sprite tile(ID).sprite_nr, tile(ID).px, tile(ID).py
	next ID

	// Camera Up
	if keystate(200) = 1
		for ID = 0 to array count(tile(0))
			tile(ID).py = tile(ID).py + 5
		next ID
	endif
	// Camera Down
	if keystate(208) = 1
		for ID = 0 to array count(tile(0))
			tile(ID).py = tile(ID).py - 5
		next ID
	endif
	// Camera Left
	if keystate(203) = 1
		for ID = 0 to array count(tile(0))
			tile(ID).px = tile(ID).px + 5
		next ID
	endif
	// Camera Right
	if keystate(205) = 1
		for ID = 0 to array count(tile(0))
			tile(ID).px = tile(ID).px - 5
		next ID
	endif
	// Rotate Left
	if keystate(51) = 1
		for ID = 0 to array count(tile(0))
			// ????
		next ID
	endif
	// Rotate Right
	if keystate(52) = 1
		for ID = 0 to array count(tile(0))
			// ????
		next ID
	endif

endfunction

I know, besides placement the tiles needs to be "rotated", but I got that covered. Just need help with getting the new positions for rotation.

So any help is much appreciated! Thanks!

Regards Sph!nx

Back to top

Profile PM

VisualProg

17

Years of Service

User Offline

Joined: 31st Mar 2009

Location: RussianFederation, Smolensk

Posted: 15th May 2014 08:31 Edited at: 15th May 2014 09:30

Link

?

+ Code Snippet

global tile_image_nr as integer
// Output Strings
// Console Media Array
type t_tile
	sprite_nr as integer
	px as integer
	py as integer
  angle as integer
endtype
// File Array (Made from Type)
dim tile(0) as t_tile
empty array tile(0)

+ Code Snippet

function tiles_upd()

	for ID = 0 to array count(tile(0))
                rotate sprite tile(ID).sprite_nr,tile(ID).angle
		paste sprite tile(ID).sprite_nr, tile(ID).px, tile(ID).py
	next ID

	// Camera Up
	if keystate(200) = 1
		for ID = 0 to array count(tile(0))
			tile(ID).py = tile(ID).py + 5
		next ID
	endif
	// Camera Down
	if keystate(208) = 1
		for ID = 0 to array count(tile(0))
			tile(ID).py = tile(ID).py - 5
		next ID
	endif
	// Camera Left
	if keystate(203) = 1
		for ID = 0 to array count(tile(0))
			tile(ID).px = tile(ID).px + 5
		next ID
	endif
	// Camera Right
	if keystate(205) = 1
		for ID = 0 to array count(tile(0))
			tile(ID).px = tile(ID).px - 5
		next ID
	endif
	// Rotate Left
	if keystate(51) = 1
		for ID = 0 to array count(tile(0))
			dec tile(ID).angle
		next ID
	endif
	// Rotate Right
	if keystate(52) = 1
		for ID = 0 to array count(tile(0))
			inc tile(ID).angle
		next ID
	endif

endfunction

Do you have too many meaningless operations.

try:

+ Code Snippet

function tiles_upd()
local key_up as integer
local key_down as integer
local key_left as integer
local key_right as integer
local key_turnLeft as integer
local key_turnRight as integer

	key_up=keystate(200)
	key_down=keystate(208)
	key_left=keystate(203)
	key_right=keystate(205)
	key_turnLeft=keystate(51)
	key_turnRight=keystate(52)

		for ID = 0 to array count(tile(0))
		
					if key_up=1 then inc tile(ID).py,5
					if key_down=1 then dec tile(ID).py,5
					if key_left=1 then inc tile(ID).px,5
					if key_right=1 then dec tile(ID).px,5
				
				if key_turnLeft=1 then dec tile(ID).angle
				if key_turnRight=1 then inc tile(ID).angle
				
			rotate sprite tile(ID).sprite_nr,tile(ID).angle
			paste sprite tile(ID).sprite_nr, tile(ID).px, tile(ID).py
		next ID

endfunction

MZh[NUL] <---

Back to top

Profile PM Email

Chris Tate

DBPro Master

17

Years of Service

User Offline

Joined: 29th Aug 2008

Location: London, England

Posted: 15th May 2014 09:10

Link

Interesting; an isometric sprite engine that can rotate the camera. That is above my level of understanding.

Back to top

Profile PM Email Website

Van B

Moderator

23

Years of Service

User Offline

Joined: 8th Oct 2002

Location: Sunnyvale

Posted: 15th May 2014 09:36

Link

Moving each tile is a fairly slow way of scrolling a map.

Really, if I wanted a rotatable isometric engine, I'd use a narrow camera FOV and just use 3D. I did this a while back with a Marble Madness type game and it works really well.

I'd just use a matrix or something like that for the ground with texture filtering off. I'd use plains or 3D objects for everything else.

I am the one who knocks...

Back to top

Profile PM Email

Barry Pythagoras

12

Years of Service

User Offline

Joined: 14th Mar 2014

Location:

Posted: 15th May 2014 12:42

Link

Just use the camera for the map. 2D nowadays is 3D made to look 2D. So you use the camera for scrolling, rotation, everything.

Back to top

Profile PM

Sph!nx

17

Years of Service

User Offline

Joined: 3rd Dec 2008

Location: The Netherlands

Posted: 15th May 2014 15:38 Edited at: 15th May 2014 16:02

Link

Hey all, Thanks for the fast replies!

It's just an experimental project. I've done it all in 3D (Orthographic-isometric perspective), but I wanted to try it out with 2D images (prototyping for a possible AppGameKit project).

@ VisualProg
I know, the code as a lot of excessive operations. Wrote it on a whim in the middle of the night (insomnia)...

I'll try your rotation calculation. Thanks!

I'll report back on how things goes.

Edit
THanks VisualProg, but that's not really what I needed. The rotation should be 90 degrees, eacht time, and simply place the current tile on the new location without actually rotating the image (The image will be replaced with other graphics from another angle).

In other words, the tiles make a diamond shape, the same shape should be visible when rotated, but with the tiles on other locations.

I found an example on youtube on what I would like to try:
https://www.youtube.com/watch?v=lJ5k5U1Rrm0
There are some comments about it, but I don't see how I can use that.

Regards Sph!nx

Back to top

Profile PM

Chris Tate

DBPro Master

17

Years of Service

User Offline

Joined: 29th Aug 2008

Location: London, England

Posted: 15th May 2014 17:07

Link

Quote: "move and rotate the camera (tiles)"

So you just want to rotate the tile pattern by 90 degrees.

Back to top

Profile PM Email Website

Sph!nx

17

Years of Service

User Offline

Joined: 3rd Dec 2008

Location: The Netherlands

Posted: 15th May 2014 17:19

Link

Yes, please!

Just like in the video link.

It's undoubtedly a simple equation but maths and I and not really the best of friends...

Regards Sph!nx

Back to top

Profile PM

Sph!nx

17

Years of Service

User Offline

Joined: 3rd Dec 2008

Location: The Netherlands

Posted: 16th May 2014 03:05 Edited at: 16th May 2014 03:07

Link

Sorry for the double post, but this might be of some help to my problem.

I've drawn out a grid on a paper. When I was turning it around, I noticed that the "columns" became "rows" and the "rows" became "columns". So I somehow need to swap places and re-order all the tiles relative to the positions...

Dunno, Been thinking till my head hurts. Like I said... maths doesn't like me very much.

Regards Sph!nx

Back to top

Profile PM

Chris Tate

DBPro Master

17

Years of Service

User Offline

Joined: 29th Aug 2008

Location: London, England

Posted: 16th May 2014 16:05 Edited at: 16th May 2014 16:06

Link

Quote: "I've drawn out a grid on a paper. When I was turning it around, I noticed that the "columns" became "rows" and the "rows" became "columns". So I somehow need to swap places and re-order all the tiles relative to the positions..."

You have got the right idea; once you alter the tile locations according to the direction of the camera relative to the origin of the map, you can compute new locations.

A forum search lead me to this array rotation solution by Ian M. http://forum.thegamecreators.com/?m=forum_view&t=80653&b=1 Interestingly this is the person who created the Matrix1 utilities plugin which features array rotation commands.

Another interesting thing to note is that your tiles could simply be supplied with 4 locations, each representing the camera angles influence on their locations in isometric space.

Back to top

Profile PM Email Website

Sph!nx

17

Years of Service

User Offline

Joined: 3rd Dec 2008

Location: The Netherlands

Posted: 16th May 2014 16:44 Edited at: 16th May 2014 18:41

Link

Thank you, sir. I'll dive into that thread. Four pre-saved "layouts" of the tile grid. That's a great Idea!

I'll report back on how things turn out.

Thanks again

EDIT
I'm changing my approach.

Like I said, It was a bit of prototyping for a AppGameKit project and I have experience with 3D (and ortho-Iso projections). Did a little more research on AppGameKit and see that I can do the same with that.

3D, supplemented with 2D graphics (overlayed sprite) over invisible objects (boxes, etc.) can give me much more options, like physics, and more camera options, like zoom, without the headache of all the math that's involved having everything positioned and rotated correctly around the centre of the camera in 2D...

Thanks for all the help so far!

Regards Sph!nx

Back to top

Profile PM

Sorry your browser is not supported!

DarkBASIC Professional Discussion / Isometric (Tiled) Map Rotation