How to Make a Web Game All by Yourself

Rate this content
Bookmark

It's never been easier to make your own web game, but it's still extremely difficult. What game should you make? Which engine should you choose? Let's discuss how to answer these problems and ways to leverage the unique platform that is the web.

This talk has been presented at JS GameDev Summit 2023, check out the latest edition of this JavaScript Conference.

FAQ

Matt Hackett is a seasoned game developer who started making games in QBasic at age 12. He published one of the earliest JavaScript games, Onslaught Arena, in 2010 and was one of the first developers to get a JavaScript game on Steam with A Wizard's Lizard in 2016. He currently runs his company, Voladria, and has authored a book on solo game development.

To manage scope in solo game development, Matt Hackett recommends focusing on a minimum viable product (MVP), adhering strictly to game design pillars, and resisting scope creep by cutting extraneous features deeply. He suggests using tools like MVP to define the core game and game design pillars to guide decision-making on what features to include or exclude.

Solo developers can either create their own graphics or use pre-made assets. Matt Hackett, for example, draws his own graphics for some games like Witchmore but uses purchased assets for others like Pixelwasher. Developers can learn to create graphics using tools like Krita, GIMP, and Blender, or source free assets from platforms like OpenGameArt and Kenny.

Matt Hackett recommends Phaser for 2D web games and PlayCanvas for 3D games, citing their suitability for web-centric development. He personally prefers writing games in pure vanilla JavaScript for more control and simplicity.

Matt Hackett advises always keeping the game playable, maintaining shippable code, and avoiding features that could break the game or demand excessive additional work. He emphasizes the importance of cutting non-essential features and managing the final development phase efficiently to push through to completion.

Solo developers can publish their web games on platforms like Itch.io, which offers significant control over sales and visibility, or use services like GitHub Pages for free hosting. Itch.io is particularly popular for offering free demos and a paid version, while GitHub Pages can serve as a simple hosting solution.

Web games can leverage features like easy sharing through URLs, integration with social media, and user-generated content sharing through simple web tools. These features help increase the game's visibility and engage users by making it easy to share and promote content online.

Matt Hackett
Matt Hackett
27 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This talk guides you on how to make a web game by yourself, emphasizing the importance of focusing on tasks that interest you and outsourcing the rest. It suggests choosing a game engine that allows distribution on the web and aligns with your understanding and enjoyment. The talk also highlights the significance of finding fun in the creative process, managing scope, cutting features that don't align with the game's direction, and iterating to the finish line. It concludes by discussing the options for publishing the game on the web and leveraging unique web features.
Available in Español: Cómo hacer un juego web tú solo

1. Introduction to Making a Web Game

Short description:

Welcome to my talk, How to Make a Web Game All by Yourself. This talk aims to guide you to that elusive finish line and help you ship your own web game all by yourself. Making a game by yourself is hard. You've got to take off all your hats and consider the project from a high level. One way to help with that is to outsource certain parts of making the game. The key is deciding when to make your stuff yourself and when not to. Scratch your itch.

Welcome to my talk, How to Make a Web Game All by Yourself. I appreciate you being here and I think we're going to have a good time. This talk aims to guide you to that elusive finish line and help you ship your own web game all by yourself.

But first, a little bit about me. My name is Matt Hackett, I've been making games for fun in environments like QBasic since I was 12 years old. In 2010, I published one of the earliest pure JavaScript games called Onslaught Arena and I was among the first developers to get a JavaScript game on Steam in the form of a Wizard's Lizard in 2016. Today, I'm working on my new company, Voladria, where I published my book, How to Make a Video Game All by Yourself. I'm also working on two new games, Witchmore and Pixelwasher, the latter of which is being entirely in JavaScript.

Let's jump into my talk, How to Make a Web Game All by Yourself. To begin, you are a producer. Making a game by yourself is hard. It's a much different beast than working on a team where you may have lots of different people with lots of different skill sets. You probably have your own skill sets that you're eager to use on your project. I'm sure many of you are programmers, also probably designers, maybe artists, musicians or writers. These are all fun hats to wear, but to make a web game by yourself, you've got to take off all your hats and consider the project from a high level. So first, think of yourself as a producer. A producer is responsible for shipping a project. Your job is to ship your web game. What you've got to realize is that it all comes down to you. When you're not pushing your game forward, it's not getting done.

So it's easy to get overwhelmed as a solo developer. One way to help with that is to outsource certain parts of making the game. You don't have to make all of your own assets, like sprites or 3D models or sound effects and music and all that. You can make that stuff if you want to, or you can find pre-made assets that you can fit into your project. For me, I usually like to draw all the graphics myself, like for my game Witchmore, but for Pixelwasher, I'm using tons of assets I've purchased from places like Humble Bundle, where I've found hundreds of charming sprites ready to put into my games. The key is deciding when to make your stuff yourself and when not to. In my case, I had an itch to draw a bunch of witches and stuff like that involving witchcraft, but I didn't really have an itch to draw a bunch of modern pixel art to wash. What I had was tons of assets burning a hole in my pocket. Both of these were making me itchy, which is our next topic. Scratch your itch.

2. Tips for Solo Game Development

Short description:

When working on your own, focus on the tasks that interest you the most and outsource or find alternative ways to handle the rest. If you want to create your own graphics or sound effects, there are numerous online resources and tools available. Consider using asset packs or existing libraries to complement your own work. When choosing a game engine for web games, Phaser is a popular and reliable choice for 2D games, while PlayCanvas is recommended for 3D games. Alternatively, you can write your games in pure JavaScript or create a DOM-based game for a quick and effective development process.

It's different when you're on a team, right? On a team, you likely know your role and what you should be doing. On your own, my advice is to find the tasks that are itchiest to you and do those yourself. For the other stuff, outsource them or otherwise find a way to get them done that's not so draining on your time.

If you really want to make your own graphics, you can and should. There's never been so many online tutorials for learning art, nor so many free or open source applications. You can use Krita or The GIMP for 2D images, or Blender for 3D modeling. If you don't want to make your own graphics, there are many places to get free assets. My favorite is Kenny. Here you can find hundreds of sprites, both pixel art and high def, 3D assets, user interface graphics, and more. See also OpenGameArt for lots of free assets you can use right now.

Similarly, if you really want to make your own sound effects or music, you can and should. Web Games benefit from the Audio Element, as well as the Web Audio API, ready to make your game sound great. If you don't want to make your own sound effects or music, there are so many places to get royalty free music like itch, freesound.org, or freepd.com. So focus on your itchiest tasks, the ones you're really excited to tackle. For the other stuff, consider asset packs or similar solutions to fill in the gaps that you don't want to make by hand.

Next, pick a game engine. The biggest game engines of the day like Unity and Godot do have web exports. These web exports can sometimes generate huge files like hundreds of megabytes for some reason, but these engines can be perfectly fine choices for making web games. For the sake of this talk, let's focus on web-centric platforms. Let's say that means an engine is web-first and either already built on web technology or considers the web its primary build target. With those parameters in mind, there are many great options, but for 2D games, it's hard to argue against Phaser. It's lean, it's mean, it's been around for ages, it does all you want, and it's used by some of the biggest names in the games industry. Also, it's actively maintained by Richard Davey, who's a super cool dude and a great dev. For 3D games, I'd take a long look at PlayCanvas, also supported by super cool devs. Personally, I like to write my games by hand in pure, vanilla JavaScript. No libraries, no plugins, just good times with me and my code editor. Yes, I know, that's weird. I also like to use the 2DCanvas API because it's nice and clean, and I love how it lets me make sharp, crispy pixel games, like those found in my new game Pixelwasher. If you're wiser than me, you might consider making a pure DOM-based game. You'll almost certainly have to touch the DOM a little just to set up whatever else you're doing, but leaning into the DOM can be a smart way to make your game quickly and effectively.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.
Tiny Game Live Coding Workshop
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Tiny Game Live Coding Workshop
Workshop
Frank Force
Frank Force
Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.
Managers Are From Mars, Devs Are From Venus
TechLead Conference 2024TechLead Conference 2024
111 min
Managers Are From Mars, Devs Are From Venus
Workshop
Mo Khazali
Mo Khazali
A Developer’s Guide to Communicating, Convincing, and Collaborating Effectively With Stakeholders
It’s a tale as old as time - collaboration between developers and business stakeholders has long been a challenge, with a lack of clear communication often leaving both sides frustrated. The best developers can deeply understand their business counterparts’ needs, effectively communicate technical strategy without losing the non-technical crowd, and convince the business to make the right decisions. Working at a consultancy, I’ve both failed and succeeded in architecting and “selling” technical visions, learning many lessons along the way.Whether you work at a product company, are a consultant/freelancer, or want to venture beyond just being a developer, the ability to convince and clearly communicate with stakeholders can set you apart in the tech industry. This becomes even more important with the rise of GenAI and the increasingly competitive developer market, as problem-solving and effective communication are key to positioning yourself.In this workshop, I’ll share real-world examples, both good and bad, and guide you through putting the theory into practice through dojos.