Home > Web Front-end > JS Tutorial > body text

A Figma-like level design editor

Barbara Streisand
Release: 2024-10-16 18:25:48
Original
121 people have browsed it

A Figma-like level design editor

Hey folks,

My small level design tool recently hit 35k users. A lot of people ask how it's built so here we go!

Frontend:
All frontend things are made using SvelteKit, it's really a magical tool to build things fast with all the performance you need for kind of creative tools. For the rendering I use a custom engine I built on top of PixiJS.

Backend:
The tool allows you to export you map to native formats accepted by different engines, so I have had to compile maps into native files like .unitypackage files.
This is handled by a backend written in Rust!

Desktop app version:
I then used Tauri to bundle my SvelteKit app as a desktop app. The cool thing here is since Tauri can run Rust commands, I just put all my backend logic in a standalone Rust crate so I can use the same code for my backend server (for the web app) and for the desktop app (Rust functions are directly called from my static frontend in Tauri).

That's it! You want to try the web version here

Cheers!

Hugo

The above is the detailed content of A Figma-like level design editor. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!