Cross-platform 2D editor that saves scenes to json

Overview

Webber's Map Editor 2D

  • Load or create a new map
  • Select your sprites' folder (recursively).
  • Drag your sprites to the canvas to create instances.
  • On the canvas, adjust instances:
    • 📛 Name
    • 🪧 Position (x, y)
    • 🔝 Z-Index
    • 🛞 Rotation
    • 🔛 Scale
  • Save map as a JSON file (includes relative paths to the files).

Demo

2022-10-29-01-46-52.mp4

Limitations

  • Currently only works with files in your home directory, for your own security.

Limitations will be lifted in v2.

Contribute

Please read the Development doc.

License

MIT licensed.

Comments
  • Allow input fields to use period (.) as well as commas (,) in text fields

    Allow input fields to use period (.) as well as commas (,) in text fields

    Right now if you type 0.1 in an input field it won't work. You have to use comma's instead.

    This can probably be solved listening to onKeyDown on the input fields and replacing . with , on the fly before updating the value of the field.

    enhancement good first issue 
    opened by webbertakken 1
  • Allow to set defaults for new sprites

    Allow to set defaults for new sprites

    Usually assets are all at the same scale. Or at least groups of them are.

    What this app needs is a default scale and default z-axis for new sprites that are dragged on the map from the assets menu.

    enhancement good first issue 
    opened by webbertakken 1
  • Add physics properties

    Add physics properties

    Changes

    • Toggle for static or dynamic
    • Add weight
    • Allow setting weight based on the size of the sprite (as well as the scale)
    • Allow setting weight directly
    • Improve import logic, by better guaranteeing defaults are backfilled.
    opened by webbertakken 0
  • Finetuning

    Finetuning

    Changes

    • deselect on deletion
    • several fixes for registering global hotkeys and some other functionality not working. should now work across the board.
    opened by webbertakken 0
  • feat: per sprite state management

    feat: per sprite state management

    Mostly the change is about per-sprite state management; i.e. every sprite on the canvas has it's own id, which links to both data (to be persisted) and meta (runtime only).

    The change can probably best be understood by looking at this new state backbone:

    import { atom, atomFamily, CallbackInterface, DefaultValue, selector, selectorFamily } from 'recoil'
    import { SpriteData } from '../model/SpriteData'
    import { SpriteMeta } from '../model/SpriteMeta'
    
    /**
     * Ids
     */
    
    export const spriteIdsState = atom<string[]>({
      key: 'spriteIds',
      default: [],
    })
    
    /**
     * Sprite data
     */
    
    const privateSpriteDatasWithId = atomFamily<SpriteData, string>({
      key: 'spriteDatasPrivate',
      default: SpriteData.default(),
    })
    
    export const spriteDatasWithId = selectorFamily<SpriteData, string>({
      key: 'spriteDatas',
      get:
        (id) =>
        ({ get }) =>
          get(privateSpriteDatasWithId(id)),
      set:
        (id) =>
        ({ set }, data) =>
          set(privateSpriteDatasWithId(id), data),
    })
    
    /**
     * Sprite meta
     */
    
    const privateSpriteMetasWithId = atomFamily<SpriteMeta, string>({
      key: 'spriteMetasPrivate',
      default: SpriteMeta.default(),
    })
    
    export const spriteMetasWithId = selectorFamily<SpriteMeta, string>({
      key: 'spriteMetasWithId',
      get:
        (id) =>
        ({ get }) =>
          get(privateSpriteMetasWithId(id)),
      set:
        (id) =>
        ({ set }, data) =>
          set(privateSpriteMetasWithId(id), data),
    })
    
    /**
     * Combined
     */
    
    export const allSpritesState = selector<Sprite>({
      key: 'spriteDatasCollection',
      get: ({ get }) => {
        const ids = get(spriteIdsState)
        const datas = ids.map((id) => get(spriteDatasWithId(id)))
        const metas = ids.map((id) => get(spriteMetasWithId(id)))
        return { datas, metas }
      },
      set: ({ set, reset, get }, datasAndMetas) => {
        if (datasAndMetas instanceof DefaultValue) {
          // DefaultValue means reset context
          get(spriteIdsState).forEach((id) => {
            reset(spriteDatasWithId(id))
            reset(spriteMetasWithId(id))
          })
          reset(spriteIdsState)
          return
        }
    
        const { datas, metas } = datasAndMetas
        const ids = datas.map((data: any) => data.id)
    
        set(spriteIdsState, ids)
        for (const data of datas) {
          set(spriteDatasWithId(data.id), data)
        }
        for (const meta of metas) {
          set(spriteMetasWithId(meta.id), meta)
        }
      },
    })
    
    /**
     * Callbacks
     */
    
    export const addSpriteCallback =
      ({ set }: CallbackInterface) =>
      (id: string, spriteData: SpriteData, spriteMeta: SpriteMeta) => {
        set(spriteIdsState, (ids) => [...ids, id])
        set(spriteDatasWithId(id), spriteData)
        set(spriteMetasWithId(id), spriteMeta)
      }
    
    opened by webbertakken 0
  • Add labels

    Add labels

    Give sprites on the map labels, so that you can add functionality based on them in your game.

    For example, Flags could have "flag" label. In your game a flag could have a different kind of collider and get a pickup trait.

    enhancement 
    opened by webbertakken 0
  • Group move, scale, rotate for multi-sprite selection

    Group move, scale, rotate for multi-sprite selection

    When selecting multiple sprites on the map, it would be nice to be able to move, scale and rotate them as a group.

    It would probably require an additional Transformer component and disabling the per-sprite Transformer component when multiple items are selected. Other than that this should be somewhat straight-forward.

    enhancement good first issue 
    opened by webbertakken 0
  • Recursive permissions on a folder do not work when just opening the scene file

    Recursive permissions on a folder do not work when just opening the scene file

    There are three way to solve this:

    1. ask permission twice (illustrated on the screenshot)
    2. only ask permission (once) on the folder that contains the scenes recursively, support with a scene selector in the UI
    3. asking the user to put the files in scope (as described in https://tauri.app/v1/api/js/fs#security)

    image

    Point 3 is what I've done as a first iteration. Point 2 is probably best for a version 2 of this app, which requires a few more changes in the ui and the apps data model.

    enhancement 
    opened by webbertakken 0
  • Version 2

    Version 2

    Some things I would like to build would break the MVP or cause a bit of extra work. So they are out of scope for version 1.

    This issue is to track the issues that need to be solved in v2

    • Recursive directory permissions using multi-scene UI (described in https://github.com/webbertakken/map-editor-2d/issues/11)
    enhancement 
    opened by webbertakken 0
Releases(v1.3.1)
Owner
Webber Takken
🍀 Making complicated things easier for everyone
Webber Takken
Procedural generator for 2D space scenes.

Space Scene 2D Procedural generator for 2D space scenes. Try it out live here. Install npm i space-scene-2d Example import { Space2D } from "space-sc

Rye Terrell 85 Nov 12, 2022
GetOsLocalesCrossPlatform - A cross platform alternative to get locales used on the platform. Works on Node, Electron, NW.js and Browsers

getOsLocalesCrossPlatform A cross platform alternative to get locales used on the platform. Works on Node, Electron, NW.js and Browsers This script is

null 1 Jan 2, 2022
JCS (JSON Canonicalization Scheme), JSON digests, and JSON Merkle hashes

JSON Hash This package contains the following JSON utilties for Deno: digest.ts provides cryptographic hash digests of JSON trees. It guarantee that d

Hong Minhee (洪 民憙) 13 Sep 2, 2022
Package fetcher is a bot messenger which gather npm packages by uploading either a json file (package.json) or a picture representing package.json. To continue...

package-fetcher Ce projet contient un boilerplate pour un bot messenger et l'executable Windows ngrok qui va permettre de créer un tunnel https pour c

AILI Fida Aliotti Christino 2 Mar 29, 2022
A cool tool that saves you time if you want to remove node_modules before running 'npm i'

rmnpm A cool tool that saves you time if you want to remove your node_modules folder before running the npm install command. How does it do it? By fir

null 4 Jul 16, 2022
Satyam Sharma 3 Jul 8, 2022
Using Webpack and external API, this website saves and shows players' scores and allows the submission of new scores.

Microverse Students Leaderboard Microverse Students Leaderboard project that displays scores submitted by different students. All data is preserved in

Romina Patiño 5 Aug 19, 2022
AweSome Book App displays the book details entered by user and saves the information in Local storage. User can add and remove a book title/author to the library and from the library.

Awesome Book App with ES6 Used npm init -y command to create package.json file. Created the entry point for the JavaScript code called index.js Create

Krishna Prasad Acharya 8 Aug 15, 2022
📗 How to write cross-platform Node.js code

How to write cross-platform Node.js code. Why you should care: according to the 2018 Node.js user survey, 24% of Node.js developers use Windows locall

ehmicky 1.3k Nov 26, 2022
A cross-platform AutoHotKey-like thing with TypeScript as its scripting language

suchibot A cross-platform AutoHotKey-like thing with JavaScript/TypeScript as its scripting language. Built on top of uiohook-napi and nut.js. Install

Lily Scott 79 Sep 21, 2022
LucaMail - an Open Source,Cross Platform Email Client

LucaMail v0.0.1-beta An Awesome Cross Platform Email Client! Note : This Project Is Still in Beta Version Website . Report Bug . Request Feature . Dis

Yuva raghav 201 Nov 16, 2022
Hacker Tools cross-platform desktop App, support windows/MacOS/LInux ....

Hacker Tools cross-platform desktop App, support windows/MacOS/LInux ....

51pwn 25 Nov 22, 2022
Cross platform terminal app from Visual Studio Code.

CodeTerminal Standalone terminal from Visual Studio Code. Installation macOS Highly recommanded to install with homebrew. brew tap xcodebuild/custom b

xcodebuild 672 Nov 22, 2022
A cross-platform systray library for Deno.

deno-systray A cross-platform systray library for Deno using the go systray library. Usage import SysTray from "https://deno.land/x/systray/mod.ts";

Robert Soriano 10 Jul 16, 2022
A cross-platform desktop application of tools for developers

A cross-platform desktop application of tools for developers ?? Online Web This website provides online version of the same tools echoo ?? Offline Cli

Kyle 122 Nov 25, 2022
Opensource Cross-platform Logitech® Litra Glow control

Litra Opensource Cross-platform Logitech® Litra Glow control Requirements Linux sudo echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="046d", ATTR{idProduct}==

zource.dev 9 Nov 19, 2022
The Slip Snapper is a cross-platform application that assists in managing an individuals’ expenses.

The Slip Snapper is a cross-platform application that assists in managing an individuals’ expenses. It will accomplish this by allowing a user to scan their receipts using optical character recognition (OCR) with a mobile device and create comprehensive expense reports.

COS 301 - 2022 8 Oct 3, 2022
A tiny cross-platform client for SQLite3, with precompiled binaries as the only third-party dependencies.

Tiny SQLite3 A tiny cross-platform client for SQLite3, with precompiled binaries as the only third-party dependencies. A nice feature about this modul

Fabio Spampinato 19 Oct 27, 2022