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.
pay-2-play
early access
free-2-play
release the song on streaming platforms
powerups
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.
![](https://storage.googleapis.com/papyrus_images/1f1fee00bc2f0cf0902b68180cab05d1.png)
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
a function to check if the player has unlocked the game.
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:
![null Pay-2-Play - Relief by Heno.](https://images.mirror-media.xyz/publication-images/McGdJ6bDK9QcpEfzSJWY-.png?height=1588&width=2880)
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.
![null](https://images.mirror-media.xyz/publication-images/EsVxuLNVc0vBGEPiKtZOn.png?height=816&width=1262)
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.
![null open source code](https://images.mirror-media.xyz/publication-images/vpSU6futaCZ37Zct54fuG.png?height=220&width=458)
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
![null](https://images.mirror-media.xyz/publication-images/qqbaFLORGLk92AP6xFYp0.png?height=1590&width=2880)
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.
![null Powerups: 5 extra lives & $100](https://images.mirror-media.xyz/publication-images/3NmvW2iI8NN90hCjSWgWt.png?height=1580&width=2880)
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
Play Relief by Heno. - play.mynameisheno.com
Collect the Tickets to earn Super Powers - zora.co/heno
Download the Code to build your own game - github/sweetmantech/Heno-Relief-Game
Stream Relief on Spotify - open.spotify.com
![highlight](/api/highlight?text=Game%20items%20for%20Heno.&author=sweetman&url=%40sweetman&avatarUrl=https%3A%2F%2Fstorage.googleapis.com%2Fpapyrus_images%2F41c7e6e9a9db832b717e0e295bc6bd43.png&featuredImageUrl=https%3A%2F%2Fstorage.googleapis.com%2Fpapyrus_images%2F1f1fee00bc2f0cf0902b68180cab05d1.png&size=512)
![sweetman logo](/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Fpapyrus_images%2F41c7e6e9a9db832b717e0e295bc6bd43.png&w=384&q=75)