├── .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 |
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 |
20 |
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 |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