Responsive design
Making Red Blob Games pages adapt to the browser size| www.redblobgames.com
Nothing here yet. This is a placeholder page. Look at the triangle grids section of my main grids page. Are there topics you’d like to see that aren’t on that page? Let me know! redblobgames@gmail.com or @redblobgames on twitter| www.redblobgames.com
Choose axis labels: | www.redblobgames.com
Graph search algorithms like Dijkstra’s Algorithm and A* work on weighted directed graphs, sets of nodes connected by edges that have numeric weights (movement costs) attached to them. Can they also work on grids? Yes: a grid can be viewed as a special case of a graph.| www.redblobgames.com
28 Nov 2022People sometimes ask me how I write my interactive tutorials. I can point at the HTML+CSS+JS but that doesn't show the process. On this page I'll recreate the first half of my circle drawing tutorial, showing an implementation using Vue.js v2[1]. The implementation style here will be similar if you use Vue v3 or React or Preact or Lit or Svelte etc. I also have another page showing an implementation using the D3.js/jQuery imperative style.| www.redblobgames.com
Mar 2014, updated Jun 2020Pathfinding algorithms like A* and Dijkstra’s Algorithm work on graphs. To use them on a grid, we represent grids with graphs. For most grid-based maps, it works great. However, for those projects where you need more performance, there are a number of optimizations to consider.| www.redblobgames.com
1 Python Implementation#| www.redblobgames.com
Over the last few posts I wrote about things I did to improve font quality, such as antialiasing and combining distance fields to merge outlines and halos. But I want to "pop up the stack" a bit and talk about one of the bigger goals for this project. I want to render text in styles that I've seen in maps, both online and offline, both fantasy and real. In particular, I want to apply spacing, rotation, and curvature to the labels. | Red Blob Games: latest blog posts
Learning about font rendering, I was looking at text closely last time, and I noticed another issue. The shadows of each letter overlap the previous letter. That's because I'm drawing one letter at a time. So for example in the fl, I draw the f's letter, outline, and shadow, then I draw l's letter, outline, and shadow. So l's shadow is drawn on top of f's letter.| Red Blob Games: latest blog posts
Last time I was looking at letter spacing with my renderer to see how it compared to Google Chrome on Mac. But while doing that I noticed that their antialiasing looked nicer than mine. So I tweaked parameters, including antialias edge width, gamma, and threshold bias.| Red Blob Games: latest blog posts
My summer project is to work on labels for maps. In the previous post I described how I created outlines, and how I had a bug in the rendering. While looking closely at text to fix that bug, I noticed in one of my tests that the k and s seemed too close together. The h and e seemed a little too far apart. | Red Blob Games: latest blog posts
In the previous post I introduced my summer project, to render labels on maps. As part of this, I want to be able to draw outlines, halos, and drop shadows. | Red Blob Games: latest blog posts
My friend L recently mentioned that he hadn't seen any blog posts from me. It's true, I haven't posted for a while. Earlier this year I had explored signed distance field fonts, in particular using Viktor Chlumský's multi-channel distance fields. I really enjoyed the many experiments I did, and I learned a lot. I had intended to use it in a real game project but the timing wasn't right. So I put it away. Then before I got started on a new project, life happened. I had to take a break and att...| Red Blob Games: latest blog posts
I had previously blogged about text effects, and how I accidentally discovered that I could alter the personality of the font by rendering a distorted shape. At the time, I was focused on text effects and didn't want to get distracted by this discovery. So I wrote it down for later.| Red Blob Games: latest blog posts
I have several pages that are unfinished because I can't find an explanation I'm happy with. Sometimes while trying to come up with an explanation, I realize I don't actually understand the topic as well as I thought! One of these topics is heuristics for the A* algorithm.While trying to understand the topic better, I came up with this example:| Red Blob Games: latest blog posts
You may know me for my interactive tutorials. But before that, I was writing visual but non-interactive tutorials. In particular, there wasn't a lot of information about A* on the web, so I decided to collect all my notes about pathfinding together in one place in the 1990s. But then in the 2010s I started making interactive pages. The newer pages are narrower in scope; I covered a broader set of topics on the older pages. I maintain both sets now.| Red Blob Games: latest blog posts
On my pages I often want to be able to move an object around in a diagram using the mouse or touch. Last year I spent some time learning about browser mouse+touch events, and wrote a page about event handlers for dragging objects around. I hadn't realized it at the time, but it was only half the solution.| Red Blob Games: latest blog posts
Earlier this year I was trying to improve font rendering in some of my C++ projects, and that led me down a rabbit hole of learning signed distance field (SDF) font rendering. I wanted to try out the SDF fonts in a real project. I occasionally help with Galactic Assault Squad (GAS), especially "engine" code, so for Week 6 I decided to try SDF fonts there.| Red Blob Games: latest blog posts
In Week 4 of the year, I tried out various ways of using distances in signed distance field fonts. In Week 5 I wanted to do something different. I decided to explore what I could do treating each character as its own sprite and then applying sprite antimation. The week turned out to be fun but I didn't learn as much as I hoped I would. To start, I copied the code from the previous week so that I would have a working program right away. Then I removed things I didn't care about this week and a...| Red Blob Games: latest blog posts
In the last post I described how I fell into the font rendering rabbit hole. | Red Blob Games: latest blog posts
Each week I pick one or two things to work on. In week 2 of this year, I decided I should update my "hello world" OpenGL+Emscripten code from 2015. It's boilerplate I use occasionally in other projects. It wasn't compiling anymore, and I wanted to fix that as well as several other things.| Red Blob Games: latest blog posts
Apr 2014, updated Feb 2015, May 2020, May 2024Running Breadth First Search with multiple start points can do some cool things. If you haven’t already read my page about Breadth First Search, that would be the place to start before reading this page. The ideas here are a modification of the algorithm presented there. Note that even though the demos on this page use a square grid, none of these algorithms is limited to only square grids, or even to grids.| www.redblobgames.com
This map generator creates volcanic island style maps. The simplest way to explore the maps is to click the plus/minus arrows to change the Seed.| www.redblobgames.com
For my map generation and some art projects, I want to scatter points around and then run Delaunay/Voronoi on them. Sometimes I want to add some boundary points to surround the scattered points.| www.redblobgames.com
4 Jan 2023Things to try with a mouse:| www.redblobgames.com
This diagram has a <text> and <circle> inside a <g>, and the <g> has an event logger. The reason I have nested elements is that you can see how pointerover/pointerout differs from pointerenter/pointerleave.| www.redblobgames.com
Interactive tutorial for A*, Dijkstra's Algorithm, and other pathfinding algorithms| www.redblobgames.com
Interactive tutorial about making interactive tutorials| www.redblobgames.com
1 Linear interpolation#| www.redblobgames.com
1 Hex coordinates#| www.redblobgames.com
26 Jun 2023Each summer the r/roguelikedev[1] community has a summer event[2] in which we all make a simple roguelike, roughly following the Python libtcod roguelike tutorial[3]. Last year I tried to clone Dwarf Fortress in 40 hours. That was too ambitious. But I did enjoy working on a “fortress mode” project more than an “adventure mode” project, so I’d like to do something like that this year, but with a smaller scope. Requires keyboard+mouse.| www.redblobgames.com
3 🖱️👆 Pointer events#| www.redblobgames.com
Pick a starting seed, then paint mountains, valleys, and oceans on the map! It will simulate evaporation, wind, and rainfall to determine biomes and rivers.| www.redblobgames.com
Interactive tutorial for using Simplex/Perlin noise to make terrain and biomes for a wilderness map| www.redblobgames.com
1 Tested algorithms#| www.redblobgames.com
Guide to math, algorithms, and code for hexagonal grids in games| www.redblobgames.com
When I started making interactive diagrams the hard part was making them interactive. But over the years I've gotten much better at that. Now the problem is designing the diagrams. Here's an example of how I created many variants of this diagram.| www.redblobgames.com
1 Visuals#| www.redblobgames.com
Jan 2006, then May 2021| www.redblobgames.com
