When I turn off JS, it shows a loader instead of the terrain. Is this really CSS-Only? I mean it's still a high achievement even with JS, but was expecting it would also work without JS. This one, for example, truly works without JS https://benjaminaster.com/css-minecraft/ .
I'm assuming it's the render engine that is in pure CSS. You could display a static map in CSS but things like the tools to modify the terrain definitely need JS.
The top right button has a "Download code" which gives you a .zip file. That .zip file doesn't have any JS in it, and renders the terrain just like in the online editor, except you can turn off JS and it still works.
I really miss these building games that used an isometric grid. RC Tycoon, Zoo Tycoon, Sim City, TTD, …
Yes, it's less realistic, but it is so pleasant to work with. Everything you build aligns perfectly and if you want, you can neatly fill the entire map.
In comparison, (even with many mods) my Cities Skylines or Planet Coaster creations never look quite right. Building the roads and paths is always awkward and frustrating.
As someone who wrote one of those 2D-ish isometric games in the 90s, it was hell. All the problems with trying to render the tiles properly and figure out what tile the user was clicking on when some tiles are semi-transparent etc. The artists need medals though for creating amazing levels with tiny palettes of pieces to work from.
We made it especially hard on ourselves by having 3D characters interact with the 2D tiles:
I once heard he tickled a butterfly in Brazil to cause a cloud in the UK that diverted a cosmic ray onto his hard drive in the exact right spot to flip the required bit.
You guys have sent me down memory lane. Hopefully, I don't forget when I have free time to search, but hopefully I can find this to play in an emulator somewhere. This was the very first game I ever bought even though I didn't have an Amiga but had one that was very accessible.
edit: couldn't wait. did the search. it's very much available to play online. hello rabbit hole...
I've used a few terrain generators before but I think this one might be my favourite. Obviously the fact its a "CSS only" demo project restricts things a bit, but its got enough going for it regardless.
It actually comes at a really good time for me, I'm currently trying to make the transition from 2d game dev to 3d and things like this are really helpful.
Impressive, but there is a noticeable lag after modifying the terrain or moving the camera. Is there a way to know if the browser is using the GPU or CPU for rendering, and is there are way to see the milliseconds per frame?
It looks like a layout/style/composition issue with the browser engine.
In Safari I'm seeing 91% CPU time on paint, 6% on layout, 2% on styles. It looks like it's taking somewhere between 100-200ms on my machine to chunk through a state change each time.
> Is there a way to know if the browser is using the GPU or CPU for rendering, and is there are way to see the milliseconds per frame?
For Safari, you would go to the Web Inspector and navigate to the Timelines tab. Chrome has a similar thing.
Definitely! I'm planning for more landscape features for next versions. I think rivers will be a great addition, and waterfalls/rapids sound really interesting too. In the end it's a matter of adding a few classes and designing some sprites.
This thing is killing my CPU, what's the actual bottleneck here for CSS? Is it the number of elements visible and rendered at once? Is it the calculation engine backing CSS is super slow? Or just that most of the work is being done on the CPU it seems (on my machine, rotating around the map, my integrated GPU goes to 20% but CPU stays around 40-50%).
Through great teams and great technology, Microsoft and Activision Blizzard will empower players to enjoy the most-immersive franchises, like “Halo” and “Warcraft,” virtually anywhere they want.
The controls would take some serious reworking to make it work on mobile - I could see adding a ‘pause’ feature to give you time to scrub your fingers all over the screen to issue all your unit and build orders, performant pinch to zoom would nearly negate the need for a mini map, lots of reworked GUI for building stuff and managing workers
Why do you think the renderer is pure css and not e.g. mostly css?
Edit: someone else wrote basically the same an hour ago: https://news.ycombinator.com/item?id=45814791
As opposed to a “css-only (terrain generator)” - a terrain creation studio built with css only.
Build something then hit the Download Code button - that packaged HTML solution doesn't require any javascript to render locally.
Great work!
Yes, it's less realistic, but it is so pleasant to work with. Everything you build aligns perfectly and if you want, you can neatly fill the entire map.
In comparison, (even with many mods) my Cities Skylines or Planet Coaster creations never look quite right. Building the roads and paths is always awkward and frustrating.
(I've commented this before.)
We made it especially hard on ourselves by having 3D characters interact with the 2D tiles:
https://www.youtube.com/watch?v=9UOYps_3eM0
I absolutely adore the look of isometric, though.
1. https://en.wikipedia.org/wiki/Populous_(video_game)
https://youtu.be/5uPVGs7bq3s?t=8
So the JS is only being used, essentially, as a nice UI for configuring your terrain and the camera angle from which it's viewed.
This is still an incredible feat.
We need PEMDAS for English.
actual meaning -> ((CSS-Only Terrain) Generator)
incorrect interpretation -> (CSS-Only (Terrain Generator))
actual meaning -> CSS-Only Terrain + Generator +
incorrect interpretation -> CSS-Only + Terrain Generator +
Really we may need BNF here
https://kagi.com/proxy/sim-city-2000.png?c=zBh1SYcmKrHnLf7qc...
https://kagi.com/proxy/00001307.jpg?c=vxNARhwMwSpmnHAfYQrnRr...
https://www.openttd.org/screenshots
Very cool
For anyone who hasn't heard of it before: https://en.wikipedia.org/wiki/Populous_(video_game)
edit: couldn't wait. did the search. it's very much available to play online. hello rabbit hole...
It actually comes at a really good time for me, I'm currently trying to make the transition from 2d game dev to 3d and things like this are really helpful.
https://a.singlediv.com/
In Safari I'm seeing 91% CPU time on paint, 6% on layout, 2% on styles. It looks like it's taking somewhere between 100-200ms on my machine to chunk through a state change each time.
> Is there a way to know if the browser is using the GPU or CPU for rendering, and is there are way to see the milliseconds per frame?
For Safari, you would go to the Web Inspector and navigate to the Timelines tab. Chrome has a similar thing.
Looks really cool and runs great on my phone.
Seems like there's some kind of rendering bug in the corners sometimes causing the walls to intersect the grass
https://i.imgur.com/qT6ozyh.png
Firefox 144.0.2, Windows
2. does it sometimes raise / lower by 2 units?
3. the "flatten" tool is missing.
It would be a hit, I’m telling you. Even from 1995.
Some people are still playing it 30 years later, obsessively.
And myth ii by Bungie is a classic too
Also Microsoft claims this after buying Blizzard:
Through great teams and great technology, Microsoft and Activision Blizzard will empower players to enjoy the most-immersive franchises, like “Halo” and “Warcraft,” virtually anywhere they want.
https://news.microsoft.com/source/2022/01/18/microsoft-to-ac...