replit / kaboom

💥 JavaScript game library
https://kaboomjs.com
MIT License
2.66k stars 224 forks source link

multilayered tilemaps possible? #89

Open blurymind opened 3 years ago

blurymind commented 3 years ago

Hello, I am currently writing an online tilemap editor pwa app, which can already export boilerplate code for kaboomjs.

It can export it, but only do it for one layer! kaboomJsExport

How does one make a multilayered tilemap in kaboom? Do we create several ones and stack them over the other? Mind you the player still needs to only interact with one layer.

You can check out the project here btw https://github.com/blurymind/tilemap-editor

My idea is to perhaps some day make a better online editor for kaboomjs games that comes with this tilemap editor - to allow people to do games with less boilerplate js code if they want to. That is why my tilemap editor is registered as a module on npm now.

It can do several multi layered tilemaps, that can take tiles from several tilesets. I want to make it possible to have all the layer data rendered by kaboomjs, its not finished without that

blurymind commented 3 years ago

so for the layer the player interacts with, use the addLevel command, for the other tilemap layers - do I render those with loads of individual sprites?

I am not sure what the kaboomjs way is to do the remaining tilemap layers that are there to decorate the environment

triptych commented 3 years ago

I've used multiple overlapping layers in my RPG prototype https://observablehq.com/@triptych/dot-matrix-rpg?collection=@triptych/kaboom-examples

blurymind commented 3 years ago

if you want some layers to be semi-transparent - how do we do that? Its ok if its not possible btw, just curious

slmjkdbtl commented 3 years ago

@blurymind Right now there's no "native" support for multilayered tilemaps and the best way now is to just overlap, but down to making it a primitive if we figured out a good interface

Layers is an attribute on objects instead of a container, it can be achieved by (uglier but can be abstracted)

every((obj) => {
    // assuming every obj has 'layer' and 'color' comp
    if (obj.layer === "somelayer") {
        obj.color.a = 0.5;
    }
});

And cool proj btw! Can even make a plugin for your editor and get it loaded by one loadTilemap("your_tilemap.format") (but for this it'll be better if it has less generic name to avoid conflict).

blurymind commented 3 years ago

A tiled or ldtk parser would be fantastic as a plugin. I am planning on making my editor export to tiled json format. The boilerplate code it currently generates also does the resource loading and slicing of the tileset for you, as well as setting up all the tiles. The theory is what you export will render a map on the screen with almost zero extra code required (maybe a line tops). You dont need to do anything but tell it which map you want. The editor lets you add tags to tiles (solid(), "enemy",etc)

I am also currently adding animated tiles to the format, so it is still growing with new features. The import/export api is designed in a way that lets you write your own transformers to other data structures if you like too

blurymind commented 3 years ago

Just added animated tiles to the data it can save/load. Currently this is limited to a single horizontal strip sprite animatedTiles

blurymind commented 3 years ago

There seems to now be a plugin to parse tiled files in kaboom https://github.com/notnullgames/tiled-kaboom

I will investigate it and focus my efforts on tiled export if this plugin is good enough. The demo indicates it doesnt support animated tiles