Fang Runner

Fang Runner is a Web3 hyper-casual endless runner game that’s connected to the Ethereum Network (Blockchain). Players can connect their cryptocurrency wallet (e.g. MetaMask) to the game – if they own NFTs (ERC-721 Token) from the Fang Gang NFT Collection, players could compete in a tournament with five weekly competitions and leaderboards – the best players got various prizes such as special NFTs by reaching crazy high scores.

Play the game in your web browser here: Fang Runner

Standout Accomplishment: Managed to program and release a full game in 2 weeks, in time for the release of a PxlFangs NFT Collection. With over 15,000 players, this project generated a lot of hype for the collection and proved to be a great success for Awoo Studios. Done exclusively in my free time.

  • Client: Awoo Studios (Fang Gang)
  • Development Team: Steve Haßenpflug, Pixelhans (Art)
  • My Role: Game Design, Programming
  • Timeframe: Two weeks
  • Platform: Web (Desktop & Mobile)
  • Genre: Hyper-casual, Endless Runner, Arcade
  • Software Used: Unity, JetBrains Rider, Adobe Photoshop, Figma, Remix IDE
  • Technology Used: C#, Ethereum, Nethereum (.NET Library), infura.io, Solidity, MetaMask, Microsoft Azure PlayFab, WebGL

Project Outline & Release Timeline

The founders of Awoo Studios and Fang Gang approached me for a NFT Collection they wanted to release within two weeks. The idea was to have an casual web game released at the same time, where players can play and compete for weekly prizes. The catch: There was only one week left until the release of the collection.

They pitched me a basic endless runner game (hyper casual) with a crypto-wallet integration. If players own a eligible NFT from either the Fang Gang NFT Collection or the PxlFangs NFT Collection, they are able to compete in a month-long tournament. There were weekly seasons where the top players have been able to claim prizes which have been given out in the Fang Gang Discord Server (13k Members).

Diagram of the Fang Runner game, crypto-wallet connection and tournament structure: how it eventually came to be.

Technology & Microservices Used:

  • Unity: The core game is built in the Unity game engine. Handles all the game logic, input, physics and such.
  • Nethereum: An open source .NET integration library for Ethereum. Lets Unity interface with and talk to the Ethereum blockchain.
  • Ethereum: Decentralized, open-source blockchain with smart contract functionality. Both the Ropsten Testnet and Ethereum Mainnet have been deployed to.
    • ERC-721 Token: Standard that describes non-fungible tokens on the Ethereum blockchain. Used to query player wallets for NFT ownership.
  • Solidity: The web3 programming language that the initial leaderboard was written in.
  • Remix IDE: Online web IDE, used to write, test and deploy the solidity leaderboard smart contract to the blockchain nets.
  • Infura.io: Ethereum API. Set of tools and infrastructure. Gateway to execute Ethereum commands (such as querying a wallet for NFT ownership).
  • MetaMask: A popular cryptocurrency wallet browser extension. Let’s players connect their wallets to the game. The game has been tested and optimized for MetaMask.
  • WebGL: The game being deployed on the Web, this library provides the functionality to let the game interface with web apps. A custom web3 version was used to connect crypto-wallets such as MetaMask.
  • Microsoft Azure PlayFab: Online backend-as-a-service for games. Handles the online in-game leaderboard and is responsible for fetching and pushing player data to the Unity game client.

The game itself was rolled out in various phases:

  • Phase 1: Initial discussions about the project begin.
  • Phase 2:Exploration and R&D around a on-chain leaderboard via Ethereum smart contract written in Solidity.
  • Phase 3:Playable core game endless runner is released, with the core compulsion loop implemented.
  • Phase 4:Full crypto-wallet integration and the in-game online leaderboard is deployed. The tournament begins!

Leaderboard: On-Chain Smart Contract (in Solidity)

Initially I’ve spent some time building an Ethereum smart contract to deploy a on-chain leaderboard. The idea was to connect this leaderboard to the core game in Unity and then have the game send the actual commands to the blockchain every time a player got a new highscore.

I’ve used the Remix Web IDE and the Solidity programming language for writing this smart contract. I’ve tested and deployed this program on the Ropsten Testnet Blockchain.

The leaderboard smart contract itself is lean and fairly simple, as needed to keep gas fees at a minimum and avoid exploits:

The smart contract worked well, and after it was tested extensively on the ropsten blockchain (testnet), I’ve deployed it to the ethereum mainnet.

Unfortunately, due to the very high gas fees back in 2021 the stakeholders at Awoo Studios decided that wasn’t an option, as keeping the leaderboard running with potentially over 10.000 active users would’ve quickly drained all the ETH on the wallet that would’ve kept this smart contract running. Another solution was needed!

Developing the Game

The core game was built and delivered in four major updates. Each update was sent to the Awoo Studios stakeholders to gather feedback and get some testing in.

Update #1 – Base Mechanics

The first update had the very basics in features and mechanics implemented:

  • Auto-Running Character: The “fangster” animates and moves automatically in true endless runner fashion.
  • Jump Mechanic: Players can jump with the press of a button.
  • Side-scrolling System: The level and environment automatically scroll.
  • Parallax Layers & Scrolling: Gives depth to the environment.
  • Basic Collision System: The avatar can collide with other objects.
  • Pickup of Collectibles: When the avatar collides with a diamond, they pick it up.

Update #2 – Core Loop

Everything still needed to be polished with hit animations, etc. The way I worked is that I wanted to get the core game “feature complete” before I started working on making things pretty – that also meant the team could get feedback in for things that haven’t been discussed, are missing or should be changed.

  • Score System: Get points for collecting different things (e.g. diamonds, brains) based on logic (e.g. does the fangster has his shield up?)
  • Score Visualization: Score in the upper right and floating point text
  • New Enemy: Dolphins that appear on the ground as obstacles, hit em’ and you DED
  • Improved Collision System: When an enemy touches the player, they get hit, but when an item touches the player they get points/shield
  • Shield System: Players get an “extra life” when hit
  • Power Up: Collect a Brain for a Shield – if you get another one with shield active, you get extra points.
  • Game Over Screen: Shows your final score

Update #3 – Game Structure

The third updated was focused around giving the game a proper structure including a menu, options and so on. Awoo Studios also requested a few new features and improvements:

  • General Game Structure: Main Menu and Game Over Screen
  • Main Menu: Logo, Options
  • Game Over Screen: Score Display, Restart
  • New Enemy: Behodler. Appears later than dolphins. Flies in the sky and spits toilet paper.
  • New Obstacle: Toilet Paper. falls from the sky and damages the fangster when they collide

Recap of what had been requested by the team:

Core Endless Runner Game

  • ✅ Fangster (character) running.
  • ✅ Fangster can jump.
  • ✅ Catch Diamonds that appear as you run to increase score.
  • ✅ Dolphins (flippers) from the ground as obstacles
  • ✅ Toilet Paper (paper hands) from the sky as obstacles
  • ✅ Brain is a power up, act as a shield for 1 hit – if you get another one with shield active, you get extra points.

Feature Extensions & Improvements

  • ✅ Parallax Scrolling Background
  • ✅ Game Over Screen: Score Display, Restart
  • ✅ Main Menu: Logo, Options
  • ✅ Enemy Behodler Logic

With that I considered the game more or less feature-complete based on the briefing from stakeholders at Awoo Studios.

What remained:

  • ⚠️ Cleanup & Boilerplate Build preparation: All that boring non-gamey stuff that needs to happen so this thing can actually be shipped and played somewhere
  • ⚠️ Playable Build & Upload: So the team can play it and can give feedback

After the team received the playable build we needed to decide what’s next:

  • ❓ Visual Polishing: As noted before, now would be a good time to polish the game and add a bit of pizzazz – hit animations, etc.
  • ❓ Gameplay Tuning: Tweak the speeds, behaviors, spawnrates
  • ❓ Some extra functionality: Highscore; also the game, as of now, does not scale in difficulty. Additional logic is required to make it harder (e.g. fangster runs faster, enemies appear more frequent and less predictable, etc.

Crypto-Wallet Integration (Update #4)

After the core game was completed, the game was released early to the community to give them something to play and further hype up the tournament. What was left was the second big chunk of the project: cryptocurrency wallet integration. While the players were happily gaming way, I’ve spent some time mapping out the requirements for the crypto wallet integration.

How the game is integrated into the fang gang website. Note the MetaMask wallet integration.

Here’s the list of tasks that needed to be done:

  • Connecting the game (Unity) to Ethereum. The necessary libraries need to be implemented, hooked up and boilerplate functions need to be written. This is the basis for all game-to-blockchain and blockchain-to-game interactions and serves as the basis for the remaining tasks. Estimated 1-2 days of effort – this is straightforward work.
  • Connecting the game (Unity) with the player’s wallet via a WebGL/Web3 “bridge”. This is the wallet integration part. The necessary base integration for web3-compatible wallets and functions to parse and store their so that players can connect and authenticate their wallets in-game. Estimated 3-4 days of effort – this will need some extensive testing to make sure wallets like MetaMask play well with the WebGL/web3 bridge, as this is very browser/wallet dependent.
  • Querying the Ethereum Blockchain. The next step is to take the player’s associated wallet and query the blockchain for Fangster/PxlFangster tokens in the player’s wallet. 1-3 days of effort.
  • Modifying the game based on data from the blockchain. The queried data needs to relayed back into the game and game code needs to be modified (e.g. granting a shield at start, etc.) 1-2 days of work, should also be straightforward.
  • Adding a persistent high score table/leaderboard. A leaderboard feature needs to written and scores need to permanently stored and associated to wallets in there. 2-4 days of effort depending on how sophisticated for example data-retrieval for returning players should be.
  • Build delivery, feedback and QA. 1 day straight. This happens between all the requirements – shipping builds to the team, gathering/implementing feedback; as well as unexpected things that will pop up.

All of this was doable according to the requirements. The only risk I saw was the storage of the leaderboard within the game itself. Because players will get real, potentially high-value rewards, there will certainly be attempts to reverse-engineer and mess with the functions of the game. I cannot prevent this – while the game’s code is obfuscated, someone who wants to get in, will get in. They may cheat themselves a super high score, for example.

infura.io was used as the intermediate API to query the Ethereum blockchain via command from the game.

In total this would be 9-15 days of effort, I planned and communicated to the team. So over a full week to two weeks. Considering the initial crore part of the game was estimated with 5-10 days and took me about ~6 days of work (plus extras), this would definitely be heavier and could easily take a bit longer than expected, so I’d set the target the 23rd/24th October as the deadline.

Release & Competition

The game was officially released on the 23th of October, with the Tournament starting on the 24th October. In total, over 15,000 people have played Fang Runner. We had to migrate the account to a different one shortly before release, this is why only 9k are shown in the screenshot.

Microsoft Azure PlayFab: here you can see player data that is sent from the game directly to the PlayFab cloud.
Official tournament description.

Players could earn a variety of different rewards, mostly special rare versions of NFTs. The main prize was a piece of hardware: A completely unique arcade stick (gamepad/controller) custom-built by pixelhans, the artist for this game.

Play the game in your web browser here: Fang Runner

About the Author

Hey, I’m Steve!

Written by Steve Haßenpflug, a seasoned game designer with a strong product & technical background. His focus is on creating engaging games for companies that want big results.

Steve has developed top-grossing AAA games for IPs beloved by players around the world (Angry Birds, Trolls) with international companies (NBC Universal, DreamWorks, Rovio) and helped bootstrap gaming startups in the early stages of seeding. He’s an expert in mobile free-to-play mechanics.

He also manages GameDevGems, a resource that aims to help game developers to get better at making games through gamedev concepts, tutorials and techniques and is a passion-project of him.

PortfolioWebsiteLinkedInTwitter

Leave a Reply