DEV Community: Dustin Runnells

Steam! ... almost.

Dustin Runnells — Sun, 22 Mar 2026 22:15:24 +0000

Jumped through a lot of hoops to get this far! It's kind of funny, with vibe coding things moved so fast, but so far I think I've spent about 30% of this entire project just getting Steam configured. It isn't even the in-app stuff, just getting all the assets created in the various sizes and figuring out how to use their package uploader. It was educational, though! I'm sure it will go faster next time.. and that is kind of the point of the entire project anyway, just to learn.

I've submitted the store presence for review. After that I think that I might be able to start inviting a few friends to play as I finalize this simple game.

Here is the beta preview of the Steam store page:

AND I added a few achievements too!

I think that I'll add a few more visuals, test out the fairness of the current game and then call this one done-for-now before moving on to the next thing! Getting to that done-for-now phase, might take a few more weeks, which was longer than expected.. but we'll see!

Shields Up!

Dustin Runnells — Thu, 19 Mar 2026 10:25:36 +0000

Since the last update, the prototype has a better menu, "you died", game-over screens and improved feedback and power-ups. There is now a shield power-up to protect the rover from the UFO lasers for a few seconds. I'm also now starting the game without the turret, I'm hoping that adds some interesting stuff to the game play on levels where you don't have the turret until you collect it.

There are a bunch of new sounds too, maybe I'll do a proper youtube video so that it is audible soon.

Oh, AND my Steamworks application was finished/accepted, so I'll start working on making this a real Steam game soon.

Title Screen, Power-ups and Sound

Dustin Runnells — Tue, 17 Mar 2026 09:59:11 +0000

Over the past week, I added a title screen and main menu. Sticking with my mostly-vibecoded theme, I just handed Chat GPT the 3 source images that I used for the 3d models and asked it to make a nice title screen background.

I also wanted a fancier HUD, which took longer than I expected for Codex to get right to my liking. I based it on another mockup that I had ChatGPT make.

Mockup:

Implemented in game:

And as you can see, I've started adding some power-ups. For this I just generated some flat 2d icons and asked the agent to put a 3d shape rotating around it. We went through a few iterations, and this is what I settled on for now.

I think that we'll make it so you have to manage your ammo, health and rocket fuel (jumping) through the power-ups. I'm also floating around maybe having a shield power-up for the rover and maybe an EMP to destroy all the UFOs in range.

Not seen here, I've been working on adding some sounds through whatever free sounds I can find online and modifying them with Audacity.

I've also taken the first step toward getting the game onto Steam eventually. I've registered with their developer program.. we'll see how that goes. With all the sound and assets, this might work better on desktop than mobile, which was my original platform of choice.

Next - Maybe start planning the levels out!

Dustwalker - The beginning

Dustin Runnells — Sun, 08 Mar 2026 12:13:54 +0000

It's been a while since I played with Godot. I have a series posted here from a few years ago (pre-chatgpt) when I made some good progress on a game. I never did finish that project, but it was a lot of fun to start to learn the technologies behind game development. Later I made a game jam entry where I experimented with crude 2d assets that were AI generated. All fun stuff.

Today though, with things like Codex, LLMs have completely changed how I approach coding projects. Since ChatGPT, I've made a fairly large, non-game, project (ReciScan) that evolved along with the AI tech. In the beginning 100% of the code was hand written. But slowly new features become easier to add by first consulting an LLM, then copy/pasting, and more recently I hardly do more than describe and test for certain features. I've even added functionality that was well beyond my ability a few years ago just by "vibe coding". I spent over a decade as a professional developer. I know enough to use the best tool for the job.. and in my humble opinion, the best tool for the job of most software development these days is probably not a human. Sure, creative guidance, technical direction and those things still require humans.. but I am really starting to feel the future sneak up on us fast in this space! I'm open to disagreement and debate, but I just can't believe that we'll be spending much more time making more programing languages for humans to write better programs.. the next ones will be for AIs.

Anyway, a week ago today, I decided that I needed an excuse to start to migrate away from GitHub to a different platform (I have my reasons). I created a new Codeberg repo and dreamed up a game project, with no intention of writing any code by hand. I settled on a reimagining of the old Atari game Moon Patrol. I am mind-blown about what can by prompting alone with the tools available right now. I have a full time job and 4 kids and other projects, but somehow in my spare time (less than 8 hours) in a single week, I have an almost playable game that I think looks pretty darn nice!

I had Gemeni create a few images for the rover and settled on this one:

Then I used Meshy.ai to turn it into a 3d object.

It didn't come out perfect (the middle wheels are missing), but it was a quick fix in Blender.

I did the same with a lunar base and a UFO. Several hours of prompting and tuning later, I had this:

NOT BAD! With a little more effort, I think that I might even release it. Maybe on Android/iOS where I'm comfortable, or maybe I'll check out what the authoring process is like on Steam!

Stay tuned!

Creating an MCP Server for the Pulsar Editor

Dustin Runnells — Fri, 20 Jun 2025 16:02:28 +0000

Over the last few months there has been a lot of talk about MCP (Model Context Protocol) for adding tooling to LLMs (Large Language Models). Prior to MCP, I have written applications to interact with LLMs beyond chat simply by asking the LLM to respond in a specific format and parsing the results. This worked great! BUT, having a standard way to call tools without needing to write your own parsing code every time with MCP feels like the right way to go.

As I continue my projects, I have observed that there are lots of new applications integrating LLMs in every way imaginable. One of the most interesting LLM integrations to me is the concept of having an LLM assist in code writing - right in your editor! My editor of choice for my coding projects is Pulsar (formally Atom). Since the early days of ChatGPT until now, I've mostly just copy/pasted whatever I needed an AI to help me with into my editor. But the "vibe coding" trend and the time lost to copy/paste has made me a little jealous of folks that use editors that have a direct integration with AI/LLM coding assistants. This coupled with a recent experience modifying a Pulsar package that I use frequently and experimenting with using MCP as a client in AnythingLLM has given me the confidence to start a new Pulsar package to run an MCP server inside Pulsar to give an LLM control over common editing functions. Ultimately, I'd like to chat with the LLM about the code I'm working on and let it make adjustments/additions.

This week I took the first step with my own Pulsar package for this.

At the time of this writing, this is little more than a proof of concept as a combination of the starter Pulsar package-generator package, the Atom package creation tutorial and the example from the official MCP Typescript SDK with some editor tool functions registered. Hopefully it will become more soon, since I am looking forward to actually using it to build stuff!

I did run into some hurdles along the way, which I'll mention below. Here are the steps that I've taken so far to get here:

Created a new Pulsar package with https://web.pulsar-edit.dev/packages/package-generator
Removed the unneeded default UI elements from the view
Added a status tile to indicate when the MCP server is listening
Pasted in the Streamable HTTP MCP server code from the official MCP typescript quickstart page: https://github.com/modelcontextprotocol/typescript-sdk

Added the dependencies for the MCP SDK and strict typing validation to my package.json:

  "dependencies": {
    "@modelcontextprotocol/sdk": "^1.13.0",
    "zod": "^3.25.67"
  },

Hit some roadblocks! Pulsar seems to be bundled with an older version of Node JS, that does not like the "node:" protocol in import and require! This seems to be everywhere in the MCP Typescript SDK. I grepped for the "node:" instances and made my edits to the dependencies and their dependencies to remove the text "node:" from the lines and require/import the old way.
More roadblocks! The older Node JS also doesn't like Object.hasOwn() in one of the dependencies (marge-descriptors). Replaced that with Object.prototype.hasOwnProperty.call().
Still more roadblocks! Something seems incompatible with the old Node JS and crypto.randomUUID(). I'm not interested figuring out why, so I found a simple javascript UUID function on Stack Overflow and call that one instead.
Woohoo! My Pulsar package now runs without errors! To make the ppm (Pulsar Package Manager) capable of doing these edits for me instead of asking users to manually find and do the edits in the dependencies, I ran patch-package on each of the dependencies that I modified:
```
npx patch-package @modelcontextprotocol/sdk
npx patch-package express
npx patch-package router
npx patch-package body-parser
npx patch-package merge-descriptors
```
And updated my Pulsar package's package.json to do the patching:
```
  "devDependencies": {
    "patch-package": "^8.0.0"
  },
  "scripts": {
    "postinstall": "patch-package"
  }
```

With server being my instance of McpServer() I can now register some tools from the Pulsar API to it. Here is an example for moving the cursor around:

    server.registerTool("move-cursor", {
        title: "Move Cursor",
        description: "Move cursor to location in editor.",
        inputSchema: { row: z.number(), column: z.number() }
      },
      async ({ row, column }) => {
        const editor = atom.workspace.getActiveTextEditor();
        editor.setCursorBufferPosition([row-1, column-1]);
        return {
          content: [{ type: "text", text: String("Moved cursor to row " + row + ", column " + column) }]
        };
    });

Now I'll launch another instance of Pulsar and start the MCP Listener with the menu item that I created (see source). I also observed that the "MCP:On" status tile I added is shown in a status tile in the lower left of Pulsar.
To see if the MCP server is actually working inside my Pulsar package, we can use the official MCP Inspector from the command line:
```
npx @modelcontextprotocol/inspector
```
The inspector connects to an MCP server and runs a little http server that you can point a browser to to allow you to send MCP commands and see the responses. This lets you confirm things are working as you expect before pointing your LLM to your MCP Server. Executing the command above gae me a URL to visit in my browser:

http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=<Random_Token>
Next I executed some of the new tools in the MCP inspector with some parameters.

All went smoothly and I can see my Pulsar editor react to the MCP tool!

Ok, now to finally point AnythingLLM (my current favorite desktop LLM client) to the MCP server and tell the LLM to do something in the Pulsar editor! AnythingLLM keeps it's mcpServers config in this file on Mac:

~/Library/Application\ Support/anythingllm-desktop/storage/plugins/anythingllm_mcp_servers.json

The configuration for this MCP server should look like:

{
        "mcpServers": {
                "pulsar-edit-mcp-server": {
                        "url": "http://localhost:3000/mcp",
                        "disabled": false,
                        "alwaysAllow": [],
                        "type": "streamable"
                }
        }
}

Now I'll try it out and ask the LLM to add some text to the editor:
It's working!
Next I'll add some more editor functions and recruit some contributors (perhaps YOU!?).
Thanks for reading!

Controlling Chrome with an AnythingLLM MCP Agent

Dustin Runnells — Mon, 26 May 2025 22:22:49 +0000

This turned out to be a lot easier than I expected it to be! This is my first experiment with MCP, the Model Context Protocol. My previous experience with agents and tools required telling the LLM how to do things, either in the main context of the conversation in plain english or relying on whatever LLM application I'm using to have some interface to make it easier. MCP provides a standard way to link the LLM application you are using with the instructions to the agent on what tools and abilities are available to it and how to use them.

For today's experiment, I wanted to control my web browser (Chrome) by simply telling the LLM what I want to do in a chat. I'm chatting with the LLM using AnythingLLM on my Macbook Pro and have a Chrome window open... wouldn't it be nice to say "Hey, go start a blog post for me"!?

AnythingLLM is becoming my tool of choice for connecting to my local llama.cpp server and they recently added MCP support.

The Google Chrome browser has a debugging mode that runs a server for remote tools to connect to it.

And Aleksey Smolenchuk has written a Chrome MCP Server.

Let's see if we can connect all three and do something cool!

First, let's start Chrome in debugging mode. On my Mac, this is done with the --remote-debugging-port command line option, but also requires the --user-data-dir to be something other than the default, so we'll use both options. Be sure to close out all Chrome windows, then from the command line do something like:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp

It should start and tell you that it is running on 127.0.0.1 and your specified port:

Next I downloaded the Chrome MCP Server and followed the instructions on Github, which boiled down to just:

Clone the repo:

git clone https://github.com/lxe/chrome-mcp.git
cd chrome-mcp

Install Bun:

npm install -g bun

Install the dependencies and start the MCP server:

bun install
bun start

And you should see the MCP server connect to the Chrome remote debugger on port 9222 and start listening for MCP traffic on port 3000:

All that's left now is to get AnythingLLM to start using the Chrome MCP server. There are instructions on the Github page for this server, but they will be slightly different for AnythingLLM.

If you are on a Mac, the AnythingLLM MCP servers setup is in your home directory in:

~/Library/Application Support/anythingllm-desktop/storage/plugins/anythingllm_mcp_servers.json

It probably already exists, but has an empty mcpServers section. We'll copy the example from the Chrome MCP server instructions and add a "type" so that it looks like:

{
  "mcpServers": {
    "chrome-control": {
      "url": "http://localhost:3000/sse",
      "disabled": false,
      "alwaysAllow": [],
      "type": "sse"
    }
  }
}

From there we should be good to go! Let's fire up AnythingLLM. We should see the MCP server in Settings->Agent Skills:

Now if we start a chat and ask nicely with "@agent" in our sentence, we can watch the the LLM do it's magic! Watch me ask:

@agent I want to create a new blog post on dev.to. Can you take me there in a new chrome tab?

That was fun! Maybe I'll try to write my own MCP server next!

Writing an AnythingLLM Custom Agent Skill to Trigger Make.com Webhooks

Dustin Runnells — Thu, 28 Nov 2024 03:08:55 +0000

Recently I've been experimenting with running a local Llama.cpp Server and looking for 3rd party applications to connect to it. It seems like there are a lot of popular solutions to running models downloaded from Huggingface locally, but many of them want to import the model themselves using the Llama.cpp or Ollama libraries instead of connecting to an external provider. I'm more interested in using this technology as a server so that I start it once and allow clients to connect to it without needing to shutdown and go through the long, resource intensive, start-up process of each application. One of the applications that I've found great for chatting with in my setup is AnythingLLM.

AnythingLLM can connect to multiple providers, including Llama.cpp's llama-server (As an OpenAI compatible API), Ollama, OpenAI, Anthropic, Gemini, and others. Another cool feature of AnythingLLM is that it lets you use the LLM as an agent.

Agents are LLMs that have access to tools, so that they can do more than just chat with the user. You can ask an Agent to go execute some command, perhaps a web search or image generator with some parameters. This is powerful. With an agent, you can have a conversation with the LLM about something, and then say "Go do something with this information". Imagine telling your LLM to get today's headlines from your favorite news source, review for anything related to some specific subject that interests you and then email the headlines to you!

Out of the box, AnythingLLM has a few agents built in, including a chart generator, a web search, a web scraper, and SQL connector to query databases. Those are awesome. BUT, more recent versions of AnythingLLM let you create your own agents with JavaScript/Node.js!

If you know how to interface with APIs, this can be a game changer.. you can tell your LLM to do anything that you can access via a REST endpoint. But you know what would be even better? Not needing to do the API work yourself. There are automation services that do all the API work for you and let you automate and chain tasks from one API to another, such as Make.com, IFTTT and Zapier. These automation services offer a webhook trigger that lets you easily pass some parameters to a unique URL to kick off automations using pre-built connections to popular services and utilities to enable such actions as posting to X or Instagram or update a Google Sheets spreadsheet, etc.

Make.com

For my example I wanted to have my LLM agent update a Google Sheets spreadsheet with contact information. Make.com has both a connector to do Google Sheets connections and has a webhook trigger. Make.com has lots of other connectors too, so you will want to explore Make.com's library of connections to do some really interesting stuff.

Before we set up our agent, let's get the Make.com side of things set up.

First we'll need a spreadsheet to insert our date into. Go to Google Sheets and create a new spreadsheet to store the Name, Email and Phone Number of contacts.
Next we'll create a new Scenario on Make.com. Our first connector will be the Webhook. A webhook is just a URL intended to receive data (instead of showing a web page). You can just go with the default settings and give it a name.
Make.com will generate a unique URL for you to use. Copy the URL down. We'll need it to continue the configuration and for the agent setup later.

The webhook will need to receive an actual call to know what data to expect. Using curl, let's send it a JSON payload of the 3 fields from our spreadsheet and some test data.
```
curl -X POST https://hook.us2.make.com/testqrd3j8469g856t16hp9l95yeowv9 -H "Content-Type: application/json" -d '{"name":"Jon Smith","email":"jsmith@example.com","phone":"555-555-5555"}'
```
The Make.com interface should reflect that it received the call immediately.
Next add a connector for Google Sheets by clicking the big plus sign to the right of our new Webhook connector. You'll be asked to connect your Google account, select the document from your Google Drive and select the sheet name (probably Sheet1).
With the Google Sheets connector added and linked to your spreadsheet, you'll see a section for Values. These values can be received from earlier connections in your Make.com scenario - in our case, the Webhook. For each of Name, Email and Phone, select the Webhook values shown.

Click OK to complete the Google Sheets connection setup.

Our Make.com scenario is now complete. To save it click "Run Once" on the bottom left.
Once the scenario is saved, turn on "Immediately as Data Arrives" on the bottom. This will let let your webhook update your spreadsheet even when you are not signed into Make.com.
Run the curl command from above again with a some different data. You should see your spreadsheet update almost immediately and we'll know that your webhook is working and ready for our next steps.

Before we continue, do keep in mind that giving an LLM the ability to do things in the real world is both powerful and dangerous. Think carefully about potential consequences before giving it access to important documents and tools.

With that, let's get started with the agent.

AnythingLLM

If you don't already have it, download the AnythingLLM desktop application for your platform here. In my examples I'll be using my Macbook Pro to run AnythingLLM and connecting to llama-server running on an Arch Linux server with the Meta Llama 3.1 Instruct model (70B). However, you can do all of this just by linking AnythingLLM to the OpenAI API with an API Key. I will not go into the details of the initial setup of AnythingLLM in this post, but once you get it up and running, have a workspace created and can chat in the workspace with your LLM, you are ready to continue to the next step. Consult the AnythingLLM Documentation for assistance.

Agent Configuration

Once you have a Workspace running, go to the workspace settings (Gear icon to the right of the workspace name on the left side of your screen). Click the Agent Configuration tab at the top and select a Workspace Agent LLM Provider. This can be the same LLM provider you use for chat.
Next click Configure Agent Skills. This screen should have all of the built-in agent skills listed, including RAG and website scraping. You can optionally turn on Generate charts, Web Search and a couple others that you might find useful. At the bottom might be "Custom Skills", which will be empty until we create one.
Try out one of the built-in agents to get an idea of how they work. To call an agent function, prefix your request with @agent. For example, ask your LLM to check the top tech headlines on CNN:

Writing a Custom Agent Skill

Now that you know how to use an agent and we have Make.com ready to go to communicate with our future agent, let's get get the agent written.

Find your agent-skills directory. On Mac, this is in your home directory under: Library/Application Support/anythingllm-desktop/storage/plugins/agent-skills , but check the documentation for your platform.
In agent-skills, make a new directory for your agent:
mkdir sheet-update-agent

Define your agent in plugin.json.

Create a new file called plugin.json inside the sheet-update-agent directory and paste in the below. I'll discuss what all this means after.

{
  "active": true,
  "hubId": "sheet-update-agent", 
  "name": "Update Google Sheet",
  "schema": "skill-1.0.0",
  "version": "1.0.0",
  "description": "Update Google Sheet via Make.com Webhook",
  "author": "@drunnells",
  "author_url": "https://github.com/drunnells",
  "license": "MIT",
  "setup_args": {
    "postUrl": {
      "type": "string",
      "required": true,
      "input": {
        "type": "text",
        "placeholder": "https://hook.us2.make.com/your-custom-url",
        "hint": "The URL to send the post request to"
      },
      "value": ""
    }
  },
  "entrypoint": {
    "file": "handler.js",
    "params": {
      "name": {
        "description": "Contact name",
        "type": "string"
      },
      "email": {
        "description": "Contact email address",
        "type": "string"
      },
      "phone": {
        "description": "Contact phone number",
        "type": "string"
      }
    }
  },
  "examples": [
    {
      "prompt": "Add Bob Smith's contact information to the contact spreadsheet - Bob Smith, bsmith@example.com, 123-456-7891",
      "call": "{\"name\": \"Bob Smith\", \"email\": \"bsmith@example.com\", \"phone\": \"123-456-7891\"}"
    },
    {
      "prompt": "Here is Jane Doe's info: jdoe@sample.com, 555-555-5555",
      "call": "{\"name\": \"Jane Doe\", \"email\": \"jdoe@sample.com\", \"phone\": \"555-555-5555\"}"
    },
    {
      "prompt": "Add Billy Exampleman to my contacts, his phone number is (444)333-2211 and email billy_e@test.net",
      "call": "{\"name\": \"Billy Exampleman\", \"email\": \"billy_e@test.net\", \"phone\": \"444-333-2211\"}"
    }
  ],
  "imported": true
}

We'll break above down into 4 sections so you know what each is for.

Main plugin definition / other_properties - This is where the plugin name, details and author info is.

You'll need to make sure to update:

hubId - This should match the directory name inside agent-skills
name - The name of your custom skill / agent
description - A short description about your skill
author - Your author id
author_url - A link to more information about you

Setup Args - This is how you define the configuration screen for your agent. In our case we let the user paste in their Make.com webhook URL. The values here will be exposed to your Javascript as the runtimeArgs[] array. You will observe that the empty "value" inside setup_args will become populated with the saved data once it is set by the user.

Entrypoint - Every parameter that you want to send to the JavaScript function for your agent is set here. Notice that handler.js is the filename. For our example, we'll be passing along the name, email and phone of each contact from the LLM conversation.

Examples - The AnythingLLM documentation says that you should provide 1-3 examples of how the user might indicate the parameters that will be sent to your JavaScript function.

Write your agent's javascript to call the webhook in handler.js and put it in the same directory with your plugin.json. The below JavaScript is just a function that takes the passed in name/email/phone parameters and does a post to our webhook URL (this.runtimeArgs["postUrl"]) set by the user in the AnythingLLM Custom Skill configuration screen.

module.exports.runtime = {
  handler: async function ({ name, email, phone }) {
    try {
      this.introspect(`Received Parameters: ${JSON.stringify({ name, email, phone })}`);
      this.introspect(`Runtime Arguments: ${JSON.stringify(this.runtimeArgs)}`);
      const postUrl = this.runtimeArgs["postUrl"];
      if (!postUrl) {
        return "Error: postUrl is not configured.";
      }
      this.introspect(`Attempting to post to webhook: ${postUrl}`);
      if (!name || !email || !phone) {
        return "Error: Missing required parameters. Please provide name, email, and phone.";
      }
      const response = await fetch(postUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          name: name,
          email: email,
          phone: phone
        })
      });
      if (response.ok) {
        return "Document updated successfully!";
      } else {
        return `Failed to update document. Status Code: ${response.status}`;
      }
    } catch (e) {
      return `Failed to update document. Error: ${e.message}`;
    }
  }
};

Setup your new custom agent in the AnythingLLM UI.

a. Go to the gear icon to the right of your workspace. Click Agent Configuration.

b. Select the Workspace Agent LLM Provider - Your Agent will not work until you do this! I just select the same LLM that I chat with in my workspace, but note that not all LLM models are equally good at being agents.

c. Click Configure Agent Skills

d. You should see your new skill under Custom Skills at the bottom.

e. Click our new "Update google sheet" skill. It should have the postUrl field that we defined in our plugin.json. This is where we'll paste our Make.com webhook URL.
Now it's time to test! Return to a chat in your workspace and type something like:

@agent update my contacts with Thomas Jupiter - tjup@fakeemail.com - 777-888-9999

If all went well, you'll see the new row appear automatically in your Google Sheets spreadsheet and this in the AnythingLLM chat:
Now for something extra cool, get your agent to fetch some data from one skill and have it then update your spreadsheets with the results:

Summary

In this blog post, we explored how to write a custom agent skill in AnythingLLM that integrates seamlessly with Make.com webhooks. You learned how to configure a Make.com scenario to handle webhook data and update a Google Sheets spreadsheet, then connect that setup to an LLM agent. This approach unlocks powerful automation possibilities by enabling LLM agents to interact with Make.com's extensive library of pre-built connectors. By leveraging these tools, you can create sophisticated workflows that combine the conversational capabilities of LLMs with the automation power of Make.com, opening the door to countless use cases without having to write complex API integrations yourself.

I'd love to hear what agents you are creating with this method, please post them in the comments!

Web3 UI For Simple Smart Contract

Dustin Runnells — Sat, 16 Nov 2024 14:18:33 +0000

Let's build a web frontend to a smart contract! This is a followup to my previous post about creating a simple smart contract with Solidity and Hardhat. The instructions here assume you are picking up up with the same contract that we just deployed to our Hardhat environment.

In the last post we created and tested a contract that will increment a counter stored in a state variable. Using the Hardhat console we called the incrementCount() and getCount() functions. In the real world, interfacing with a contract won't be through a development console. One way to create an application that calls these functions will be via Javascript (via the ethers.js library) in a web page - a Web3 application!

As stated in the previous post, interacting with web3 applications requires a browser that has a built in wallet. In this simple example we'll use Metamask. Metmask comes pre-configured for Etherium and maybe a few other EVM based blockchains, but not our simulated blockchain in the Hardhat environment. To get this all running, we are going to first setup Metmask, then create the HTML/Javascript needed to call our contract.

Metamask / Web3 Browser

Install Metamask. I'll use the Chrome extension found here. If you are a Chrome user, this will let you now view and interact with web3 content.

I won't walk you through the initial setup, but you will probably be prompted to import an existing private key or generate a new one and write down the recovery phrase. Do that.
Next we'll add the Hardhat network to Metamask. Metamask supports any EVM you'd like, but it needs to be configured to do so. Usually this is just a matter of adding the chain ID and RPC URL. From inside Metamask (you might need to start it by clicking on your Chrome plugins and selecting it) you should see your public address in the top middle. To the left of your address there will be a dropdown that shows the current network. Click that to see what other networks are available:

Click "Add Custom Network". Fill in the Network Name with something like "Hardhat", the Network RPC URL with the IP address and Port of your Hardhat Node, probably something like this if you are running it locally:
http://127.0.0.1:8545/

Enter the Chain ID of 1337 and the symbol can just be ETH for now. Note that we are not dealing with real ETH on the real Ethereum network, but be very careful to stay on our Hardhat network if you have real ETH in your wallet.

Now switch to the Hardhat Network that we just added in the Metamask plugin. In your terminal that is monitoring your running Hardhat node, you should see some activity as your wallet connects.
Since your Metamask wallet doesn't currently have any (fake) ETH, let's send it some. Get your public address from Metamask (at the top of the Metamask window, under the wallet's name, click the copy button). From your terminal window that is running the Hardhat console, do:
```
const [owner,  feeCollector, operator] = await 
ethers.getSigners();
await owner.sendTransaction({ to: "PasteYourMetamaskAddressHere", value: ethers.parseEther("0.1") });
```
If you go back to Metamask, you should see that you now have some ETH in your Hardhat wallet! Now we are ready to do some web3 transactions on our Hardhat network.

Create a Web3 Webpage

Let's create a simple webpage to view and increment our counter. I'm not going to use any heavy frameworks, just plain old HTML, Javascript and the ethers.js library. However, you won't be able to just point the browser to a .htm document, you'll need to be running a webserver somewhere for the Metamask plugin to work. Depending on your OS, you might be able to use a lightweight server like http-server or something locally.

We'll need a few things from when we deployed our contract in the previous post. Refer back to the last post and grab the contract address and contract's ABI JSON array from the artifacts directory. We don't need the rest of the JSON from that file, just what is in the "abi" property, it should start with a [ and end with a ] and look something like this:
```
[
    {
      "inputs": [],
      "stateMutability": "nonpayable",
      "type": "constructor"
    },
    {
      "inputs": [],
      "name": "getCount",
      "outputs": [
        {
          "internalType": "uint256",
          "name": "",
          "type": "uint256"
        }
      ],
      "stateMutability": "view",
      "type": "function"
    },
    {
      "inputs": [],
      "name": "incrementCount",
      "outputs": [],
      "stateMutability": "nonpayable",
      "type": "function"
    }
  ]
```

Let's put this into some HTML and Javascript:

<html>
    <head>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/5.2.0/ethers.umd.min.js" type="application/javascript"></script>
    </head>

    <body>
            <h2>The counter is at: <span id="counterValue"></span></h2>
            <br>
            <input type=button id="incrementBtn" value="Increment" onClick="incrementButtonClicked();">

<script>
const contractAbi = [ {
            "inputs": [],
            "stateMutability": "nonpayable",
            "type": "constructor"
    },
    {
            "inputs": [],
            "name": "getCount",
            "outputs": [
                    {
                            "internalType": "uint256",
                            "name": "",
                            "type": "uint256"
                    }
            ],
            "stateMutability": "view",
            "type": "function"
    },
    {
            "inputs": [],
            "name": "incrementCount",
            "outputs": [],
            "stateMutability": "nonpayable",
            "type": "function"
    } ]; // Replace with your contract's ABI

var contractAddress = '0x5fbdb2315678afecb367f032d93f642f64180aa3'; // Replace with your contract's deployed address
var signer;
var contract;
var contractWithSigner;

connectMetaMask().then(function(provider) {
    signer = provider.getSigner();
    contract = new ethers.Contract(contractAddress, contractAbi, provider);
    contractWithSigner = contract.connect(signer);
    console.log(contractWithSigner);
    estimateGas(contractWithSigner);
    refreshCount();
});

async function connectMetaMask() {
    var provider = new ethers.providers.Web3Provider(window.ethereum);
    await provider.send("eth_requestAccounts", []);
    return provider;
}

async function getCountFromContract(contract) {
    console.log('Calling getCount...');
    var result = await contract.getCount();
    return result.toNumber();
}

async function incrementCount(contractWithSigner) {
    console.log('Calling incrementCount...');
    var result = await contractWithSigner.incrementCount();
    console.log('incrementCount RESULT: ');
    console.log(result);
    console.log('Waiting for transaction to be mined...');
    await result.wait(); // Wait for the transaction to be mined
    console.log('Mined.');
}

async function estimateGas(contractWithSigner) {
    console.log('Estimating Gas...');
    var estimatedGas = await contractWithSigner.estimateGas.incrementCount();
    console.log('ESTIMATED GAS RESULT:');
    console.log(estimatedGas.toNumber());
}

function refreshCount() {
    getCountFromContract(contractWithSigner).then(curCount => {
            console.log('getCount RESULT: ' + curCount);
            document.getElementById("counterValue").innerHTML = curCount;
    });
}

async function incrementButtonClicked() {
    await incrementCount(contractWithSigner);
    refreshCount();
}

</script>

    </body>
</html>

We should now be able to view our HTML document in a web browser with the Metamask plugin installed. I won't go through the Javascript, but if you are familiar with JavaScript and following the concepts and what we did in the Hardhat terminal previously, what is happening in the code should be fairly straight-forward. Metamask should prompt you that you are connecting to the site and you'll need to select the Hardnet network that we set up earlier. You should see something like this in the browser:
If all went well, you can click on the "Increment" button. Metamask will let you know that you are about to make a transaction and inform you of the gas fee. You can Confirm this transaction in Metamask and see the count increment on both the website and in the terminal where you have the hardhat node running!
Congratulations, we are interacting with our contract through a web UI!

A few notes as you dive deeper into Hardhat and Metamask for development:

Each transaction has an nonce. When you reset your hardhat node, that nonce gets reset and you might loose sync with what Metamask thinks is a unique nonce. When that happens, Metmask has an option to set a custom nonce with the transaction, or you can reset Metamask's nonces in Settings->Advanced->Clear Activity Tab data.
You'll need to redeploy your smart contract every time you restart your Hardhat node.
If you are writing contracts that will keep track of users by their public address and want to experiment in the Hardhat console with transactions form different users, you can impersonate different addresses in the console that were displayed when you first started the Hardhat node with something like this before you connect to the contract:
```
const signers = await ethers.getSigners();
const newSigner = signers[1]; // Change the 1 to a different number that corolates with one of the pre-generated testing addresses
const newMain = await main.connect(newSigner);

newMain.setContractAddress("test","0xYourContractAddress");
```

Simple Smart Contract and Hardhat

Dustin Runnells — Sat, 16 Nov 2024 10:13:32 +0000

Welcome to my series on Simple Web3 Smart Contract development! This post is mostly just my notes on how to get a super simple smart contract (self executing program on a blockchain) written, deployed and called. We'll explore more of the Web3 side next post. I've tried to minimize the need for any large frameworks or other complications as much as possible, but once you get a grasp of what is here, it should be easy to integrate whatever frameworks you like for more complex interfaces.

For me it is easiest to learn something new by doing. When dealing with blockchains and smart contracts however, that "doing" becomes expensive when you are trying to do something many times for educational purposes. Since every write to a blockchain costs something (on Ethereum Virtual Machine, or EVM, based networks, this cost is referred to as a Gas Fee). To avoid the cost of writing to a real blockchain, we'll use a tool called Hardhat. Hardhat will simulate an EVM network/blockchain for us to play with. When you are ready to actually publish your Smart Contract to a real blockchain, you'll need to either run a node yourself or use a Node Provider like Alchemy.

In this post we'll create simple contract with the Solidity programming language that just increments a state variable and lets us get it's value. For me, the most compelling part of blockchain technology is the persistence of information that it offers. In smart contracts there are Local variables that are only used to store temporary data while the contract is doing something, and State variables that are persistent and store information forever. In our example today we'll create a contract that has a function that increments a counter state variable and also has a function to retrieve it's current value.

Before we start, I want to introduce you to some terminology, you can skip this section if you are not new to the space. One key concept with blockchains is public/private keys and addresses. If you are familiar with other encryption schemes, such as PGP/GPG, this is the same idea. Every user on an EVM network has a Public Key/Address and a Private key. The private key is never shared with anyone, but your public address is visible to anyone every time you write to the blockchain. Only the owner of a private key can prove that a public address belongs to them through a process known as signing. An application (called a Wallet) on your computer or phone will store your private key and do most of the interaction with the blockchain for you. The system of smart contracts, wallets and blockchains connected with a web browser is often referred to as "Web3". A web3 application can interact with smart contracts, and since smart contracts are on the blockchain themselves and not hosted on a centralized server, these applications are often referred to as "decentralized". On a decentralized system like this, the integrity of the transaction is maintained through cryptographic proof rather than faith in a centralized authority, this idea is referred to as a "trustless" system. Some useful real-world contracts that leverage the persistence and trustless attributes of blockchain are in the Decentralized Finance (Defi) and Non-Fungible Token (NFT) spaces. But for today, we'll just use this technology to increment a counter :)

Create a Project and Setup Hardhat

Let's begin by setting up a project and the Hardhat environment. This will require you to have the Node server-side Javascript runtime already installed. Note that my notes below are based on my experience on a Linux server, but it shouldn't be too difficult to adapt to some other OS.

Create a directory and node project
mkdir counter-test cd counter-test/ npm init --yes
Add Hardhat to project
npm install --save-dev hardhat
Create new Hardhat project
npx hardhat init
Remove the example contract files
rm contracts/Lock.sol

Create the Solidity contract source in a .sol file. We'll put the below in contracts/counter-test.sol

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.27;

import "hardhat/console.sol";

contract CounterTest {
        uint count;

        constructor() public {
                count = 0;
        }

        function getCount() public view returns(uint) {
                return count;
        }

        function incrementCount() public {
                count = count + 1;
        }
}

Create a deploy script. Place the below script in sripts/deploy.js

// We require the Hardhat Runtime Environment explicitly here. This is optional
// but useful for running the script in a standalone fashion through `node <script>`.
//
// You can also run a script with `npx hardhat run <script>`. If you do that, Hardhat
// will compile your contracts, add the Hardhat Runtime Environment's members to the
// global scope, and execute the script.
const hre = require("hardhat");

async function main() {
  const lockedAmount = hre.ethers.parseEther("0.001");
  const lock = await hre.ethers.deployContract("CounterTest");
  await lock.waitForDeployment();
  console.log( 'Deploying CounterTest');
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

Start Hardhat Node and Deploy Contract

Edit hardhat.config.js to include localhost:

/** @type import('hardhat/config').HardhatUserConfig */
module.exports = {
        networks: {
                localhost: {
                        url: "http://127.0.0.1:8545",
                        chainId: 1337
                },
                hardhat: {
                        // See defaults
                        chainId: 1337
                }
        },
        solidity: "0.8.27",
};

Start Hardhat localhost node for testing in separate terminal. This will start a Hardhat node in the foreground and display debugging information as we communicate with our smart contract from the other terminal:
npx hardhat node
You'll get something like the below that lists a bunch of test addresses to work with that already have some test funds:
Now that you have a local blockchain to test with, let's go back to the other terminal and deploy our smart contract with the deploy.js script that we created earlier.
npx hardhat run scripts/deploy.js --network localhost

If we monitor the Hardhat node we will see our attempt to deploy the smart contract. Note that the From address matches the public address of the first test account. Also make note that we now have a contract address (0x5fbdb2315678afecb367f032d93f642f64180aa3), we'll need this to interact with the contract.

Our contract is deployed!
One final note about deployed smart contracts for this post - The web3 version of an "API" is an ABI, or Application Binary Interface. If someone wants to create an application to interact with your contract, they will need to know what functions are available. These can easily found in the ABI JSON that was generated when you deployed, take a look at artifacts/contracts/counter-test.sol/CounterTest.json . The important part here is the JSON array for ABI:

Interact With Your Contract From Hardhat Console

Now that our contract is written and deployed on the blockchain, let's try to call some of it's functions.

Start the Hardhat Javascript console

npx hardhat console --network localhost
We'll store our contract connection in the myContract variable

const myContract = await ethers.getContractAt("CounterTest","0x5fbdb2315678afecb367f032d93f642f64180aa3")
Next, let's call our getCount() function and see what the current count is:
await myContract.getCount()
You should get "0n" if this is our first run. Ignore the n, this is just indicates the type. You can cast this to an integer or whatever type you need in code if you were using this contract in real-life.
Now, let's increment the counter with our incrementCount() function:
await myContract.incrementCount()
You'll see a lot more output from this call since we are actually adding information to the blockchain. Most notably you'll see the blockHash of the transaction and the gasPrice.
Call getCount() again to confirm that the counter incremented as expected. The entire interaction should look something like this:

And that's it! We have written, deployed and called a smart contract on our simulated blockchain! To turn this into a web3 application, you can explore creating a frontend that includes the ethers.js library to interact with your contract.

Parallax Backgrounds

Dustin Runnells — Fri, 16 Dec 2022 04:42:58 +0000

Not a huge update this week, but I did get parallax backgrounds working and fixed some navigation weirdness:

I did run into a problem that I'm concerned will come back to bite me a lot in the remainder of this project - The parallax background was very smooth when I tested with some preloaded images for the layers. But once I import the layers from my levels zip file, things start to get a little jerky. Looking deeper, I have issues with all of my imported images that would be solved with preloads at compile time, including sprites with sharp edges because fix_alpha_edges() doesn't happen outside of preloads(?). BUT I can't preload if these images are coming from images loaded from a zip file at runtime.

Before jumping into a bunch of level creation, I want to add a couple more abilities and sprite animations along with squashing a few bugs:

Stairs are not working very good with just physics guiding the students. Maybe I can set a path for the sprites to follow and disable any kind of ability selection while on the stairs.
Sprite edges are too rough for imported images.
Parallax background layers are jerky.
Normalmaps appear to be inverted (raised areas are embossed).
Doors need animation and texture

Skeletons and Sprites!

Dustin Runnells — Fri, 09 Dec 2022 21:55:19 +0000

When I first started working on this project I had some experience with sprite sheets. I did a quick test scene with an animated sprite using a sprite sheet and thought I understood what I needed and proceeded to work on the rest of the game leaving the sprite work for later. As it turned out, making an animated 2d sprite in a 3d game was not as trivial as I had thought. As mentioned previously, I want to just be able to feed a sprite "atlas" of some kind to the game (maybe from an NFT!) and have it just show up in the game for the random student selection when playing a level. To get there in 3d, I needed to make the Sprite3d in Godot have a viewport to a 2d scene that contained the animation. This seems to work, but hopefully it isn't too inefficient... it feels a little hackey! But very cool that Godot lets you do this! Lots of Inkscape and Gimp work this week with me trying to be an artist drawing this person.

I added some brick to the camera facing part of the building so that the walls look less thin and built a simple Student Editor to my level designer:

Demo:

You can catch a glimpse of a green "skeleton" student above. This was me playing with using multiple student designs. It is so awesome to be able to make an animation with bones and then stick the texture on top so I can just draw the limbs and the animations are built into the game without a huge sprite sheet with every gesture for every character design.

Textures & Zoom

Dustin Runnells — Sun, 04 Dec 2022 19:23:30 +0000

Continuing to learn more than I thought that I wanted to about shaders! My initial concept of being able to just throw 5 images into walls for each room isn't going to be as simple as I had first thought. I suppose that it could be, but it looks cooler with some normalmap, metallic, roughness and emission textures. It is only complicated for me because I can't use Godot's built-in material stuff if I'm doing custom shaders to make holes in the walls. So I anticipate that I'll be spending a lot of time on the level design anyway! For now I'm looking at some stock photos of school classrooms and using Gimp to just cut out different pieces that I think will look cool in the game to make a room. I'll need to do some modeling for props like desks and stuff at some point. I also added zooming with the mouse wheel so that I could get a better look at things. The challenge for the last few days has been lighting. My shader is not behaving as expected with lights in neighboring rooms bleeding through the walls. For now I've solved this by just not having lights in each room and instead moving a single light that follows the camera position:

With the walls currently having no thickness, I think that I'll add some brick to the camera facing wall around the edges so it looks less like paper thin walls. I don't have any plans on designing the outside of the building, so I'll need to limit the camera movement to prevent anyone from going too far left or right and seeing the untextured outside of the building. Maybe I'll also add a background soon that you'll be able to see through the windows. I'll add the bus loop with some school bus models eventually as the end goal for each level.