Ryan KubikBlogTwitterGames

Games & Code

I write about things I learn here. Usually these things are related to programming and making games.

What I played in 2020

6 min read - January 7, 2021

It's that time of year to reminisce about some of the games I've played in the past 12 months. Which games left the biggest impressions on me These are the games I remember the most vividly when I think back about what I played this year. I didn't rank the following games against each other, I pick...

Read more...

Bose QC35 II: Fix Static Issue, Reinstall Firmware, and a Short Review

TIL - 3 min read - September 17, 2020

My problem I was having an ambient static noise in my QC35 II's ONLY when connected to my Macbook Pro, not when connected to my iPhone. Additionally, the "action button" on my headphones that should change noise cancellation levels was non-functional. * Skip my debugging steps, and head right to t...

Read more...

Don't Mix React Synthetic Events with Native DOM Events

TIL - 4 min read - June 6, 2020

I was stuck on a problem for a few days on a side project in React that had me questioning my understanding of how event propagation works in JavaScript. This article by Gideon Pyzer saved my sanity. I'm going to summarize my understanding of this issue here so hopefully I can find this quicker in ...

Read more...

Using Design Pillars to Keep Wildfire Swap's Development on Track

5 min read - May 27, 2020

What are design pillars? I'm not sure where I first learned about the concept of design pillars as a game design strategy, but it's definitely been floating around for years. Different sources define design pillars in different ways, so here's the definition I use. > Design pillars are the 3-5 core...

Read more...

Clean up your Twitter Experience with TamperMonkey

8 min read - April 29, 2020

The longer Twitter exists, the more new features appear that I just don't have any interest in using. They're either designed to keep me from ever leaving the website, or I'm just too set in my ways to try something new. Either way, I don't want to see them! With a bit of JavaScript knowledge and a...

Read more...

Wildfire Swap March 2020 Newsletter

NEWSLETTER - 4 min read - April 2, 2020

Wildfire Swap March News Hey everyone! I think this has been an incredibly weird month for just about everyone in the world. We've been working on Wildfire Swap during these times but its definitely been a little more challenging than usual. Currently, we're working on tightening up the new mecha...

Read more...

Scale and Center Pixel Art on the Command Line

TIL - 4 min read - March 27, 2020

I've been working on art more often for my game projects. I find a lot of the times, it's inconvenient or impossible to export my art assests in quite the right format. This leads to either a lot of manual fiddling in art programs' export settings or fiddling in image editing tools after the fact. E...

Read more...

Wildfire Swap February 2020 Newsletter

NEWSLETTER - 4 min read - March 3, 2020

Wildfire Swap February News Happy leap month! We've been meeting regularly this month to get the first draft of Wildfire Swap ready for the end of the month. There are 75 levels in the first draft that we ended up with at the end of this past month along with a ton of new audio assets. To celebra...

Read more...

Wildfire Swap January 2020 Newsletter

NEWSLETTER - 4 min read - February 5, 2020

Hope your first month of 2020 is going well! We're getting back into the swing of things putting Wildfire Swap together. We're on track to have our first rough draft of all the content in the game ready by the end of February! Currently, Drew is working hard to nail that down. I'm working on litt...

Read more...

A review of 2019 and a plan for 2020

10 min read - January 30, 2020

I did my first personal retrospective last year looking back on 2018. I found it useful to spend some time thinking about what I got out of 2018 and how I could make the most of 2019. Looking back on last year's retrospective, I think I was overly focused on being "successful". The trouble was that...

Read more...

Wildfire Swap: A puzzle game inspired by fires in the Pacific Northwest

4 min read - November 27, 2019

Wildfire Swap is a puzzle game about swapping tiles to prevent fires from burning down people's homes. While showing Wildfire Swap to folks, I've gotten recurring questions about what inspired this game. This post dives into that inspiration story and looks at where Wildfire Swap came from. The I...

Read more...

Testing for a Race Condition in Async/Await Code

TIL - 2 min read - October 31, 2019

Race Conditions Sometimes a series of asynchronous functions in an application must execute in the correct order for the app to work correctly. If an earlier function in the series does something like make a network request, that request could run slowly sometimes. Since the functions are running at...

Read more...

Showcase Season Retrospective: Wildfire Swap at SIX & XOXO 2019

23 min read - September 30, 2019

Its been a wild couple months of showcasing and preparing to showcase my game, Wildfire Swap. I wanted to take some time to reflect on this experience of showcasing my first commercial project. Hopefully there's some insight other folks can gain from this. This post is a long one already so I won't...

Read more...

🎣 useRefState Hook - Access state outside of a component

TIL - 3 min read - September 3, 2019

What's the current state? I ran into a situation where I needed to use the value state of a useState hook inside an event handler callback. The callback would execute later on after an event was triggered. By this time, the value of my state would have changed. This is where my trouble began. I was...

Read more...

All the Indie Puzzle Games at PAX West 2019

2 min read - August 29, 2019

I'm headed to PAX West for the first time this year. I put together this list of all the indie puzzley games I'm aware of at the showcase events during PAX weekend. If there are any I've missed, please let me know so I can update the list. If you're into indie puzzlers like me, definitely check out...

Read more...

Accessibility for Games - A Jumping Off Point

TIL - 5 min read - July 4, 2019

I posted an open question on Twitter recently asking for accessibility resources that could help me get a deeper understanding of that world in games. Unexpectedly, I got a ton of helpful links and comments from peers and industry professionals alike! I thought it made sense to catalog these resourc...

Read more...

Using the Regex Global Flag with Test

TIL - 2 min read - June 26, 2019

Using regexes in JavaScript can be tricky! One new gotcha I ran into today involves the usage of the g or global flag. The global flag matches against all occurences of the regex. This can be useful to find how many times a regex is matched inside a phrase. You can enable the g flag in a few ways: ...

Read more...

When was this file added to version control?

TIL - 2 min read - May 11, 2019

Git provides a lot of information to you about the history of your project. Much of this information can be accessed using git log. By default, running git log will show you all the most recent commits on your branch in reverse chronological order. Meaning, the most recent commits show up first. T...

Read more...

Host a simple local web server using http-server

TIL - 2 min read - April 4, 2019

Sometimes when you're developing a application it can be helpful to run your project on a web server. Often running that server on your local machine is easier and faster during development. It lets you avoid uploading your work in progress files and setting up a complex build system. Enter http-se...

Read more...

Create a Custom ESLint Rule: Automatically Share Your Team's Tribal Knowledge

6 min read - March 8, 2019

ESLint is a tool built to provide linting of JavaScript code. Linting is a form of static analysis that detects patterns in code that could cause errors. By running ESLint as you write code you're able to catch these errors without even running your code. This speeds up development time and helps yo...

Read more...

How to Resize Pixel Art on the Command Line

TIL - 2 min read - February 18, 2019

I've been doing a bit of pixel art lately in my gamedev projects, like Wildfire. This generally ends up with me creating art that is something on the scale of 32x32 pixels. But its viewed at resolutions much higher than that in game or when sharing on Twitter. I've been searching for an easy way to ...

Read more...

Deliberate Game Jamming: A Global Game Jam 2019 Retrospective

11 min read - February 4, 2019

Jam With a Plan The more game jams I enter, the more my jam objectives have changed. Early on, I was motivated to learn how a game could be built at all. Then I wondered how to build something with a team. Lately, I've been trying to figure out how to make something that is finished and polished. P...

Read more...

A Personal Retrospective for 2018 and a Goal for 2019

11 min read - January 9, 2019

A Personal Retrospective I read a post by Jason Lengstorf about doing a personal retrospective of his 2018 yearly goals recently. The general idea is to answer three main questions about your previous year and the upcoming year. * What went well? * What didn't go well? * What will we change goin...

Read more...

Using Jest with Parcel Bundler

TIL - 2 min read - December 31, 2018

What is Parcel? Parcel is a "zero-configuration" web application bundler. Its a very convenient alternative to a tool called Webpack. Using a bundler for your web application provides a lot of useful features like Hot Module Reloading, ES6 Transpilation, splitting your JavaScript into multiple files...

Read more...

Cascadia.js Day Two Notes

TLDR - 8 min read - December 24, 2018

CascadiaJS was a single track conference of 24 amazing speakers discussing the cutting-edge of JavaScript, web development and engineering culture over the course of 2 days in mid November. These notes are from the second day of the event and the accompanying talks are now online. Even Faster: now ...

Read more...

Cascadia.js Day One Notes

TLDR - 5 min read - December 20, 2018

CascadiaJS was a single track conference of 24 amazing speakers discussing the cutting-edge of JavaScript, web development and engineering culture over the course of 2 days in mid November. These notes are from the first day of the event and the accompanying talks are now online. Reclaiming the Web...

Read more...

Modifying the Return Value of a Constructor

TIL - 2 min read - November 30, 2018

The new keyword does a few things behind the scenes to create a new instance of an object. One of these things is to invoke the constructor of the object being used as the source of the new. The constructor is a function responsible for building a new object to the specifications desired by its dev...

Read more...

Remove Local Branches Merged into Remote

TIL - 1 min read - November 5, 2018

git fetch -p (--prune) makes your tracking branches equivalent to those on the remote repository. After that, git branch -r (--remote) will list your tracking branches, freshly pruned. Tracking Branches > Tracking branches are local branches that have a direct relationship to a remote branch. Check...

Read more...

GPU Floating Point Sampling Error (Pixel Bleeding) & Tileset Extrusion

TIL - 1 min read - October 7, 2018

You can visually see the issue in this gif. Notice the black lines that appear as the camera scrolls town the tilemap. This phenomenon is called "Pixel Bleeding". Its caused by the GPU sampling a pixel outside of bounds of the texture, due to floating point rounding errors. You can resolve this ...

Read more...

Generate Array of Increasing Indices

TIL - 1 min read - October 2, 2018

This is a fairly simple function to allow the easy creation of an array of an increasing order of indicies. This was useful for me to set certain indicies of a tilesheet of sprites as collidable while leaving others untouched. new Array(length) lets you create an empty array of the specified length...

Read more...

Parse JSON with JQ

TIL - 1 min read - September 26, 2018

jq is a bash program that assists with the parsing of JSON formatted data. This example shows how to log the start script of an npm package to the terminal. Quickly view NPM Scripts in a repository cat will print contents of package.json to the console. cat package.json { "name": "repository", ...

Read more...

Conditional Breakpoints in Chrome Dev Tools

TIL - 1 min read - August 28, 2018

Right click on a breakpoint in Chrome dev tools. Click Edit Breakpoint. --OR-- Right click instead of placing a breakpoint, and choose Add Conditional Breakpoint. --THEN-- Enter an expression into the popup. When the expression evaluates to true the breakpoint will be triggered. sources http://...

Read more...

You don’t need standup

TLDR - 3 min read - August 15, 2018

Read it on Mediumby: palmerj3 Intro They recently became a technical product manager at Spotify and insituted an experiment: 1. No stand-ups 2. No planning at regular intervals 3. No retros 4. All meetings are optional Issues with Agile Ceremonies 1. Trello (or whatever you use) has to be ke...

Read more...

Choose a Random Number Between Two Values

TIL - 1 min read - August 15, 2018

A simple, but useful utility function to randomly choose a float (whole number with decimal) in a range. The output includes the low number and excludes the high number. // range: [low, high) function floatBetween(low, high) { return Math.random() * (high - low) + low; } From the basic random f...

Read more...

Pick Randomly From Array

TIL - 1 min read - August 4, 2018

In game development, especially demos where I'm not using a full library or framework, a very useful utility function is to randomly pick from a set of options. I usually accomplish this by defining an array of the options and using this utility function to randomly choose one. See it in action in ...

Read more...

Npm List Installed Packages

TIL - 1 min read - July 18, 2018

Listing npm dependencies with npm list is a handy feature to checkout what npm packages you've installed. However, by default this lists not only the packages you've explicitly installed but the entire dependency tree too. I usually only find myself looking for the top level packages I've installed ...

Read more...

Shadowhand postmortem – Top ten takeaways

TLDR - 2 min read - July 16, 2018

Read it Hereby: Helen Carmichael @bchezza & Jake Birkett @greyalien This article has ten different takeaways the developers learned while working on their solitaire game Shadowhand. I'm going to only mention a few excerpts from these points that I hadn't seen before. If you want to read about all t...

Read more...

The Atan2 Function

TIL - 2 min read - June 16, 2018

The inverse tangent function, Math.atan(), is useful to calculate the angle of a provided ratio of a sides of a triangle (like a velocity vector's x and y values). This can be useful to find the angle an object should be rotated to face in the direction it's moving, Math.atan(velocity.y/velocity.x)...

Read more...

Encode and Decode URIs

TIL - 1 min read - May 20, 2018

JavaScript has a lot of built in functions to handle common issues developers run into like manipulating URLs. I just learned about two pairs of conveninent functions: * encodeURI(url) * decodeURI(url) * encodeURIComponent(url) * decodeURIComponent(url) The encode/decodeURIComponent functions...

Read more...

JavaScript's Array Sort Function

TIL - 2 min read - April 19, 2018

Javascript's array.sort() function converts all objects in the array according to their Unicode code points. This means that by default, lowercase letters will be sorted before uppercase letters of the same value. This also means that numbers are not sorted numerically, but based on the value of ea...

Read more...

Basic JavaScript Finite State Machine

TIL - 3 min read - April 13, 2018

State machines make handling complex combinations of variables more convenient. Instead of handling every possible combination of states and actions you can only handle the particular combinations that make sense in your use case. This document explains the concept of a state machine in much more d...

Read more...

Where the Water Tastes Like Wine

TLDR - 1 min read - April 4, 2018

Read it hereby: Johnnemann Nordhagen Good Stuff Hire talented artists, voice actors, composers Bad Stuff Takeaways Don't relegate play testing to an after thought Think about pacing Hire/Try to work with experts in other fields, writers, business folks, editors, hiring people, etc. Don't just targ...

Read more...

How to Make Consistently Profitable Indie Games

TLDR - 2 min read - April 3, 2018

Watch it on Youtubeby: Ryan Clark Hooks * Include as many hooks/unique factors as possible. * Compare the hooks of successful and poorly performing games similar to your own to see what good hooks are. Market Analysis * look at games most similar to yours to get an idea what types of games a...

Read more...

You are spending too long making your game

TLDR - 2 min read - April 3, 2018

Watch on Youtubeby: Jake Birkett (@greyalien) Money/Hour spent optimization * Question: what about value based pricing? A casual hit A high dollar/hour spent on the game itself (guessing this doesn't count past investment in engine) * kept a small scope * worked for the target audience * mon...

Read more...

Json File Manipulation with Node

TIL - 1 min read - March 11, 2018

In my office we have some large JSON files that occasionally need duplicated updates in mutliple places. Node.js makes working with these files incredibly easy with two features. The first is that JSON files can be required as you import a module ( require('file.json')) and then manipulated as if i...

Read more...

Box-Sizing Property in CSS

TIL - 1 min read - March 1, 2018

The CSS basic box model describes the layout of elemnts on the DOM via content, padding, borders, and margins. The basic model is shown below. +---------------------+ | Margin | | +-----------------+ | | | Border | | | | +-------------+ | | | | | Padding | | | | | | +-----...

Read more...

JavaScript Void Keyword

TIL - 1 min read - February 14, 2018

The void keyword is an operator that evalutes the expression following it as undefined every time. The most common usage of this keyword seems to be as a way to access the JavaScript primitive value undefined as void(0) (it could be any expression, but (0) is convention). In most current developmen...

Read more...

Git Pull vs Fetch

TIL - 1 min read - February 8, 2018

Branches in git are just a pointer to the most recent commit on their branch. git fetch updates the remote tracking branches and downloads any new file changes into our local repository (but not into our local branch). These changes are not pulled into your current working local branch until you ru...

Read more...

JavaScript Bitwise Operators

TIL - 2 min read - February 5, 2018

The tilde (~) operator in JavaScript performs a bitwise not operation on its operand. Every number is represented by a series of 32 ones and zeroes called bits when bitwise operations are being performed. These numbers are represented in two's complement format. Two's complement format means that a ...

Read more...

Use NPM's .bin directory instead of globally installing dependencies

TIL - 1 min read - February 5, 2018

Until recently, I thought that npm modules with a command line interface needed to be installed globally before they could be used. I found an article (in the sources) that talks about creating an npm run cli-app command instead of globally installing. This works because npm keeps a .bin directory i...

Read more...

~ vs. $HOME in bash

TIL - 1 min read - January 19, 2018

While writing bash scripts I've noticed the $HOME variable being used instead of ~ . to reference the user's home directory. It turns out that ~ is just being expanded by the terminal into the $HOME variable anyway. Because of this, it appears to be more robust to use $HOME in scripts as it's not g...

Read more...

Mocking a property using getters and setters

TIL - 1 min read - January 19, 2018

This is the getter/setter pattern explained on MDN that I only recently learned existed. const test = { set val(val) { console.log('setting'); this._val = val; }, get val() { console.log('getting'); return this._val; }, _val: 0, }; Leveraging this pattern its possible to...

Read more...

Slice with a Negative Index

TIL - 1 min read - January 16, 2018

Slice can take in two parameters for the beginning and end index: arr.slice([begin[, end]]). The array.slice() function has some interesting logic when either of those parameters is a negative value. Positive index values start iterating from the beginning of the array while negative values iterate...

Read more...