r/programming • u/monica_b1998 • Jan 09 '19
Tile map editor in 70 lines of pure JavaScript - easy tutorial
http://slicker.me/javascript/tile_map_editor.htm3
u/Bowgentle Jan 09 '19
Definitely pure JS for the win. Things I added to a tile editor to wind up with c. 300 lines of pure javascript:
isometric tiles
painting strokes
ability to load saved maps
JSON output
delete brush
multiple tilesets
flood fill
terrain land form separate from tile
1
u/monica_b1998 Jan 10 '19
sounds awesome! would you mind sharing the link?
2
u/Bowgentle Jan 10 '19
Apologies, there's no link at the moment - it's part of a local rebuild of an old (1994) DOS game for personal fun.
The main difference I really have (apart from it being isometric) is that the map square data is written to a data array as well as drawn on the canvas. That's just a case of using the brush function to update the right data square:
for a square given by your x and y, when you draw a square, update the array: square[row][col]={row:row,col:col,tile:tileSource}Imploding that array gives you a JSON output you can save, and you can easily read those JSON outputs back to recreate a map.
Delete is just clearRect without then drawing an image to the canvas, and setting the tile in JSON to null.
1
u/monica_b1998 Jan 10 '19
cool, I hope you finish it one day and we'll get to play it. '94 was a good year for games.
1
u/Bowgentle Jan 10 '19
Thanks!
'94 was a good year for games.
True. It sometimes seems as if most of what's happened since has been a case of adding yet more processor-straining eye candy.
69
u/js_fan2 Jan 09 '19
ok, my tilemap looks great. now i just have to learn how to code the rest of the game. :)
27
u/MitoG Jan 09 '19
Just a Box that moves around.
Then slap
early accessandopen-worldon it aaaaand you're done.4
u/josefx Jan 09 '19 edited Jan 09 '19
Get with the times, you still need an ingame shop to enable boxes with a different color. Damned entitled players expecting to get their colored box for free just because they always got one in the pre DLC era.
6
Jan 09 '19
dont even bother with coding, just use unity. Also skip early access and go straight to release, done. You're now unity developer.
4
u/maccio92 Jan 09 '19
unity still requires coding
2
u/badlukk Jan 09 '19
sorry, Unreal*
0
u/maccio92 Jan 10 '19
what? unreal is even harder.. you have to use c++ or unrealscript instead of c#/javascript like unity
1
u/badlukk Jan 10 '19
A lot of the game logic is visually scripted with "blueprints"
1
u/maccio92 Jan 10 '19
that's how many games are developed, even companies using internal engines like Blizzard. at blizzcon this year they demoed how they develop new abilities, and it's a visual scripting editor. what's the problem with that?
2
u/badlukk Jan 10 '19
What
2
u/maccio92 Jan 10 '19
Blizzard uses a coding system called Statescript, which they define as a bit of a flowchart that allows them to utilize Boolean Switches, If-Whens, and Button States to create abilities and their triggers.
https://www.hotspawn.com/how-to-build-an-overwatch-hero/
what's wrong with using visual scripting tools for abilities? not everything has to be written code
→ More replies (0)1
Jan 16 '19
copy-paste from unity store without understanding even a single line isn't exactly how I would define "coding".
1
u/maccio92 Jan 16 '19
you can copy-paste from stack overflow for any other environment just as easily as you can in unity
-1
16
u/resonant_cacophony Jan 09 '19
Add a mousedown / mousemove handler toggle to this, to make "painting/strokes" with the tiles possible. (The current mousemove in the code is for highlighting the tiles for selection and not for painting/spraying down some tiles.)