|
| 1 | +# Tileset Documentation |
| 2 | + |
| 3 | +Each tileset consists of a JSON file that tells the website where to look for it, and either a folder of files that contain the images for the tileset, or one full spritesheet image. |
| 4 | + |
| 5 | +## Examples |
| 6 | + |
| 7 | +Look in `/assets/` for the existing tilesets to see how they are structured. |
| 8 | + |
| 9 | +## **Setting up the basic tileset JSON** |
| 10 | + |
| 11 | +**Properties:** |
| 12 | + |
| 13 | +- `path` - the path where the files are kept |
| 14 | +- `name` - the name of the tileset |
| 15 | +- `type` - whether it's a spritesheet or individual files for each tile. |
| 16 | +- `spritesheetPath` - the path to the spritesheet from the frontend directory |
| 17 | +- `characterFile` - the path to the character file, added to the `path` property |
| 18 | +- `imgWidth` - the width of the tiles |
| 19 | +- `tileWidth` - the width of the spritesheet in tiles |
| 20 | +- `tiles` - a list of each tile in the tileset |
| 21 | + |
| 22 | +## **Individual Tiles** |
| 23 | + |
| 24 | +Each tile in the list is an object that can have different properties. |
| 25 | + |
| 26 | +**Required Properties** |
| 27 | + |
| 28 | +- `id` - the id of the tile |
| 29 | +- `name` - the name of the tile |
| 30 | +- `type` - what type of tile it is. See the section for tile type. |
| 31 | +- `category` - the category of tile it is |
| 32 | +- `file` - the file to read from |
| 33 | + |
| 34 | +**Other Properties** |
| 35 | + |
| 36 | +- `triggerAdjacency` - whether this block should trigger adjacency for other tiles |
| 37 | +- `mechanics` - a list of different mechanics that the block has, see the section labeled "Mechanics" |
| 38 | +- `x` - the x position of the tile on the spritesheet, zero-based |
| 39 | +- `y` - the y position of the tile on the spritesheet, zero-based |
| 40 | + |
| 41 | +### Tile Categories |
| 42 | + |
| 43 | +- `"blocks"` - main blocks |
| 44 | +- `"collectibles"` - blocks that can be collected, like coins |
| 45 | +- `"powerups"` - not functional yet, but you can still put your blocks here if you want |
| 46 | +- `"hazards"` - spikes and other hazardous materials |
| 47 | +- `"mobs"` - any mobs |
| 48 | +- `"triggers"` - blocks that have to do with triggers |
| 49 | +- `"mechanics"` - level mechanics like checkpoints and spawn |
| 50 | + |
| 51 | +### Mechanics |
| 52 | + |
| 53 | +Mechanics tell the game engine what to do with the block. |
| 54 | + |
| 55 | +**Available Mechanics** |
| 56 | + |
| 57 | +- `"killOnTouch"` - kill the player if they touch this block |
| 58 | +- `"spawn"` - spawn the player wherever this block is placed |
| 59 | +- `"checkpoint"` - respawn the player here if they touch this block and then die |
| 60 | +- `"end"` - finish the level when the player collides with this block |
| 61 | +- `"noCollision"` - the player won't collide with this block |
| 62 | +- `"onePerLevel"` - limit placement to one per level (useful for spawn and end blocks) |
| 63 | +- `"hidden"` - don't render this tile on game play |
| 64 | +- `"bouncePad"` - throws the player into the air. NOTE: use the type of rotation here so that you can bounce the player different directions. |
| 65 | +- `"Dissipate"` - the player will no longer collide with the block if they stand on it for more than 2 seconds |
| 66 | +- `"Coin"` - Used for coins |
| 67 | +- `"swapTrigger1"` & `"swapTrigger2"` - the blocks to switch between when the swap blocks trigger is triggered |
| 68 | +- `"trigger"` - use this trigger as a block |
| 69 | + |
| 70 | +## Tile Type |
| 71 | + |
| 72 | +There are multiple different types of tiles, described blue-block |
| 73 | + |
| 74 | +**Empty** |
| 75 | + |
| 76 | +Just air. No Image needed. |
| 77 | + |
| 78 | +**Standalone** |
| 79 | + |
| 80 | +Consists of one image, with the same width and height |
| 81 | + |
| 82 | +**Rotation** |
| 83 | + |
| 84 | +Consists of a 4x1 strip of images, each rotating 90° counter-clockwise |
| 85 | + |
| 86 | +**Adjacency** |
| 87 | + |
| 88 | +Consists of a 16x1 strip of images. The adjacency system uses 4 bits, each toggling a different side that's touching another tile. The first bit is the bottom, the next is the left, then the top, and then the left. Those bits tell us which tile in the strip to use. |
| 89 | + |
| 90 | +## The player spritesheet |
| 91 | + |
| 92 | +The player spritesheet is a 10x1 strip of tiles. |
| 93 | + |
| 94 | +1. standing facing right |
| 95 | +2. standing facing left |
| 96 | +3. walking right first frame |
| 97 | +4. walking left first frame |
| 98 | +5. walking right second frame |
| 99 | +6. walking left second frame |
| 100 | +7. jumping right |
| 101 | +8. jumping left |
| 102 | +9. falling right |
| 103 | +10. falling left |
| 104 | + |
| 105 | +# Submitting your own tileset |
| 106 | + |
| 107 | +To submit your own tileset, make a pull request with all the player files and the json file. Have fun! |
| 108 | + |
| 109 | +**One final note:** |
| 110 | + |
| 111 | +Currently switching tilesets just uses whatever tileId that the previous had, and if it doesn't have one for that id, there's no block in the level. I'm currently working on a function to automatically switch between the tilesets regardless of id, but for the time being make sure the `"id"` property of each tile matches up with the existing tilesets. |
0 commit comments