JSON based Isometric map renderer

Showcase your libraries, tools and other projects that help your fellow love users.
Post Reply
User avatar
Sulunia
Party member
Posts: 203
Joined: Tue Mar 22, 2016 1:10 pm
Location: SRS, Brazil

JSON based Isometric map renderer

Post by Sulunia »

quick.png
quick.png (122.45 KiB) Viewed 9888 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. :crazy:

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. :P

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.
Attachments
isomap-love2d-master.love
(51 KiB) Downloaded 204 times
Don't check my github! It contains thousands of lines of spaghetti code in many different languages cool software! :neko:
https://github.com/Sulunia
User avatar
peterrust
Prole
Posts: 42
Joined: Thu Dec 29, 2016 8:49 pm
Location: Bellingham, WA, USA
Contact:

Re: JSON based Isometric map renderer

Post by peterrust »

Cool, thanks for sharing!
User avatar
yetneverdone
Party member
Posts: 448
Joined: Sat Sep 24, 2016 11:20 am
Contact:

Re: JSON based Isometric map renderer

Post by 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
User avatar
Sulunia
Party member
Posts: 203
Joined: Tue Mar 22, 2016 1:10 pm
Location: SRS, Brazil

Re: JSON based Isometric map renderer

Post by Sulunia »

yetneverdone wrote: Wed Apr 05, 2017 5:07 am 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.
Don't check my github! It contains thousands of lines of spaghetti code in many different languages cool software! :neko:
https://github.com/Sulunia
User avatar
yetneverdone
Party member
Posts: 448
Joined: Sat Sep 24, 2016 11:20 am
Contact:

Re: JSON based Isometric map renderer

Post by yetneverdone »

Sulunia wrote: Wed Apr 05, 2017 3:23 pm
yetneverdone wrote: Wed Apr 05, 2017 5:07 am 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
User avatar
Sulunia
Party member
Posts: 203
Joined: Tue Mar 22, 2016 1:10 pm
Location: SRS, Brazil

Re: JSON based Isometric map renderer

Post by Sulunia »

yetneverdone wrote: Wed Apr 05, 2017 5:27 pm 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. :monocle:

But yeah, i'll add separate maps on separate folders. This i'll improve organization in the long run. :nyu:
yetneverdone wrote: Wed Apr 05, 2017 5:27 pm ...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 :roll:
Don't check my github! It contains thousands of lines of spaghetti code in many different languages cool software! :neko:
https://github.com/Sulunia
User avatar
Sulunia
Party member
Posts: 203
Joined: Tue Mar 22, 2016 1:10 pm
Location: SRS, Brazil

Re: JSON based Isometric map renderer

Post by 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
mapgif.gif (565.02 KiB) Viewed 9270 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. :rofl:

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
Last edited by Sulunia on Wed May 31, 2017 5:03 pm, edited 1 time in total.
Don't check my github! It contains thousands of lines of spaghetti code in many different languages cool software! :neko:
https://github.com/Sulunia
User avatar
SiENcE
Party member
Posts: 806
Joined: Thu Jul 24, 2008 2:25 pm
Location: Berlin/Germany
Contact:

Re: JSON based Isometric map renderer

Post by 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. :rofl:
Why not just use Tiled as Editor!?

It has json as well as lua export. This could save time :).
User avatar
Sulunia
Party member
Posts: 203
Joined: Tue Mar 22, 2016 1:10 pm
Location: SRS, Brazil

Re: JSON based Isometric map renderer

Post by Sulunia »

SiENcE wrote: Wed May 31, 2017 7:12 am
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. :rofl:
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 :D
Don't check my github! It contains thousands of lines of spaghetti code in many different languages cool software! :neko:
https://github.com/Sulunia
User avatar
SiENcE
Party member
Posts: 806
Joined: Thu Jul 24, 2008 2:25 pm
Location: Berlin/Germany
Contact:

Re: JSON based Isometric map renderer

Post by 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).
Post Reply

Who is online

Users browsing this forum: No registered users and 8 guests