Hi everyone. I've made a isometric tile map a while ago - http://jsfiddle.net/victorqribeiro/k3bazwnj/ - but yesterday I found this really cool tile set - free to use - so I decided to make a tiny city builder. Hope you like it.
You can make some really nice looking games using isometric tiles, Ceasar 3 comes to mind. Which looks much better then Ceasar 4 IMHO, which is 3d AFAIK. And game-play also feels better in C3.
To anyone interested in the webgl version, it would work something like this - https://victorribeiro.com/voxel/ - click to place a bloc, click and drag on the sides of the screen to rotate the view, keys 1 to 9 change the block.
This generally doesn’t work for isometric tiles because flipping the tile on the y axis (what you’re suggesting by rotate 90) does not preserve the lighting being on the correct side, so the flipped tile looks wrong. In most cases you would need a whole new tile for the rotated piece.
You could use two bits in each pixel to indicate horizontal, left or right, and post-process light/dark depending on orientation. (Assuming only those faces and senses... though this project also has sloping roofs).
Or, couldn't you pretend the city rotated but the sun didn't (like a model under a lamp), so lighting is the same for all orientations?
One of the last projects I did in college was a terrain generator.
After, I was learning a new programming language, so I picked it up again to experiment with some world building.
I started trying to generate more realistic (and traverseable) terrain. I had worked out coastlines and rivers, made some headway on biomes, and gotten stuck on simulated erosion before I remembered that I like games a little too much and didn’t want to make them for a living.
I was pretty bummed when No Man’s Sky was panned. Using generated terrain as a canvas and dropping a story into it still feels like the right long-term solution for exploration games.
Really cool project! Small suggestion, some indication of which type of tile is currently selected might be nice (like maybe highlight it or something).
I agree, really cool, also have a small suggestion -- it'd be nice if you could click and drag to "draw" tiles into the main board. Currently you can only click tile-by-tile.
I can't upload the live version for now, cause I'm on a family event. I'll enable the GitHub version so everyone making pull requests can see the changes live
I was just looking at the source code, it appears `map` is a global variable that is a 7x7 grid representing your current city (49 arrays of `[0,0]` by default). This could be serialized to a URL hash that could be shared.
This is definitely a fun little project to hack on! I created a pull request to keep the current state in the URL. Here's something I made with it:
#IjIqKioyIgoxKioqMQoKMRwZGzEKCjEYARgxCgoxGhkdMQoKMSwsLDEKIzAsLCwwIw==
This is a super fun app and I'm also very impressed by the elegant simplicity and readable code of this project! The tools you provided are perfect -- they offer just enough options to open up fun original creations while providing practical limitations to stay productive.
PS. Love your github tagline "I'm a Brazilian times better than your average coder." :)
Oh cool! I made something similar for my website gallery[1], it was an easter egg that you could play with if you pulled the pull-cord at the bottom of the page. In the middle of the page. Scrolling is a bit broken it seems now, though, so you have to find it yourself. (I really need to revisit it, I know so much more now.)
Sadly it is different because of the magic of this. If you set something equal to document.querySelector and then call it this will no longer refer to document. There are fancier ways with Function.prototype.bind, but wrapping in a function is the easiest conceptually.
This is written by someone who has never used jquery or forgot it.
The beauty of jquery was not being able to use CSS selectors to find elements, but in being able to work with multiple selected elements as if it was a single one.
instead of $('.foo .bar').css('backgroundColor', 'corn');
and it is clearly better because it does not use jQuery.
Don't get me wrong, jQuery has many issues that make it a very poor choice for big modern web applications, but please don't tell me that it can be replaced by querySelectorAll.
> please don't tell me that [jQuery] can be replaced by querySelectorAll.
I didn't, and it can't -- my comment was merely to suggest that jQuery is now a shell of its old self, thanks largely to the improvement of browser DOM APIs.
This is beautiful. I think that the success of games like Transport Tycoon is in large part down to an undefined satisfaction that comes from the graphic style.
106 comments
[ 3.2 ms ] story [ 192 ms ] threadAlso: plebs are needed.
I've tried a lot of the newer city builders and the 3D just does not do it for me. I find it clunky and awkward.
Filling some of the whitespace with scrollable grid of pieces would go a long way towards decreasing time for piece selection.
Also, I suggest highlighting the currently selected piece.
Hmm, MIT license, this could be a kitchen planner for her :)
I also appreciate that you're very open to contributions! :)
Or, couldn't you pretend the city rotated but the sun didn't (like a model under a lamp), so lighting is the same for all orientations?
https://jaygles.github.io/city-block/
Garbage newbie code for it here - https://github.com/Jaygles/city-block
Seems like some recent browser updates sort of broke the main animation but if you really want to see something fun open it in IE.
One of the last projects I did in college was a terrain generator.
After, I was learning a new programming language, so I picked it up again to experiment with some world building.
I started trying to generate more realistic (and traverseable) terrain. I had worked out coastlines and rivers, made some headway on biomes, and gotten stuck on simulated erosion before I remembered that I like games a little too much and didn’t want to make them for a living.
I was pretty bummed when No Man’s Sky was panned. Using generated terrain as a canvas and dropping a story into it still feels like the right long-term solution for exploration games.
https://www.shadertoy.com/view/MljXzz
source: https://github.com/victorqribeiro/isocity/blob/master/js/mai...
I thought about adding a print screen button
a save button that keeps the map on a localStorage would also be great
PS. Love your github tagline "I'm a Brazilian times better than your average coder." :)
[1] http://ddr0.github.io/gallery
Doesn't seem to implement rotation - it can reveal obscured objects. https://github.com/victorqribeiro/isocity/blob/master/js/mai...
const $ = _ => document.querySelector(_)
Pretty well sums up the state of jQuery in 2019 (almost 2020!)
$ = function(_) { return document.querySelector(_) }
It basically turns `$` into an alias for `document.querySelector`. I'm not sure that it's any different from:
$ = document.querySelector
https://www.taniarascia.com/this-bind-call-apply-javascript/
For this specific case, you can see this at https://stackoverflow.com/q/13383886/8334056
Btw, querySelectorAll() to match multiple elements.
* IE partial until 2011
Ok, you will say, but you can always do
[... document.querySelectorAll('.foo .bar')].map(it => it.style.backgroundColor = 'corn');
instead of $('.foo .bar').css('backgroundColor', 'corn');
and it is clearly better because it does not use jQuery.
Don't get me wrong, jQuery has many issues that make it a very poor choice for big modern web applications, but please don't tell me that it can be replaced by querySelectorAll.
I didn't, and it can't -- my comment was merely to suggest that jQuery is now a shell of its old self, thanks largely to the improvement of browser DOM APIs.
I'd also probably recommend using Array.from instead of a spread (for clarity) but less concerned about that part.