HTML

React Query

react-typescript

Typescript

ChatGPT

styled-component

Study Notes

NextJs

today i learned ( TIL )

groq

Phaser

Game Development

ReactJs

Javascript

At the moment the missus uses a worksheet to store her tasks and meeting notes for her work. This application will help her store it on a cloud database for portability and additional features that she wants like sorting by categories or adding priority level to her task.

My goal for this project is to learn the NextJs Server Component use Appwrite as my database and do all my code using Typescript.

A task list application for storing work-related tasks and notes. Unlike a simple to-do list application this will be able to add categories and priorities for sorting and reporting purposes. 

Tasks List

You can use google fonts in your Phaser game

Download the google font and import in your game assets and preload them.

Without downloading and adding fonts file in your asset you can also use google fonts CDN and add it to your 

Why do you need to preload them fonts? Well Phaser renders text to canvas element and your font must be fully downloaded and loaded into the browser memory before Phaser draws the text.

Bitmap text is a image of letters that are created for the purpose of using them as alternative font for your game or any old digital interfaces. But in this case we’re using it for our Phaser game.

This is very straight forward to preload the image and it’s data file if any.

A data file is a file with details of the specific characters coordinates. But this data file is not always needed specially if your text / font used a fixed-width grid layout.

Next is to create or draw the bitmap font to the game. If you’re using the custom font you’ve imported and doesn't have a data file you’ll need to add configuration so Phaser knows how to draw each letters.

If you have bitmap text data file ( as long the xml or json follows the correct data pattern with Phaser) you don’t have to do this the config setup dance

It really depends on your need for your game. If you want to use specific font that is only available for you or you made it specifically for your game then I suggest better use bitmap import. But in most cases default font for the browser will suffice.

Sometimes the free font from google or the default Phaser mono font is not enough for your game and you wanted to use your own made font ( even though its ugly ). 

Building Game with Phaser: Integrating Custom fonts for your game

In a Zelda game, some enemies are triggered when Link comes near on the range of enemy. Either they attack with arrows or move to where Link is and attack. I want to try this to my game, but mine is just a simple one, I wanted to make enemy move to the players place and do an attack.

This method checks for the pixels distance of object 1 and object 2.

 here because I just want to know points between the two object. There’s a lot of other type of function you can use. ( check the Phaser official 

Move the enemy object to specific destination or in our case the player object.

With that in mind what we need now is animation for your enemy

So what I’m doing is when the distance between the two object ( player and enemy ) is 

 the enemy object will move next to the player object.

This is post is just the gist of it, there’s a lot of other scenario that you can think of from this, like adding attacking functionality when enemy is beside or near the player. This is just the basic way to make a enemy or object move to a certain destination.

I wanted to make enemies move to the players place and do an attack.

Building Game with Phaser: Enemy Range Detection

 on google verse about how to implement player climbing ladder. It’s very straight forward particularly the 

 statement to check if the player status is climbing, walking or jumping then made a lot of rules if what to do if player is on or inside the ladder ( read the article it's much more than what I wrote ).

Though I have different setup, I didn’t really use 

 so I ended up spaghetti code ( you’re welcome ).

When you want to make to object clash you use 

 . But ladder? it overlaps and collides. Collide with the top of the ladder so player can stand on them, overlap so player can walk through them and climb them.

I used the helper function from the example in the article, to check if the player is on top ladder.

check as process callback to check whether the player is on top of ladder or not.

For overlap I continuously check them in 

 if the player and ladder object are overlapping / touching.

To actually climb the ladder player object gravity is set to 

 so that we can pass this status to the player object and allowing us to move into the zone up and down.

 we can make the player move with up and down.

This works for me at the moment, I spent a great time implementing this as I don’t want to use state base for player which I think much more easier if I did state based. But I persist and came up with this piece of 

Note as well when building the stage or level for your game with ladders make sure you have even platform and ladder height because I got an issue before that the player fell down and got stuck into the ladder when you’re just trying to walk the top of it.

How to make a ladder in a platformer game.             

Building Game with Phaser: Player and Ladder

Every project I do starts with a plan, even though I have to adjust it along the way. I just wanted see the picture and in writing the things I wanted to do in a project. A to-do list of things that I’ll be needing to finish the project.

 tutorial actually starts you with a platformer game to build. So its just easier to follow up on that while what I’ve learned are still fresh in my brain. I just uses different style, sprites and used new theme.

For me this is easier repeating the previous project that I’ve followed before, and just apply new stuff for additional learning.

In the player perspective the game is very simple and very easy. You’re just collecting things and avoiding moving obstacles, then move on to the next level and then you finished it after 5 levels. That is it.

But creating the game takes some time and research, sometimes you hit some issue that even AI cannot directly answer you unless you change all of your code. The learning process of game development is very long and I’m just starting and just learning the very basic part. 

If you have used html canvas before the Phaser game will not be that overwhelming, I’ve used canvas before so putting things in the screen and moving them pixels by pixels are not new to me. The Phaser have a lot of things of course but it helps knowing few canvas knowledge.

Building a game is like directing a screenplay

You have to direct everything where the player should start, the enemy should move, the objects, the limitation of your objects, the opening and closing transition from first scene to the next scene.

Every time you move something dynamically is pixel based, even static text is pixel based.

Physics makes the your game world go round 

It’s pretty interesting to work on physics object though a bit hard for my part as you have to learn math again and I just used on working building websites and applications, so there is not so much physics involved. So this time there’s new stuff I’m learning when it comes to doing code with physics and relearning math is plus.

 is a separate software that you can use to create your level. It’s very helpful on displaying your level so you can actually see it instead of laying down sprites one at a time in your code ( which you can do if you want ). With Tiled you can add layers of background, object and player spawn point. You can add attribute to your objects for collision and purposes so you don’t have to do it manually on your code.

Invisible wall is useful for limiting objects movement 

Invisible wall can be added through the Tiled software this is very useful if you want to limit the enemies movement so they don’t drop down on a platform.

Animating things is easy if you have a good sprite sheet to use 

 they have a lot of you can use for your game development. Just don’t forget to give credit to the authors.

As a web developer I’ve never really used Class based programming before with Javascript as I’m usually use libraries that usually are Function based like React, Vue, and Svelte. So Classes is new to me and I like learning it now as I think other game development tool uses classes based as well like Godot or Unity.

The game is very simple you use your right and left arrow key to move, up arrow keys to jump and space bar to use your jet pack. Then try to collect all pink diamonds in the level to move to the next one while avoiding moving enemies. That’s it, pretty simple.

This game is enough for me and I don’t need to modify it anymore ( though there’s a lot of things myself wants to change but I wont be able to finish this ). I think for now these are enough as a proof and I want to try new kind of platformer game where camera is moving with the player.

After finishing my study session for Phaser, I started to create a simple platformer game. Just to apply all the things I’ve learned so far.

Building Game with Phaser : Platformer

In the first month of this year I decided to learn about Game Development with JavaScript as the language. The goal was simple learn how video games actually work and rediscover my love of programming and building things and learn JavaScript OOP.

I decided to use a language that I’m already “comfortable” with which is JavaScript. I quoted “comfortable” because during this journey of rediscovery I’ve learned that I’m not really that comfortable with JavaScript, I’ve learn so many new things that I didn’t usually use like class based programming.

With that in mind, I went and research about different game development frameworks that runs on JavaScript. I decided to use Phaser because I wanted to do the coding and learn the ins and outs of video games concepts and design. Instead of learning a new tool like Godot or Unity as there’s a lot GUI to know though Phaser have their own editor, I wanted to do much on coding than relying on tools GUI.

The very first thing I did was to learn using the 

, which is really informative and beginner friendly. And then after that I supplied it with AI and asked it to create a study plan for me that I can finish with 4 weeks ( but was able to finish in 8 )

This is the study plan AI created for me which is pretty good, easy, digestible and almost complete, just need some follow up questions, additional information and personal research as I go, which is why I didn’t finish it on time.

 repository on how he creates Phaser games. I recommend his channel as he explain it in so much detailed and I also to check his repositories as his file organization where pretty solid.

This is the start of a new learning series for me which I will call “Building Games with Phaser”. I’ll posting more about how I built a game and showing off the Demo if I finish a game. I’ll try to be more detailed on what’s the game is about and what I’ve learned during the process.

My journey to learning game development with JavaScript and Phaser.

Game Development with Phaser

Sometimes you don’t really know what error your backend or API is providing so Typescript will question the type on your 

 block your using so this are the different types you can use.

 as type is available as the errors type but this is discourage due to the loss of type safety.

 keyword is also available but also may loss of type safety and makes a runtime error if your assumption is incorrect

if you have a strong idea of the error’s origin and certain that specific type of error will be thrown you can use the 

 forces type narrowing. Before you can access any properties or call any methods on caught error, you must first check its type.

checks whether an object belongs to a particular class or its subclasses

Sometimes you don’t really know what error your backend or API is providing so Typescript will question the type on your try...catch block your using so this are the different types you can use.

TS Basic: Typing Errors in Try-Catch

Type utilities you can use to transform types or make them more reusable. These are set of built-in generic types.

creates a new type by excluding specific properties from an existing type

creates a new type by selecting a specific properties from an existing type

create an object type with specific keys and values

this utility can be used to map the properties of a type to another type

 meaning the properties of the type cannot be reassigned.

https://www.typescriptlang.org/docs/handbook/utility-types.html

TS Basic: Utilities

Narrowing refers to the process of refining the type of a variable or expression based on certain condition. It’s allow us to filter more specific assertions about the type of a value enabling better type checking.

In a nut shell this is a condition statement that compares the type of a variable incase of that variable has different kind

it is useful for quickly distinguishing between different primitive type like string, number, boolean, undefined and null

refers to a type narrowing that occurs when you use a truthy or falsy value in conitional statement.

a type narrowing that occurs when you use equality or inequality operators to compare value.

you can also define your own type guards using type pedantic

custom type guard allows you to define your own logic for narrowing based on your specific requirements. Especially useful when working with complex data structure

TS Basic: Narrowing

 a CSS property that we can use to adjust the underline on your underlined text. Usually what I do is add a 

 instead on the text if I wanted to add a gap between the text and underline which is not really the best solution on some cases.

https://caniuse.com/?search=text-underline-offset

CSS property that add spacing on your underlined text.

TIL: text-decoration-offset

? And why I’m starting my post like this? I read too many self-help books I guess.

consider using type for your React Component Props and State, for consistency and because it is more constrained. - 

Always use interface for public API’s definition when authoring a library or 3rd party ambient type definitions, as this allows a consumer to extend them via declaration merging if some definitions are missing - 

type level can also be extended by using the intersection syntax 

notice the type annotation User & { posts: Post[ ] } this is the syntax for intersecting two interface / type

you can also do something like this, making it more readable

In the end, it depends if you want to use 

as a rule of thumb is to use them consistently within your code. Whether you use only 

.Using them both will have no issue except for your code consistency.

When do we use type vs interface? Which should we use? When do we use type and interface? And why I’m starting my post like this? I read too many self-help books I guess.

Posts