tech

tech category

DIY Neovim fzy search

There are plenty of fuzzy search solutions for Neovim, most notably Telescope, but sometimes you just want something fast and simple. Enter fzy, a fast command line program with a slick search … Read more

Hand Drawn SVGs

I’ve been trying to find a good workflow for drawing vector artwork that has the spontaneity and roughness of hand drawn images. tl;dr If you’re just interested in my process, and not the … Read more

Fixing GPG Yubikey integration on macOS Big Sur

I had some trouble after upgrading GPGTools to version 2020.2 on macOS Big Sur, where it would ignore my Yubikey smart card and I couldn’t unlock my stuff. Every time I tried to use gpg (Yubikey … Read more

Painfully Rendering a Simple Bar Chart with Nivo

I’ve been working on a graphing project for the Astoria Digital volunteer group in collaboration with Muckrock. The app will visualize data around New York’s 50a police disciplinary record … Read more

PHP Boolean Casting Gotchas

I find PHP’s boolean casting rules strange and hard to remember. I know I’m not alone. To help myself out, and anyone else that happens to stumble upon it, I wrote a commented script that … Read more

New article: Actually Using the General Sibling Combinator: https://www.chrisdeluca.me/article/actually-using-the-general-sibling-combinator/

Also posted to: <mastodon.social/@bronzehe…>

Actually Using the General Sibling Combinator

I&rsquo;ve vaguely known about CSS&rsquo;s general sibling combinator for a while, but I have never found a practical use case for it, until now. And let me tell you, the results are, get ready for … Read more

Computer World featured Astoria Digital, the social justice tech group I volunteer with.https://www.computerworld.com/article/3567471/how-slack-airtable-and-open-source-software-connected-new-yorkers-during-the-pandemic.html: https://www.chrisdeluca.me/note/1595105910/

Also posted to: <mastodon.social/@bronzehe…>

A lot has changed in the world since I last posted. I have been extremely lucky during this pandemic. I am still employed, I can work from home, and I have my wife to shelter with. I do not take these things for granted. And yet: https://www.chrisdeluca.me/article/introducing-pcg/

Also posted to: mastodon.social/@bronzehe…

Introducing PCG: Or, How I''m Spending the Pandemic

A lot has changed in the world since I last posted.

I have been extremely lucky during this pandemic. I am still employed, I can work from home, and I have my wife to shelter with. I do not take these things for granted.

And yet.

While my work life has not changed as drastically, my personal life has. Most of the things I did outside work before the pandemic were in person. Can’t do that right now. So, it gave me some time to work on home-bound projects that I pushed back on the shelf.

To that end, I’m very excited to introduce PCG, or Point and Click Game engine, an adventure game creation utility for the open web.

I did a talk about it three years ago (ouch), so this project has certainly been a long time coming.

PCG is very much in active development, but I think I’ve made encouraging progress, which I’ll explore in detail later.

But first, what am I talking about?

What is an adventure game?

If this is old hat to you, skip ahead to the next section.

For those not familiar, a point and click adventure game is a style of narrative, story-based games where progress is made primarily through puzzle solving, rather than violence or reflexes, something I appreciate more and more as I age.

Day of the Tentacle screenshot
Day of the Tentacle, a classic comedic point and click adventure game.

While their popularity peaked in the early 90s for mainstream gaming cultural, they have thrived in the indie space over the past decade or so.

Mechanically, many games in the genre use a system of verbs to interact with the world. You click a verb from a menu, for example “push”, and then the person or object in the game you want to apply it to, such as “crate”. Perhaps there would be a trap door below the crate, and a new area is unlocked.

Indiana Jones and the Fate of Atlantis screenshot
Indiana Jones and the Fate of Atlantis is a game that used a list of verbs.

Another method some games employ is to do away with the specific list of verbs, having pre-determined actions when interacting, or relying on the levers that must be switched in the right order.

Myst screenshot
Myst did away with set verbs, and instead utilized bespoke mini-puzzles to progress.

Almost all have you collecting various esoteric items, having the player apply those items to people or objects in the game, or combining them with each other.

A relatively simple system, from a game mechanics perspective, but one that hides a lot of depth, story-telling potential, and that particular player satisfaction from figuring out a puzzle.

Why a web-based adventure engine?

Most innovation in the web game space is around the <canvas> element and Web Assembly, which allows developers to “start from scratch” and create entirely custom rendering divorced from any of the preconceptions of the web.

Angry bots screenshot
AngryBots is an example of a web game rendered via web assembly and the canvas tag.

This works well for action games or games with pixel-pushing graphics. However, the goal here is always to emulate a native application, and since games written for the browser cannot by definition ever be native, the best they can be is a close approximation.

While close might be good enough, this always felt like a missed opportunity to me. We spend all these resources trying to get the web to be more like native applications, but hardly any on what new and interesting experiences we can create that are unique to the web. As Marshal McLuhan wrote, an author I’m proud to say I got a few pages into, the medium is the message.

I started thinking about what kind of games would work well inside the traditional web context - aka, HTML, CSS and JavaScript (and SVG) rendered into a DOM tree.

After some thought, I settled on point-and-click adventure games.

My reasons being:

  1. They are not real-time games—Having game play that relies on any kind of precise timing are going to need a more controllable rendering model than the traditional web.
  2. They rely on text/audio—Text is a first class citizen of the web, and new web audio APIs make that aspect possible.
  3. They are narrative-driven—The web is a powerful method of communication, and I’m excited by new methods of leveraging that.
  4. I like them :smile:—This is important, because without it I wouldn’t be able to finish a big project like this.

In short, I thought I could re-create many of the different point and click adventure paradigms on the web, while taking full advantage of the things that make the web the web.

Some of the unique things that are attractive about the web are:

  1. It’s universal—Many more people have access to a web browser than those with access to a machine that can play a triple A game.
  2. It’s accessible by default (with a rich API for extensions)—This enables access by those with visual, auditory, motor, or other disabilities. Accessibility is sadly an afterthought in a lot of digital design, and seems entirely absent in the gaming space. Treating accessibility as a first class citizen makes the experience better for everyone.
  3. It’s sharable—An oft taken for granted killer feature of the web is URLs. The power of sharing a permanent link that will work in every browser and can be posted to any platform is one I cannot understate.

Design goals

The ultimate goal of PCG is to foster a open, welcoming, and creative community around making point and click adventure games on the web.

In game engine terms, the goal is to create a flexible, modular, and pluggable system of components that can be combined to create most if not all the point and click varieties mentioned above (and many that were not), as well as opening up the possibility for new and unique games only possible in the web format.

After a lot more thought, writing, re-writing, trial and error, and leveraging embarrassingly earned career experience, I settled on some design principles for PCG.

The thought of even having design principles was something hard earned, but one I strongly believe in: a north star for how you go about making something out of nothing.

  1. Leverage core web tech (HTML/CSS/JS)—Rely on core web technologies and patterns over writing new systems. While new systems may offer benefits, building off existing ones usually means a more familiar, fast, and pleasant player experience.
  2. Player experience over developer experience—While developers are important, the end result that players consume takes precedence over the experience of the developers creating the game. These first two principles are why PCG is built without a framework in vanilla HTML/CSS/JS.
  3. Through documentation—A well documented system is an understood system, and an understood system is a powerful tool.
  4. Newbie friendly—As the web has professionalized, many exciting capabilities have opened up. It has also raised the barrier to entry. Creating something fun and expressive that can be used at a basic level to good results, while still offering a much larger world of possibility for those interested in learning, I think strikes the right balance.
  5. Open source—This is essential to creating a community, which is critical to the success of a tiny project like this. I also believe in it.

Next steps

This is a very high level introduction to the ideas surrounding the PCG project. I plan on writing posts going in-depth on each component of the system as they’re built and as updates are made. These posts will hopefully serve as a living progress report.

While I’ve spent a lot of time on PCG already, it is still in the beginning stages. It is very much a leap of faith.

I can’t predict what kind of community it will attract, if any, or what this project may or may not evolve into.

But I am excited to find out.


You can check out the Github repository or the documentation site for PCG, both very much in progress. If you have any feedback or would like to contribute, please don’t hesitate to reach out.

If you’d like to see what PCG is capable of currently (as much as I cringe to reveal the multitude of missing features) my friend made a tiny, rough demo game, and I made a little demo showcasing the text box component.

Thanks for reading all the way to the end, hope you and yours are safe and healthy, and I’ll catch you on the next adventure.

Syndicated to:

Web Based Game Text Box

Here&rsquo;s a little web component I came up with to produce typewriter text, similar to old school SNES RPGs. codepen.io/bronzehed&hellip; Read more

Allow Satan into your life: chmod 666 my_soul.txt. The permissions of the beast.

Finished reading: Alice’s Adventures in Wonderland by Lewis Carroll. I started re-reading this for some reason I now forget. You know what? It’s still good. Read it in 5 days.

🍿 I saw On The Waterfront for the first time the other day. Spoiler alert: it’s good. Also, set in Hoboken! Still, I was surprised how much of the plot revolved around re-routed PATH trains.

Syndicated to:

My Facebook Ad Data

Today I downloaded all the data Facebook has on me, and started poking through it. Since it&rsquo;s been the focus of every privacy scandal, I went straight to the ad data. I found two items. My ad … Read more

Don't commit that file!

I wrote a small git pre-commit hook to prevent committing certain files. There are more words to this, but if you&rsquo;re impatient, you can skip right to the goods. At work, we have some … Read more

Machine Learning

I took a week off from work to join a deep dive study group on machine learning. It was an incredible experience and I want to tell you about what I learned. I learned with very smart and interesting … Read more

Pain and Pleasure

This is not meant to be a take down piece, and I realize I&rsquo;m not providing any direct solutions. I wouldn&rsquo;t be writing about Drupal if I didn&rsquo;t care about it. My hope is that my … Read more

My Talk at QueensJS

I had the privilege of giving a talk at QueensJS last week. QueensJS is a wonderful JavaScript meetup, with a real diverse and welcoming crew of folks attending. I was pretty nervous about doing the … Read more

Practical Internet Privacy

Welcome, Internet folks! If you&rsquo;ve been following along, this is the final post in my three Internet security and privacy. In this article, we&rsquo;re going to get into improving and&mdash;just … Read more

Grammatical CSS Lists

The Situation You have a list of items that you need to render with comma separation, and an &ldquo;and&rdquo; at the end. For example: Cookies, rice, and farts. The Problem This display is … Read more

A US-born NASA scientist was detained at the border until he unlocked his phone t.co/HHPvj5cz3…

Practical Internet Security

Welcome internet traveler, you&rsquo;ve found your way to my guide on how to improve your online security. Already feel confident in your security abilities? Then get lost! I don&rsquo;t need that … Read more

Security vs Privacy on the Internet

Update: The next article in this series is now published. Confused about what privacy versus security means in the context of the internet? Haven&rsquo;t heard these terms before, but are intrigued … Read more

RT @ELLEmagazine: Hillary Clinton now leads popular vote by 2 Million… and STILL counting: t.co/BBsjkaKfc… t.co/RZG6mxMai…