🔨Portal Development

Are you ready to build your dream portal? Let's get started.

You probably noticed that when you run your project locally, it loads the normal Sunflower Land home island. In this part of the tutorial we are going to load your own custom project instead.

Portal Example

To run a portal, you will need to update an environment variable in your .env file.

You will want to change the value of VITE_PORTAL_APP to be the name of your portal that you want to run.

Try the following example:

VITE_PORTAL_APP=crop-boom

After updating this value, run the project locally using yarn dev. You will notice that this instantly starts the crop boom mini-game.

Portal Creation

The Sunflower Land repository includes multiple Portal Examples which you can reuse as a template for your project:

• Crop Boom - A puzzle minigame where you must avoid exploding crops. Includes API interactions and an MMO server connection

• Goblin Swarm - A basic React only mini-game

• Mushroom Forest - A simple map that players can walk around and explore.

It is recommend to explore these projects to learn how to implement different features such as maps, mini-games, NPCs, API interactions + much more.

Since you are building on top of Sunflower Land, you can also reuse all of the gameplay mechanics and see throughout the game.

To create your own portal, you will want to firstly update the VITE_PORTAL_APP to be the name of your project. In this case we will change the .env file to point to our new portal:

VITE_PORTAL_APP=my-custom-portal

Next up, create a new file under src/features/portal as your entry point. For this example we will create a file called MyCustomPortal.tsx

import React from "react";

export const MyCustomPortal: React.FC = () => {
  return <h1 style={{ color: "black" }}>Welcome to my Portal!</h1>;
};

Lastly, inside of src/features/portal/Portal.tsx update the code to return your brand new component. You can remove the other examples as they won't be needed anymore.

import { MyCustomPortal } from "./MyCustomPortal";

initialise();

export const PortalApp: React.FC = () => {
  // Return your app
  return <MyCustomPortal />;
};

You can now run the repo to see your changes yarn dev

Congratulations, you have just created your very own Portal! Here you can build whatever content you wish 🚀

What's next?

You can build your portal using whichever web technology your prefer. However, we recommend using existing technologies and patterns in the repository so you don't need to build everything from scratch.

1. How to Design a Map that players can explore?

2. How to load player data and mint arcade tokens?

3. How do I deploy my portal so others can play it?

Resources

If you are looking to build a portal, it is recommended that you learn the basics of the React framework.

Tutorial: Intro to React – React

If you are looking to build game mechanics such as Combat, co-op minigames + more advanced functionality, it is recommend you explore the Phaser framework.

Phaser - A fast, fun and free open source HTML5 game framework