Peasy-UI

One of the key libraries that I’ve been using lately in my projects is Peasy-UI.  It is a small and simple UI binding library.  Essentially, you can create a template html framework, and bind almost any aspect of the html to a data store.  Mine is just an object called model.  I view it a similar relationship to React and how its state is bound to the UI.  When I update a value in model, the UI automatically updates to reflect that.

Peasy-UI has several benefits, it can be used to control what’s being rendered via a Boolean value or a getter that evaluates a condition to a Boolean.  You can bind CSS strings to Peasy-UI, so you can control CSS properties.  You can bind UI events as well.  Very powerful tool to be fair.

Since it controls what HTML gets injected into the DOM, I use it usually to mimic a SPA application, because I can swap out entire pages of content by changing a value in my data model.

I will use Peasy-UI to manage how objects are rendered to the screen… i.e. player character, asteroids, bullets, enemies, etc…

It will control sprite sheet animations, any HUD elements, like health, lives, ammo, score

It will control what is displayed between states as well, menu, settings, about screen

Peasy-UI is available on npm, as well as found from:

NPM: https://www.npmjs.com/package/@peasy-lib/peasy-ui

GitHub: https://github.com/peasy-lib/peasy-lib/tree/main/packages/peasy-ui

Fixed Step Engine (FSE)

The next block of code I’m going to put in is the game loop.  The game is the master game routine sequence that runs over and over, and you check on each game system each tick.

Simple games use simple game loops, which could be a simple setInterval function.  Or if using a requestAnimationFrame based loop, if you ignore the delta time, then your game speed is more closely tied to refresh rate of your display.

There are performance issues coupled to doing this, so we are going to use a fixed step engine.

The FSE uses the delta time from each loop call and based on a fixed amount of elapsed time, proceeds to process its update calls to each system in the ECS… which we haven’t established yet.  For right now we will just mock up the game loop code in the Game state, of course, this doesn’t apply to the starting menu.

Post coding edit:  I had to relearn a lesson again.  That arrow functions and classic ‘function’ functions in a class are different.   My FSE did not have an instance of 'this' defined until I switched the FSE to the fat arrow format.  I learned that a while ago but forgot.  I don’t want to forget again.

Twitter: @jyoung424242

SlideShare: https://www.slideshare.net/JustinYoung3/next-gen-asteroids

GitHub: https://t.co/utxHxXKdOz