13 ms·
Tools we used to create a hit HTML5 game on Steam
- mscasts 7y agoThanks for sharing! I will read up on this as I am about to venture out in the gamedev world myself.
- riadd 7y agoCool! I hope you find it worthwhile!
- adambowles 7y agoYour Electron and NW links are backwards (each points to the other)
- tonyjstark 7y agoAwesome writeup, thanks for that! What did you use for sounds and music?
- roland35 7y agoQuick summary, for those like me who get game sites blocked at work :) - Sublime text, then VS Code - Photoshop - Paint.net (pixel editing) - TexturePacker (create sprite sheets) - Trello, Then Codecks (project task management) - Chrome (for devtools) - Bitbucket (git host) and SourceTree (git client GUI) - Electron/NW.js (native PC executable for HTML game) - Greenworks (Steam SDK) - Back4App/Parse (Payment, user auth) - Humblestore widget (payment processing) - Layershift (hosting node - Crowdin (translation) - CoffeeScript (programming language) - Python/Ruby (scripting languages)
- lucasverra 7y agoi can vouch for back4app, satisfied client. Parse server OSS (and b4a service) does help us in our development.
- jszymborski 7y agoIt's not clear to me if they used Electron's Node backend for much more than it's File API. If that's the case, they might have been better off just using a QT webview (e.g. pywebview) for the sake of performance (which they cite as reason for moving from NW.js/Electron).
- fuzzy2 7y ago> pywebview Uses Edge or IE on Windows by default. Nope nope nope. :D
- jszymborski 7y agoyou can set it to use CEF, however
- Phillips126 7y agoI'm not very familiar with Qt or Qt webview but from their documentation it states: > This version of Qt WebEngine is based on Chromium version 73.0.3683, with additional security fixes from newer versions. Assuming they both have a full Chromium embed, would there have been better performance? I assume the developers are mostly JavaScript devs so their choice to use Electron/Node makes sense.
- haolez 7y agoInteresting that CoffeeScript was used. I’m not a front end developer, but I’ve always liked its syntax. JavaScript has picked up many (if not more) features of it as of today, but I still find CoffeeScript code more readable.
- faitswulff 7y agoThe post mentions that they started development in 2012, which IIRC was close to the height of Coffeescript's popularity.
- riadd 7y agoYes, CoffeeScript was quite hot back then - no pun intended. Even though its not as used anymore I think it pushed the development of JS itself forward.
- nine_k 7y agoThe biggest problem with CoffeeScript for me is that it's very much not typo-safe. Most typos lead to syntactically correct programs that blow up in unrelated parts of code.
- redka 7y agoI still use CoffeeScript for every game I make [1]. I know it's very passée but every time I rewrite something from javascript it turns out to be much shorter and more readable. It's true that there is now many improvements available compared to ES5 times but for me CoffeeScript still has a lot to offer. I admit, it's mostly ergonomics, but the cost of compilation is so minuscule that I find it worthwhile. [1] https://redka.games https://redka.games
- elwell 7y agoI personally wish CoffeeScript had taken over JavaScript. Anyways, I'm in ClojureScript world now.
- jkrems 7y agoFrom somebody who used CoffeeScript extensively: I don't think it's a great choice for bigger production projects. The less "noisy" syntax has some very unfortunate consequences. For one, it has zero error correction. Almost any random sequence of characters is a valid program so any minor mistake looks at first like it's working and may even pass some tests but looking at the compiled code makes it suddenly obvious that the code is doing something utterly unexpected. Examples include: * Minor spacing mistakes subtly moving code between blocks. * A variable in a nested scope accidentally reusing a name from another scope and merging the variables. * Implicit return generating huge collections that are never used because a function happened to end in a loop. * Random breakages because the value of the last statement in a function sometimes affects the callee even though the author didn't mean to return a meaningful value. * People not setting strict mode because "it's not needed with CoffeeScript" but then introduce bugs where they try to write to readonly properties which silently "succeeds" (does nothing) in sloppy mode. CoffeeScript looks nice and readable but in practice it's almost impossible to decipher what the code actually does.
- ermir 7y agoHTML/JS is criminally underrated as a game development platform. You get so much from it, like instant deployment, delivery, multiplayer features, and so much more. You can just send a link to your friends and they can join your game with a single click. The reason why business apps went all to the web still holds for games as well. Games like agar.io use these features, such as no downloads and instant start, and their success speaks for itself.
- probably_wrong 7y agoI would bet that the reason HTML/JS is "underrated" is because it presents a unique problem: that no two browsers behave the same way when it comes to HTML rendering. As a quick test I just opened two browsers in my PC (Windows), ran the Acid3 test, and got different results at different speeds. My phone's browser gave me yet a third result. That's a bad start for a multimedia platform that I'll be in charge of supporting. For all its weaknesses, there was a platform that offered all you mentioned plus good portability and saw the success you speak of: Flash.
- ermir 7y agoWell, the rendering problem can be solved by using an existing game engine. Rendering is done in WebGL, and the engine abstracts away the browser-specific details. Furthermore, because of Google's dominance, not many browser engines are left in the market. Essentially all you have to do is support WebKit, Gecko, Blink, and you'll cover 99.9% of your userbase.
- kyle-rb 7y agoWhen people refer to HTML5 for games (including this post) they usually mean the HTML5 canvas and its associated APIs (canvas/webGL), not using actual HTML elements to render game graphics. From what I know, canvas rendering is pretty much the same across different browsers. It's a pretty low level API so there's not as much room for interpretation. In any case, the Acid3 test you're running is focused on the specifics of HTML/CSS layout, and don't think it tests the canvas at all. I think that canvas has done a good job of taking over the use cases that Flash had, and is very portable these days (basic canvas has 98-99% support[0]). [0] https://caniuse.com/#feat=canvas https://caniuse.com/#feat=canvas
- Hamcha 7y agoWas hoping for a more lib/framework focused article. HTML5 has never been the easiest platform to develop games for. A game I love that's made in Impact/NW.js is CrossCode, which even leverages its Web-based nature by having the demo fully playable from the website!
- shujito 7y ago> I was glad to get away from all the crazy IDE world that I had to deal with in my C++ AAA days and just working with a minimalistic but extremely fast and powerful text editor. Makes me wonder what do they use for AAA games, could it be Visual Studio?
- Jasper_ 7y agoYeah, AAA game development is 99% Visual Studio. Usually multiple versions of it depending on the platform. We just upgraded from 2015 to 2017 at our studio, which required a decently large refactor of some core utilities.
- vhakulinen 7y ago> We just upgraded from 2015 to 2017 at our studio, which required a decently large refactor of some core utilities. Were these utilities custom tools built for the IDE or the actual application code you were/are developing?
- BubRoss 7y agoI would be very surprised if visual studio wasn't the most popular C++ IDE for high budget games by a wide margin.
- riadd 7y agoYes, Visual Studio!
- IggleSniggle 7y ago> Coming from the perspective of pretty much hating Visual Studio I was pretty sceptical about Visual Studio Code until I read that Erich Gamma was involved in it. Following on the comment you quote, I assume so!
- Cieplak 7y agoThe payment process for our own user authentication system was handled by a simple HumbleStore widget. They support various payment providers and only charge 5% of the revenue. Five percent seems like quite a lot, given that most payment processors charge less than three percent. What sort of value do they add outside of payment processing?
- panopticon 7y agohttps://www.humblebundle.com/developer/widget#features https://www.humblebundle.com/developer/widget#features Depending on how much time you have, some of those features can save you a bit. Not sure how that compares to other widgets like itch.io though.
- schnevets 7y agoDigital Content Fulfillment is an underrated feature that ties directly to platform loyalty. Assuming this means the title is added to the Games Library list on humblebundle.com, customers love watching their collection grow and are more inclined to buy something if it will show on their preferred site (whether that's Steam, GOG, Humble, Epic Games, etc.).
- hombre_fatal 7y agoI hate to admit how true that is. Even scrolling through my GOG collection of games I'm somehow too lazy to play instills in me a sense of pride that at least they weren't purchased on Steam. Though there are also major practical advantages of purchasing things within stores like GOG and Steam instead of a bunch of disparate websites: when you move to a new computer, you don't have to chase down a bunch of websites and license keys and emails to reinstall all of your software. Which is something I hate so much I only got outside of platform shops as a last resort.
- lucb1e 7y agoFactorio devs mentioned they do a lot on anti fraud (something with charge backs from stolen credit cards iirc). I don't remember the details but they used humblebundle's payment system because of that feature.
- dom96 7y agoWhat I'm curious about, as somebody who's writing their own game right now which targets HTML5 (among other things), is how you were able to achieve such great performance. I've given your game demo a quick look and it plays incredibly smoothly, do you have any tips on what to avoid for best rendering performance?
- riadd 7y agoThanks! We made extensive use of Canvas caching and only redrawing if things changed. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/...
- lazerwalker 7y agoI'm guessing that means you rolled your own canvas API code, rather than using a library like PixiJS. Is that something you'd consider open-sourcing, or is it so tightly integrated with game-specific logic that it wouldn't make sense?
- riadd 7y agoYes, no helper libraries and I coded quite close to the metal.It's probably even a stretch to call it an engine. It's just built around the specific game mechanics. It wouldn't make sense to open source that part unfortunately.
- komali2 7y agoWhenever I try to use Canvas caching I run into an issue I don't yet fully understand that causes my images to come out of cache blocky and terrible looking. Something about a max canvas size? I don't quite get it. Happens whenever I use fabric.js caching.
- deleted 7y ago[deleted]
- 7y ago
- tobr 7y ago> [VS Code] proved itself when I wanted to implement my own add-on for Sublime Text. I gave up after three days of chasing the arcane documentation and just tried VS Code where I was able to do custom syntax highlighting and deep game script integration in a breeze. I feel this. The documentation for Sublime seems to be in a permanent state of chaos. Most of the details of how to write plugins were never documented in the first place, and for what you can find you will never be quite sure if it applies to ST2 or ST3. Even the official website has a bunch of outdated documentation for version 2 that still isn’t labeled with version number. I imagine this will only get more confusing with the upcoming version 4.
- hanniabu 7y agoI wasn't aware a version 4 was in the works. Any word on eta?
- tobr 7y agoI know almost nothing about it, but there’s some kind of early alpha or beta testing going on. I don’t believe there’s much of an official “word” at all, let alone on ETA.
- suby 7y agoDoes anyone know if people who bought ST3 get the update for free?
- jay_kyburz 7y agoI doubt it, its been years.
- peruvian 7y agoUsually "pay once" software doesn't get free upgrades - just a discount.
- woodrowbarlow 7y agoactually, this question has always had a clear answer on their website: > Future major versions, such as Sublime Text 4, will be a paid upgrade. https://www.sublimetext.com/sales_faq https://www.sublimetext.com/sales_faq
- jammygit 7y agoI was deciding what engine to make a hobby game with last week and was looking at ThreeJS. I couldn’t find any projects with good higher end visuals that had acceptable performance however. I settled on Godot, but I’d love to be proven wrong about webGL
- modernerd 7y agoHave the options improved for targeting iOS and Android with HTML5 games? “Use Cordova/PhoneGap” were the recommendations last time I looked. It seems the OP uses NW.js/Electron to target desktop, but I can’t see that they target mobile yet. Curious to know how they’d do this if needed.
- lazerwalker 7y agoThese days it's mostly still just "use Cordova/PhoneGap", yeah. For Flappy Royale (http://flappyroyale.io http://flappyroyale.io, https://github.com/flappy-royale/flappy-royale https://github.com/flappy-royale/flappy-royale) we built our own native web view wrappers for both iOS and Android, but that's mostly because we already had extensive native iOS/Android dev experience ourselves and wanted more control. In my experience Cordova/PhoneGap come with a lot of cruft and bloat if all you care about is a canvas and a handful of other hyper-specific native API hooks. At least in the sense of engineering and tooling complexity; I can't speak to runtime performance considerations, except that it should be irrelevant on iOS since everything's using the same WKWebView under the hood.
- z3t4 7y agoFor Android you can make a PWA
- james-skemp 7y agoIonic is also working on/released https://capacitor.ionicframework.com/ https://capacitor.ionicframework.com/ It is meant to be a new version of Cordova, with support for Cordova plugins. At this time the general consensus is that Cordova is still generally the best, unless you specifically need functionality in Capacitor.
- tracker1 7y agoDepending on your needs, rolling your own webview based app is easy enough... just depends on how much feature integration you need to the platform.
- tomaszs 7y agoPaint.net - surprise surprise. i use it for years, it is awesome. Plus IrfanView. This is a powerful combo
- chimi 7y ago> Once you start distributing your HTML5 game on PC distribution platforms like Steam or GOG, you need an actual executable that people can download to play the game offline as well. Can someone elaborate on this? Why is this needed? Is it a market penetration decision? Does steam not allow HTML5 games? Due to virus issues, etc, I would prefer playing an HTML5 game in the browser. I don't want to install something that could contain viruses or be a vector or increase my attack surface. I'm missing something, but not sure what it is. I don't use Steam or install games on my computers, but I do play HTML5 games.
- mrmonkeyman 7y agoDRM
- riadd 7y agoWhen customers of a PC distribution platform spend money on your game they want to be able to own it by downloading it and having it live on their computer and work offline as well. For this you need to deliver them something that is completely packaged and contains everything to run the game.. so even if that means basically shipping a full browser with your HTML5 game. We also have a web version which can be played online via the regular browser.
- edflsafoiewq 7y agoWell, you don't have to ship a whole browser. You can use the player's. Just do the moral equivalent of cd www python -m http.server & xdg-open http://0.0.0.0:8000 That's how I play RPG Maker MV games.
- _bxg1 7y agoThen you'll get a flood of support tickets from people whose default browser doesn't run the game quite right. People downloading a game on Steam couldn't care less if it weighs an extra 100MB because it includes a copy of Chromium.
- js4ever 7y agoIt's not the wand, it's the Wizard
- AnthonBerg 7y agoHeartily agree. (But also: Wizards teach wands. Wands teach wizards.)
- bstar77 7y agoCurious Expedition is a fantastic Roguelike. I've been playing it forever. I'm not pleased that they are ditching the gorgeous pixel art for coreldraw-style clipart in the sequel. Regarding their development stack... this game proves that your stack is absolutely inconsequential in determining if a game/app will be good or not. If the team executes well and the game is obviously not flawed, I could care less if the devs used something not considered "pro".
- riadd 7y agoThanks for the playing Curious Expedition! Sorry you're not feeling the new art style. It is based on Ligne Claire as popularized by Tintin. I hope once you see the whole game, we'll be able to win you over!
- retromario 7y agoIt looks great and you pull it off nicely! It immediately reminded me of Tintin.
- riadd 7y agoThanks! The character/location illustrations are drawn by Garen Ewing. He is amazing.
- AnthonBerg 7y agoI LOVE the Curious Expedition, and my jaw dropped - literally - when I learned it was an HTML5 game. From the perspective of someone who absolutely adores the mood and style and gameplay, I see the Ligne Claire work you're doing and it's absolutely beautiful. The art in CE2 is beautiful. If I may offer an entitled little little nugget of feedback: As I experience it, the "breathing" style of animation feels a little jarring. Maybe when coupled with Ligne Claire especially. I'm referring to the "flexing" cutout animation (time-interpolated affine transformation / skeleton deformation of a set of shapes per entity). I'd like to request an in-game option to disable it :) Or actually, ideally to slow entity motion down to subliminal speed while maintaining motion speed of lights. Ligne Claire adventures are a big part of my nostalgia and my unconscious expectation would be of a more frozen, nostalgic, disconnected, dreamlike life on screen. Mostly I feel shame to be saying this though and feel like there's no way to say this and also deliver the amazing amount of respect and love for your work.
- Razengan 7y agoI just gotta say I quite prefer the pixelated logo of Curious Expedition 1 to Curious Expedition 2's :) (and the font for "Curious" also reminds me of the Monkey Island logo, was that intentional?) Looking forward to the Switch release!
- riadd 7y agoThank you! I think the main inspiration for the logo gradient was actually the Indiana Jones logo :)
- ericmcer 7y agoDid you do anything around securing the code? I always worried that it would be fairly trivial to reverse engineer any game I tried to charge for and distribute via the web.
- ghostbrainalpha 7y agoI thought it was fairly easy to reverse engineer games on almost any platform?
- ericmcer 7y agoJust by nature of the language (interpreted vs compiled) it’s going to be easier to dive into JS run in a browser
- riadd 7y agoI only used Google's Closure Tools for optimizing and obfuscating the code. Should probably add that to the post. Thanks
- thedaemon 7y agoPhotoshop is not the gold standard for pixel manipulation, but for general manipulation. Aseprite and Cosmigo's Promotion are much better for pushing pixels. I'd say Promotion is the gold standard.
- riadd 7y agoThanks for the tips! Will check out them out.
- gotTheLucas 7y agoWhat a freekin' mess!
- tracker1 7y agoAbout the only big thing I'd probably change would be YAML or TOML for the configurations over hjson. Seems like some pragmatic tool selection... I am curious how their turn around time was compared to something like MonoGame, Unity or other rapid development options. Overall, very cool to see this list and the openness.
- riadd 7y agoI tried YAML for another game prototype in the meantime. I like it as well but I feel the whitespace syntax can be very error prone if not all your team members come from a technical background and know about whitespace settings in the editor.
- rayalez 7y agoI got into gamedev and discovered really good .io games only recently, and now I really want to try to make something like that myself. I was very surprised to learn what's possible with html5 games now, a few days ago I've learned about https://krunker.io/ https://krunker.io/ - absolutely incredible that it's possible to create something like this, especially for a solo developer. ---- What I'm really curious about is the stack that would be optimal for such games. Here's what I learned so far: - For 2D people seem to use pixi.js(very fast webgl rendering framework), or phaser(2D game framework). - For 3D the leading frameworks are three.js(some say it's more focused on creating pretty demos, and is suboptimal for games), babylon.js(html5 3D game engine from microsoft), playcanvas(proprietary web-first game engine). Krunker was made in three.js. - For networking people seem to use socket.io, I'm not sure what else. - Engines like Godot and Unity can build games for bowser. People call Unity builds "bloated" and keep mentioning something called TinyUnity as a solution to this. Godot is supposed to implement WebRTC soon, which apparently should be great for multiplayer (https://godotengine.org/article/godot-webrtc-report3 https://godotengine.org/article/godot-webrtc-report3). Can anybody add something to this? I'm just starting to figure things out, and any tips/advice on picking the optimal stack, or links to good learning resources would be very useful!
- ttty 7y agoCheck out https://bitplanets.com https://bitplanets.com works even on mobile at 60fps. It's a strategy game using pixi js
- quackwagon 7y agoI’ve been using canvas and websockets to make Multislay. I’ve got lots of optimization to do, but it has been fun and going well: https://multislay.com/ https://multislay.com/
- AnthonBerg 7y agoMy jaw dropped when I learned Curious Expedition was an HTML5 game. Amazing work. Given that Curious Expedition is an amazing success and proof the power of HTML5, modern Web development toolchains, and modern browsers, I'm super curious if Codecks have a comparative opinion of Jetbrains' IntelliJ platform / Webstorm JS IDE versus VS Code.
- riadd 7y agoThank you! Good idea about the tech choices of Codecks. Maybe that would make for another good blog post.
- AnthonBerg 7y agoI was actually confusing Maschinen-Mensch and Codecks and thought Codecks were the creators of Curious Expedition, but it would all be quite interesting!
- e_proxus 7y agoCodecks looks gorgeous. Have anyone tried it for anything else than game development? Is it a good fit for other projects?
- danielatc 7y agoThanks! Daniel here, the developer of Codecks. While the majority of our customers are game studios, there's no reason why it doesn't work for other teams. As long as you and your team are happy with a more playful appearance for a project management tool, I'd suggest to give it try :)
- e_proxus 7y agoMaybe something to add to the website or FAQ? I searched the page for a long time for anything that would indicate it was a general tool, and since I didn't find anything I assumed it had some game-specific features or wording in the product that would make it a bad fit for any other type of development.