stefandevai / textyle

Web tilemap editor for 2D games built using React JS, WebGL and Rust (WASM).

Try Textyle!

What is Textyle?

Textyle is a simple web-based tilemap editor for 2D games built using React JS and Rust (WASM).

Textyle aims to simplify and speed up the process of making tilemaps for your games. Running on the web means that you don't have to download any additional tools for creating your maps, and exporting it to an easy format means that you don't have to add additional libraries or plugins to your game.

The project is in its initial stages of development, expect great improvements to come!

Donate

Please, consider donating to the project and supporting its development.

Getting started

Check the wiki for a simple provisional tutorial. A complete documentation will come soon!

Integrating a Textyle map to your project

Currently Textyle exports to JSON. It's a simple and widely used format in game development, you can use any JSON parser to get you tilemap data to your game; check the details here. One of the priorities, however, is to allow multiple export targets so it will be a lot easier to integrate your map to the most common game engines.

Features so far

• Multiple layers
• Multiple tilesets
• Tools:
  • Pencil
  • Fill
  • Zoom
  • Pan
• JSON export
• Batch Rendering

Coming soon

• Autotile
• Custom brushes
• CSV and tmx format exports
• Selections (free, rectangular, magic wand)
• Support for isometric and hexagonal tiles
• Data layers
• Custom parameters on tiles
• Images over the tiles
• Undo/Redo

Technical overview

Stack:

• React JS
• WebGL
• Rust (WASM)

Textyle is built using React JS for the UI, WebGL for rendering graphics and Rust (WASM) for managing tiles data and logic. In this sense, we try to explore each technology's strength: React JS for easily building complex UIs, WebGL API for rendering using the GPU and Rust compiled to WASM for managing tilemap's logic and algorithms with high performance.

Browser support

Textyle has been tested on Firefox and Chrome. Currently it doesn't run on Safari because it needs WebGL2 support, which Safari lacks. There are plans, however, to port the code to WebGL1.

Alternatives

• Tiled
• tileEditor

Contributing

Are you learning Rust, JavaScript or React? Are you an expert already? Found a way to improve the code? You are more than welcome to contribute to this project! But before that, please check our code of conduct and take a look on the guidelines for contributing.

textyle's Issues

add to npm so it can be used in react projects

Hi, this is a fantastic component.
Would it be possible to register it at https://www.npmjs.com/search?q=textyle
so as to be able to use it in different react projects?

Please add build instructions

This is not a normal nodejs project that starts with yarn and yarn start.
The rust section requires extra steps which are not included in the package.json file

additionally if you try to do yarn build, you get

[fox@fox-pc textyle]$ yarn build
yarn run v1.22.10
$ react-app-rewired build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Failed to compile.

./src/tilemap/index.js
Cannot find file './pkg' in './src/tilemap'.


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I tried doing cargo build in that folder, but I still get no further with this :(

Grid doesn't keep aspect ratio on window resize

Hello! Not sure if you already noticed this and it's not really a big deal. =)

The tiles keep their sizes, but the grid doesn't.

I tested it on macOS.
Chrome - Version 87.0.4280.141 (Official Build) (x86_64)
Firefox - 85.0.2 (64-bit)

textyle is unusable on mobile and portrait mode

The touch input doesnt register at all. I assume that is due to using mouse events instead of pointer events. If you replace all your mouse events with pointer ones, it will work on tablets.
The pan tool does not work at all, also dragging with pencil doesnt work

The second problem is this

This can be fixed by using an orientation media query. it is not quite as bad in landscape mode, so I think with little modification it can also be made to work well in portrait mode

I was going to do a PR for these things, but I cant even get it to run. yar/npm start fails, npm install fails

npm install fails, yarn start fails

[fox@fox-pc textyle]$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.5" from [email protected]
npm ERR! node_modules/react-beautiful-dnd
npm ERR!   react-beautiful-dnd@"^13.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/fox/.npm/eresolve-report.txt for a full report.

manjarolinux

[fox@fox-pc textyle]$ node -v
v14.16.0

Sprites are misplaced when window is scrolled

On my Windows laptop I get both horizontal and vertical scrollbars. When I scroll away from (0,0) the graphical objects get placed in the wrong spot - the calculation is missing window.scrollX/Y offset correction