How to code a level editor for a 2D platformer?

[eguneys]

I want to make an awesome 2d platformer like celeste , where there is moving platforms moving hero, spikes enemies, etc. but don't know how to get started. I am thinking storing tiles in a map like so:

let tiles = {

  '00': {

    texture: 'grass'

  }

};

 

This is fine when everything is a single tile, but some objects occupies multiple tiles. So I thought make a function to handle that case:

 

  this.addHero = (pos) => {

    let { head, torso, armsLeft, armsRight, legs } = heroPos(pos);

    syncEntity(tiles[pos2key(head)], entityHero('head'));
    syncEntity(tiles[pos2key(torso)], entityHero('torso'));
    syncEntity(tiles[pos2key(armsLeft)], entityHero('armsLeft'));
    syncEntity(tiles[pos2key(armsRight)], entityHero('armsRight'));
    syncEntity(tiles[pos2key(legs)], entityHero('legs'));

  };

 

moving these objects require moving all tiles they occupy. Also I need a level editor, which I've built one where you can edit individual tiles, maybe I can extend it to place multiple tile objects.

 

The hero movement doesn't use physics, but hardcoded like move 2 tiles if pressed right, fall if standing. And collision detection is just checking if the tile is occupied.

 

I can't get very far with these limited set of ideas. What should I do?

Edited March 20, 2020 by eguneys

[rich]

Why re-invent the wheel? Tiled has this covered, and a whole lot more.

[eguneys]

What if I want to quickly test iterate on level design, being able to quickly play the game possibly in editor is a great feature. Because I have to adjust the level to the jump physics of the character.

Edited March 20, 2020 by eguneys

[totor]

you may find this link useful : https://github.com/xem/js13k-level-editor