├── .gitattributes ├── .gitignore ├── README.md ├── editor.html ├── editor.lite.html ├── editor.lite.zip ├── editor.old.html ├── index.html ├── l.js ├── t.js └── t.png /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear in the root of a volume 35 | .DocumentRevisions-V100 36 | .fseventsd 37 | .Spotlight-V100 38 | .TemporaryItems 39 | .Trashes 40 | .VolumeIcon.icns 41 | 42 | # Directories potentially created on remote AFP share 43 | .AppleDB 44 | .AppleDesktop 45 | Network Trash Folder 46 | Temporary Items 47 | .apdisk 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | js13k-level-editor 2 | == 3 | 4 | This projects contains a level editor specially conceived for the js13kgames.com competition. 5 | 6 | It can be used to produce built-in levels for your js13k game. 7 | 8 | The lite version (1.1kb gzipped) can also be included directly in your entry as a custom level editor for your game. 9 | 10 | Feel free to fork it and adapt it to your needs. 11 | 12 | The levels made with this editor are shareable as text or with an URL. 13 | 14 | There's also a [tiny level reader script](http://xem.github.io/js13k-level-editor/l.js) that you can use to load custom levels from an URL. 15 | 16 | You can join the discussion on Slack: https://js13kgames.slack.com/messages/level-editor-share/ 17 | 18 | --- 19 | 20 | 21 | Editor 22 | -- 23 | 24 | The editor lets you pick tiles from a tileset and paste them on a blank map. 25 | 26 | The tileset (on top) is a canvas called "a", with a context2D called "c". 27 | 28 | It loads automatically the image {url}/t.png and the script {url}/s.js at the root of the project specified in the "URL" field. 29 | 30 | The JS script is executed, then the png file is drawn on the canvas. 31 | 32 | Any of these two files can be omitted (your spritesheet can be png only or js only). 33 | 34 | Of course, these files can also be used in your game. 35 | 36 | The editor lets you choose a tile size in px (like 16x16 or 32x32) and a level size, in tiles. 37 | 38 | The editor creates a hash that can be used to the URL by your game (to play the level), or the level editor (to edit it). 39 | 40 | It also outputs the map as a text block, which is a much more efficient way to store built-in levels in your zipped entry. (scroll the page to see it) 41 | 42 | Demo (blank level): 43 | 44 | http://xem.github.io/js13k-level-editor/editor.html 45 | 46 | Demo (existing, editable level): 47 | 48 | https://xem.github.io/js13k-level-editor/editor.html#@H/1%20.%22!.%22%22.%22#.%22$.%22%25.%22&.%22%27.%22..%22/.%220.%221.%222.%22A.%22B.%22C.%22D.%22E.%22F.%22G.%22G-%22F-%22E-%22D-%22C-%22B-%22@.%22?.%22%3E.%22=.%22%3C.%22;.%22:.%229.%228.%227.%226.%225.%224.%223.%223-%222-%221-%220-%22/-%22.-%224-%225-%226-%227-%228-%229-%22:-%22;-%22%3C-%22=-%22%3E-%22?-%22@-%22A-%22%27-%22&-%22%25-%22$-%22#-%22%22-%22!-%22%20-%22(-%22(.%22).%22)-%220**1*+0+:0,:1+;1,;$)$%27)$B&,B%27%3CB(%3CB)%3CB*%3CB+%3CB,%3CE,%3ED+0D,0F+0F,0E+.D*-F*-E*/E)0E(-!,1%22,2#,35,76+77*78+89*9:+9;,98))8*(7+(6,(7,(8,(9,(9+(:,(=,!%3E,!%3E+!?,!?+!?*!@,!@+!@*!@)!3$44$55$56$57$63#%254#&5#&6#&7#%27 49 | 50 | Tileset files used by this demo: 51 | 52 | - http://xem.github.io/js13k-level-editor/t.png 53 | - http://xem.github.io/js13k-level-editor/t.js 54 | 55 | --- 56 | 57 | Editor LITE 58 | -- 59 | 60 | The lite editor can be included in your entry. 61 | 62 | The difference with the normal editor are: 63 | 64 | - No URL field (the tileset is necessarily in the current folder) 65 | - No text block output 66 | - No tile size field (the tile size is hardcoded at the end of editor.lite.html (d={t:32}). You can edit it manually. 67 | - The source code is minified 68 | 69 | Demo (blank level): 70 | 71 | http://xem.github.io/js13k-level-editor/editor.lite.html 72 | 73 | Demo (existing, editable level): 74 | 75 | https://xem.github.io/js13k-level-editor/editor.lite.html#@H/1%20.%22!.%22%22.%22#.%22$.%22%25.%22&.%22%27.%22..%22/.%220.%221.%222.%22A.%22B.%22C.%22D.%22E.%22F.%22G.%22G-%22F-%22E-%22D-%22C-%22B-%22@.%22?.%22%3E.%22=.%22%3C.%22;.%22:.%229.%228.%227.%226.%225.%224.%223.%223-%222-%221-%220-%22/-%22.-%224-%225-%226-%227-%228-%229-%22:-%22;-%22%3C-%22=-%22%3E-%22?-%22@-%22A-%22%27-%22&-%22%25-%22$-%22#-%22%22-%22!-%22%20-%22(-%22(.%22).%22)-%220**1*+0+:0,:1+;1,;$)$%27)$B&,B%27%3CB(%3CB)%3CB*%3CB+%3CB,%3CE,%3ED+0D,0F+0F,0E+.D*-F*-E*/E)0E(-!,1%22,2#,35,76+77*78+89*9:+9;,98))8*(7+(6,(7,(8,(9,(9+(:,(=,!%3E,!%3E+!?,!?+!?*!@,!@+!@*!@)!3$44$55$56$57$63#%254#&5#&6#&7#%27 76 | 77 | --- 78 | 79 | Level reader 80 | -- 81 | 82 | It's a JS script containing a load_level() function, that can be used by the editor and by your game. (l.js) 83 | 84 | It reads the hash passed in argument and stores all the important information in the object d, which is returned: 85 | 86 | ```` 87 | d = { 88 | t: // tile size in px 89 | w: // level width in tiles, 90 | h: // level height in tiles, 91 | z: // use tile zero by default 92 | m: // tiles used on the map: 93 | [ 94 | [tile_index, x coordinate, y coordinate], 95 | [tile_index, x coordinate, y coordinate], 96 | ... // one entry for each tile of the map 97 | ] 98 | } 99 | ```` 100 | 101 | Demo: 102 | 103 | http://xem.github.io/js13k-level-editor/index.html#@H/1%20.%22!.%22%22.%22#.%22$.%22%25.%22&.%22%27.%22..%22/.%220.%221.%222.%22A.%22B.%22C.%22D.%22E.%22F.%22G.%22G-%22F-%22E-%22D-%22C-%22B-%22@.%22?.%22%3E.%22=.%22%3C.%22;.%22:.%229.%228.%227.%226.%225.%224.%223.%223-%222-%221-%220-%22/-%22.-%224-%225-%226-%227-%228-%229-%22:-%22;-%22%3C-%22=-%22%3E-%22?-%22@-%22A-%22%27-%22&-%22%25-%22$-%22#-%22%22-%22!-%22%20-%22(-%22(.%22).%22)-%220**1*+0+:0,:1+;1,;$)$%27)$B&,B%27%3CB(%3CB)%3CB*%3CB+%3CB,%3CE,%3ED+0D,0F+0F,0E+.D*-F*-E*/E)0E(-!,1%22,2#,35,76+77*78+89*9:+9;,98))8*(7+(6,(7,(8,(9,(9+(:,(=,!%3E,!%3E+!?,!?+!?*!@,!@+!@*!@)!3$44$55$56$57$63#%254#&5#&6#&7#%27 104 | 105 | --- 106 | 107 | 108 | Structure of a map stored to URL / text 109 | -- 110 | 111 | Maps saved as hash have the following form: 112 | 113 | http://(game_url)/index.html#twhzTTT... 114 | 115 | with: 116 | 117 | - t: String.fromCodePoint(d.t) // 1 char 118 | - w: String.fromCodePoint(d.w) // 1 char 119 | - h: String.fromCodePoint(d.h) // 1 char 120 | - z: +d.z // 1 char (0 or 1) 121 | 122 | for each tile i 123 | - T: String.fromCodePoint(i[0])+String.fromCodePoint(i[1])+String.fromCodePoint(i[2]) // 3 chars 124 | 125 |
126 | 127 | Maps saved as text have the following form: 128 | 129 | ```` 130 | 131 | 132 | 133 | %&&&' 134 | 45556 135 | 136 | , 137 | < 138 | < - 139 | $ $ ) ! < 0 140 | *+ 7(9 !! < -/- 141 | :; 7(8(9 !!! < 0.0 142 | 123 :; 7(((((9 !!!! < 0>0 143 | """""""""" """""""""""""""""""""""""" 144 | """""""""" """""""""""""""""""""""""" 145 | ```` 146 | 147 | Each char represents the index of the tile used, starting from U+0020 (to have only printable characters). 148 | 149 | The lines breaks are made with "\n" chars. 150 | 151 | To read a tile at [x:y] in this kind of map, just use: ````map_ascii.split("\n")[y].charCodeAt(x)-32```` 152 | 153 |
154 | 155 | --- 156 | 157 | License 158 | -- 159 | 160 | Public domain 161 | -------------------------------------------------------------------------------- /editor.html: -------------------------------------------------------------------------------- 1 | Fork me on GitHub 2 |

3 | Game URL 4 | - Tile size 5 | - Map size x 6 | - Use 1st tile by default 7 | - Erase 8 | - Reset 9 |

10 | Map 11 | - share 12 | - play 13 | 14 |

15 |

16 | 17 | 18 |
19 |

20 |

21 | 22 |
23 |
24 | Text output: Download 25 |
26 |

27 |

 28 | 
 29 | 
 30 | 


--------------------------------------------------------------------------------
/editor.lite.html:
--------------------------------------------------------------------------------
1 | 

Map x - - Erase - 1st tile - Reset - share - play

-------------------------------------------------------------------------------- /editor.lite.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xem/js13k-level-editor/4a907bf06cd3d8bf154af470fd9660dc3c1a4869/editor.lite.zip -------------------------------------------------------------------------------- /editor.old.html: -------------------------------------------------------------------------------- 1 |

go reset 2 |

3 |
4 | 5 | 20 | 21 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /l.js: -------------------------------------------------------------------------------- 1 | load_level=b=>{d={};d.t=b.codePointAt(0)-32;d.w=b.codePointAt(1)-32;d.h=b.codePointAt(2)-32;d.z=+b[3];d.m=[];d.M=[];for(i=4;i