Blog

30/05/2022

5 reasons to learn web dev by writing games

Wait... learning web dev by writing games? Is that even possible?

It was one of the questions I asked myself after being hired as the Pixi.JS developer. It was surprising because I applied as a Node.JS developer and had never written games besides accomplishing my curriculum at University. Before the job, my experience was purely connected with web development. Nevertheless, I was interested in how it could go, so I've accepted the offer. It was the right decision.

Pixi.JS is a framework that allows developers to put games written in Javascript into a web page's HTML“<div/>” tag. A significant advantage of this framework is that it works on top of the WebGL, which makes it fast. Moreover, the usage of types is delivered with the Pixi.JS npm package so that we can use the power of Typescript.

All things considered, this is my list of why I think writing games using the technologies mentioned above is an excellent path to learn web development.

Spinbits - programming.webp

Why learning web dev by writing games is a good idea?

1. Writing games is interdisciplinary.

Writing games involves every field of web development - from backend to frontend. The best part of it is putting everything together. Talking about the backend, depending on your needs for communication, you can choose WebSockets or RestAPI. Inside your game, you will need to handle different code scenarios, parsing server responses into the game's object, etc.

2. There is no doubt that you will get to know Typescript better.

Pixi.js v5 uses types for its codebase, and it's highly recommended to write games in Typescript. Most elements are written in ES6 classes. It is a lot easier to write and maintain code. What is more, as writing games introduce many problems to solve, developers can use tools provided by Typescript - custom typings, type guards, interfaces, generic classes, and so on. Why is it important? Typescript is a great language that is widely used, especially in web development. Learning its secrets surely will enrich the developer's portfolio.

3. Game Development + Design Patterns

Depending on your use case, Pixi.js could be used in various situations. For example, you might need to build a reusable codebase for similar games to speed up the process of delivering products. This is the situation when design patterns come in.

  • Inversion of Control

IoC is great when different effects are needed in one scene, such as animating splash effects with other materials (elements with different movement physics). If you would like to test your game, you might consider mocking communication with the server to cover test scenarios.

g1.webp

Just interface simple as that allows a developer to replace objects, which implement given interface. For example, when the user switches from mobile-portrait mode to mobile-landscape, UI should be changed in order to satisfy UX.

g2.webp

The LandscapeButtons object's responsibility is to choose proper graphics and alignment for its children.

  • Builder Pattern

when you develop characters’ abilities, a builder pattern makes it easier and cleaner. Reuse code to create amazing game scenes.

  • Factory methods

Considering object-oriented programming, some game components will be made using many smaller ones. To ensure code readability, it might become helpful to create objects factories. As a result logic of creating a complex component is moved into a single function.

4. Learn how to handle asynchronous code.

One of the challenges of game web development is Javascript’s one thread. In addition, scene elements often depend on each other. Imagine a situation when you have a set of animations to play, calling for the server response and various timeouts. It might become overwhelming, but I can assure you that if you get to know asynchronicity in games, it will be easy for you to use Promises working on another web project.

Below is a simple mechanism based on Promises + async/await from ES2017. The main component waits for its children to finish some action in order to proceed. The resolver could be invoked from another place inside the children's class. This use case might be particular but shows how one could learn asynchronicity during writing web games.

dobry-wymiar-g3.webp

5. Some features could be implemented with a framework such as React

Since Pixi.Js is made to create digital content rendered by WebGL, it could be a good idea to separate some of the elements of the game, such as the game’s settings. It could be done by integrating React Framework into the project. Creating UX elements e.g. sliders or checkboxes might be easier in HTML+JS+CSS combo. Moreover, many third-party node modules could be used to accomplish some clients’ requirements.

Writing games is very comprehensive and will guide you through different areas of computer science. Knowledge of Pixi.js surely extends your CV. After reading this text, I hope that you'll be willing to try it.

Maciek

Maciek

Frontend Engineer

Other posts

You may be interested

Let's build your business together!