“Meme” Games

On one end of the spectrum will be “meme” games. These games will be developed using AI tools in near real-time. I imagine in my lifetime that kids will be able to talk to their devices and riff on a silly game idea and see it come to life. Anyone with a phone or headset will be able to see the same thing and the experience will be shared. Much like when I was a kid we had to use our imagination to “see” the same made up world, kids soon will be able to use speech and multi-modal AI tools and conjure these worlds. These games will prioritize speed and creativity over quality. Topical to the moment, hyper sharable, these viral games will not last much longer than the time it took to build them.

Future of AAA

On the other end, blockbuster titles like Call of Duty and God of War will still exist. These games will require larger budgets than they currently do now to develop and market. With high development cost fewer of these games will be made, and as a result, fewer large studio will survive. AI will be used to streamline some of the production process (code / art) and will also be a part of the games themselves. Imagine an RPG that has a pre-trained model for character dialog. The way you interact with the NPCs will alter the story every play through. The NPCs will start to feel like other players, able to hold conversations with each other and you. Player expectation for content and richness of story at this level is going to be immense. Games will be boom or bust and this risk will lead to a reduction in AAA studio staff with external development partners filling the staffing gap. While this is somewhat true now, see credits for any AAA game, the scope of work these partners will be responsible for will make them indistinguishable from core team. Aside from benefits.

Decline of AA

Caught in the middle are AA games like Call of Cthulu or Sifu. These games are relatively high quality and fill a creative niche. I would argue that their creativity and departure from what tends to be either the safe bets or relying on purely a visual quality bar of a AAA game is what sets them apart, for now. The reason this segment will be in trouble is that the creative niche games will be rapid fire in the, and the games will be trained and tailored to the people playing them. It will be hard to compete on creativity and impossible to compete on budget.

For developers like myself, this future is uncertain and I struggle to see how it will allow me to make a living. Just as people make memes for fun, they will be making games for the same reason. No longer a career, but a hobby, the thing you do in your free time. Speed, creativity, and first to market will be what matters, not quality. As a friend of mine said when we were discussing this topic, “Getting someone to pay for your game will be like getting them to pay for poetry”. AAA studios can still allow for a development career, one that will be demanding, exceedingly high bar, and almost no way for entry level people to be a part of it.

A Possible Exciting Future

All is not lost. The future for games and the creative explosion that will happen over the next decade is going to be exciting. Fueled by AR and AI technologies that will be everywhere. How we play games will be personal, sharable, interactive, and immensely creative. While I’m cautiously optimistic that games will be fine, the industry is going to evolve beyond recognition. So while the gaming landscape will see a dramatic change, the possibility for everyone to have the ability to share their game ideas has me hyped. Going from closed source game engine to Unity and Unreal, the barrier of entry continues to get lower. We’re soon going to see that barrier be non-existent.

Intro

There are a number of mental models one can use to improve decision making such as an Eisenhower Matrix, or Inversion. To find one that works for you you’re going to need to iterate and try them out. There’s no one method that will work for everyone, and any method will need refinement to you as the individual. There is also no mental model that fits all situations. The following is an overview of a high level process, they key part is to not spend more time than is needed in making any decision.

How Quick Can You Make a Decision

Step one is to assess how much time I need to spend making the decision. Starting with a decision matrix with axis reversible vs scope of work you should be able to, with in a matter of seconds, assess this time.

Example 1: Should we add a bug about a missing UI element?

This is a quick decision. Yes. There’s minimal work in adding the bug and worst case, we can simply close it out. Not adding the bug sends the signal that we care more about the noise in our bug tracker than we do the quality of the game.

Example 2: Should we hire this person?

This decision is both not easily reversible and has a high scope of work. Lots of things kick into motion for the company and the individual after this decision is made. This is where you want to take some time, at least a full day to mull over your thinking.

Once you’ve assessed how much to put into the decision it’s time to start to digging into the details. What context am are you missing? Do you understand the impact? Since you were unable to quickly make a decision in step one, it means there’s missing information. Whether it’s pen and paper or a text editor, it’s time to start clarifying your thinking outside of your head. You simply won’t be able to evaluate complex systems in isolation. Even if you could, documenting your thought process will help you refine it later, additionally, it allows you to look back at previous decisions to learn from them.

Example

Let’s run through a contrived example to see a potential decision process you might have.

It’s time to start the next version of your game and you know that during preproduction you need people who can excel in a fast decision making, rapid prototyping, highly collaborative environment. However, the people you know to be the best fit are supporting your live ops team.

• Do you pull the live ops people and backfill?
• Do you have someone else start the new project with an assist from the live ops team?
• Do you have someone else start but with no help from live ops
• Something else?

You start by inverting the question, rather than who should start the next version, you ask, who needs to support the live ops game, and what happens if they’re not there. When you ask this question you’re trying to identify gaps in your understanding of the impact of the decision.

With impact assessed you start to ideate and enumerate your options. To evaluate each option you make a quadrant diagram with Impact vs Effort and plot your options. The image below is a hypothetical Impact vs Effort matrix, where A-F are possible decisions you are evaluating.

To start, focus on the solutions that will have high positive impact and low effort. For instance, maybe you can redefine the scope of work on the live ops side to where it can be delegated to a trusted vendor. This frees up your live ops lead to begin focusing on the next game. Assuming the trust level with the vendor is sufficiently high and they’re already on the project, the effort to make the change might be low. For each option in the low effort, high impact category, began to think about the second and third order ramifications. In the example above, let’s say you pulled the vendor to take over live ops. What were they working on that’s no longer having effort put into it? What were they going to work on next? What’s the impact there? Was there dependancies in the work that are now going to become blockers? Maybe they aren’t able to get permissions to effectively support live ops. Or are unable to get equipment.

We might not be able to identify all the gaps in our initial assessment of a situation or solution, which is why we need to spend additional time evaluating how they play out. Once you have a few options you like, it’s time to run them by others. Never make decisions that will impact others in isolation. We all have blind spots and biases, working with others helps us identify them.

Now the last step. Pick one solution and live with the fallout.

Feedback on Ideas

In the example above, we saw the need to get feedback from others. This step happened towards the end, but it can, and should, happen multiple times throughout the decision making process. One method or eliciting feedback when wanting to effect change is called Nemawashi. Decisions affect change, they create branches, and Nemawashi is a great way informally gain new perspectives on these branches.

Another avenue for getting feedback is to discuss your situation with proposed solution and mitigation plans with someone who has been in a similar position, or is higher in the org than you. While it’s great to get their insights, keep in mind that the decision is ultimately up to you. If it wasn’t, you wouldn’t be the one making it. Don’t take their feedback blindly, make the decision and own the results.

There are times when you won’t be able to get feedback from others, say late night trying to finish a release build to QA, and you have to make an “executive” decision. But and “executive” decision is no different than any other. Going through a process, you have information that tells you why this is the best decision given the situation. And if you believe the decision is the right one by the project or company it’s the right one. You didn’t flip a coin, you thought critically about your choices. While it sounds flippant to say, if you are in an org that focuses on the outcomes of your decisions rather than your process, your growth will be limited.

Wrapping up

This whole process may only take a few minutes or hours. For a big decision such as a new hire, maybe a full day. Remember, the time you spend in making the decisions is proportional to the impact of getting it wrong. Given that we’re in game dev, and no one’s life is on the line, try not to stress too much. Also, most of us are not at the executive level, our decisions have rather small chance of resulting in layoffs or the cancelation of a project. It’s hard for a single decision to have that level of impact, those results tend to be from a number of small decisions.

With all this there are two perils to be aware of: decision fatigue and analysis paralysis. It’s easy to get wrapped up in wanting your decisions to be perfect, but don’t let perfect be the enemy of good. You will never make perfect decisions and it’s not a scorecard; number of “good” vs “bad” decisions. You will always make the best decision you could with the information you have at that time, with hindsight you will always be able to reason about a “better” decision. The point of a processes is to allow us to evaluate that information more effectively and over time refine our ability to make decisions with more confidence.

Further Reading

• Practical Ideas Better Decisions
• Decision Anatomy
• Decision Matrix
• Smart Decisions
• How to Make Great Decisions Quickly
• The Importance of Small Decisions
• Good Strategy Bad Strategy
• Thinking Fast and Slow

1. Non-Diegetic
2. Spatial
3. Diegetic
4. Meta

If you’re looking for a more in depth description of each, check out Code Changers.

Non-Diegetic

For an example of non-diegetic UI I chose to implement a classic “health bar” and “energy bar”, these specifically were inspired by Forbidden West which I happened to be playing at the time. The goal of this exercise was to learn how to use size boxes and horizontal / vertical boxes. I did’t build this in modular way. I wanted to go the quick route, focused more on building it versus building it right. Regardless, there were a few lessons learned.

Lesson 1: Size boxes are great. Not just for overriding the width and height, but specifying desired size combined with aspect ratio makes them, pardon the pun, rather flexible. The majority of UI’s I’ve built over my career have all be based on specific pixel dimensions. The main utility of size boxes so far for me as been blocking out UI elements. Rather than using images. Size box + a Common Border set to Draw As box is a quick way to prototype layout.

Lesson 2: Horizontal box and percentage based fills. Coming from iOS with horizontal and vertical stacks these behaved in a similar manner. If the box is set to fill, then each element will initially be greedy and attempt to fill the space. In each element you can specify a fill value (0-1) that specifies it’s preferred area to fill. For example, if you have 3 widgets all set to 1.0 for their fill, each will take 1/3 of the total area. If you set one of them to 0.25, you’re saying 0.25 of 0.33. While at first it’s not intuitive, once you’re used to it’s easy to work with.

Lesson 3: My background in laying out UI elements has primarily come from iOS app development and web development. UMG’s layout system is rather intuitive if you share a similar background. I found joyrok’s site incredibly useful in the way they break down different widgets and their various tips. 100% worth a read.

Spatial

Spatial and diegetic only differ by the avatar’s perceptiveness of the widget. That is, if the avatar would be aware of it in the world. Unreal makes building these kind of UI element trivial.

Since implementing this UI was easy, and there wasn’t much to learn from it, I wanted to get it to billboard (see the first minute of this video for an explanation). Implementing this was actually easy and as straightforward as you’d expect. Get the position of the player, get the position of the UI widget, find the look at, set the rotation.

Diegetic

I always find diegetic UI interesting. The purpose of UI in games is to convey information in a readily available way. The health bar in a fighting game is prominent to the point you can see it in your periphery while focused on the fight. Diegetic UI however lives in world as is just as much a part of it as the player. So it needs to be clear that it’s a “UI” element, but still feel like it belongs in the world. The most recent game I’ve played that I think did this really well was Stray. The use of wall art and neon signs to guild the player through the world was so well done that after you see the first couple you start to be on the look out for them.

Meta

Meta UI’s are what you would see in an an old school JRPG when a character is talking to you. While setting up this UI is no different than setting up a non-diegetic UI, it’s context is what separates it from non-diegetic. Rather than simply implement another widget in screen space, I thought this would be a good time to learn how to create a render-to-texture in Unreal.

A render-to-texture needs two things: a camera to do the capture and a target to render the capture to. In Unreal you can set this up by doing the following:

1. A camera that will be used for the capture, in Unreal this would be a SceneCaptureComponent
2. Create a RenderTarget asset
3. Set your SceneCaptureComponent render target to the RenderTarget asset in step 2.
4. Right click on the RenderTarget and choose “Create Material”

After that you’ll have a material that you can use in your UI or anywhere else.

Wrapping Up

I hope you found some of this useful and informative. Building small examples / demos helps reinforce what you know and what you don’t know. They’re a good way to slow build competency in a given area. Next time you’re playing a game see if you can identify these types of UIs.

In a previous post on intersection testing I describe a UI widget that would always point to an element on a map. It was a long weekend for Pipeworks (Indigenous People’s day here in the U.S.) so I decided to spend some time in Unreal and implement a rough version. Source is available on Github.

In the screenshot above we take the mid point of the “map marker” (green box) and project it onto the right side of our “info box”, intersecting at point PP (projected point). The way dragging and dropping is implemented in Unreal I found it best to work was with the absolute coordinate values of the “info” view and the “map marker” view. The marker is a a part of the map hierarchy, where as the info box is a completely separate entity in the viewport.

I was nearing a breaking point this weekend, contemplating going back to UMG when I stumbled across this forum post. In the Blueprint Keeps Losing Parent post, which was unrelated to Common UI, the group comes to the conclusion that the bug is a side effect of the Live Coding feature introduced in UE 4.22. In other side projects I have Live Coding disabled as it’s caused a number of frustrating issues when opening the editor. For instance working on my intersection testing demo, actors like NearestPointToLineActor would fail to load and would result in a broken Level file. Since then I’ve been disabling it, but forgot to do so in my Common UI playgrounds. Disabling Live Coding as “fixed” my issue. I just need to make sure run through Visual Studio rather than launching through the Epic Launcher. If you really need Live Coding enabled and you run into this, here’s a “quick” way to fix things up.

1. Hope you’re using source control or have a backup
2. Close the editor
3. Delete corrupted blueprints
4. Rebuild from Visual Studio
5. Open the editor or launch from VS
6. Force sync / replace corrupted blueprints from backup while the editor is open

The only annoyance I’ve run into with this workaround is that I had to manually fix up any Blueprints that had a Create Widget node as the out value from them was broken.

I love Elden Ring. For me the best part about the game isn’t FromSoftware’s design around crushing difficulty, but their other skill; story telling. The lore of Elden Ring spreads out like a web. To get a “clear” picture you have to find bits of lore in weapon descriptions, side quests, and boss dialog. The only issue with all this is 1, Elden Ring is massive and you’ll need to scour every nook and cranny of the map, and 2, you have to progress in the game. Elden Ring has a wonderful story and it’s a bit of a shame it’s guarded behind the difficulty.

Let’s imagine a world where more people get to experience this game. Where sharing of lore is put in front of the difficulty, priority-wise. Let’s look at just a few features that would get us closer to the Elden Ring of my dreams.

• No damage
• No falling
• Shaders
• Controller remapping

No Damage

One of the cool, but sometimes overwhelming things about Elden Ring is its use of vertical space. Dungeons nestled into cliff sides, castles and dungeons where there may or may not be something under a lift, etc. For example, there’s a spot in Caelid where a cave entrance is along a cliff wall.

When trying to approach the branch you’re probably going to be attacked by the Abductor that’s nearby. The narrow catwalk is easy to fall off and there’s nothing worse than being chased while trying to navigate these branches. So it would be great if you could clear this enemy out first. These enemies are pretty notorious, especially at lower levels and there’s a couple of giant dogs around that can get aggro’d while you engage with the Abductor. I think this setup is intentional with respect to design. You have to choose, move quickly / sneak across the branches or fight the enemies. This creates tension for the player, but sometimes you’d rather just explore. These risk reward moments are a big part of FromSoftware games and I’m not saying they shouldn’t exist, just it would be nice to not have to deal with them once in a while.

No Falling

Speaking of that Caelid Abandoned Cave…the approach. I have fallen off these branches more times than I really care for. Whether it’s my own ineptitude, disagreements with Torrent, or what I would consider odd collision pushback, it’s happened a lot. Another example of the risk / reward design mechanics of FromSoftware’s games. Do you risk falling off the narrow walkway and redoing all the things it took to get there, or skip the area? I’m all for practice makes perfect, but we’re talking about exploration. We’re not training, we’re trying to take a stroll around the lovely park that is Caelid. Having the option to not inadvertently fall to your death would be great. Because of the use of vertical space we still need to be able to fall, but the game could have an option that prevents the user from falling to their death.

Shaders

In the No Damage section above, can you spot all three enemies? Maybe you can without issue, but for me, the Abductor in particular blends into the environment. Let’s imagine an option that allows us to toggle a shader that highlights certain aspects on the environment.

This is simulated with Photoshop, but the enemies now pop from the background. Not only are we highlighting the enemies, but we’re desaturating to increase contrast. We don’t have to stop at just enemies either, we can also highlight resources or pickups.

So how does this help us with our goal of experiencing the story of Elden Ring more easily? Well, if we can’t see the enemies, every attack from them is a surprise attack. Constantly being jumped is no fun and it creates apprehension for us during exploration. Ultimately, we are looking for ways to mitigate the risk of dying for the reward of exploration and lore. We want to incentivize the player to explore more and provide settings to allow them to do that. Difficulty here is adjustable and it’s opt-outable for the player.

Controller Remapping

Ok, last feature we’re going to consider today, controller remapping. Since I play on console, I’m using a controller, not keyboard and mouse. This causes a good amount of hand fatigue and a requirement for some dexterity. As I’ve gotten older the number of basketball hand injuries have made holding buttons in certain configurations difficult. Elden Ring does have some controller remapping, but it’s rather limited.

My play style is usually on melee builds and I rarely use magic. One of my favorite weapons in the game is Moonveil, which has a great weapon art call Transient Moonlight. While I love using this weapon, to perform Transient Moonlight requires that I hold L2, then press R2 within a given window of time. If you press R2 too soon you do a move that leaves you open to counter attacks. If you press the buttons too close together you sheath your sword. In an ideal world I wouldn’t have to worry about this and I could assign Transient Moonlight to say the up button on the d-pad. That button defaults to Sorcery which I never use. There’s no option to assign a single button to weapon arts. Skills can be assigned, and in fact they’re defaulted to L2, but some weapon arts require more than one press to execute. Another option would be to allow the player to assign double tap of buttons to perform the action. This doesn’t work for everyone, as tap windows can be challenging for some.

So what does this have to do with exploration? Well, the more extensible we make our button assignments the more we give the player the power to customize their experience. For example, if we’re able to assign actions to buttons maybe we could assign the action of jumping off Torrent to a single button and make it separate from calmly dismounting. While small, the ability to control Torrent a bit easier makes a huge difference when exploring. On more than one occasion I found myself mashing at the buttons trying to remember how to get off my magical pony. In an effort to make exploring more pleasant, using Torrent should be a delight.

Dark Souls 1

When I played Dark Souls for the first time I had similar experiences. I wanted more, but I didn’t want to deal with the difficulty. I just wanted to explore the world and have fun. I found Cheat Engine and decided to play Dark Souls on PC just so I could use it. It was great. I couldn’t die, except falling, and I could specify which weapon I wanted to play with. All of a sudden every side quest, area and weapon become open to me. All of the lore or connection between NPCs became tangible. The world of Dark Souls became richer because I “cheated”. That’s the intent with all that I’ve written above about Elden Ring. I understand I could play it on PC (PS 5 at the moment), but the point here is that every user could have the chance to experience the game in their own way.

Accessibility is for Everyone

Lately, these types of features have been placed under accessibility. See The Last of Us Part II and Ratchet and Clank as recent examples. Seeing how many accessibility features these two games have is inspiring. As an industry I feel we have a long way to go with respect to accessibility, but these are good steps forward. But the best thing about accessibility features is that they’re not just for people with needs, they can help everyone. These features can be optional and opt-in, as long as anyone can change them at any time. No one is forcing the person who wants to play Elden Ring at its current difficulty to play with any of the settings I’ve described. What I’m advocating for is adding options to make the game more open and accessible to everyone. By doing so we can share our stories with more people. We can create shared experiences and bring others into the conversation.

If this is something that interests you, take a look at Ratchet and Clank and also the ABX patterns from ablegamers. If you’re in the UK, check out Special Effect as a local charity. Both organizations do amazing things and are worth a look.

It’s been a long time since I’ve implemented boids and I wouldn’t be writing this post if it wasn’t for a work prompt from work slack a few weeks ago.

Implement flocking behavior in the engine of your choice, and post your source code and/or a video of your results under this thread. If you’re not sure what flocking is, https://www.youtube.com/watch?v=mjKINQigAE4 is pretty good basic tutorial.

Having not written code in awhile this seemed like a nice small and directed thing to do over a weekend. On top of that it would give me a topic to write about and I could use it to learn a bit more Unreal. Side comment about writing. Writing is a great way to help you clarify your thinking and understanding of problems. Even if you don’t have a blog or feel like posting anything online, write. In my post about intersection testing there were a few times that I had to stop and rederive something, or check my math. For me these types of post help me verify my understanding of the material. So if you find this topic interesting, go and implement it, then write about it.

If you want to see boids in action and love interactive sites, go check out Ben Eater’s¹, I’m going to reference this page a few times during this post. Play around with the sliders on the page to get a sense of what each parameter does. Afterward, before reading the rest of his article or the rest of this one, think about how you might implement the behavior.

Boids steer by following three simple rules:

Separation: Steer to avoid local crowding

Cohesion: Steer towards local average position

Alignment: Steer towards local facing direction

Local here just means an individual boids perception of its flockmates (neighbors), black circle in the images above. Each boid has a radius and angle of perception. In Ben Eater’s post, you can see the effect of the radius of perception by changing the visual range. Shrinking the field of view (angle of perception) will also reduce the neighborhood of flockmates.

For each boid to know who its neighbors are it either needs access to the flock to filter from or is given a list of neighbors that are within some distance metrics and in its field of view, so pre-filtered.

Putting this all together,

w1 = weight of separation
w2 = weight of cohesion 
w3 = weight of alignment

for each boid in our list of neighbors
    v1 = compute the sum of difference vectors between the boid and each neighbor (separation)
	v2 = find the center of mass of neighbors, compute the vector from boid to that position (cohesion)
	v3 = compute the average facing angle of all neighbors (alignment)
	boid velocity = boid velocity + w1*v1 + w2*v2 + w3*v3
	boid position = boid position + boid velocity

Few things that tripped me up when reimplementing this system. First, limiting the amount of force applied each frame can be helpful not only for debugging, but for keeping the system from spinning out of control. Second, which seems obvious in hindsight is how important alignment is. On Ben’s page, set coherence to its max value, but set separation and alignment to zero. After the simulation settles set alignment to max too. All the boids should rapidly coalesce into what will look like a single boid. Ok, last thing. Set alignment back to zero. Pretty quickly they’ll start to diverge. They won’t completely diverge, but there will be a bit more divergence of the flock. All this is without separation being considered. I like to think of alignment as how “chaotic” do I want the system to appear.

When I was implementing this I had the coefficient of cohesion being used for alignment. On Ben’s page put separation at the mid point and cohesion at 0. Then mess around with alignment. When it’s at the max you get this really nice follow the leader school of fish. They act a bit odd, trying to keep in perfect alignment, but it’s nice. When alignment is at zero it’s just chaos. In my system with this bug, I was so focused that there was a problem with the separation code as they seemed to constantly trying to get away from each other. After I verified separation was fine, or at least should be, I then looked at the field of view filtering. This lead me to implementing more debug visualization that ended up being rather helpful throughout the implementation. Though it was nice to have the debug helpers, what I really needed to do was to stop. If I would have paused for a few minutes and thought about how the system was reacting to changes it would have been clear alignment was the culprit.

Debugging starts with understanding the systems we’re working in and how they respond to change. The code I write for work is thought through, mainly because I’m more aware about the time investment. But I have a blind spot for the code I write at home where the value of time is not on my mind. Typically it’s the weekend and I’m exploring intellectual curiosities. My good programming practices at work sometimes don’t make their way home; they’re practices and not habits.

Welp, that’s it. Boids are beautiful. From these three simple steering rules you can get this wonderful and dynamic motion. They’re are super approachable and very extendable. They also make a great introduction into steering behaviors and it’s just really satisfying when you start to see them move in a perceived orderly fashion. The most complicated math in the whole things is filtering based on the the field of view. If you understand the basics of vector math there’s and think this would be fun to implement, check out kfish’s pseudocode page. There’s some fun ways to extend the system such as goal setting and object avoidance. Also, if you want to read the original paper, see Craig Reynolds’ page.

Title comes from the fact that there are already a number of pages on the topic

Let’s make a game! Well, parts of a game that we can use to illustrate intersection testing in 2 and 3-space. We have an action RPG that has the following elements:

1. A UI element that points to an area of interest on a map
2. A spell pierces a target causing an effect to spawn at point of contact and point of exit
3. A summon that causes a meteor to hit the planet, like you’d see in an RPG maybe

Now that we have our three hypothetical situations, let’s break down each one to show where we might use intersection testing to help us implement them.

UI Element

Imagine our UI element looks like this,

The goal here is to find a point q on the left edge that’s nearest to our point on the map. In the image above we can see this point as the intersection of st with the line perpendicular or normal to st starting at p.

Another way to look at what we’re trying to do is we’d like to project our map point onto the edge of the UI widget and see if it’s on the line and to the left. We’re not going to really cover the “to the left bit”. Exercise for the reader? OK, time for math! There’s lots of ways to approach this problem, but hopefully this approach will help you build some intuition for the rest of the post.

To start, we will be using the dot product for this.

With the dot product defined, let’s look again at the diagram above and see how we can use it to solve our problem.

Since we don’t know theta let’s use the algebraic definition of the dot product, and as an aside if you’re using a math library of some sort it’s more than likely built in. Ok, so our target point q is a point from s in the direction of st of length l. So what is the length l?

Looking at our first case where p is between s and t, l is one of the sides of the right triangle formed by the three points s, p, and q. So if we can find the proportion along the line where the line normal to st and p intersect we’ll have q. This leads us to the dot product as projection.

Projection of V onto W

The above defines the projection equations, but take a moment to think through some things. When is the dot product less than zero? When is the dot product zero? In each case, what would that projection look like? How might we tell when the map point is below t? From these equations we can see here that the resultant vector formed from s to q is a vector that a proportional length of sp and st in the direction of st. So our point q is:

The end result of all of this is an UI element that we can make “taller” using a proportional distance from p to q and will slide up and down the left edge of our widget as we move around our map. Neat! Even better, we’ve defined the projection equation and have started to build some sense of how it works.

Spell Effect

Next up. We have our cool spell that when it impacts with another player we’re going to see an effect on the entry and exit points of the collision. Here’s the setup to our problem.

First, let’s define some variables to work with

We can simplify this problem a bit, by focusing on the 2-D representation of the problem. When in doubt simplify and draw the problem. This helps in modeling scenarios and edge cases. In the UI problem above we had a ray and a map point. We were curious about the point p on our UI widget, the intersection point to the line that was normal to st and p. This is essentially the same problem. All we’ve done is replaced p in our map problem with c, the center of the sphere. When we project c onto the ray defined by st we get an intersection point p in this example. If p is within the radius of the sphere, we know we have two possible points of intersection (in the pathological case there may only be one point).

To find these points let’s start by using the projection equation to get our point p. Once we have p we have we need to wrap this up. Imagine a line from the center of the sphere c to our first intersection point s_i. We can form a right triangle with p, c, and s_i. We know the length of the vector between s_i and c, it must be r as s_i lies on the sphere. We know the length of another side of our triangle, |n|.

Using the Pythagorean Theorem, we can solve for the length of l, the length of the vector between p and s_i. With that length we can start at p and move along st in the direction of s and in the direction of t to find our points of intersection.

Meteor!

Alright! We have some nice UI and a cool spell effect, time to summon our meteor. Our last type of intersection testing is sphere-sphere. Checking to see if two spheres intersect is as easy as seeing if the sum of their radii is larger than the length of the vector between their centers. What is slightly more difficult, and the problem we’re trying to solve, is what’s the circle (all points of intersection) between the two spheres? As with any problem, let’s start by writing down our variables.

First, what does it mean for two spheres to intersect. If we had the equations of these two sphere’s we would be looking for all points where the two equations were equal. Surprisingly, we can solve sphere-sphere intersection with algebra and a bit of geometry.

Let’s start by defining our sphere’s geometrically. First, let’s assume our sphere’s are aligned along the x-axis. This won’t change the solution, but it does simplify the problem.

So what did we just find? Well, x is how from from c1 we need to go along the vector c1->c2 to find p. Awesome! We have p, but what’s the radius; what’s a? The radius of the circle is in the yz-plane centered around x in our setup of the two spheres being aligned on the x-axis. So, plugging in x to our original equation and solving for y² + z² gives us,

Phew, ok, so now that we have y² + z², we just need to take the square root of it to get the radius we're looking for.

So we now have our point p and our radius a. Finally everything we need to construct our circle. But which way is it oriented? Well, it’s “facing” along the vector formed by the vector c1->c2. If you want to draw this circle. you’ll need some vectors orthogonal to the vector c1->c2. So if this is something you want to do, check out Gram-Schmidt Orthogonoaliztion.

Summary

I hope this was useful for you to see another application of these intersection testing equations. Rather than testing for intersections another way to look at the three example is to view them all as forms of projections. In the first we project a point onto a line. The ray-sphere test is we project our sphere’s center onto our ray. If the length of that project is less than the radius of our sphere we got a hit. The points of intersection can be found via the Pythagorean Theorem. In the sphere-sphere intersection we’re projecting one sphere onto another and looking the circle of intersection. For me a deeper appreciation for projecting a point onto a line, and projections in general, came from Linear Algebra by Gilbert Strang, specifically chapter 4, lectures 14-17. Strongly suggested if you’ve never seen the linear algebra approach to this topic. 3Blue1Brown has a great video on the dot product (suggest the whole linear algebra series) and there’s a good Khan Academy if you’re interesting in going deeper into the projection equation.

If you want to see this in a simple Unreal demo, check out my GitHub repro. There’s an Unreal Map “MathDemos”, that shows this in action.

In a previous post one of the reasons I didn’t continue with Sublime as my note taking app of choice was because I would have to learn how to make a build system. Well, I chose instead to go with Nova and just finished uploading my first extension, a todo.txt syntax highlighter. The irony is not lost on me. Guess if I end up back using Sublime, “making an extension” can’t really be an excuse to not doing something. Especially when the tool does everything else I need 🤔.

Recently I took three weeks off for some end of year vacation time. For the first time there wasn’t one thing I wanted to focus on. A typical vacation for me is either spending some time on side projects like Lazy Gardener or doing math. But this time around the drive wasn’t there to put time into either, so where to put it? When faced with endless possibilities I took to making a list. While listing all the things around the house that needed to be done I wanted to go over my notes to see if there was something that hadn’t made it to my todo.txt file. There was a problem; my notes were all over the place.

My documents folder had random notes of various sizes in just about every folder, most out of context of the folder. Over time I’d become rather sloppy relying on search over structure. The laziness came from the fact that I never thought about how I was taking notes. When creating a new note I would first have to think about the context of the note. Home vs personal development? Should I make a folder for this topic? It’s like sitting down to write some code without first thinking of the problem you’re trying to solve. That’s fine when you’re starting to rough things out, but not a great long term plan. The result for me was to create a new file, type some thoughts down, then hit save. Location be damned, thus creating my dependence on Spotlight / Alfred. Similar to writing code, the best code is the one not written. The best searching is one I didn’t have to do. Having a well-defined (not rigid) structure means I wouldn’t have to search, I could just go to where the note was.

Another I was having with my note taking workflow was just how I was taking notes. I do all my note taking in Markdown as I’ve found plain text files work best for me. During the day I may jot some notes down on pen and paper, but eventually they find their way to a text file. Markdown is great. Simple syntax that supports things like links, list, and images. Plus, renders easily to html (I use Pandoc for this). Though not a part of Markdown, I use YAML metadata to specify title, date, and tags for my notes. What I was looking for was an IDE of sorts for how I take notes.

What I want

In an ideal world¹ there would exist some application that would support the following features:

• Easy to use
• Structured views (folders and content outline)
• Plain text editing
• Spell check
• Live preview of rendered output
• Ability to run cli actions²
• Bonus: Visualization of tag connectedness

Editors

Sublime and VS Code

Over the years I’ve relied heavily (and enjoy using) both Sublime Text and VS Code. With Sublime and VS Code had roughly the same problem in that I didn’t want to invest time into setting up were the last two bullet points above. Mainly the ability to run cli commands easily was what kept me looking for a better solution. Both allow you to specify a build target via json files, but it would be something I would need to learn how to do. For whatever reason, VS Code didn’t feel “comfortable” to use as my note taking app. This might be a mental context issue. At work I’m on a PC in VS Code for most the day. It’s a natural for me when I need to make a note to pop open an empty file and just start typing. In fact, for work I might setup a notes workspace and use VS Code or Sublime. But for home with the additional desire to build notes and upload posts to my site, both were close, but not quite there. If I couldn’t find a better workflow I would finish getting Sublime setup.

It was at this point I decided that I wanted to try some apps that made for editing Markdown.

Bear

First up, Bear. From their website:

Bear is a beautiful, flexible writing app for crafting notes and prose.

It is. For a group of people that I realized were not me. Its ability to cross link notes and workflow based around tagging make it a great choice for people looking to just write. But without the ability to edit arbitrary text files on my computer and no way to view and edit in plain text Bear wasn’t going to work. If you don’t care about plain text editing, they have new Markdown editor Panda that will be integrated into Bear in the future. Though it’s easier to edit the Markdown in Panda, it’s still not full plain text editing. I would love to see Bear support a form of “Source Code Mode” similar to Typora³, and allow for local file access^[4]. Bear also didn’t have a way from me to run cli commands. It would require me to completely change how I took notes. And if wanted to ever not use Bear I would have to export all most notes, just like I had to do with Evernote awhile back.

Obsidian

Tried a few others, but all were less feature rich than Bear. Except one, Obsidian. Obsidian looks great and its graph visualizer for tags is just plain cool. Except the ability to run cli commands easily, Obsidian did it all. But there was something about it, similar to VS Code, that made is somewhat uncomfortable to use. Long term I know that if I didn’t want to open the app to write, I would write. Overall Obsidian is great and when I’m interested in the connectedness of my notes it’s what I’ll use. Though not my primary note taking app, it’s going to stay installed.

Nova

After more searching I came across Nova by Panic. I’ve been using Panic software since 2005 and actually had Nova installed from when I signed up for the beta. At the time I was using it to build some sites and overall was pleasant to use. It never occurred to me to try it as my Markdown editor of choice until one of those random Best X for Y search hits mentioned it. Nova is nice to use. The more I used it the more I wondered if my issue with VS Code and Obsidian is that they’re not native. Whatever it is, Nova didn’t have that issue and ticked all the boxes except seeing a tag node graph. For my site I setup a quick Task to build and another to do the upload (Nova supports the upload and syncing, just haven’t set that up). For my notes, I can “build” a note which exports it using Pandoc to html. After a week of use and a bit of organization of folders I’m happily using it as my default note taking app. It’s setup in a way that works for me. I’m pretty sure most people would have stopped at VS Code, and I probably should have too. Workflows are like pens⁴; your opinion of the perfect one changes over time. And it takes patience to find the one that works for you. There’s a lot of great editors out there for everyone, Nova just fits my needs right now.