DEV Community: Daniel Kalevski

Tutorial - Optimizing Memory Consumption in HTML5 Games

Daniel Kalevski — Thu, 12 Jan 2023 01:35:16 +0000

Welcome to my blog post about improving game performance through the use of Object pools.

As a game developer, it's likely that you've had to deal with the problem of instantiating a large number of objects for a specific class, such as particles with a short lifetime that need to be destroyed. One of the challenges of this type of game logic is that JavaScript's model is based on the garbage collection pattern, which means that developers do not have direct control over allocated memory.

Problem

When memory locations (variables) are marked as null, they are collected by the garbage collector and removed from memory. However, when the garbage collector needs to dispose of a lot of objects, it takes a lot of processing time, which can negatively impact the performance of the game.

In that case, if you profile the memory, you will see something like what is shown in the picture below

Solution

But there's a solution to this problem, and it's called the Object pools pattern.

The Object pools pattern is an implementation that helps to reuse disposed objects instead of creating new ones. By reusing objects, we can reduce the number of objects that need to be created and collected by the garbage collector, which in turn improves the performance of the game.

After using Object pools, you will get results like this

Phaser Plus Object Pools

class CreateGameObjects extends Scene {

    onCreate() {
        this.pool.register('myObject', MyObject)

        // create object using pool
        let turtle = this.pool.obtain('myObject')
        this.add.existing(turtle)

        // remove object from scene and retreive back to the pool
        this.children.remove(turtle)
        this.pool.release(turtle)
    }

}

Phaser+ Tutorials: Create new Phaser project in less than a minute

Daniel Kalevski — Tue, 10 Jan 2023 22:00:04 +0000

Hi,

this is my first Phaser tutorial, so I hope it will be useful for all those who plan to start a new project using Phaser.

As part of a phaser-plus project I started recently, there is @phaser-plus/cli - a command line tool for creating and developing Phaser projects.

What is Phaser?

Phaser. is a free and open source software developed and owned by Richard Davey. You can visit their funding page and help them to make Phaser even better.

How do I make a project?

Before you start creating a project, you need to have NodeJS 16+ installed on your machine. If you already have NodeJS 16+ installed, you can create a project by executing:

npx @phaser-plus/cli init --template=phaser my-phaser-game

CLI Features

Simple setup
Hot module reload
Optimized production build
Support for Web workers

Setting up a project to build Air Console game using PhaserJS

Daniel Kalevski — Fri, 04 Mar 2022 14:43:22 +0000

A few months ago, I started my journey developing a game for “AirConsole” using PhaserJS. At the beginning I spent a lot of time setting up my project. That inspired me to develop a command line interface (CLI) tool for simplifying the development environment for Air Console games using web technologies.

What is Air Console ?

Air console is a platform focused on delivering local multiplayer experience using your TV or PC as a game console and your smartphones as controllers / gamepads. Actually the development of the game is divided in two parts, the first part is developing the actual game for the main screen and as a second part is developing the application used by gamepads (smartphones) to interact with the game.

Prerequisites

JavaScript knowledge
NodeJS (v14.0 or higher) installed on your local machine
Code Editor

Project setup

As a first step we need to install the tool that I’ve created for this purpose. The tool is a npm executable published to npmjs.org.

npm install -g airconsole-cli

After successful installation, you can create your project by executing:

airconsole init my-airconsole-game

The previous command should create a directory named my-airconsole-game.

Next steps are installing the dependencies using,

npm install  // (inside project directory "my-airconsole-game")

command inside the “my-airconsole-game” directory and running the project by executing:

npm start

I hope this is helpful.

JavaScript Decorators

Daniel Kalevski — Sun, 18 Feb 2018 02:02:51 +0000

JavaScript developers. Are you using JS Decorators in your projects ? Today I write simple wrapper for better experience with decorators. Important to me is your opinion about this helper library.

Thanks

https://www.npmjs.com/package/decorator-wrapper