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.

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.

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.

Changes

• deselect on deletion
• several fixes for registering global hotkeys and some other functionality not working. should now work across the board.

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)
  }

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.

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.

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)

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.

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)