VR is revolutionizing education
2024-03-27
How to choose the right platform for your serious game
2024-04-25Most game studios make their games using established engines like Unity, Unreal, or more recently Godot. Here at Play Curious, however, we like to “roll our own” games that run directly in the web browser.
In this post, we’re highlighting the developer tools and services that make our game process possible (and sometimes very enjoyable) - courtesy of our very own CEO & Developer Jesse Himmelstein!
Even if you use other tools or languages for your games, however, these tools might still come in handy.
TypeScript
When you’re writing code for the web browser, you are likely writing JavaScript. JavaScript has evolved quite a lot since I started writing in the 90s. It now has quite a lot of features that used to be reserved for more “serious” languages like Python or Java. However one feature it never added was strict typing.
That’s where TypeScript comes in. In TypeScript, you “annotate” types to variables, function arguments, etc. Contrary to the type systems that I was used to in C++ or Java, you can use unions to specify that variable is either a number or a string, or even specify only certain strings that are acceptable (which is great for enums!).
Another great feature is the ability to retroactively declare types for code written in pure JavaScript. This gradual approach makes it easy to apply typing to your own code, without limiting you to only certain libraries.
The TypeScript compiler checks all the types of your code, alerts you to any errors, and then spits out regular JavaScript, with the types removed. This means that there is no performance penalty when executing the results.
PixiJS
PixiJS is a high-performance library for 2D graphics. In a nutshell, it uses the power of the modern graphics cards for 2D rendering. Since even small devices like smartphones have graphics cards, this makes it possible to run beautiful looking games pretty much anywhere.
Another big plus is the ability to write custom shaders, to handle graphical effects that aren’t built out of the box.
Oh, and PixiJS now includes its own audio library, which works great, as well as an asset loading system. So just by including PixiJS, you already have 3 of the functionalities required to make a game.
Texture Packer
When creating animations for 2D games, you end up with lots of individual images. Texture Packer creates spritesheets, large images in which all the smaller ones are packed in tightly together.
Spritesheets are advantageous for loading times, as it’s faster to load larger but fewer assets than smaller but more numerous. Even more importantly, however, it’s more efficient for the graphics card to show part of a larger image than to rapidly switch between images in memory.
Texture Packer has algorithms to find optimal placements of the individual graphics, and can “trim” off transparent pixels that are on the sides. The tool is not free, nor open source, but it is relatively low-priced for all that it offers.
For our game CRISPR Crunch, we used Texture Packer’s feature of multiple export resolutions in order to export different spritesheets for mobile and computers. Super helpful! Here's the kind of spritesheets we generated:
Three.js
When it comes time to make a 3D game, Three.js is a great library. It supports loading assets from tools like Blender, and comes with a set of standard materials that you can use. When you compare it to writing WebGL by hand, it’s a huge time saver!
I’ve found the Three.js documentation to be quite terse, but there are a large number of single-page example projects that you can read to understand how it works. Here's an example with our upcoming ocean cleanup game:
Parcel
In the good ol’ days of web development, you would just write some HTML, CSS, and JavaScript, point the web browser to it, and hit the enter key.
However, the flip side of using languages like TypeScript is that you need a compiler to turn your source code into the executable code that the browser will run. The same goes with languages like SASS, which adds extra features to CSS.
Parcel, like the better-known tool Webpack, handles this for you. It runs the compilers, and substitutes the new file names in place of the original ones. Overall, the process is quite fast- often my compile times are just a second or two. It can also create an optimized version when you are ready to deploy. After using Webpack for previous projects, I found Parcel much easier to configure- with most parts working straight out of the box.
What I love most is the hot-reload feature, so that I can change the CSS, say, and the project just updates automatically, without me needing to reload the browser and navigate to the part of the page that interests me. What a time saver!
There are many more tools that we use to make our games, but these five should provide a good starting point. Happy hacking!
