Tiled images

See also:

System:

For tiled images, it is usual to have something like:

  • image source
  • section of source image to view (mask) sourcex, sourcey, sourcewidth, sourceheight
  • destination of masked source – destinationx, destinationy, destinationwidth, destinationheight

Use TILED image editor (https://www.mapeditor.org/) to edit 

Also aseprite

A good outline of using tiled: Creating a Mario style level in Python / Pygame with a visual level editor [Tiled]

A good JS focused one:

Pokémon JavaScript Game Tutorial with HTML Canvas

There is some more here: Multi-room Platformer Game Tutorial with JavaScript and HTML Canvas– 56:00 ish

We DON’T want to set this up manually – use ’tiled’ – See also: TILED IMAGES

Tiled basics

open tiled

open image

AUTOMAPPING in TILED

You WANT to do this…

https://doc.mapeditor.org/en/stable/manual/automapping/#definition-of-inputs

Tiled 1.9 — Game Level Editor Now 10-30x Faster Automapping

Resources