DEV Community: Chris McCormick

I made a daily roguelike game that works like Wordle

Chris McCormick — Thu, 31 Mar 2022 05:27:19 +0000

During the Seven Day Roguelike jam I made an online Roguelike game called Rogule.

I borrowed some ideas from Wordle. You get one dungeon per day to play, and at the end you get emojis showing how well you did that you can share with others. Check out how people are doing in today's dungeon on Twitter!

I used ClojureScript and ROT.js to build it.

Have fun!

I'm live-streaming dev & launch of an app to prank my family

Chris McCormick — Thu, 15 Apr 2021 12:36:26 +0000

Hey all!

I've built and launched a few things on Product Hunt now. My most recent launch made it to the front page. I thought it would be fun to document my process developing and launching a full app over the course of a day. I'm going to do all of the coding, deployment, and launch live on the YouTube stream below.

I'm starting in 12 hours time at 9am local time, and going through until 3pm when San Francisco clicks over to midnight and I can launch on PH.

Hope you can drop by!

How to use a Google Sheet as a database for your web app

Chris McCormick — Wed, 07 Apr 2021 08:49:28 +0000

Hey all! I made this screencast to show you how to use a Google Sheet as a quick and easy database for your single-page progressive web app. The technique doesn't require authentication, APIs, or complicated libraries. Everything is done directly in the browser without using the command line. Hope this is useful to you, thanks for watching!

Git hacks: self-host a minimal Git repo over SSH

Chris McCormick — Mon, 01 Feb 2021 02:20:57 +0000

Did you know it's super easy to self-host a git repo over SSH? If you're not looking for a full web based git interface (like GitHub, Gitea etc.) you can use the steps below to set up a simple repo over SSH. All you need is SSH access to a server that you own. You can set up as many self-hosted repos as you like. It can even be as simple as a raspberry Pi on your local network.

There are two simple parts to this. First you set up the remote server one time only. Next you add the remote server as a remote for your local repo. After that you can just git push as normal.

Remote setup

To get started SSH into the box where you want the repo to be hosted:

ssh user@example.com

Next you're going to create a folder for the repo, cd into it, and create a bare git repo:

mkdir my_repo_name.git
cd my_repo_name.git
git init --bare

If you want to also serve a read-only copy of this repo over HTTP, then make sure the folder is in a public web root, and run this:

git update-server-info

Local setup

Now you can add this git remote to your existing git repo just like normal:

git remote add origin user@example.com:my_repo_name.git
git push -u origin master

There you go, you now have a self-hosted remote you can push to over SSH.

If you want this to be a backup repo only you can add it with a name other than origin like this:

git remote add backup user@example.com:my_repo_name.git
git push backup master

After this any time you want to push to backup instead of origin you just do: git push backup.

Enjoy your self-hosted private git repo!

P.S. If you're looking for a hosted private git repository with a web interface check out hostedgitea.com.

I made a procedural MIDI melody generator

Chris McCormick — Wed, 06 Jan 2021 13:11:30 +0000

I've just released a melody generator that I've been working on for a while. It's a small web app that you can use to procedurally generate looping MIDI melodies and then use them in your own music.

The fractalesque algorithm it uses to generate melodies is one I came up with when I was writing a lot of algorave music a decade ago. The MIDI melodies are rendered to sound using the wasm port of Timidity by Feross.

Enjoy!

I made a trailer for my game

Chris McCormick — Fri, 23 Oct 2020 23:51:11 +0000

I made this trailer for my game Asterogue. Here's how I did it:

Added some Javascript to go full screen using document.body.requestFullscreen() with a special key sequence.
Used OBS Studio to record a couple of long play sessions and capture some of the bits I really wanted in there.
Used OpenShot to edit it together and create titles.
Published on YouTube.

Watch me live code a new feature into my roguelike game Asterogue

Chris McCormick — Thu, 15 Oct 2020 06:14:16 +0000

I committed to releasing my game Asterogue for Android and Windows on October 30th so I am crunching to get all the features done in time. In this video I live-code a new directional sprite animation feature. Enjoy!

Made with Roguelike Browser Boilerplate.

Validate your startup idea with MVP.css

Chris McCormick — Mon, 14 Sep 2020 06:58:06 +0000

I don't know about you but when I come up with a new startup or app idea I get super excited and want to dive into coding right away.

One of the best things you can do to save yourself a bunch of wasted time and effort is to create a basic landing page and see if anybody actually wants the thing you intend to build, before you build it. There is nothing worse than spending months building something only to launch it to blank stares and crickets.

In this video I'll show you how to use MVP.css to create a basic landing page that you can put up online to test the waters. If you put it up online and people actually like the idea then you can build it. If not, no harm done, on to the next idea!

I shipped an Android game in 9 days and you can too

Chris McCormick — Fri, 11 Sep 2020 09:34:05 +0000

My game Central Park Nanotech Warlex is finally available for a buck on Google Play, hooray! \o/

This post is about how I made the game and got it live after nine days of work, and how you can do the same.

The schedule went like this:

Day 1: Kenney Game Jam 2020.
Day 2: Kenney Game Jam 2020.
Day 3: Got the Android build working.
Day 4-8: Bug fixes & improvements based on feedback.
Day 9: Google Play submission.

Of course I was also doing my freelance work at the same time because my kids have to eat. 😂 Wouldn't it be great to be a full time game developer?

Anyway, here's how I made it work.

Hack #1: Re-use existing code

The first thing I did was to use an existing codebase to bootstrap my game. I used my product Roguelike Browser Boilerplate but there are a ton of other ways you can get a head start. For example you could:

Start with an existing open source game.
Use a plug-n-play game engine.
Use open game art assets from e.g. kenney.nl and open game art and Lost Garden.
Use good libraries for your preferred language.

A huge mistake many amateur game developers make is trying to build everything, including the game engine, from scratch. Unless your goal is explicitly to learn rather than ship, you shouldn't do this.

My interest is roguelike RPG games and you can find art assets and libraries for Javascript and Python to make it easier to build that type of game. The same is true for most other genres of game too like platformer, FPS, RTS, etc. - the tools are out there so go find them.

Hack #2: Use web tech

I build stuff for the web first because I know that browsers run everywhere. Browsers can do everything you need a game to do. They can play sounds, show graphics, do 3d, take input, etc. There are also a ton of great game engines for the browser now.

Projects like Cordova and Electron mean we can bundle our app together with the browser and ship binaries for every platform very quickly. You don't have to start with binaries though because another advantage of building for the web means it is extremely easy to get your game in front of testers. They don't have to download anything, you can just put the game online somewhere and give them a secret URL to access it.

So, leverage web tech so your game can run everywhere in the future, is quicker to code, and is easy to deploy for testers now.

Hack #3: Do a gamejam

Game jams are a great way to hack your motivation. Because you know they are time boxed it's easy to crunch for the period of the jam. It also forces you to keep your game scope small and focused which usually results in a better game.

Even though I made the core game in just two days during Kenney Jam 2020, people already seemed to like it:

This gave me the motivation to go ahead and publish it.

I then spent a few days after the game jam fixing bugs people found and polishing the game up before shipping it.

Hack #4: Use Cordova to build for Android

I had previously built Android apps with Cordova and it was cool, but it seems this has now got even easier. The basic steps are:

Make sure you have the Android SDK installed.
Make sure you have Java installed.
Get cordova installed with npm i cordova.
Create a default project.
Copy your web files into the www folder.

You can then start testing the app on your phone. Once your build is ready for production you do a release build, sign it, and upload it to the Google Play dashboard.

There is some trickiness around getting all that installed and doing package signing. I set up a Makefile to automate most of this and do it repeatably. I'll to do a screencast on my YouTube channel in future explaining all that so if you're interested stay tuned!

After all this you wait a few days for the ~~Gods~~ Google to approve your app and then...

Shipped!

So that's it, that's how you ship a game in 9 days. Thanks for reading!

PS Check out my Itch page if you want to see my games and from there you can sign up to the infinitelives list to be notified of new releases.

Make a coin-up game animation in pure CSS and Javascript

Chris McCormick — Mon, 07 Sep 2020 03:40:39 +0000

In this screencast you'll learn how to make a coin-up game animation in pure CSS and Javascript. You'll also learn about my process for quickly making these game-like CSS animations in HTML5 and Javascript using the Slingcode online editor.

👇 See below for the full HTML & CSS sourccce code!

I've been having a lot of fun working on these juicy game-like animations for HTML5 games lately. These types of animations are a good way to bring heaps of bling to your web games.

I'll be releasing a full set of animations you can use in your own HTML5 games pretty soon, so stay tuned for that.

Source code

<!doctype html>
<html lang="en-us">
  <head>
    <title>Pure CSS coin-up animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="description" content="Blank HTML file for you to create something.">
    <link rel="stylesheet" href="animation.css">
    <script src="https://sfxr.me/riffwave.js"></script>
    <script src="https://sfxr.me/sfxr.js"></script>
    <style>
      * {
        user-select: none;
      }

      body {
        max-width: 800px; width: 100%; margin: 1em auto; font-size: 2em;
        font-family: arial;
        text-align: center;
      }

      #coinup {
        width: 200px;
        height: 100px;
        background-color: #178A94;
        margin: auto;
        margin-top: 300px;
      }

      #coin {
        width: 64px;
        animation: bounce 2s forwards;
        transform-origin: center bottom;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h3>Coin up animation</h3>
      <div id="coinup" onclick="addcoin();"></div>
    </div>
  </body>
  <script>
  const s = new SoundEffect("34T6PkrBW3jQjhYnpdxv8qMiiuXscEMoYasigAhYRms6DWnYCKZ6dDYujNHfBWDv6o1fL1SfJbCreRwiyG1i4iKbpBKxZiMLPzbW9vMBhRaew3nBCVS1eaGF1").generate();
  function addcoin() {
    s.getAudio().play();
    const c = document.createElement("img");
    c.id = "coin";
    c.src = "coin.png";
    c.onanimationend = function() {
      document.getElementById("coinup").removeChild(c);
    }
    document.getElementById("coinup").appendChild(c);
  }
  </script>
</html>

@keyframes bounce {
  from,
  33%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  20%,
  23% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -200px, 0) scaleY(1.1);
  }

  50% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -100px, 0) scaleY(1.05);
  }

  60% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -50px, 0) scaleY(1.02);
  }

  80% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, 0, 0);
  }
}

Customizing your roguelike graphics tileset (with JavaScript)

Chris McCormick — Wed, 26 Aug 2020 03:01:50 +0000

The other day I released this template project for making your own online Roguelike game. I'm making a series of screencasts to show you how to create your own game using the boilerplate. This next video covers customising the graphics tileset and using JavaScript to pick tiles etc.

Enjoy!

It's roguelike boilerplate launch day, yay!

Chris McCormick — Sat, 22 Aug 2020 00:06:08 +0000

I've been working hard on this thing for the past few months and I'm so excited to finally be bringing it to you!

It's a web app template for creating your own roguelike game using JavaScript and web tech. It comes with a PDF guide and I'm currently recording a screencast series to show you how to modify everything to make your own game.

// Detect dark theme var iframe = document.getElementById('tweet-1296729232450568193-980'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1296729232450568193&theme=dark" }

Here's a link to the final product: https://chr15m.itch.io/roguelike-browser-boilerplate

Thanks for reading!