Game items for Heno.

Heno.’s video game, Relief, is now free-to-play. Available to play for free on iOS, Android & Desktop. Heno. is pioneering a model for musicians to create immersive, multidisciplinary, experiences with their music releases. Expanding stories and building worlds. In this article we explore the newly open-sourced model, and how you can follow Heno.’s model by adding a video game to your next song release. We’ll start with the overall roadmap Heno. used, then dive deeper into how Heno. executed his roadmap.

1. pay-2-play

   1. early access

2. free-2-play

   1. release the song on streaming platforms

3. powerups

   1. onchain => in game

Pay-2-Play

Pay to play is the traditional model of video games. Pay a one-time fee to unlock lifetime access to the game. Heno. wanted to take this model a step further by putting the unlock onchain.

Originally, we released the game behind a paywall for early access. For $7 (0.003ETH) you could buy early access to Heno.’s video game on Zora. To token-gate a video game we needed 2 things

1. a function to check if the player has unlocked the game.

2. a function to pay-to-play to unlock the game.

To check if a player has unlocked the game I wrote a fetchBalance function like this

 const fetchBalance = useCallback(async () => {
    if (!address) return
    setLoading(true)
    const balanceOf = await dropContract.balanceOf(address)
    setBalance(balanceOf.toNumber())
    setLoading(false)
  }, [dropContract, address])

This code first enforces the player has connected their wallet. Then, we lookup how many tickets the player owns with balanceOf. If the balanceOf > 0 the player has already paid to unlock the game. If the balance is 0, they haven’t unlocked the game and should be prompted to buy the early access ticket.

To allow a player to pay-to-play I wrote a mint function like this

const mint = async () => {
    setMinting(true)
    await mintWithRewards()
    await fetchBalance()
    setMinting(false)
  }

This code calls the mintWithRewards function on Zora’s Protocol. Once the player has purchased their ticket, we fetchBalance again, which updates the balance (see above for code) and unlocks the game.

The results looked like this:

Free-2-Play

Once Heno. released the song, Relief, on streaming platforms, it was time to make the game more accessible to his fans globally. That meant removing the paywall, open-sourcing the code & turning the early access tickets into power-ups.

Removing the paywall was easy. Add a big START GAME button to start the arcade game. No credit card required.

Open-sourcing the game was also pretty easy. We use Github to store the website code. I simply went to the settings in Github and changed visibility to public. Now, anyone can use the model Heno. built by downloading the open-source code here.

Powerups

Heno. wanted to reward the players who supported his vision early on. The idea he came up with was to give anyone who owns the early access ticket powerups in the video game. With 3 different tickets, he assigned power-ups to each

• heart - 10 extra lives

• camera - easier enemies

• money - $100 extra in game

These rewards are stackable. If you own a camera & a money ticket you’ll get easier enemies AND extra money in game. If you own 3 hearts, you’ll start the game with 30 extra lives. There’s other combos players can unlock by combining these tickets. I won’t give away all the combos here. Buy tickets here to unlock powerups in game.

I worked closely with DaCircus to build a way to bring items from onchain => in game. It was actually pretty challenging to figure out a way to send messages from the NextJS website I was building with the Godot video game DaCircus had built. After numerous pair-programming session together and lots of questions to ChatGPT we found a solution:

const channel = new MessageChannel()

const callGodotFunction = () => {
    const iframe = document.querySelector("#godotGame") as HTMLIFrameElement
    if (!iframe) {
      return
    }
    const spotifyMoney = deviceId ? 5 : 0
    iframe.contentWindow.postMessage(
      [heartCount, cameraCount, moneyCount, spotifyMoney, address || ""],
      "*",
      [channel.port2],
    )
}

The magic lives in postMessage function. In the NextJS website we lookup how many, and which type, of tickets the player has. We also give an option for players to connect their Spotify account to stream Relief on Spotify, which pays Heno. per stream. Once a player has connected their wallet and / or Spotify account, they click START GAME which calls the callGodotFunction (above) to start the game with powerups.

I want to take a second to highlight the importance DaCircus played in this. He built the entire game on his own. He was the designer for all assets in the game too. He was the main developer & designer on this project. I simply helped publish his game to an easy-to-use website & plugged in the web3 functionality.

Thanks for taking the time to read! If you wanna keep going, here’s some links

1. Play Relief by Heno. - play.mynameisheno.com

2. Collect the Tickets to earn Super Powers - zora.co/heno

3. Download the Code to build your own game - github/sweetmantech/Heno-Relief-Game

4. Stream Relief on Spotify - open.spotify.com