Creating a play-to-earn (P2E) game can be easy – provided you have access to the right tools. With the right tools, you’re able to develop a cutting-edge P2E game in just four simple steps. We’ve outlined all the necessary steps to build a play-to-earn game in the following guide, including how to:
- Build a 2D Web3 Game
- Incorporate NFTs
- Build a Smart Contract to Run a P2E Game
- Integrate Moralis and the Smart Contract
Note: The following instructions briefly explain what’s needed to create a play-to-earn (P2E) game. As such, we encourage you to watch the videos listed within each section. In each video, one of our in-house Moralis experts will explain to you more thoroughly how to build a P2E game.
In this article, you will learn how to build a play-to-earn game using Phaser and Moralis. The former is an open-source studio game engine that offers various game elements and even entire games. However, Moralis is what makes the Web3 development silky-smooth. This “Firebase for crypto” platform is the best Web3 development platform that enables JavaScript-proficient devs to create killer dapps. Moralis is also cross-chain and cross-platform interoperable. Hence, it offers countless opportunities. The Moralis SDK comes with a full scope of tools and integrations covering all your backend needs. As such, you can easily sync and index smart contract events and, in turn, index the blockchain. On top of that, Moralis also offers frontend shortcuts via its web3uikit and Web3 boilerplate. So, if you want to build a play-to-earn game without breaking a sweat or a bank, make sure to create your free Moralis account.
Building a Play-to-Earn (P2E) Game – Example Project
Before moving on, we must point out that this article revolves around an ongoing example project spanning multiple parts. We started the latest one more than a month ago and have already completed the first three parts. We created a simple 2D Web3 game using Phaser and Moralis in our first part. In the second part of our “build a play-to-earn game” quest, we focused on NFT power-ups. Also, we illustrated how to give access to a Web3 game only to the owners of particular NFTs (non-fungible tokens). We focused on Web3 contracts (smart contracts) to cover the game economy in the third part of our mission. We used an ERC-20 contract to create example fungible tokens, and our P2E game utilizes these tokens. In addition, we created another metaverse smart contract. That one ensures that rewards and tokens are handled properly.
This also brings us to the next part of our example project, which we will focus on herein. Our mission will be to integrate those smart contracts into our “Bank Panic” game. Of course, we will be using Moralis to get that done effortlessly in minutes.
Note: For those eager to complete all the previous three steps on your own, make sure to check out the “Catching Up” sections. There, you can find all the video tutorials of the previous three parts. Moreover, we also included some explanations and timestamps to assist you further in the “build a play-to-earn (P2E) game quest. On the other hand, if you’ve been following along with our progress, feel free to skip those parts.
Creating a Play-to-Earn Game – Catching Up
As mentioned above, this is where you can find everything you need to know about our ongoing project. For extra convenience, we’ve broken down this section into three parts, as stated in the note above. Furthermore, here’s also the link to our example project’s code on GitHub: https://github.com/ashbeech/moralis-phaser-demo.
Part 1 – Build a 2D Web3 Game
If you want to be able to build the same or similar 2D Web3 game as we built, you must complete the first video where a Moralis expert shows how to complete the initial setup and how to use Phaser to get a completed 2D game. As a result, you will have a functioning 2D game ready in no time. Next, you will start adding Web3 features with the help of Moralis’ SDK. Moreover, your primary goal will be to add Web3 authentication to this Phaser example game.
First, you will import React-Moralis using the Visual Studio Code (VSC) terminal and the “index.jsx” file. Then, you’ll add a standard “Application” function (first video below, starting at 12:05). You will also learn how to use the “.env” file to enter your Moralis server’s details at 12:52 in that same video:
You’ll need to go through the initial Moralis setup (13:15) and create a Moralis server to complete that part. Moreover, you will go through the following steps:
- Create your free Moralis account or log in to your existing account.
- Once logged in, create a Moralis server inside the “Servers” tab.
- Access your server’s details and copy them.
- Paste the server URL and application ID into your “.env” file.
Next, you will apply additional tweaks to the “index.jsx” file (14:10). Then, you’ll add React-Moralis functions in “App.jsx” (14:36). That way, you will be able to authenticate with MetaMask. To wrap up part one, you will be including Redux at 15:13. The latter will dispatch events from your example game to your React hooks and vice versa.
Video Part 1
Part 2 – Incorporate NFTs
Note: This part of our “build a play-to-earn game” project is not essential because we will not be building on top of this feature moving forward. However, it is a great way to learn about NFT power-ups and how to incorporate NFTs into P2E games in general.
To follow along in the video tutorial part two, make sure that you’ve completed part one. Of course, you can also use the above GitHub link and clone the code if you want to focus on NFT utility. Starting at 0:55, you will have a chance to see the details you need to add to “App.jsx” and “MainMenu.js”. The Moralis expert has been kind enough to mark those additions with comments inside the code. Moreover, this is where you will learn how to utilize “getNFTBalances” to check users’ wallets for relevant NFTs. In addition, you will learn how to make NFTs’ metadata renderable. Finally, you will see how to utilize users’ NFTs to personalize the background of the main menu in the game.
Video Part 2
Part 3 – Build a Smart Contract to Run a P2E Game
If you want to build a play-to-earn game, you must deal with smart contracts. They run and balance the economy of our P2E game, which must be fair if you want your game to succeed. Fortunately, this doesn’t mean you need to become a Solidity expert. With tools such as OpenZeppelin and Remix, you get to cover your smart contract needs with minimum resistance.
Our goal is to make the game “free to play” eventually. Although, we’ll start by requiring players to stake a small number of tokens, as it makes the economy of the game much simpler. The stake will give players access to play the game and will be quite important for balancing our game’s economy. At the beginning of the part three video, you will get to see a demo of our example game with tokens included. Then, at 1:26, the Moralis expert explains the aspects of our example game’s economy. Moreover, we kept things relatively simple. In essence, players that win the game get to collect staked tokens plus the tokens earned during the game. However, the game’s treasury collects their staked tokens if they lose. Starting at 1:59, you can see how to use MetaMask to add accounts.
At 2:28, you get to learn how to use the Mumbai testnet faucet and Polygon faucet to obtain some “play” MATIC tokens. You’ll need those coins to deploy smart contracts on Polygon’s testnet (Mumbai). Then, you will take a closer look at both of our example contracts (3:11). The “P2EGame.sol” contract is in charge of the tokens’ flow in the game, while “GameToken.sol” takes care of minting our game’s tokens. Finally, you will use Remix to deploy the contracts.
Video Part 3:
Part 4 – Integrate Moralis and the Smart Contract
At this point, you should all be up to speed and have parts 1-3 covered. However, in case you don’t have the time to go through all the previous steps, you can just clone the code from GitHub. The latter is linked in the “Build a Play-to-Earn Game – Catching Up” section. Of course, you will also need to deploy the two smart contracts, as shown in part three. As such, you will get to obtain their contract addresses, which you will have to paste into the “.env” file:
Looking at the screenshot above, you can see that you also need your Moralis server’s details. If you need help with that step, use the video below at 0:40:
Using Moralis Cloud Functions
Starting at 1:00 (video below), the Moralis expert starts explaining how to use Moralis’ cloud functions to build a play-to-earn game. To access this feature from Moralis, log in to your Moralis admin area and navigate to the “Servers” tab. There, click on the arrow next to your server’s name to see more options. Then, you’ll be able to click on the “Cloud Functions” button:
Inside the “Cloud Functions” feature, you need to paste the content from “CloudFile.js”. Moreover, this is the line of code that defines the function to be used when the players win:
Moralis.Cloud.define("playerWon", async (request) =>The above function calls the P2E contract, which distributes the winnings via the on-chain transactions. As such, the contract’s address must be included in our code as well:
const p2e_contract_address = "0x7053c8dB1c4ED4C96c47E322A8517BcAeE4ECaE5";
Note: Make sure to use the address you obtain from Remix after deploying the contract. The same applies to the contract’s ABI.
For a more detailed code walkthrough of our cloud function, use the video below starting at 1:28. Furthermore, “Moralis.Cloud.run()” inside the “App.jsx” file ensures that our example game uses the cloud function properly. As such, the cloud function triggers on-chain transactions.
However, in the case of the “GameToken” contract, players interact with it directly via Moralis’ API (3:00). We use the “useWeb3ExecuteFunction()” function to call “approval”. Which ensures that only players with staked tokens can enter the game.
Finally, we encourage you to check out the final demo of our example P2E game with parts 1 – 4 completed (3:54).
Video Part 4: https://www.youtube.com/watch?v=h31YcNgAIUw
What’s Next?
To make thighs as neat as possible, we will continue this example project in upcoming tutorials by creating the user interface within the Phaser scenes. That way, we will create a rich UX, which is essential for games to succeed. Our upcoming tutorials will also explore how to prevent cheating. Hence, we will cover techniques on how to produce valid on-chain consensus from off-chain real-world data. So, make sure to stay tuned!
How to Create a Play-to-Earn Game – Summary
In this article, we first quickly covered the previous three parts of our “how to build a play-to-earn game” quest. Then, we focused on the final step by integrating Moralis and the smart contract. In short, the steps to build a play-to-earn (P2E) game are:
- Build a 2D Web3 Game
- Incorporate NFTs
- Build a Smart Contract to Run a P2E Game
- Integrate Moralis and the Smart Contract
Along the way, you got to learn how to work with Remix, Moralis, and with Moralis’ cloud functions. Finally, we informed you that future tutorials are coming where you’ll be able to wrap up this example project. As such, we hope you look forward to creating an awesome Web3 UI and implementing anti-cheating measures.
If you think our “build a play-to-earn game” example project was interesting, we encourage you to visit the Moralis YouTube channel and the Moralis blog. There, you’ll find a ton of other excellent tutorials and blockchain development topics. For instance, some of the latest articles cover how to create a Binance NFT, Web3 without MetaMask alternatives, Ethereum Name Service (ENS), how to claim an in-game NFT, connecting Web3 wallet to a Twitter account, and much more. However, if you prefer to focus on Web3 gaming, start with our beginner’s guide to Unity Web3 programming. That way, you’ll learn how to make the most out of Moralis’ Metaverse SDK.
We also recommend you learn how to store off-chain data and how to communicate with a Web3 database from Unity. Furthermore, you can also connect a Unity app to a Web3 wallet and do blockchain transactions with Unity. Nonetheless, if you are eager to become a Web3 developer in a professional way, you ought to enroll in Moralis Academy.
