Javascript on Nathaniel Inman

Async Await Chaining

Sun, 06 Jan 2019 00:00:00 +0000

Creating synchronously chained functions is straight forward. Codepen.

const UserCollectionSync = {
 find(id=''){
 document.writeln('1');
 return this;
 },
 update(){
 document.writeln('2');
 return this;
 },
 save(){
 document.writeln('3');
 return this;
 }
}
UserCollectionSync
 .find()
 .update()
 .save();

But when we decide to just throw some ‘async’ ‘await’ flags on those functions everything doesn’t work. FOLLOWING CODE IS WRONG: Codepen.

// delay is used to represent some asynchronous work
function delay(ms){
 return new Promise(resolve => setTimeout(resolve, ms));
} //end delay()

const UserCollectionAsync = {
 async find(id=''){
 await delay(1000)
 document.writeln('1');
 return this;
 },
 async updateFor(options={}){
 await delay(50);
 document.writeln('2');
 return this;
 },
 async save(){
 await delay(50);
 document.writeln('3');
 return this;
 }
}
UserCollectionAsync
 .find()
 .updateFor('')
 .save();

The reason it fails is because when the ‘find()’ is called it returns a promise that hasn’t resolved instead of the ‘UserCollectionAsync’ object (Factory pattern.) Therefor you can’t find a function ‘update()’ on a promise. One common way of solving the issue is by allowing the factory to maintain a queue and force the user to add ‘done()’ at the end of the chain: Codepen.

Generating Exhumed River Channel

Mon, 06 Aug 2018 00:00:00 +0000

I recently did some work in generating rivers in a 2d game. Revisiting this work to create an exhumed river channel, I decided it might be fun to revisit how to generate it to make the channel look more realistic. Instead of using a drunken walker, this is a more expensive but interesting map generator:

Start by generating 2d simplex noise where
less <0.6 is floor
rest is walls
Generate terminal lines at each map exit (north, south, east, west). Shuffle those lines and randomly choose a start and end location for the river based on two of those lines.

Later you can add another line with terminal point to allow a split river channel

Balancing Game Mechanics

Wed, 06 Jun 2018 00:00:00 +0000

Two of the most influential components to decreasing LOE in balancing game mechanics is automating the most essential parts of testing those mechanics, and providing meaningful and easy to understand graphs. Some meaningful questions to better lay the foundation of balancing and creating these components:

What are the actual ‘core stat(s)’ that identify survival? (Usually health)
What are the ‘ancillary stat(s)’ that help facilitate the increase or decrease that core? (damage, strength, dexterity, etc.) I’m assuming all actors here are equal and we aren’t comparing apples and oranges.
What are the ‘supplemental stat(s)’ that may contribute to the increase or decrease of the ancillary stats? (class, rank, level)
What are the ’extraneous stat(s)’ that don’t affect the other stats already identified.

I found that creating a tree by drawing lines connecting these identified stats provided incredible insight and direction.

Pigeon Hole Stepping v2

Tue, 08 May 2018 00:00:00 +0000

I had originally written an article on how to implement PHS. Having found the maps generated slightly redundant I decided to take another look. Here are the steps taken to successfully generate a more realistic town. It’s essentially a drunken walker like Diffusion Limited Aggregation mixed with a hallway constraint that mimics the large part of PHS.

Start somewhere in the middle, add this and all possible directions up to a certain dynamic length (I used a standard deviation of 1.4 with a mean of 5, ) as nodes: [{x,y,direction},...].
We will be looping until all nodes and edges (we’ll describe that shortly,) are gone.
When we have node then check to see if the path between it’s ‘x,y’ and ‘x2,y2’ (given the length and direction) is clear. If it is, then add the entire path minus the start and end as edges, and add the end as a new node. Shuffle nodes after adding a new one. After building the path run through the path array randomly attempting to build a room in all directions. (this won’t be entirely possible and will leave negative space to fill with edges.)
If there are no nodes, repeat step 3 except with edges (this helps fill the map negative space.)
After all nodes and edges are gone then cover all cells adjacent to floors with walls if it’s empty.

I found it helpful to use this simple formula to generate hallway lengths with a mean and standard deviation constraint. Both the x and y would work fine, here we’re using the y only.

Generating Ancient Ruins

Thu, 03 May 2018 00:00:00 +0000

While creating algorithms for random continent generation, I came across an old algorithm I had worked with called Coupled Map Lattice. Using that to create a continent was hard but I was able to accomplish it doing layers of filters:

generate map with noise between -1 and 1
apply CML using Spatiotemporal Intermittency settings

(a = 1.75, ε = 0.6)

I found that using something too chaotic didn’t have a noticeable affect compared to just generating noise in general.

normalize values to between 0 and 255 apply a gaussian blur normalize values to between 0 and 1 apply slight height restrictions based on distance to center of map

Angular was dead on arrival

Mon, 10 Jul 2017 00:00:00 +0000

I’m commonly asked why more people don’t choose angular2 which in my head I correct to angular. (we’re on angular 3 alread.. no, 4,… no.) Quite simply, the answer is Typescript. Whether we like it or not the majority of javascript developers in our field are new or mediocre developers who don’t have the time or cognitive ease to attempt to learn another language.

It was a huge mistake for the team to release the library with the small amount of constantly outdated documentation entirely in Typescript. Most stackoverflow searches for angular aren’t even relevant or accurate given the constantly changing api. Without good documentation, and so much irrelevant or outdated answers on stackoverflow these developers lose hope, and angular lost potential users.

Responsive Game Interfaces

Fri, 24 Mar 2017 00:00:00 +0000

It’s abundantly clear that making interfaces for portals, single page applications, analytics or CRUD apps is so much easier than creating applications for games. UX within games is much more complicated. Now add upon that complication a responsive design.

It took the better part of 8 hours to get a design mock-up that worked on the smallest iphone device (man they’re tiny!) and that scales up to the largest phablet. I still need to work on detaching the pane and having a more ‘diablo-esque’ two-pane character panel / inventory approach for desktop users.

Textures make a difference

Wed, 22 Mar 2017 00:00:00 +0000

I’ve been playing around with textures in exploring the bleak to see how much of a difference it would make. Essentially I’m torn between two ideas:

Make the floors all a plain color and glow them based on the environment color so as not to be too realistic and keep a more roguelike feel.
Struggle with having textures that blend together between sectors so it has a more natural feel albeit simple in perspective to traditional 3d games.

At the moment I’m leaning towards number two, but I haven’t been able to reproduce a reliable glow postprocessing effect that I actually like and that feels natural. I’ll follow down both roads further before making a discrete decision.

Building A Modern Roguelike in 2017

Wed, 08 Mar 2017 00:00:00 +0000

Building games has become easier to do with the increase in quality of tooling and specialization software. The unfortunate side effect is the developer has to become more trained and specialized in a variety of facets in order to maintain competency in the field. Ergo building games is also harder.

This year for the 7DRL competition I’ve been pretty lazy, which doesn’t help much to making deadlines. Setting aside playing games for making games I decided to finally venture into the competition whole heartedly.

Space Invaders Released

Fri, 02 Dec 2016 00:00:00 +0000

So I’ve recently compiled a bunch of my libraries together into a collection I call ‘ion-cloud’ available on ’npm’. In order to best test these, I’ve recreated my own adaptation of ‘Space Invaders’ available free to play here on my website by clicking the games above or here and ‘open source’ on github here.

Coterie Released

Wed, 03 Aug 2016 00:00:00 +0000

(Aug 3, 2016 Update: Coterie is now playable on mobile or touch devices as well. Play Coterie)

Growing up I deeply enjoyed two specific cards games: Triple Triad in Final Fantasy VIII and Tetra Master in Final Fantasy IX. Having some extra time this past week I developed a simple card game variant called Coterie. What started as an excuse to get more familiar with flexbox in css ended up actually being fun to play!

Cleaner complex IF Statements

Thu, 12 May 2016 00:00:00 +0000

Writing clean code like Uncle Bob describes can be complicated sometimes. So you have this long if statement that’s relatively simple in design but ugly to the eyes and somewhat hard to read.

if(
 x1>=img.left&&x1=img.top&&y1=img.left&&x2=img.top&&y2=lowerX&&x1=lowerY&&y1=lowerX&&x2=lowerY&&y2=a&&this=img.left&&x1=img.left&&x2=img.top&&y2=img.top&&y2r)){
 img.scaling = Math.pow(x1-x2,2)+Math.pow(y1-y2,2);
} //end if

At what point does sacrificing performance become worth it for code readability?

NPM Module: Jugs

Sat, 30 Jan 2016 00:00:00 +0000

App generator jugs makes development fun again! You can view the source code here.

Vite.js : Performant Module bundler with tree-shaking, hot module reloading & minification
Babel : Transpile modern javascript, formerly called 6to5
Eslint : Lint your javascript in its modern format
Stylus : Powerful CSS Preprocessor with a beautiful syntax
Ion-Cloud : A micro library for animations & game development

Simply install this app generator globally:

npm i -g jugs
mkdir appName
cd appName
jugs

File Structure:

Automata Generated Caverns

Fri, 13 Nov 2015 00:00:00 +0000

Randomly generated dungeons are a lot of fun to program, but sometimes they can be pretty difficult to originally wrap your head around. For this years 7DRL I added Automata Generated Caverns as one of the algorithms I wanted to figure out completely. You can read more specifically on the theory here.