
Tools we used to create a hit HTML5 game on Steam - riadd
https://www.codecks.io/blog/2019/creating-a-hit-steam-game-in-html5/
======
tobr
> _[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
I wasn't aware a version 4 was in the works. Any word on eta?

~~~
tobr
I 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
Does anyone know if people who bought ST3 get the update for free?

~~~
peruvian
Usually "pay once" software doesn't get free upgrades - just a discount.

------
roland35
Quick 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)

~~~
jszymborski
It'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).

~~~
IggleSniggle
Most folks complaint with Electron isn't that it isn't performative, but
rather that it is bloated (you ship an entire browser when all you needed was
eg the canvas and v8 engine).

~~~
seangrogg
In all fairness, are you aware of a tool for web developers that only ships
the canvas and v8 engine? Legitimately curious, because I've tried looking in
the past for similar reasons (game dev on an engine I already know) and came
up empty-handed.

~~~
luismedel
I've always dreamed for an Ejecta[0] like solution for desktop systems.

[0] [https://github.com/phoboslab/Ejecta](https://github.com/phoboslab/Ejecta)

~~~
seangrogg
This would be great, if only... Realistically, I just want a canvas with some
audio/input stuff in most cases (though being able to put some divs in places
may be nice for rendering things like menus).

------
ermir
HTML/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
I 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.

~~~
kyle-rb
When 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)

~~~
jtolmar
Canvas rendering isn't that consistent, and when it goes weird it's often OS
specific instead of merely browser specific. Some things I've run into:

\- OSX likes to turn random Unicode symbols into emoji (extends past Canvas)

\- Fractional font sizes on Chrome/Linux get bizarrely stretched out (after a
transform that makes the font not a fractional size)

\- Complex clipping operations freak Chrome out

\- All the compositing rendering options are broken somewhere or mis-defined
to the point that it's weirdly hard to render anything to an alpha channel

You also need input APIs to make a game, and the input APIs often have strange
inconsistencies in function names, returned objects, or event ordering.

Canvas is nice and straightforward if you want a purely sprite-based game with
only mouse/keyboard input (but even then you need to jump through hoops if you
want pixel art). Anything beyond that is going to need cross-platform
debugging.

~~~
Mirioron
Canvas has also had some really weird performance issues in the past that are
browser specific. Chrome once decided that the number of images used was too
many in an animation, so it had to decode some of the images in the animation
on the fly. This obviously killed all performance. This bug has been fixed,
but I'm sure there are many others like it around.

------
dom96
What 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?

~~~
danShumway
Not OP, but a few tips from my experience:

\- Use `requestAnimationFrame`, don't use timers. JS timers are really bad,
and they won't sync with monitor refresh rates.

\- If possible, avoid lots of canvas calls. For example, if you want to draw
something simple like a bunch of boxes on the screen, grab the pixel array
from the canvas and manipulate it directly, don't call `ctx.rect` in a for
loop.

I once stuck in a quick dozen-line block of code before a demo that just drew
a couple hundred tiny pixel stars in the background and occasionally
randomized their position. Went back and profiled later and found out it was
taking something like 30% of my render time each frame, and refactoring just
that one block of code got rid of a bit of stuttering on old hardware.

\- On that note, cache stuff in memory. My game is tile-based. At the start of
a level, I iterate over the tiles on an offscreen canvas and generate a
single, giant image for the entire map. Then for subsequent frames I can
render that with a single sprite call, rather than by iterating over every
tile.

Caching visual effects is huge. In general, don't be afraid to stick generated
effects in RAM, because every call you make to Canvas has an overhead.

\- Also on that note, don't be afraid to use multiple canvases. If you have an
overlay or a visual effect on top of your main game, and you can just update
that without needing to redraw all of your sprites/tiles, that can sometimes
be a big performance benefit.

~~~
plopz
Is requestAnimationFrame still capped at 60fps? My monitor runs at 165hz and
the last time I tried requestAnimationFrame it would only do 30 or 60.

~~~
enoj
No, for a project I am working on using three.js with requestAnimationFrame,
it is capped at the refresh rate the monitor is running on.

So my gaming monitor running 144hz at 1080p runs the application at 144 FPS
according to my FPS counter from stats.js[0]

On my laptop running at 60hz it's capped at 60 FPS. There is a huge difference
in the "smooth-ness" as well as reduced input lag on the 144hz vs 60hz
monitors. So much that I currently dislike working on the app on <100hz
monitors.

[0] -
[https://github.com/mrdoob/stats.js/](https://github.com/mrdoob/stats.js/)

~~~
plopz
That's good to know, might have to try it again. Especially now that shared
buffers and atomics are available in web workers.

------
rayalez
I 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
Check out [https://bitplanets.com](https://bitplanets.com) works even on
mobile at 60fps. It's a strategy game using pixi js

------
Hamcha
Was 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!

~~~
riadd
I barely used any libs, but I should add the ones that I did. Will extend the
article. Thanks for the feedback!

~~~
riadd
I've extended the blog post with more information on the libs that I used.

------
Cieplak
_The 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?

~~~
ido
for comparison: steam & the app stores take 30%.

~~~
darkstar999
It's not a good comparison. The article says this payment widget doesn't get
them any store exposure.

~~~
riadd
Unfortunately also being on Steam barely gets you store exposure anymore.

------
haolez
Interesting 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.

~~~
jkrems
From 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.

~~~
haolez
Most of these issues could be said about Python as well, but the environment
that you describe is of a very poor code quality culture. This can happen in
any language. I'm not saying we should use CoffeeScript in 2019, but that the
criticisms seem vague.

~~~
BossingAround
I'd say that a lot of the same arguments are valid for Python or yaml. Why
both of these are very widely used while coffeescript slowly died is beyond
me. I, for one, really dislike any language that uses syntactic whitespaces.

------
bstar77
Curious 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
Thanks 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!

~~~
AnthonBerg
I 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.

~~~
riadd
Thanks so much! I appreciate it! The animation style that you suggest has come
up in discussions before. We're still figuring out how to exactly deal with
different scenarios where the diary text is much more detailed than what we
can achieve in animation. That will be an interesting problem to tackle as we
add more and more content to the game.

~~~
AnthonBerg
Thanks for the gracious and, well, amazing reply! I still feel somewhat
horrible for making such an "instructive" comment and feel like I have crashed
into a beautiful thing and put my ignorant and greasy little fingerprints
where they have earned no right to be. But it's such an interesting subject :)
I hope I have been able to express the deep respect I hold for what you're
doing. — I'll certainly be watching and cheering on the game's development!
And will be preordering immediately when that's possible.

------
ericmcer
Did 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
I thought it was fairly easy to reverse engineer games on almost any platform?

~~~
ericmcer
Just by nature of the language (interpreted vs compiled) it’s going to be
easier to dive into JS run in a browser

------
thedaemon
Photoshop 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
Thanks for the tips! Will check out them out.

------
modernerd
Have 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.

~~~
james-skemp
Ionic 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.

------
shujito
> 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_
Yeah, 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
> 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?

------
js4ever
It's not the wand, it's the Wizard

~~~
AnthonBerg
Heartily agree.

(But also: Wizards teach wands. Wands teach wizards.)

------
tonyjstark
Awesome writeup, thanks for that!

What did you use for sounds and music?

~~~
riadd
Thanks! I used [https://buzz.jaysalvat.com/](https://buzz.jaysalvat.com/) and
converted all our raw .wavs to mp3 and ogg with python using ffmpeg. I should
probably add that the post as well.

~~~
riadd
Added this to the blog post as well. Thanks for the note!

------
AnthonBerg
My 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
Thank you! Good idea about the tech choices of Codecks. Maybe that would make
for another good blog post.

~~~
AnthonBerg
I 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
Codecks looks gorgeous. Have anyone tried it for anything else than game
development? Is it a good fit for other projects?

~~~
danielatc
Thanks! 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
Maybe 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.

------
tracker1
About 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
I 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.

------
jammygit
I 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

------
quackwagon
I’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/)

------
Razengan
I 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
Thank you! I think the main inspiration for the logo gradient was actually the
Indiana Jones logo :)

------
chimi
> 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.

~~~
riadd
When 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
Well, 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
Then 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.

~~~
edflsafoiewq
If you are, as the GP said, also distributing it as a web version so people
can play it in their normal browser, you already have that problem.

~~~
strbean
Once you are charging money for the game on a distribution network, you
probably aren't providing the full game on a standalone site anymore. Maybe
you have a small demo.

------
tomaszs
Paint.net - surprise surprise. i use it for years, it is awesome. Plus
IrfanView. This is a powerful combo

------
mscasts
Thanks for sharing! I will read up on this as I am about to venture out in the
gamedev world myself.

~~~
riadd
Cool! I hope you find it worthwhile!

------
adambowles
Your Electron and NW links are backwards (each points to the other)

~~~
riadd
Thanks for the heads-up. Will fix that!

