How to create an NFT Game
An introductory guide to the obvious and the not-so-obvious in DApp development.
Key Takeaways
- Have you already heard about successful NFT Games, and you are wondering how they are built?
- We guide you through the steps to build an NFT Game.
Who is this article addressed to?
- To those who have or are developing an idea to create an NFT Game and want to gain a general idea of the processes and tools needed. We don’t go into detail of every programming language, but we link important resources and provide the bigger picture.
- To those with medium coding experience but not yet Blockchain experts.
- To any individual curious to learn.
What can you expect from this article?
There will be guidance provided to shape the idea for your first NFT game and finally we offer you an overview about the technology you can use to set up and connect a whole NFT app. Enjoy.
NFTs and its standards
If you have landed in this article, and are not travelling from the past, likely you may have already heard of NFTs. In 2021 it seems NFTs will be very soon even in your cereals. Yet, if this is the first time you come across this acronym stay calm, we will do our best to explain it to you.
NFT stands for Non-Fungible Tokens which by definition are non-fungible, that means they do not get consumed through use, are unique and cannot be traded for something else of the same type and value. This is exactly opposite of how money works with 1$ being interchangeable for another 1$.
NFTs are a kind of digital asset, a token, with unique attributes. They hold information about who the owner is, which is of public record and can be verified at any time. They represent unique items and are stored in a Blockchain.
Ethereum was the first Blockchain to create and explore the NFT space, however, it is not anymore, the unique player in this game.
On each Blockchain several standards exist, that you can imagine as a template for the function you will use in the SmartContract. Each standard offers specific functionalities and attributes that need to be filled during the creation of the NFT.
The first and most well-known standard of NFTs is the ERC721. This standard allows every asset to be unique, not to be destroyed or duplicated and provides basic functionality to track it and transfer it. It also offers the asset to have certain attributes or characteristics that define their uniqueness and rarity.
Other standards less common on the Ethereum Blockchain are the ERC 998 and ERC 1155. They share similar characteristics to ERC721 but they can hold both, non-fungible and fungible tokens, therefore hold a unique set of digital assets. This feature can be really interesting for game use cases, where the currency (fungible) of the game and the collectibles (non-fungible) can be stored together.
As we previously commented, Ethereum is not the only blockchain to offer NFT capabilities. One of the recent problems that this blockchain is encountering are high transaction fees prices (“gas”) and scalability issues. After the famous Cryptokitties game gained so much popularity while additionally, gas prices were increasing dramatically, the company behind it created the Flow Blockchain, specifically conceived for games and crypto-collectibles.
The Tezos Blockchain has also a non-fungible standard, the FA2 which offers a great flexibility to handle different gaming items.
Other Blockchains like the Palm Blockchain are focusing on building an NFT ecosystem for culture and creativity. And the Solana Blockchain is the newest player in the game with heavy focus on art and promises of solving the scalability problem, which Ethereum and other blockchains based on Ethereum faces.
As the space for NFTs is still being explored and tested, new standards are ongoingly being proposed. For that reason, it is recommended to check the list of standards before deciding for one.
2021 the rise of NFTs and NFT Games
Although NFTs have been already around for over five years (the first ever minted NFT was born in 2014 ), it seems that 2021 is being the year of the rise of NFTs.
It is in 2021 where popular artists are selling their art for millions as NFTs, and it is this year where older NFT projects like Cryptopunks are gaining immense value and are bringing NFTs into the mainstream discussion.
With the rise of popularity of NFTs we are experimenting a rise of popularity of NFT games. Some of the very early NFT games like Cryptokitties or Mooncatrescue were released in 2017, but only now in 2021, they have captured a broader public’s attention and have been making a big splash in the mainstream.
A game like Axie Infinity has exploited in popularity this year and become the most expensive NFTs collection with over $40 million sales in June 2021.
So, you have already heard about successful NFTs Games and are curious to understand how they are built? Or maybe you have an idea and would like to build a NFT Game? Let’s start.
The complete guide to build a NFT Game
Step 1: Design
Define the idea and the working model
First and foremost, you should think about the type of game you would like to build. Is it going to be about strategy or battles, or more like a puzzle, maybe you are more into adventure or roleplaying games, or do you prefer to go for sports-like games?
Once you know your game style you should do some research on similar games that already exist in and outside the blockchain. Don’t try to invent the wheel, first learn from what was successful in the past and get inspired.
Non-linear problem-solving approach models like Design Thinking could help you to rapidly ideate and experiment. Design Thinking is human centered and aims at ensuring that the developed solution meets a real user need. It is a collaborative way of work that allows multidisciplinary development teams to make better decisions and quickly test ideas with the user including feedback as a fundamental piece of the solution process.
During the exploration of the problem space, it could help to do some creativity workshops, interviews, brainstorming or role-playing sessions together with your team.
During the last decade, engineers have intensively started to underline the importance of creative thinking in requirements engineering as a decisive factor for building competitive and innovative products.
Also, it can be a lot of fun. You’ll get together with your team, and everybody can express their ideas. In the end you will most likely have a lot of amazing approaches but also realized in what direction you want to go. From there you have to take the idea and make it an actual product. Try to define the most basic rules of your games but at the same time take care, that you are not going into details. Will your characters have the ability to level up? Can you interact with other users? Don’t get too distracted with the details and focus on the main idea. Try to make the game as simple as possible. Think about the most important features that you would like your MVP (minimum viable product) to have. You can write all other ideas somewhere else in a kind of backlog, but if this is your first app you don’t want to go too crazy.
Bring creative-skilled people to the board-team
What do most of the first successful NFT games have in common?
They have cute creatures.
Yes, this is a bit generic, but, unless you are going for a simple pixel art figure, you will need some creative mind in your team, a designer, a 2D or 3D graphical artist or an experienced programmer.
Even a simple pixel cat, can be challenging. Do not underestimate creative work.
To give an example we tried the pixel editor that was used for the mooncatrescue game. On the left image below an example of a mooncatrescue cat, on the right a first catastrophic attempt to paint a cat with the pixel editor.
Step 2. Development
In this step, we will go through the main topics you need to consider when creating an NFT Game, like what platform to use, mobile or web? And how to choose you techStack. We will present the most popular choices. Applications that are built on blockchain technologies are called DApps, which stands for decentralized apps. In the following part we will use the term DApp, when the technology we are talking about can be used in general for any DApp and is not specifically chosen for an NFT Game.
More information about DApps can be found here.
WebApp or Mobile App?
When building a DApp, one of the first questions that might come up is how you want your end-users to interact with it. Through their web browsers (Web App), or maybe with a mobile App?
Web apps have high availability, can be accessed from all over the world from any browser and dispositive: desktops, phones or tablets which makes them more accessible to a broader audience. Nevertheless, mobile apps can offer a greater functionality and can be faster as web apps but the development can be more costly.
When building a mobile App, you have the choice between native and non-native apps. A native app is built for a specific operational system (OS) and will be able to access functionalities, like notifications, camera access etc. But because every OS is different you have to build different versions for each one. iOS and Android might be the most used operative systems today, but the list is by far larger: Windows OS, Blackberry OS, Bada, Symbian OS, not to mention the open-source alternatives like Ubuntu, PureOS, Mobian OS etc.
Non-native apps won’t offer you the same access to functionalities, but they are easier and cheaper to build as you might only need one version that works for all OS.
So before deciding to build a native mobile app you should be very sure you actually need these functionalities before you decide to go in that direction. Not only would you have to develop different versions for different devices and operating systems, but it also needs to go through auditing processes in order to be accepted in the AppStores.
If you are interested in building a hybrid app that works as web app and as mobile app, PWAs (Progressive Web Apps) could be what you are looking for. They are the newest thing in mobile development and don’t need to be distributed through the App Store. Furthermore, they are even available offline as well as being able push messages, which have been functionalities only native apps could provide so far, which is a major advantage. Unfortunately, Apple restricts the access to native functionalities and older versions of iOS are not compatible.
As you might have realized, a thorough research about your target group (and their devices) is necessary before deciding on a solution. The easiest and fastest solution would be a web app so in this article this will also be, what we are presenting.
For more information about the difference between native and non-native mobile apps what kind of mobile app could be the right solution for you, check out this article.
For a further analysis about the pro and cons between mobile and web apps check this article.
Choose the right TechStack for you
When planning the TechStack, you should consider what your team is already comfortable with. Specially if you want a rapid development.
Due to the numerous technological alternatives and combinations that exist, we focus on a certain architecture in this article, but will comment on other available options so that you can decide which technology best suits your project.
There are a lot of amazing games or templates to build NFT games on GitHub so before you start, try looking up a few that you could fork, so you don’t have to start from the beginning. It will save you a lot of time, and you will learn a lot. The beauty of open source.
When researching about the architecture of an NFT Game, you will find a lot of videos, but many go too much into detail on one part and you will be left alone with the task on how to connect these parts or how to actually deploy your NFT game.
One tutorial that stuck out, explains in only 16 minutes how to set up a whole NFT app architecture. However, it will not take you 16 minutes to set up a whole project, as the creator of this video already prepared most of the code beforehand. He rather explains you how the front-end, the back-end, hosting and smart contracts are connected.
The video is by the creator EatTheBlocks, who you will encounter more once you get deeper into building your NFT Game, as he offers very helpful tutorials on many topics you will have to get more knowledge on.
If you are not familiar with GitHub we would advise you to watch some tutorials and get used to it as it is the most popular program to do version control (which you will need if you want to build a software or clone a repository on your local machine). It is very easy to find tutorials and resources online. One tutorial that you can try out is this one that really tries to start at the very basics in case you never interacted with a command line.
Set up your project environment
To set up an NFT app which is connected to Ethereum, Corda , Hyperledger Fabric or other blockchains, Truffle Suite offers a development environment for SmartContracts, with tools for connecting to the frontend, deployment and testing. Another option would be Embark, which is less popular and for that reason has also less tutorials provided.
Frontend
The frontend can be written in JavaScript or TypeScript, though using TypeScript will force you to be stricter with your types which will help you to stay organized especially in bigger teams. As frameworks, you could choose between React and Vue. Angular is also a frontend framework but for a simple web application it is just too complex and heavy.
React is the most popular framework for building DApps but, as mentioned before depending on your teams’ experience, Vue could also be an option. Truffle suit was first built to connect with React but since 2019 they offer a Vue plugin. EatTheBlocks also offers a three-video tutorial on how to create your Truffle + Vue app.
Finally, the hosting of the frontend could be done on Netlify which is a free option for your first websites.
Choosing the Wallet
For the login and the authentication, you can use a crypto wallet. A cryptocurrency wallet is like a physical wallet but digital. You can store your different currencies and tokens in these wallets. Different wallets offer different services, so people are using different wallets for different purposes, to get more information about the options check out this article.
Most of the blockchain based apps we encountered, including CryptoKitties, use the MetaMask wallet as it is very popular and brings certain advantages: It is a non-custodial wallet (which means that you are responsible for your keys and not a third party) and can hold NFTs, a feature that not all wallets offer. Additionally, it is very easy to use and can be easily added to your browser through a plugin. And as you will learn in this EatTheBlock tutorial (Web3 Tutorial: Integrate Web3 with Metamask) on how to sign a transaction through Web3.js with MetaMask, if your DApp doesn’t use MetaMask, no one will use your DApp.
Smart contract
So basically, the frontend will then send the address of the user it got from MetaMask to the SmartContract which will get you the URL of the NFTs, that belong to the address, from the blockchain. To communicate with the SmartContract you can use the Web3js library. It will help you to listen to events, set gas parameters, call functions in the SmartContract and customize your transactions. You could compare it to the restAPI that you can use to communicate with the backend. The SmartContract will communicate through Infura, a popular API to communicate with the blockchain.
In the SmartContract you are defining all the rules and functionalities, which would be taken care of the company if you would build a centralized game. The SmartContract can’t be rewritten (there have been some exceptions, when for example more than 50% or 100% the people that are part of the network/blockchain/coinholder decide that something needs to be updated). The security and therefore the quality of your app depends on your SmartContract. As explained before, the standard you choose for your NFTs will also dictate which functionalities must be included in your SmartContract.
To get an overview about how SmartContracts can look like you can start with some coding challenges like the Crypto Zombie Challenge. You can also follow these live coding sessions to the Crypto Zombie Challenge by Hui Huang which are very informative and will explain you of basic knowledge that will be very helpful when going through this course.
Popular languages to write SmartContracts for NFT Games that are deployed on the Ethereum Network are for example Solidity, Vyper, and Yul. The most popular and widely used language is Solidity, which is also the language you will learn in the crypto zombie challenge. It is also very similar to JavaScript but if you are more familiar with Python maybe Vyper could be your way to go.
A general rule you can always follow: If you don’t have much experience yet always go for the most popular choice, as you will find the most help through videos, tutorials and related projects on GitHub. And Yul for the more experienced developer. Here you can find some extra information on smart contract languages.
For writing the SmartContract, the openzeppelin Library will offer you support to build a secure application.
The Backend
The SmartContract only requests the URL of the NFT, as the whole NFT would be too big to safe on the blockchain. With this URL the frontend will do an axios request to the backend and will request the metadata to this NFT. In this very simple setup, the metadata and NFTs are stored in the backend which is hosted on Heroku.
For a real-life application, you shouldn’t do that as you are storing and creating data in a centralized space. Working with a decentralized app and then using data from a centralized space will undo a lot of the advantages that a blockchain brings. This is called the Oracle problem. To solve this problem, we would need to use a technology like Chainlink. Which helps with adding off-chain data to an on-chain blockchain without compromising its de-centrality.
For the backend node.js can be used as a language which is a popular language for web-development as it is very scalable. And if you are familiar with JavaScript, it will be very easy for you to use. Especially when using KOA framework aims to be a smaller, more expressive, and more robust foundation for web applications and APIs.
The backend will send the metadata, which includes in the name of the NFT, the Id and an URL to the image, to the frontend. With this information the frontend can send another request to the backend, with the URL of the image of the NFT. Then the frontend can display the available data and the user can see the name of its NFT and the image.
Step 3: Testing
For testing your NFT game, you can use the Rinkeby or the Ropsten Testnet or any other you might already have some ether one. If you haven’t used any you need to get some Ether through a faucet, for example for Ropsten you could use this link. For the development phase Truffle offers a tool called Ganache that lets you create a mock blockchain very easily.
Step 4. Deploy and spread the word
You have tested your app and are ready to launch? Then is time to prepare for the mainnet. Please don’t rush here. Invest enough time in testing and checking security threats. See below a complete guide from OpenZeppelin to prepare for the mainnet. Another good guide for the Ethereum Blockchain can be found here
Still not ready to launch? Don’t worry, there is still a lot of work to do before deploying your NFT Game. You should consider to start engaging and building a community. Create some content (articles, videos…), open a Discord channel, share, spread the word.
Acknowledgements
We want to give a big thank to the DLT Talents Community and the Frankfurt School of Finance & Management. Through their DLT Talents Program it has been possible to acquire this knowledge and join a network of incredible talented women. Applications for the next batch are open till 15th of September, so if you are a women interested in blockchain, apply here.
About the authors:
Lena Hierzi: I am a web developer with a passion for ethical AI and Blockchain. I believe that bringing intersectional diversity into technology is a key factor when creating technology for everyone. Therefore, my goal is to create spaces as well as tutorials to take people by the hand and lead them safely into the space. I also have a guilty pleasure for pretty but basic websites that don’t do anything but to bring entertainment to people. Working with Ainhoa on this article as well as on our amazing projects have been super inspiring and motivating for me and I am looking forward to more projects to come. Connect with me on LinkedIn: https://www.linkedin.com/in/lena-hierzi-8221151ab/
https://medium.com/@lenahierzi
Ainhoa Aldave: I am a Blockchain enthusiast, currently learning Blockchain development. I love to work on innovative digital related projects, learn new technologies, imagine how the future could look-like, and make it happen. I enjoy brainstorming with Lena on crazy DApp ideas and try to code some of them. I work as project manager in the software development of graphical interfaces. Amateur photographer and violinist. Contact me via LinkedIn.
