Oh... if you are referring to the second level (sewers) that's actually on purpose, i have set max draw distance (geometry culling) to improve performance on mobile. It is configurable.
No, just in the first level. I'm running on Firefox on Linux.
By coincidence I read up on WebRender on Firefox today and decided to force it turned on - suddenly the game looks nice (only glitch when looking down below the candle one of the wall segments still vanishes).
But it runs a lot better with WebRender (which uses the Graphics card to composite) than without on my machine.
Nope, threejs is used for a very specific thing at the end of the second level. There is actually nothing 3D-related webgl in it (except for a surprise at the end)
I don't think it's there any more, but many versions ago three.js included a CSS renderer. It was very useful for making things line up on 3d elements of webpages.
Performance for simple things is adequate, but relying on 2-point rectangles (origin(x,y), dimensions(width,height)) for geometry is extremely cumbersome. Also everything is hack piled on top of hack (for example there is no concept of a camera, the whole world moves around you instead to simulate the camera effect!).
So... webgl is still the way! This is meant to be an experiment to show what css/html is capable of!
It won't be faster than WebGL in most cases. Browser CSS rendering stacks have gotten pretty fast but are not really optimized for this. In practice WebGL gives you more chances for optimization, because CSS rendering has to handle lots of edge cases that games don't. For example, a CSS renderer must split self-intersecting partially-transparent 3D polygons on CPU to render correctly, whereas a game engine just tells the artists "don't do that".
Disabling Vimium plugin seems to have fixed it, but it was weird in that I had already told the plugin to ignore all keys for the domain. Only fully disabling the plugin worked. And it's weird that it caused me to fall through the floor...
First room has serious rendering issues on Firefox (Fedora Linux) with walls disappearing and some geometry becoming lines going to some point in infinity.
Otherwise atmosphere and quality looks great, especially for a tech demo.
Oooh, I think I know why. First room uses img tags for the walls. Image tags (and canvas tags) do not play well in 3D contexts. For example they ignore depth sorting and rely on z-index. So you cannot properly depth sort them. Now you might wonder why I picked img tags for lvl1, and then divs for lvl2. Profiling showed reduced mem usage for img tags and I thought I 'd take advantage of that optimization. (premature optimization and all that I guess!)
Hello HackerNews! Super excited to read all your comments (last time I was here with audiomass.co).
This is meant to be an experiment of rendering a full 3D scene in html/css. Of course there is a ton of (vanilla) JS to handle pretty much everything - but the main point is to explore what good ol' divs can do in a 3D context.
It might seem a bit off, because I am not a good artist/world builder, but it contains various features such as lights and shadows calculation (rendered on divs though background images + blend modes -- try clicking on the candle). Billboarding and sprite effects, geometry culling etc, as well as scalene triangle computation (which allows us to convert actual 3d models to html elements - https://pantelis.s3-us-west-2.amazonaws.com/0/css3d/readme/t...)
-----
If this interests you, I am giving a presentation on how it is built and lessons learnt this coming Wednesday (2nd of September) at CascadiaJS 2020 ( https://2020.cascadiajs.com/ ), among a line up of awesome speakers!
Great game sir!!
However i am not able to complete the first level itself
I ate the food but still not able to lift the sewer in dark as it shows i am weak
Love that the layout is responsive and has mobile, tablet and desktop versions in good web UI style. (FYI, if you close the sidebar and resize to desktop, it's missing.)
I just looked up the topics for cascadiajs and it looks awesome! I was disappointed to find out that all the tickets are sold out even though it's a virtual conference. I know you are just a speaker, but do you have any insight into why there's a hard cap on attendees? Is it simply to avoid potential infrastructure problems that could occur from delivering live video content to an unforseen number of attendees?
Interesting, tried it on my 1980x1080 monitor and I had to scroll down to read the text. It doesn't seem to adapt very well to non-square browser sizes.
Also when viewing videos (such as the candle) I get a picture-in-picture icon.
It's not a resolution/aspect ratio issue it's a viewport vertical size issue. Anything with less than 768 absolute CSS pixels (not display pixels) will not fit the content. This includes 1080p at 150% DPI/zoom.
Very cool and just a suggestion ... have the keys that move the character ..overlay the game window at the bottom right of it (make it transparent and or give the user to the option to turn it off). I quickly saw them before playing, but forget what each does.
One possible bug... playing in Firefox and I went F11 / full screen. Reached the end of the game I was locked out of all F keys in Firefox and thus couldn't restore my screen. Ended up having to kill the Firefox task. Possibly something in how you're capturing keystrokes? Not sure.
Overall great job! Agree with the comments about it being a little dark.. am on a laptop in daylight and it was hard to see with everyting maxed. Looking forward to more.
I was having trouble with keys mid-game, full-screened, and I couldn't exit either. But I was able to hit CTRL-W to close the tab, then I could F11 back to sanity.
you can click on the textbox, and it will immediately fill the whole sentence and move on to the next one! Might be frustrating to click so much, but I wanted to recreate old timey videogame pacing
I played loads of old dungeon crawlers; I still have Dungeon Hack, Lands of Lore et al installed and in my regular play list. Still feels like your demo interrupts too often.
Very awesome. In 1989 a game like that would have been an AAA title (well if given the resources to make it 40+ hours) And it brings back memories of so many games I played when I was 10-15. Wow nice job.
Great demo! This was super inspiring. I haven't touched game dev stuff in a couple of years (after a bit of a Unity rabbit hole before that). Just might have to get back into tinkering after playing through this...
Thanks a lot for sharing! Very interesting experiment.
That said, please please, no "WASD". This is very uncomfortable on non-QWERTY keyboard layouts.
There are two solutions to this.
# Best solution
Game programmer always mean "the group of physically-positioned keys that happen to be labelled WASD on the programmer's keyboard", not "whatever keys that are actually labelled WASD on the player's keyboard".
Woaah.. this never occurred to me. Thank you, for the suggestion. Didn't know about "KeyboardEvent.code". And of course.. arrowkeys, kinda ashamed I didn't think of that!
Funny. I had to look for WASD on my Dvorak keyboard, but that said, we are a minority. My bigger recommendation would just be to quickly mention which keys are relevant as I was left wondering if I was missing something.
Given that WASD is a standard in gaming I'm surprised by this approach. Do many games / game engines use key position? Isn't it easier to just add key remapping so outliers can configure freely?
Yes, just allowing the keys to be remapped is simpler and would serve all users with non-standard setups, not just the handful that use alternative keyboard layouts.
I'm surprised most Dvorakers don't already tend to have a utility installed to let them remap temporarily or for an application. This must be a common occurrence?
To be really pedantic, keycodes only help when the layout is being remapped in software by the operating system. There are dozens of us that use hardware Dvorak mapping. Dozens! :p
So to be clear, the ideal thing to do is to allow the player to define in-game which keys should do what. But realistically speaking, I’m not going to complain because I brought this on myself when I chose to use a hardware controlled Dvorak layout. Still worth it btw ^^
I do note however, that the project is open source on GitHub, so if any of my fellow hardware controlled alternate keyboard layout peoples want to take a stab at submitting a PR for a keyboard binding config menu for the game I say go for it :)
Ugh, no. FPS has standardized on WASD over the last 20 years and people trying to reinterpret this are the bane of a positive experience.
Positional keys? Sure. Whatever's in WASD's place is fine. But splitting hairs for the <1% of users using nonstandard stuff (like a dvorak keyboard, which after a lifetime of computer nerditry I still have never seen in-the-wild) will lose you a huge chunk of your audience.
"Alternatively, use keys that are stable across most common Latin keyboards layout, which means no AMQWYZ."
No no no no no this is a terrible idea. Don't make 99% of peoples experience non standard just so that people with non qwerty keyboards (who are probably expecting to need to remap controls anyway) have automagic defaults. Just default to the most common thing (WASD) and let people remap keybinds to whatever they want in case that doesn't fit.
I'm a pretty avid gamer and I've literally never opened a PC first person/third person shooter (or other real time genres with a similar perspective) released in the last 15 years or so that didn't have movement mapped to WASD by default. Not doing so would make your game feel very unpolished.
If you care about accessibility at all you need to allow button remapping anyway, even if you go with positional keybinding.
it should be possible - you can check how it is rendered on mobile portrait and landscape modes (which is basically fullscreen).
However, more intricate sizing might be hard to achieve since I 'm using pixel values so some things will probably look terrible in higher res. (this isn't the same as upscaling res let's say in canvas or webgl - it would be more like viewing an old website in a newer bigger monitor! But in theory it can be improved :) )
I can look around on mobile but I didn't figure out how to move. I tried tapping and double tapping everything but nothing happened. Only some "object is out of reach".
You can move by swiping your finger within the purple-like circle at the right part of the screen. That circle simulates a joystick for character movement. And you can look around by swiping anywhere else on the screen!
93 comments
[ 3.1 ms ] story [ 68.1 ms ] threadBy coincidence I read up on WebRender on Firefox today and decided to force it turned on - suddenly the game looks nice (only glitch when looking down below the candle one of the wall segments still vanishes).
But it runs a lot better with WebRender (which uses the Graphics card to composite) than without on my machine.
It's billboarding! (and the css lightsources are duplicated in the webgl world, so that the worm is properly shaded)
[1] https://threejs.org/docs/#examples/en/renderers/CSS3DRendere... [2] https://threejs.org/docs/#examples/en/renderers/CSS2DRendere... [3] https://threejs.org/docs/#examples/en/renderers/SVGRenderer
I would probably give up if the game had OSHA approved flood lightning in a medieval dungeon prison cell.
So... webgl is still the way! This is meant to be an experiment to show what css/html is capable of!
Wait until you learn what a camera is :)
In reality, this is how the concept of the transform stack works in most game engines, too.
This is meant to be an experiment of rendering a full 3D scene in html/css. Of course there is a ton of (vanilla) JS to handle pretty much everything - but the main point is to explore what good ol' divs can do in a 3D context.
It might seem a bit off, because I am not a good artist/world builder, but it contains various features such as lights and shadows calculation (rendered on divs though background images + blend modes -- try clicking on the candle). Billboarding and sprite effects, geometry culling etc, as well as scalene triangle computation (which allows us to convert actual 3d models to html elements - https://pantelis.s3-us-west-2.amazonaws.com/0/css3d/readme/t...)
-----
If this interests you, I am giving a presentation on how it is built and lessons learnt this coming Wednesday (2nd of September) at CascadiaJS 2020 ( https://2020.cascadiajs.com/ ), among a line up of awesome speakers!
- Audio on/off switch [y]
- Mouse axis inversion switch [x]
My brain hursts using the mouse to look around that way, I'm too old to learn new tricks!
Great game and proof of concept w/ CSS/HTML, you get 10/10 xD
I also experimented with 3d rendering with just CSS a few years ago. The result came out pretty nice (desktop only I'm afraid): https://www.michaelbromley.co.uk/experiments/css-space-shoot...
Love that the layout is responsive and has mobile, tablet and desktop versions in good web UI style. (FYI, if you close the sidebar and resize to desktop, it's missing.)
Also when viewing videos (such as the candle) I get a picture-in-picture icon.
Quiet enjoyed the game though.
Overall great job! Agree with the comments about it being a little dark.. am on a laptop in daylight and it was hard to see with everyting maxed. Looking forward to more.
I'd enjoy it a whole lot more if the descriptive text simply appeared and didn't halt the gameplay.
That said, please please, no "WASD". This is very uncomfortable on non-QWERTY keyboard layouts.
There are two solutions to this.
# Best solution
Game programmer always mean "the group of physically-positioned keys that happen to be labelled WASD on the programmer's keyboard", not "whatever keys that are actually labelled WASD on the player's keyboard".
So, wherever possible, use an API that refers to key position, not key symbol. This is possible in most programming environments, e.g. in Javascript using https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEve...
# Alternative solution
Alternatively, use keys that are stable across most common Latin keyboards layout, which means no AMQWYZ.
ESDF is fine, as are RDFG, TFGH, or the traditional IJKL (see https://en.wikipedia.org/wiki/Arrow_keys for more).
If you want to be kind to Dvorak, Bepo, Colemak and other users, prefer the first solution!
https://en.wikipedia.org/wiki/Keyboard_layout#QWERTY-based_L...
So to be clear, the ideal thing to do is to allow the player to define in-game which keys should do what. But realistically speaking, I’m not going to complain because I brought this on myself when I chose to use a hardware controlled Dvorak layout. Still worth it btw ^^
I do note however, that the project is open source on GitHub, so if any of my fellow hardware controlled alternate keyboard layout peoples want to take a stab at submitting a PR for a keyboard binding config menu for the game I say go for it :)
Ugh, no. FPS has standardized on WASD over the last 20 years and people trying to reinterpret this are the bane of a positive experience.
Positional keys? Sure. Whatever's in WASD's place is fine. But splitting hairs for the <1% of users using nonstandard stuff (like a dvorak keyboard, which after a lifetime of computer nerditry I still have never seen in-the-wild) will lose you a huge chunk of your audience.
WASD or die
No no no no no this is a terrible idea. Don't make 99% of peoples experience non standard just so that people with non qwerty keyboards (who are probably expecting to need to remap controls anyway) have automagic defaults. Just default to the most common thing (WASD) and let people remap keybinds to whatever they want in case that doesn't fit.
I'm a pretty avid gamer and I've literally never opened a PC first person/third person shooter (or other real time genres with a similar perspective) released in the last 15 years or so that didn't have movement mapped to WASD by default. Not doing so would make your game feel very unpolished.
If you care about accessibility at all you need to allow button remapping anyway, even if you go with positional keybinding.
I think it'd be way better user experience if this window wasn't that small
is the size performance related?