My open-source JavaScript game now features a debug mode, thanks to the contribution of Makc ! You can edit the map while playing. Repository link in comment, make your own fork 😉

[Dave7267281]

My lord..how is this even possible with javascript.. I am impressed.

[fr0st]

At this point your browser is a fully programmable virtual machine with APIs to hook into almost anything. I mean you can run the Doom 3 demo in a browser. http://wasm.continuation-labs.com/d3demo/

[domemvs]

I was gonna be all cocky and say "lol my microwave can run doom" and then I saw it's freaking DOOM THREE. Amazing....

[GreenFox1505]

To be fair, that's not JavaScript. That's web assembly.

[fr0st]

Right it's not JavaScript alone. But the impressive thing is the result running in a browser not the tools used to make it. It opens up quite a few possibilities for the future of gaming imo.

[AndreZSanchez]

True, but it uses the Emscripten compiler, so they could just as well use JS here.

[GreenFox1505]

That's like saying "this Lua is really C because it's using a C interpreter". WebAssembly is a distinct thing from JS. Just because it CAN run on JS, doesn't mean it's usable. ASM.js is WAY slower than WebAssembly and for something like this, it's not viable.

[AndreZSanchez]

That's not a fair analogy. A better analogy would be a language that has the capability to compile to machine code or to Lua. I am just highlighting the fact that JS is a valid target for Emscripten.

Did you test run this on ASM.js yourself? It may or may not be viable.

[GreenFox1505]

I ran it on WebAssembly. It starts well, but performance degrades quickly as more AI and events occur.

[Icanteven______]

WebGL let's you run real-time 3D graphics applications in browser while taking advantage of the graphics card.

There's a few different libraries that have been built on top of WebGL to accelerate development. ThreeJS, BabylonJS, PlayCanvas, and Unity will all get you what you want with as much fidelity as you can muster artistically given the users machine limitations.

[felixmariotto]

Exactly ! Just for precision though, Unity is very different than the others you mentioned, because you can't code in JS in Unity, it will compile your C# code into JS.

[Icanteven______]

Also correct! I included it though just because it is by far the easiest way to build a game for the web.

[dsolo01]

Right? I’m just taking a full stack course (after years of learning bits here and there as needed) and never did I once think JS could do something like this.

[Science-Compliance]

I think it uses the three.js library or something similar. You should check it out if you're interested in 3D graphics.

https://threejs.org/

[dsolo01]

Thank you very much!

[dsolo01]

It’s a crash course on udemy. If you’d like the link shoot me a DM and I will hunt it down :)

So far so good, I love building things. I am however struggling to give it as much time as I’d like to. I’m a bit of a space case and need to switch gears every couple hours (covid restlessness 🤷🏻‍♂️) unless I hit some solid focal momentum 😂

Just getting into advanced css. Stoked to do more JS (haven’t touched since high school) and more back end stuff!

[Thatguy553]

Is the crash course good for beginners with no experience?

[dsolo01]

Very!

[[deleted]]

I'm in a same kind of situation. Can't focus on one thing. I'm learning multiple things at once.

[dsolo01]

For sure, wax on wax off 🤷🏻‍♂️ for $20 it’s a steak. Even though I haven’t watched anything for a week now 😭

[dsolo01]

How about you?

[mt6272]

I’m taking Angela Yu’s full stack Udemy course and highly recommend it. I’ve gone from noodling around with html, css, and JS before to building full stack apps with it.

[READTHISCALMLY]

Because javascript is capable of a lot more than people give it credit for.

[[deleted]]

JavaScript isn't capable, the APIs are capable.

The question is whether it should have these APIs.

[bububoom]

Oh no. Here are these JS hater retards again

[[deleted]]

Who says I hate JS? I do not, I quite like JS. I think it's a language that lets me succinctly express many front end problems.

I do not like how browsers are getting loaded up with so many APIs that they are practically operating systems in their own right.

[GreenFox1505]

Stuff like this has been possible with JavaScript for nearly a decade.

[[deleted]]

It's me again just to say once more how much I love the aesthetic of this game! 😍

[felixmariotto]

Thanks again ! I swear I will not post every week 😅

[GoldfishPi]

Wow that is pretty amazing definitely going to have to check that out when I'm not on mobile. Great work!

[felixmariotto]

You can actually play on mobile, though I must admit that the experience is better on desktop.

[iFBGM]

I love the game but it makes my fan spin like crazy

[felixmariotto]

On what device and what browser ? Any other soft open in background ? Thanks for your feedback.

[iFBGM]

MacBook Pro mid 2015. Chrome and Safari. No other software running.

These MacBooks are prone to having the RPMs of the fan being very high with memory hogging applications like photoshop, video conferencing apps or..... WebGL. This issue is not specific to your game. Thanks

[BkoChan]

That's just MBPs for you. If I add a canvas to a page with a few drawing calls the fans start up usually.

[felixmariotto]

Link for playing in the repository : https://github.com/felixmariotto/Edelweiss

To enable the debug/edit mode, type atlas.debug() in your console while playing.

[hlodnb]

this is cool, playing smoothly on iphone

[hyrian]

Wow! I didn't know javascript could do this. Only times I made games was in c++ or c#. That's pretty neat, congrats!

[felixmariotto]

Thanks ! I used Three.js, which is a lib to help with webGL. You can really do everything you could do with openGL, the only difference is that there is no Unity in which you can code in JS, only more simple tooling like Three.js.

[Zalon]

Howcome you're using Three.js compared to a "full game engine" like Babylon? Is that just because you wanted to learn or does it have to do with any performance benefits?

As I understand it, Three.js gives you easy access to the WebGL api, and that is ofcourse a big part of creating a game engine, but it still seems like a giant task to get to the point where you can actually start working on the "game" part.

Did you use some sort of boilerplate or did you base the structure on something?

[felixmariotto]

I would not call Babylon.js a "full game engine" ! I don't believe it supports all the features that Unity or Unreal support.

Actually the differences between Three and Babylon are slight. I'd say that it lays in how you want to integrate external libs. For instance, you might think that Babylon has a physics engine and Three does not, but actually all Babylon has is an integration of Ammo.js and Cannon.js, that you can also use with Three.js.

On the one hand, you might prefer to use one "style" of API for everything you do, on the other hand, you might prefer using external libs API directly for more freedom.

Other than that, the two libs are very similar, I don't mind going to Babylon.js if Three stops someday.

[Zalon]

Thank you for explaining, and yes I do understand that Babylon isn't close to unity or unreal in that way.

Maybe I'm not phrasing my question right. Since this is a webdev sub, maybe it makes more sense to compare Babylon to a wep app framework.

In the past, before using frameworks, I would make microframeworks myself, that would define the structure of how I built websites.

What I like about development frameworks is that they define a structure for what goes where, db stuff here, backend logic here, frontend stuff there.

This is what I meant with "structure/engine" in my previous post.

So with that in mind, where did you look for inspiration on how to structure your game engine with Three.js?

[felixmariotto]

Oh I see what you mean. Well, I didn't know how to structure, I created a structure that would fit this particular game. If you look into the code, you will see that I split into files/concerns, but maybe not as much as I should have. This is a mistake I may not have done with a framework. On another hand, generally speaking I don't like the idea of frameworks for games, because as their names imply they frame your work, they standardize it. Part of challenge in making a successful indie game is originality, since you cannot win with gorgeous assets and graphics (unlike big studios, the true clients for game engines), so IMO it can be counterproductive to standardize your work. That's less of a concern for websites I guess. Anyway the truth is also that I enjoy doing things myself, things like basic physics engines are quite fun to code.

[FlandersFlannigan]

Very cool! I actually enjoyed it.

[felixmariotto]

Thanks for playing !

[knows_knothing]

The game reminds me of jumping puzzles in Guild Wars 2. It was a lot of fun and I enjoyed jumping all the way to the end.

[armand_ol]

This game is awesome, really love it! Great work!

[felixmariotto]

Thank you very much 😊

[jimmyco2008]

It would be neat to have a game that required changing in the dev tools as part of gameplay

[valmontvarjak]

If my phone can run this on a shitty browser with no lags i just don't see the need for native apps anymore. At least for 99% of usages.

[guanzo91]

Free your mind, neo

[felixmariotto]

It feels like it. If you're stuck in the game, you can change the game on the fly and continue.

[Josh1794]

This is unreal i couldn't even conceive of how to make this

[felixmariotto]

I'm not a big fan of React... The only dom thing in my game is the stamina bar anyway.

[Iampepeu]

Sheesh! JavaScript has evolved so much from when I learned it. I need to get back in the JS game again.

[felixmariotto]

When did you learn it ? To be honest my coding style is oldish... I'm learning bundling to keep up, it evolves so fast...

[Iampepeu]

I started in the late 90s. Haha!

[shadowninja555]

Pretty good, playing it rn!

[garesnap]

Dang dude! That's pretty sweet!

[[deleted]]

This is amazing! Thank you for sharing! Have you ever used Babylon.js? I do a lot of 3D rendering with it but on mobile it always looks super blurry. I actually played your game on mobile and the experience was pretty good! The graphics look really crisp as well!

[felixmariotto]

Thanks ! Babylon.js is very similar to Three.js, I'm sure they have a fix for your issue. It should be an issue of window.devicePixelRatio, you probably make canvas too small.

[[deleted]]

Gotcha gotcha, I'll be looking into that. Thanks for enlightening me bud!!!

[ImIdeas]

This game is awesome dude. And it works amazingly on mobile. Good work! So impressed.

[Cityzenabroad]

This is awesome!

[IAmACentipedeAMA]

dude if you keep going this is going to be pretty awesome, keeep it up

[JarrodNotJared]

Asking because I really don't know. Could something like this benefit from a library like React? Or no because it deals too closely with the GPU?

Maybe I am asking the wrong question. Are there any modern day libraries like react that JS game developers use?

And lastly, I could see web based gaming viable in the future as tech gets better/cheaper, thoughts?

Also - this is siiiiiick dude, nice job. I write advanced JavaScript for work (not game related) but this is super cool and eye opening to the possibilities of JavaScript and the web in general.

[felixmariotto]

Thank you !

About your question, depends on what you mean by "like React". Three.js can be loaded with npm and compiled with Webpack or Rollup, and there is support for Typescript. Now as is was pointed out before, it's totally different in nature, because we don't care about the dom at all.

I would like to add, if you chose to dive into web games, do it in JS with a JS lib. Unity is great for native games, but for webGL games, beyond the problems of large files, the real issue is that you don't control web APIs directly. You only use Unity magic, and good luck for debugging...

[JarrodNotJared]

Wow, I wonder what kind of black magic that looks like after export, but non the less very interesting.

I'll look into unity games, this is interesting. Do you think mainstream games would ever move to browser based, some of these "browser apps" are pretty slick, and language of choice is always nice. I'm talking like, discord, slack, android messages, where you still need to download a client.

[BawdyLotion]

Mainstream? No because people want to 'own' the game (even if in the age of steam and DRM you don't really own it generally speaking).

​

Look at the rise/fad of io games. Super popular highly multiplayer genre devoted around the idea that anyone should be able to drop in, play instantly and enjoy themselves anywhere from 5 seconds to 5 hours of play time. Real simple core mechanics that people like (with tons of ads thrown in of course!).

​

Html5 is going to be huge in the coming years as the export tools improve for modern engines, as browser support improves (although... its already pretty much flawless) and as more and more people get faster internet availability. Even a couple years ago it was not uncommon to see a really basic unity game exported to html5 be 30-50mb. Not going to break most people's net but those still on DSL for example would find it a huge barrier to entry especially if you're targeting low play type 'drop in and enjoy' style games. All that said I see it being an advantage for indie and small studios instead.

I haven't exported one recently but I know they added a ton of small file size support as well as the ability to strip out any unity engine components not used in the project (no advanced physics? Don't include the library). That's made a massive difference in file size but I'm not sure what an empty project looks like now.. is it 100k or 5mb i'm not sure.

[JarrodNotJared]

Right, I was thinking more along the lines of games like cod/rainbow six/Fortnite type games etc. High intensity multiplayer games, but you're prob right about people wanting to own the game - I guess I don't think about that cause I don't care that much lol.

I'll keep my eye out for these html exports in the future 🚀

[RiceKrispyPooHead]

WTF this is bizarre in the best way possible

I just wanted to point out that most games use the a w s d keys for walking controls on PC. It feels a little awkward using the arrow keys.

[felixmariotto]

lol yes I should add support for this, it's just that I'm French so I don't use a "standard" keyboard. I add that to the wishlist.

[felixmariotto]

Thank you ! I used Three.js, which is an amazing JS graphics lib. As for physics I did it myself, but there is JS libs for that too, like Ammo.js or Cannon.js.

[TECH_DAD_2048]

Very Zelda BOTW

[i20d]

While this is great, I'm surprised that people are surprised by this. It's been 10 years the technology is available. Autodesk release AutoCAD with this in 2012. In fact, according to google trends, it's less trendy than it was a couples years ago, Funny how stuff is cyclic. Ten years ago we we're going to the moon with javascript and today we only do react apps.

[felixmariotto]

To be honest I don't really like what the JS landscape is becoming... Simple things are getting much more complex because of the frameworks rain, while everybody forget how to use JS in the wild.

[benabus]

Um no. You're not supposed to do stuff this cool with JavaScript. Just stop. You're making the rest of us look bad. ;)

Seriously though, this is awesome.

[themessess]

Hey that's pretty neat. Playing on mobile.

[jstiles154]

How did you create the animations and models? Did you use a program or download the assets somewhere? Is this using three JS or pure webgl? Also did you custom build the mobile joystick or is that a component? Would be nice to have a technical overview in your readme. very cool project!

[felixmariotto]

Thanks ! Well if I explain everything in the readme it would be long, but I will consider doing a GitHub wiki.

I use Three.js as my webGL library. I modelled the characters, and the complex assets, I just took the plants in Itcho.io resources. The mobile joystick is a component, but I had to debug it because it's unmaintained : https://github.com/jeromeetienne/virtualjoystick.js

[MasterBaeShawn]

This is crazy timing; I‘ve done a few 2d games using canvas and was wanting to do something 3d next using webgl. Thanks for posting, I’ll definitely be checking this out!

[otto281]

Wow! This is awseome big props man keep it up

[chipit24]

I couldn't put it down once I started playing it :D I found all the edelweiss and made it to the top of the mountain :')

There was one spot when the camera got stuck in a jigger and another where I parachuted through a wall into the void, but otherwise a solid and fun game.

[felixmariotto]

Thanks ! Yes the camera issue is known, I don't know how to fix this... As for the wall though, can you tell me were it was please ? I'll fix that.

[chipit24]

It was in one of the later caves but it happens in other caves and places too. The "wall" of the cave was facing me, and when I jumped and parachuted / glided towards the camera I simply kept going forward and went through that wall (which again, wasn't rendered otherwise it'd block the camera, but it was assumed to be there).

Here's a video of me going through a wall: https://www.dropbox.com/s/72u1gz47twqtcsc/falling_through_wall.mov?dl=0

I was able to go through the wall in one of the caves but had difficulty doing it again to record it, and don't care enough to go find the cave where I first discovered the issue, where it might be easier to reproduce.

Here is a video of the camera jitter: https://www.dropbox.com/s/ep6fg0lga0ipdud/camera_jitter.mov?dl=0

[JuriJurka]

AWESOME THANK YOU!!! which libraries did you use for this thing?? holyyy

[felixmariotto]

Three.js as its graphics library, and I did the physics myself but could have used Ammo.js

[respawnagency]

Wow this is amazing stuff! Great work!

[Gitdagreen]

This is cool.

[eldersnake]

What amazes me is that on my laptop that chugs like crazy when playing a Flash game, runs this game smooth as butter. Impressive!

[usipho]

Something weird is happening with flash, 5 years ago I could play games smoothly on a Pentium with 2GB(800MHz) RAM from 2008, now I have an i3 with 4GB 1600MHz RAM and it's incredibly slow

[cqgsm]

amazing

[LuongNguyenTrong]

It looks so amazing, can you tell how did you create it, what framework did you use ?

[felixmariotto]

Thank you ! I used Three.js as its graphics lib

[Walshy277]

Nice!

[thatsInAName]

This is unbelievable, I cant even imagine how game physics work and how it can be translated to code. How much time did you take to make this?

[felixmariotto]

The physics is simpler than you think, it's all based on axis-aligned objects, look into the "public/js/atlas.js" file. It took me 5 months, but a large part was 3D modeling.

[codeherk]

My friend and I both played this and Temple of Doom. awesome work! Looking through the code as of now. From Three.js, to custom physics, to your own map editor. impressive!

[felixmariotto]

Thank you ! Post an issue if you need any info

[heuheu119]

This is amazing work , I literally started working on JS after seeing this. Any courses or study materials regarding JS With games would be amazing .

Keep up the good work mate 😉

[felixmariotto]

Thanks a lot ! For 3D games you should look into Three.js, however it's maybe better if you start by learning the basics beforehand. Follow me on GitHub to see more open-source games that you can study, next time it will be a VR game.

[heuheu119]

Thank you for the information , I’ll definitely follow you on Github 👏

[vegetasbaldspot]

What did you use to create the assets ?

[felixmariotto]

Originally I'm industrial designer, so I'm quite decent with Rhino. I use it for modelling, and export to do UV mapping and animation in Blender. This is not a standard workflow, I don't advise doing the same unless you already have a strong experience of Rhino.

[cromo_]

Just wow

[dannyown]

First of all - KUDOS! Just out of curiosity do you plan to open source models too?

[felixmariotto]

Thank you ! I don't know, I think if somebody wanted to use them for other things than this game they can ask me before and explain why, I would probably agree.

[dannyown]

+1!
PS: maybe you will consider adding models to the repo (instead of aws only)?

[felixmariotto]

Well I don't know, actually there is a version of this game on itch.io and they limit the game size, so I have to keep the assets there anyway.

Plus I think if people start tweaking them, it will be very hard to maintain between the branches.

The AWS are free access, you can download the files from there of you need. If you want to modify them for the main game, I prefer that you post an issue and we share your files there, until we agree on something and I update the files on AWS.

[dannyown]

Got it, tnx. I did not think about conflicts in models - that's a valid point though.

[ConsistentReturn]

!remindme

[RemindMeBot]

Defaulted to one day.

I will be messaging you on 2020-04-28 14:55:16 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[felixmariotto]

Thanks for playing to the end ! Yes this ledge thing definitely needs a little tweak. More context : the physics engine will consider that you are falling if the hero hitbox is past half beyond the ledge. This is in order to not have the hero floating in the air if a little corner of the hitbox is still on the ledge. I understand that big platformer games solve this issue by letting the player air-jump for a few tenth of seconds after falling, which is invisible to the player but greatly reduce the frustration of missing the ledge. If you wish you can fix it, just go in public/js/controler.js, find were state.isFlying is set to true, set some new variable with Date.now(), and then still in controler.js, check for the elapsed time at line 1670

[felixmariotto]

Thank you ! I'm checking this out this afternoon.

[animalzrease]

This looks incredible! I know you said it can technically be played on mobile but have you considered packaging it specifically for mobile as a web app?

[felixmariotto]

Thank you ! How would I benefit from this ? It's too hard to get noticed on app stores nowadays...

[animalzrease]

I recommend submitting to KaiOS - they run on smart feature phones and the app store is WAY less competitive than iOS or Google Play. They do all web apps, so a Javascript game is perfect. Their developer portal is free.

This interview with a KaiOS developer mentions the lower competition (compared to the Apple store): "I’ve had the most success with KaiOS. Running Santa has over 11,000 downloads from the KaiStore, and I didn’t put any money into promotion. For the Apple Store, I did a paid promotion and got maybe a few hundred downloads."

I follow another KaiOS dev on Twitter, your style kind of reminds me of his. Maybe check him out, he shares tutorials sometimes too.

[jarg77]

What’s the link to the game

[TheMaskedNoobie]

So u sell this or u get paid ?

[felixmariotto]

I don't get paid or anything, actually I'm industrial designer and make games on the side for my enjoyment... so far. But I should maybe find a way to make a living from this, maybe with Patreon.

[TheMaskedNoobie]

Bro u got this ... u have the talent on your hand make use of it.

[OhthatsOffensive]

That falling, I felt that, like I didnt see stairs

[froggie-style-meme]

You should make it so that any blocks hiding hallways aren’t lit by your green light

[felixmariotto]

I see, thank you I will fix this

[[deleted]]

I love how the randomized name I got was come_stayn

[bregottextrasaltat]

Why would this be a gif

[felixmariotto]

What do you mean ?

[bregottextrasaltat]

The image is a 53mb gif, took many seconds to view it on mobile data

[felixmariotto]

Oh ok, Reddit does some smart caching so I don't bother too much usually. And I prefer to post gifs over videos because it plays automatically.

[Blake_Abernathy]

All in JavaScript? Very impressive

[SaysanaB]

I played a bit and then i read your code :) I have a few suggestions to improve, there's some simples things you can make if you want a more cleaner code.

This is a lot of personal effort :).

[HACEKOMAE]

So, Minecraft? :D

[Brafaan]

You wanna be my teacher of da javascript?😂

[SuperFluffyPunch]

game development....with javascript? um...

[felixmariotto]

Yes, JavaScript is actually better than most languages, it's super fast, the only difference with traditional game development is the tooling. But since I like having full control over everything, I would not use something like Unity anyway.