JSON based Isometric map renderer

[Sulunia]

quick.png (122.45 KiB) Viewed 9766 times

Hello guys!
So, this time I decided to take on something new: isometric maps.
Obviously I could go the easy way and use Tiled along with STi (which has an awesome implementation in Love), but I wanted to go down the hard route to see what I could learn along the way.
Finally, I present you guys with a pretty simple project where map information is stored on a simple JSON file. It currently supports ground textures and map props, such as trees or bushes or just about anything you draw and place on it.

The JSON structure is pretty straightforward:

Code: Select all

{
"textures":
[
	{
		"file": "myTexture.*",
		"mnemonic": "myMnemonic"
	}
],
	
"props":
[
	{
		"file": "myProp.*",
		"mnemonic": "myProp",
		"origin" : "50|72"
	}
],
  
"data":
[     
	[["myMnemonic"],["myMnemonic"],["myMnemonic"]],
	[["myMnemonic"],["myMnemonic", "myProp"],["myMnemonic"]],
	[["myMnemonic"],["myMnemonic"],["myMnemonic"]]
],

"general":
[
	{
		"name":"Map name",
		"version":"string with map version",
		"lighting":"255|255|255"
	}
]
}

where:

Code: Select all

Textures =-=-=
file --> The texture file to be used. Can be any image file love supports.
mnemonic --> How they'll be referred to in the data matrix. See below.

Props =-=-=
file --> Texture to be used by the prop. Can be any image file love supports.
mnemonic --> How the prop will be referred to in the data matrix. See below.
origin --> The offset for drawing the picture, so it gets drawn correctly. X and Y values separated by a pipe ("|").

Data =-=-=
The actual map data. It's a 2D matrix written with the mnemonics mentioned above. If you saw the example JSON above, you
probably already understood how this works.

General=-=-=
name --> a string with the map name.
version --> a string with the map version
lighting --> R|G|B values separated by a pipe. Used to simulate day/night color "pallete".

Hand writing the JSON is actually not so hard, but I plan on making a simple level editor to make this chore easier.

The code can be found on github aswell.

Attached below is a simple demo. It did perform well on my pretty old machine, but tell me if you have any problems.
Ignore the weird tree. I suck at drawing.

I could maybe make a library out of this, but it currently uses some hardcoded paths (specifically for loading textures). I'd also need to cleanup a bit of the messy code.

[peterrust]

Cool, thanks for sharing!

[yetneverdone]

Hi, thanks for sharing. It would be easier to use and implement if you would write a simple instruction or tutorial on how to basically use it in the github repo. Thanks again

[Sulunia]

Hi, thanks for sharing. It would be easier to use and implement if you would write a simple instruction or tutorial on how to basically use it in the github repo. Thanks again

Done. A bit guetto, but definitely not a final thing. Report to me if something seens off.

[yetneverdone]

Hi, thanks for sharing. It would be easier to use and implement if you would write a simple instruction or tutorial on how to basically use it in the github repo. Thanks again

Done. A bit guetto, but definitely not a final thing. Report to me if something seens off.

Pretty cool! Although would it be easier if you would include rxi's library inside your module? Also, based on the setup, wouldn't it be more convenient if we could specify what folder to use for each jsonmap? What if it is multiple levels, how can we handle different props and etc folders?

P.s i might not be getting the full functionality of the code since I'm only basing on your provided setup. Tell me if I got something wrong

[Sulunia]

Wouldn't it be more convenient if we could specify what folder to use for each jsonmap? What if it is multiple levels, how can we handle different props and etc folders?

P.s i might not be getting the full functionality of the code since I'm only basing on your provided setup. Tell me if I got something wrong

Good point. Currently there is no separate folder for separate maps. This is probably the next thing i'll implement: maps come in zip files, which are extracted to user folders and then loaded from there, allowing their distribution through the web or even a server of sorts.

Although, for now, you can:
- Place each level's JSON on a subfolder named "levels"
- Load the json using:

Code: Select all

isomap.decodeJson("levels/levelx.json")

- Place all the ground textures for all your levels on "textures"
- Place all the prop textures for all your props on "props"

Whenever you want to switch your map, you just stop drawing, decode the new JSON, generate the playfield data and draw again.

But yeah, i'll add separate maps on separate folders. This i'll improve organization in the long run.

...would it be easier if you would include rxi's library inside your module?

Maybe some other user does not want/can't use autobatch for a reason, although I never heard of such situation. This ocurred to me when i didn't make the "string.split" function I used internally a local instead of a global. If some other user wanted to use some other split function, my library would create a conflict. That's why i decided to keep the library down to it's minimum, although i did recommend using autobatch whenever possible

[Sulunia]

Hello!
So, i've kept on working on this. I'll just do cleaning up and push a new version to github and to OP aswell.

What's new?

mapgif.gif (565.02 KiB) Viewed 9148 times

I've managed to implement a Zbuffer "correctly", so now it's possible to have dynamic objects (objects that can move around)!
Also worth mentioning that, as seen on the animation above, the magic billboard dynamic objects behind static props will be properly displayed.

There is much to be done though. Since i'm juggling college and development, I can tell this won't be quick, but i'm not giving up yet. Slow and steady wins the race.

I'll update OP once I clean up my code. Pulling that "visible surface thingy" there almost had me go nuts. But if you want the ugly version, it should be up in here:
https://github.com/Sulunia/isomap-love2d

[SiENcE]

but I plan on making a simple level editor to make this chore easier.

There is much to be done though. Since i'm juggling college and development, I can tell this won't be quick, but i'm not giving up yet. Slow and steady wins the race.

Why not just use Tiled as Editor!?

It has json as well as lua export. This could save time .

[Sulunia]

but I plan on making a simple level editor to make this chore easier.

There is much to be done though. Since i'm juggling college and development, I can tell this won't be quick, but i'm not giving up yet. Slow and steady wins the race.

Why not just use Tiled as Editor!?

It has json as well as lua export. This could save time .

What about the thrills of developing your own? I know mine will never be as good. I'm mostly doing it for learning, see how much I can make

[SiENcE]

Ok . I usually only try todo stuff that i can do better, that I need but can't find or just to use stuff and try to help to make it better (oss).