Blobs in Games

From Red Blob Games

Tank Control experiments #

I'm still a bit sad about Flash going away. Yes, I know lots of people hated it. But it was an amazing tool for quick prototypes. There are some projects that I keep revisiting, and over time I'm converting them to HTML5.

Last year I converted my Flash procedural tree generator (succeeded) and attempted to convert my Flash spaceship flyer (failed). This time I wanted to run my Tank Control prototype from 2012:

Labels: flash

Making-of: draggable objects #

I noticed last year that some of my projects behave inconsistently on touch devices. I didn't do anything about it. But then I was working on a tutorial about how I make my interactive tutorials, I had to show how to handle touch events, and I was embarassed by my code. I decided to take a week to learn about mouse, touch, and pointer events.

That week turned into two. And three. And eight.

I learned a lot. Not only about the event handling spec, but also differences in browser behavior and operating system behavior.

I was able to greatly simplify my code by using newer APIs and by removing unnecessary code.

Labels: making-of

Making-of: circle drawing page #

People sometimes ask me how I write my interactive tutorials. I started out using d3.js, and five years ago I wrote an interactive tutorial about how I made interactive pages with d3.js. I recreated a diagram from my line drawing tutorial, which was implemented in d3.js. I now use Vue.js v2, so I wrote a new tutorial about how I make interactive pages with Vue. I recreated several diagrams from my circle drawing tutorial.

Labels: howto , making-of , vue

One letter variable names #

I admit I use one letter variable names in my code. But which names? Here's what I use in for loops:

# rg 'for \(let . ?=' 
#     | perl -pe 's/.*let //g' | perl -pe 's/=.*//g' 
#     | sort | uniq -c | sort -nr | head

509 i
132 x
122 y
118 r
 57 t
 53 q
 47 j
 43 s
 31 e
 14 k

Labels: code

What I did in 2022 #

It's time for my annual self review. It's been another weird year. Last year I said I was going to spend more time on experiments, art, and learning, and I would improve my existing guides.

Labels: annual-review

Introduction to hexagons, part 3 #

In part one, I described how I was making a new diagram for my hexagon grid guide, but that I didn't know how to evaluate the design choices I had to make. In part two, I described how I looked at the introductory section of the page to decide the purpose of the new diagram and how it fit in with the others.

Labels: design , hexagons , making-of

Introduction to hexagons, part 2 #

In part one, I described how I created lots of variants of a diagram to try to figure out which one to use on my hexagon guide.

Labels: design , hexagons , making-of

Introduction to hexagons, part 1 #

When I started making interactive diagrams the hard part was making them interactive part. But over the years I've gotten much better at that. Now the problem is designing the diagrams. A few weeks ago I was looking at the beginning of my hexagons guide to see what I could improve. I noticed this paragraph had no corresponding diagram:

In math, the "circumradius" is the distance from the center to a corner (I call this size); the "inradius" is the distance from the center to the middle of an edge, sqrt(3/4)*size. The "maximal diameter" is twice the circumradius; the "minimal diameter" is twice the inradius. Wikipedia has more.

My first thought was to add a diagram for this. I already have a diagram about angles, so I could add a diagram showing the inradius and circumradius:

Labels: design , hexagons , making-of

Connected Components #

Occasionally someone will ask me how to implement Connected Components, which is useful for several things, including

• determining whether there's a path between two points; if there isn't, you can skip running pathfinding
• finding the islands/continents on a procedurally generated map

It's actually a clever use of Breadth First Search. Every time the queue is empty, you find an unvisited node and put it into the queue, and then run the loop some more. When you have no more unvisited nodes, you're done.

Labels: pathfinding

Little details #

Back in 2019 I started a page with a list of all the little things I do on my pages. One of the things I have a problem with is that I don't finish something, and then I don't share it, and then nobody benefits. I'm wanting to share more partial projects. So I shared that page, even though it wasn't finished.

Since then I've added sections about

• coloring controls to match the diagrams
• state machines
• linkable sections
• arrows in svg, canvas, and outside the container
• two column layout
• backwards compatibility
• removing build steps
• adding build steps
• markup languages
• topic-based vs time-based projects
• pre-rendering
• meta tags for social media
• support for printing

https://www.redblobgames.com/making-of/little-things/

The page is uneven, with some sections being detailed and others being simple links to other pages I've written, but I am hoping it's useful for people writing explanations on the web. More importantly, I'm building it as a reference for myself. I'm adding code snippets there too, so that the next time I need a draggable svg, I can go to that page and grab the code, and also read about the gotchas that I might've forgotten to check.

Labels: making-of