DEV Community: The Unfactoring Guru

Godot Docs Simplified: Part 0 Introduction

The Unfactoring Guru — Mon, 19 Dec 2022 07:39:04 +0000

Introduction

This is mostly just a simplified and digestable series for you to understand what Godot is the simplest way possible.

What is Godot?

Godot is a general purpose game development engine. You can develop 2D and 3D games for Desktop, Smartphone, or for the Web.

You can also create applications that need an interactive GUI.

Games and Apps made with Godot

Ex-Zodiac

Pixelorama: PixelArt tool

RPG in a Box: RPG Voxel game builder

Aspect

Just like your typical game engine: tilemaps, resources, textures, etc.:

Programming Languages

For editing purposes you can use VSCode and Emacs for GDScrpt or C# development. Also Godot supports animations from 3D Blender

What do you need to learn Godot

Fundamental Code Experience (OOP, DataStructures, Algorithms)
These fundamentals can be self-taught on this free Harvard Course for Computer Science Fundamentals.

Complete Phaser 3 Game Development Guide: Part 0.5 (Bundling and Compiling)

The Unfactoring Guru — Mon, 04 Apr 2022 18:08:50 +0000

This article is part of the "Complete Phaser 3 Game Development Guide" series, if you haven't installed Phaser 3 into your game project go to Part 0. Also this is a required section if you are using commonjs to require the Phaser 3 library.

What's this about?

Since Phaser 3 is a front-end library, the files that we include inside our game file need to be included in the main html file we are using. The problem is, the require function is used to import libraries using Node.js and since html doesn't execute code without the use of a browser (hence not using Node.js), this will cause an error in our game not compiling properly or at all!

To solve this, the lovely developer community created tools that bundle your Node.js libraries into normal Javascript files that your browser can execute.

In this part of the guide we will complete the following tasks:

Install a Bundling Tool
Bundling Code

After this you can go ahead to Part 1 and continue the tutorial.

Installing Bundling Tool

There are a bunch of bundling tools that are used to convert Node.js code into normal Javascript code. The most popular and complete tool is called webpack, but it's a "bit to much" for beginners. In this tutorial we will use browserify, mostly because of it's simplicity (even though the creator of Phaser doesn't like it...).

Regardless of this, it's a great beginner tool to start with, later (if you want of course) you can move into webpack.

To install browserify you just need to use npm and write:

npm install --save-dev browserify

on console and install it as development dependency.

And that's it!

Bundling Code

After installing browserify as a dependency in your project you can bundle your code with the following command.

npx browserify game.js -o bundle.js

Assuming your game is inside a file named game.js, the following command takes your game file (game.js) where you have Phaser 3 included, bundles it and outputs a file called bundle.js (this happens because we used the -o or --outfile option).

Now instead of including your game.js (that basically uses Node.js libraries) inside your html file, you include your bundle.js into your library.

Basically this works because browserify includes EVERYTHING from the required library into a single Javascript file including your game.js code so that your browser can execute it. This is why it's called "bundling".

And that's it!!

Optionally: Since it's so tedious to bundle your game every time you edit something, you can install watchify which works exactly the same as browserify, but your bundle.js file is updated everytime you save your game.js file.

Install with the following:
npm install --save-dev watchify

Run with the following:
npx watchify game.js -o bundle.js

And that's basically it for this section! If you feel comfortable, you can now move on to Part 1 where we create our first "Hello World" in Phaser 3!

Complete Phaser 3 Game Development Guide: Part 0 (Installation and Importing)

The Unfactoring Guru — Fri, 01 Apr 2022 21:20:10 +0000

DISCLAIMER: These series of articles may seem long and with a lot of information. I try to condense as much as possible for beginners to understand, but also to not get bored reading them. If you have any recommendations, I would gladly accept them!

What's this about?

Phaser 3 is a simple, complete, and efficient Javascript library for developing video games in HTML or Browser. Phaser 3 is great for beginners because of its simplicity during development and it's lightweight environment (unlike Unity or Unreal which take up a lot of CPU and processing power). In this part of the guide we will complete the following tasks:

Installation
Importing Library

After that we will pass to Part 1 where we dive into the details of the project we are creating and on how to run our first "Hello World" in Phaser (Trust me, it's a lot more exciting than it sounds).

The only requirements you need are:

Basic HTML-CSS knowledge (just to create our game's window)
Object Oriented Programming skills (not necessarilly Javascript)
Node.js installed on your machine (we need to install some packages necessary for compilation and execution)
Text/Code Editor (... duh)

If all of that is done, let's get started!

Installation

There are many ways for installing Phaser 3 into your machine:

NPM
Source code
JS File
CDN

Each one has its benefits and consequences, but that's for another section or article. For now just choose the one which is best for you.

NPM
Phaser 3 is available through the NPM Registry so you just need to go to your project folder and execute:

npm install phaser

from the console!

And that's basically it! If you are done installing then you can skip the other methods and jump into how to import the library.

Source Code
This library is Open Source which means it's source code is free to download and edit from a public repository (Github in this case). You can either download the zip/tar.gz file from the Phaser 3 Repository or you can use git to clone the repo into your project:

git clone https://github.com/photonstorm/phaser.git

Or if you have Github's CLI tool you can just run:

gh repo clone photonstorm/phaser

after that take in mind that the file we will import afterwards is called phaser.js located in phaser/dist/phaser.js. With this done you can go right into how to import the Phaser 3 library.

JS File
The simplest and easiest way you can install Phaser, it's to just download the js file from here: phaser.js

Then just include the library into your project folder and... done!

CDN
For those who don't know, a CDN (Content Delivery Network) is used to import library (an almost infinite amount of libraries) from the internet without needing to install them locally! Lucky for us, Phaser has it's own CDN! Installing it is easy, you just need to go to the index.html file (or your main html file) and included into the browser's <head> tag as a <scrpt src="$PHASER_LIBRARY_CDN>

<html>
   <head>
      <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
   </head>
   <body>
    ...
   </body>
</html>

Now with any of these installation methods, you can now start importing the library

Importing Library

With which ever method you chose! There are two main ways of importing the library:

Requiring the library using commonjs
Include into the HTML file

Require inside javascript file

If you are familiar with commonjs, than you know that when we talk about importing the library, we are actually requiring it's contents into a variable. This variable will have ALL the functionality we need from the library.

If you installed through npm, then you can simply write this into your main javascript file:

const Phaser = require('phaser');

If you installed through github or just downloaded the javascript file, you basically do the same step, but specifying the library's directory:

With Github, it's highly likely that you import the library like this:

const Phaser = require('./phaser/dist/phaser.js');

Or if you downloaded the phaser.js file into a custom directory then you would import the library like this:

const Phaser = require('./path/to/library/phaser');
//REPLACE 'path/to/library/' WITH THE PHASER DIRECTORY

Regarding which step you chose, you would actually need a bundling tool to compile your code (we will get into bundling in another section, so don't worry yet).

Including in HTML file

This step was already done in the CDN install section, but of course this is done differently regarding which method of installation you used.

Basically you just include your phaser.js script inside the <head> tags of you html file using a <script src="src"> where "src" is your Phaser library.

If you used npm:

<html>
   <head>
      <script src="./node_modules/phaser/dist/phaser.js"></script>
   </head>
   <body>
    ...
   </body>
</html>

If you used Github:

<html>
   <head>
      <script src="./phaser/dist/phaser.js"></script>
   </head>
   <body>
    ...
   </body>
</html>

If you saved the phaser.js file into a custom directory:

<html>
   <head>
      <script src="./path/to/library/phaser.js"></script>
   </head>
   <body>
    ...
   </body>
</html>

And with that, you're all done.

What we learned...

In this part we learned the basic requirements we need to create our game, how to install the required library, and how to import the library into our project. In Part 1 we will create our "Hello World" program inside our project so we are sure that things are running smoothly.

Important: If you imported the library using commonjs (require("$PHASER_LIBRARY")), then go to Part 0.5 to learn about basic bundling using browserify.

Developing My Own Node CLI Tool! And YOU can Contribute

The Unfactoring Guru — Sat, 20 Nov 2021 07:51:41 +0000

I made a CLI Tool and You Can contribute!

Basically I'm really excited about writing packages. I just created this small tool called bring-me! This basic cli tool just brings you libraries to your current working directory directly from its cdn! You can also add libraries to the repertoir of libraries you have saved for downloading later!
Examples:

bring-me lib jquery -d /public/js you will have jquery already integrated in your project!

devasolutions / bring-me

NPM CLI tool for delivering common front-end libraries, frameworks, stylesheets, etc. for lightweight and easy development without needing them stored in node_modules or when internet connection could be a problem in the future.

bring-me

NPM CLI tool for delivering common front-end libraries, frameworks, stylesheets, etc. for lightweight and easy development without needing them stored in node_modules or when internet connection could be a problem in the future.

Install

Install globally with NPM npm install -g @devasolutions/bring-me

Or install in development npm install --save-dev @devasolutions/bring-me

Introduction

Bring-me is a CLI tool used to download popular frameworks from there CDNs so that you can use them offline when needed in mostly Front-End Development scenerios

Summary:

Bring-me scans a bmconfig.json file inside the module's directory to get the most popular frameworks and libraries (bootstrap,bulma,jquery,lodash,phaser at the moment).

bmconfig.json example:

[
  {
    "url": "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js",
    "file-name": "jquery.js",
    "lib-name": "jquery",
    "format": "js",
    "version": "3.6.0"
  },
  ...
]

bmconfig.json fields:

url: (contains the url of the library from cdn) file-name: (the…

View on GitHub

I need people to help with creating more basic commands, fefactoring, and improving documentation. So anybody is welcome to participate!

Regards
The unfactoring guru

Basic Software Architecture Principles (except SOLID)

The Unfactoring Guru — Fri, 05 Nov 2021 06:28:14 +0000

Introduction

As programmers we always try to create the BEST CODE IN THE WORLD. But we sometimes start to feel and think things like "Is my code to simple?" "Will it function well?" "Is my code to bulky?" and other nonsense. Well here are some basic principles to follow if you want to become a better and more productive programmer

YAGNI (You ain't gonna need it)

As developers we are always excited to use and integrate the new technologies that come around: React, Node, Flutter, Docker, Kubernetes. But before implementing this new stuff, stop an think "Do I REALLY need this?" 90% of the time you will say "Yes, of course it's just what my application needs!", but later on in your project you will notice that your application will start to run slow, need a lot of memory and disk space, and will actually slow your coding process a lot! So, just because Facebook is starting to use AWS for their projects, don't think you do! Keep your project as simple as possible! Which brings me to another principle

KISS (Keep it stupid simple)

This happens a lot in modern programming. People start using unnecessary operations or methods to "optimize" their code for example do you know what this is?

let a = 5;
let b = 4;
//Wait for it...
let c = b < a ? 10 : 4

If you don't know what this is, it's a conditional way of writing the following

let a = 5;
let b = 4;
let c;
if(b < a){
   c = 10
}
else{
   c = 4
}

They both return 4, but a simple junior programmer won't know or will get confused when seeing things like that. In principle, just believe everyone your working with or for, is a beginner, so don't add fancy stuff like this so that your ·"code looks pretty and organized." The compiler is not gonna applaud to you if you use ternary operators, both solutions are fine, but KISS, and let everyone know your code.

DRY (Don't repeat yourself)

I can explain this better with an example:

This is a file inside one of my projects
add.js:

 let bmObj = bmconfig;
        bmObj.push(bmTempObj);

        fs.writeFileSync(
            require.main.path + '/bmconfig.json',
            JSON.stringify(bmObj, null, 2),
            (err) => {
                if (err) throw err;
            }
        );

And lines after I started using this same structure of code inside a different file.
lib.js

if (!lib && !version) {
        bmObj = [];
        fs.writeFileSync(
            require.main.path +'/bmconfig.json',
            JSON.stringify(bmObj, null, 2),
            (err) => {
                if (err) {
                    console.error(chalk.redBright.bold("Couldn't write file"));
                    return -1;
                }
            }
        );
        return 0;
    }

As you may clearly see the same functionality is been repeated a lot!

fs.writeFileSync(
            require.main.path +'/bmconfig.json',
            JSON.stringify(bmObj, null, 2),
            (err) => {
                if (err) {
                    throw err;
                }
            }
        );

How do you solve this? Simple! Just create a function that writes a specific file with what you want inside it.

function writeToBmConfig(bmObj) {
    fs.writeFileSync(
        require.main.path + '/bmconfig.json',
        JSON.stringify(bmObj, null, 2),
        (err) => {
            if (err) {
                return -1;
            }
        }
    );
    return 0;
}

And just include this function and replace the code you had in your other files! This now means you only write your code once. And adds more functionality to your application!

WET (Write Everything Twice)

This one is basically the opposite of DRY. When is it useful? I honestly think when your starting to write your first lines of code. During these stages don't try to think about the DRY principle. Code as your heart desires and later you will notice functionalities inside programs that can actually just can simply function as a method! So yeah if you're starting a project, always keep in mind after taking a break "How should I make my code DRY?"

Conclusion

Try to focus on this principles when refactoring code or when developing new projects. Sometimes when starting a project we kind of miss this principles! But don't worry, they aren't strict rules for development, their just recommendations when writing code.