Using Tiled from your web browser with GitHub Codespaces!

[lowlighter]

Hi!

Recently I've been playing a lot with GitHub codespaces which lets you spawn a web-accessible docker instance from a repository.
Not a lot of people know, but it is actually possible to configure the dockerfile through the .devcontainer folder of a repository.

Then I wondered if it was possible to setup a graphic environment along with a VNC server on it so I would be able to access Tiled directly from a web browser... 🤔

And it is 🥳 !

After playing a bit with Microsoft's vscode-dev-containers' lightweight desktop I achieved to configure flexbox (the provided desktop env) to spawn a full-screen instance of Tiled and make it possible to edit maps directly from web.

Below's a preview of the whole thing, in Firefox (yes, everything is happening in the browser !😮)

The aim is to make life easier for people willing to contribute to a project by providing them a full-fledged environment from backend to frontend along with map editions.

Small possible improvements:

• I couldn't find a way to make Tiled open a .world by default. I initially thought that it was stored in ~/.local/share/tiled/default.tiled-session creating a "pre-configured" file seems to have no effect. Same project folder is open by default but I wanted to close it
• Since GitHub codespaces requires you to be authenticated to access an open port, the password feature of VNC is overkill, but I didn't have time to check if it was possible to disable it yet

If you're interested, you can check out the config I used to achieve this here.

---

In addition to the above, I'd like to present a draft of a project I'm currently working, Gracidea which makes heavy use of Tiled. It is a Pokémon live web map (meaning it's directly accessible from your browser too x) hosted at gracidea.lecoq.io

Here's what it looks like:

It uses the world feature, and watchful eyes may notice that each map is loaded asynchronously but still render in the same window (making infinite map possible). There is also a debug mode (which is quite slow though) which draws the bounds of maps, chunks, objects and areas, along with general map coordinates.

It is probably not map agnostic though since I tailored the client app for my needs, but I guess people could still be inspired by it if they wanted to render their maps on the web 😅

Basically XML maps are parsed through a small XML parser I made in TypeScript and formatted into a more lightweight JSON (stripping metadata and unused content). Data are completed with content from PokeAPI to compute encounters rates (though it still requires to map areas which I haven't had time to finish yet)

The project uses mostly deno runtime, vercel.com, pixi.js and of course Tiled! I also use texture packer to pack ripped sprites, but unfortunately I couldn't afford the CI license so I couldn't automatize it.

---

Thanks for reading 💕 !
And thank a lot for making this awesome tool 🥳 !

[bjorn]

That is really cool! Also, really great project! :-)

Unfortunately I couldn't give it a try. To use Codespaces it would be necessary to upgrade an organization to "GitHub Team", which would cost $28.00 / month for the "mapeditor" organization due to currently having 7 members, even if we don't use the Codespaces feature at all. :-/

Btw, you can suppress the crash handler popup by putting either 0 or 1 in the .cache/tiled/sentry/user-consent file, depending on whether you'd like to enable crash reporting.

The loading of worlds from the default.tiled-session should have worked, so I'm not sure what's up with that. Just note that loading a world does not automatically load a map. To see the world immediately on startup, you'd need to also add one of the maps to the openFiles list.

[lowlighter]

That is really cool! Also, really great project! :-)

Thanks a lot 😊 !

Unfortunately I couldn't give it a try. To use Codespaces it would be necessary to upgrade an organization to "GitHub Team", which would cost $28.00 / month for the "mapeditor" organization due to currently having 7 members, even if we don't use the Codespaces feature at all. :-/

Ah yes, it seems you're right it's not free for organization and teams 😕
While it's free for user accounts, it seems to be still in closed beta. I assumed that it was already released since it was for orgs

Btw, you can suppress the crash handler popup by putting either 0 or 1 in the .cache/tiled/sentry/user-consent file, depending on whether you'd like to enable crash reporting.

The loading of worlds from the default.tiled-session should have worked, so I'm not sure what's up with that. Just note that loading a world does not automatically load a map. To see the world immediately on startup, you'd need to also add one of the maps to the openFiles list.

I applied your config tweaks and it works like a charm ❤️ !
It was indeed missing an open map in the opened files