Skip to content
View PaulB-H's full-sized avatar
🎮
🎮

Block or report PaulB-H

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
PaulB-H/README.md

Paul Bernard-Hall

Game Developer
              JavaScript Fanatic

🎵 A Squire Of the Scholastum at Castle Libratus
🎵 Planeswalking across the endless Chronoscapes
🎵 Fellow Human Weather Channel enjoyer
🎵 Riding the Monorail through ዪ̵̝̠̇̄ሃ̴̧̛̣̹̽ረ̴̰̱͎̈́̍͝ቹ̷͖̲̈́͊ⶴ̴̛̻̣ͅ

Expand for Much More Music

🎵 Marching to Bran Castle with the Great VINNTASH
🎵 Brooding in Opal Vessel's Dark Ambience & Barber Beats
🎵 Entirely Consumed by t e l e p a t h   テレパシー能力者 - 星間性交
🎵 At peace where the desert sand feels warm at night   夢の砂漠
🎵 What is Mabisyo

Year 1 Student of George Brown Game Programming

Currently:
- Getting caught up on some foundational math
- Learning C# and Unity
- Still building stuff with JS


Here are some of the things I use the most:

JavaScript / TypeScript

Game Dev with Phaser and React

Image Editing with Krita and Aesprite

2D Skeletal Animation with Spine 2D

Map Editing with Tiled

Normal Map Creation with Laigter

Android & iOS with Capacitor

Hosting on Ubuntu with Node.js, NGINX, and PM2

Protected with Cloudflare and Certbot


Blog


     Sun Sep 29, 2024

Really happy with the server setup so far:

  • Firebase with Google OAuth
  • Firebase RTDB for token revocation status
  • Express server for Sign Up, HTTP
  • Local MariaDB for my User Data
  • uwsjs websocket server
  • Redis for
    • Websocket Message Brokering
    • Websocket Room Management
    • Server Side Active Game Data

I already knew to use Redis for room management, but I did not realize it could be used to help scale something like uwsjs by brokering messages between uwsjs servers running in a cloud environment.

I was wanting to use this backend with Phaser, but phaser-on-nodejs only supports 3.55 as the highest, and I have not been able to get it working with an updated version... yet...

While I still want to work on making that happen, for now I will create an extremely basic engine to use server and client side. I was thinking about using a more minimal framework than phaser (like a stand-aline physics engine on the backend and a simpler render engine for client), but this is a good opportunity to learn and I am kinda excited to try.

I am definitely going to be getting some help from this legendary article:
gabrielgambetta.com/client-server-game-architecture

There are 4 main parts the article discusses, each being critical for a multiplayer game:

  • Client Side Prediction
  • Server Side Reconciliation
  • Entity Interpolation
  • Lag Compensation

I only have a vague understanding of these things, so trying to implement them myself will be really fun. Here is one excerpt from the article I thought was really interesting on entity interpolation:

"...;the trick is how to show the player what happens inbetween. The key to the solution is to show the other players in the past relative to the user’s player."

I found this interesting becuase as a long time MMORPG player, I would occasionally play with someone sitting right next to me. And I would notice if we were running "together" sometimes, on my screen they would appear slighly behind me, while on their screen I would appear slightly behind them.

I can only assume this could have something to do with the aforementioned entity interpolation implementation.


Click for Older Posts


     Mon Sep 23, 2024

I recently setup a login/auth system using Node.JS, MariaDB, Firebase, and Sign in with Google. Initially I was going to setup the systems directly, but realizing Firebase could handle a lot of the work, and I wouldn't need to pay the Google/Apple developer account fees made me give it a try.

It is very weird having a user system and database and not storing any passwords for them! I also love not having to worry about password reset systems and all the other things required for a secure and functional login system. I managed to get the checks for token revokation to be done through a Firebase Realtime Database. Since it's just a key/value store, I am thinking i could move this to a local REDIS server instead, but it's working quite well so far.

Now to setup the actual websocket server which I will be using uwebsockets.js for.


     Thu Sep 19, 2024

Trying to catch up on math 🫠

This has also given me an opportunity to look into LaTeX. I first discovered it when looking to document some formula for a space games physics.

Some notes I am making



Play with LaTeX in-browser here: latex.js.org/playground


     Fri Sep 6, 2024


🇺🇦 💔


     Tue Sep 3, 2024

College Day 1. Game Programming at George Brown. It feels a bit surreal, but I am extremely excited.

I have wanted to make a post over the past two weeks on a multi-part dragon I am drawing and then animating, but every time I started a post, I noticed something I wanted to change.

Here it is with a quick background added. Creating varied landscapes and backgrounds is one of the next things I want to start practising.

The final step is rigging and animating in Spine 2D. I have raised and lowered wings for each side, so I will be able to make flying animation. Pictured are the resting wings.

When I get some more time I will upload some progress pictures.


     Tue Aug 20, 2024

Sadly noticed my nib was dead on Monday, thanfully replacements are coming.



I found out that I could apply gradient map to textures on brushes, which adds a lot of depth and shading in a single stroke. While all these examples are of "Texture - Reptile", the gradients look very similar applied to other textures. These are beautiful, and this is definitely going to help for metallic surfaces too.

Find the Gold / Pearl gradients here: gold-and-pearl-gradients



Made a rainbow cloud brush:



I found a brush pack that really captures the thick paint amazingly. You can see it in the background undr my name.

Find the brush pack here: Memileo Impasto Brushes




     Sat Aug 17, 2024

Lots of updates. This week I have been working on clouds, skin, plants and trees.

Cloud Study

These are my two favorites from the cloud study:

I also had a lighter background ready so I can see how that changes them. It made me realize I can't rely on the background for shading the clouds and need to mix in the light/darker shade myself if I want it to show on both light/dark backgrounds.

You can see here is where I realized the white cloud didn't really have any darker shades because I was relying on the black background for that. However the purple cloud I added the shading myself.

Skin Study:

I need to play with the different pore brushes, but I am getting an idea of how to make skin.

Greenery Study

I got a good start on trees and bushes. I want to make a little personal library of pre-made assets.

I am going to do some bushes or trees with a separate branch layer, so if I wanted to let you gather from a bush I could use a particle effect during the gatherng and then remove the leaf layer to represent a depleated resource

Cloth / Fabric

Along with Metal this has been a tricky one so far... While there are some canvas textures, there is no canvas brush by default or in any brush pack I found so far.

So I created my own canvas texture brushes. Selecting the texture, and then changing the TEXTURE blend mode to "Lightness Map" was all I needed to do to get this effect. Pixel Engine. (Blend mode under the brush texture pattern options, not general brush blend mode)

Left Texture: "Woof Tissue" for Burlap - Right texture: "01 Canvas" for a finer thread appearance

Drawing, rigging, and animating a full model

I decided to draw a model as if it was an artists poseable mannequin. I figure this will be the easiest way to start learning how to make human-ish movements.

First I drew each separate part in Krita, and exported it to another file where I merged each body part as a single layer or group. Then I imported each part into Spine, create a skeleton, and attached the parts to the skeleton.

Then I was able to get a (very rudimentary) wave animation keyed out.

Dragon Skin Reborn

I added a few more colors to the dragon skin pattern. I also realized I will need to come up with something else for actual scales. I reawlly love this texture and how this is coming along. Can't wait to actually draw and animate the dragon.

Dragon Skin Purple & Green



What's next...

The coming week I will be focusing more on character models and animation. I need to make side-profile versions, and then try making walk/run/jump animations. Also dragons. And fire.



     Mon Aug 12, 2024

I am getting familiar with different brushes in Krita, and hoarding any good bundles I can find. Advanced brushes can make certian things, particuarilly textures and hair, a lot easier.

I have been trying a few different methods to make dragon scales, this one being made with a reptile texture brush and a few layers underneath.



I also found a cloud brush makes nice looking clouds very easily.



Here are some of my favorite brush packs so far:

Rakurri Brush Set V2

FizzyFlowers Essential Brushset V2

Grass and Fields Brush Pack - KMC Visuals

Basic Cloud Brushes - Bea2


     Fri Aug 9, 2024

For the past month or so I have been learning Spine 2D. Spine lets you create skeletal based animations, which can greatly reduce filesize compared to using spritesheets. It also makes it easier to create natural feeling animations, as it can interpolate between keyframes for you. Spine pro also supports meshes and mesh deformation, which can be weighted to bones so moving a bone can deform specific vertices

Here is a small example of making a butterfly animation

1: Source Image

2: Dissecting it in Krita

3: Rigging each part together in Spine with a skeleton

4: Keying the animation in Spine



       
     
           

Pinned Loading

  1. breakout breakout Public

    Breakout made with Phaser

    TypeScript 3

  2. digitalrain digitalrain Public

    An implementation of "Matrix Digital Rain"

    JavaScript 1 1

  3. simple_sockets simple_sockets Public

    A socket.io chat application

    JavaScript

  4. flowerpaint flowerpaint Public

    Draw with flowers on a Canvas

    TypeScript

  5. designsbytabitha-nextjs designsbytabitha-nextjs Public

    Portfolio of Tabitha Bernard

    TypeScript