⚔
Advanced Gameplay
We are using the Phaser Game Engine to fuel Sunflower Land.
You can extend custom behaviour inside of your
Scene.js file.Our plan is to launch a range of SDKs that developers can use to quickly spin up concepts. Amongst these include:
- Advanced Bumpkin Sprite Sheets (Fishing, Hammering, Running)
- SFL Burn/Mint APIs
- In-App Purchases
- Token Gating
Modals can be really useful if you plan to integrate user interaction on your island. Here's how you can use them.
Community Modals supports two types, loading and speaking, the loading type will be useful if you plan to also use our Community API to display a "Loading" message waiting for your API call to be done. Speaking will be really useful for interaction with NPCs.
To call our Community Modals you need to use
window.openModal()
Here's some example:// Show Loading Modal
window.openModal({
type: "loading",
});
// Close Modal
window.closeModal();
// Show Speaking Modal with no actions
window.openModal({
type: "speaking",
messages: [
{
text: "Hello World!"
},
{
text: `Another Hello World!`
}
],
});
// Show Speaking Modal with actions
window.openModal({
type: "speaking",
messages: [
{
text: "Hello World!"
},
{
text: `Another Hello World!`,
actions: [
{
text: `Reply Hello World`,
cb: () => {
this.yourAction()
},
},
],
}
],
});
// Close Modal
window.closeModal();
Toasts can also be really useful if you plan to add user interaction on your island.
Toasts have two parameters, text which is obviously mandatory and item, this one isn't mandatory, item will be the icon showed on the left of the toast, here's a complete list of all the items you can use:
Here's an example:
// Display Toast
window.createToast({
text: "Test Toast hello world lol",
item: "Sunflower", // This is optional
});
Ready to elevate your island to another level?
Our Community API isn't complete yet but we've added a few functionalities just for you!
To request your API key you can simply tag Sacul, Craig or Adam in our #coders-chat channel on Discord.
To do so, you'll need an island ID and API Key.
The API Key can be displayed publicly on your Island repository but keep in mind that if you plan to store sensitive data we would recommend you to use a Custom Servers and handle API calls there.
const CommunityAPI = new window.CommunityAPI({
id: "my_island",
apiKey: "API_KEY",
});
Want to add some reward functionalities on your Island? Here's how to do so using our API:
This mint endpoint requires two parameters
wearables or items: Use these to specify the typo of wearable or item your want to allow your players to mint.
metadata: This is a string field, used to save, for example, the mint timestamp. It's not mandatory to specify anything in it, you can leave the field blank if you don't plan to use it.// Mint a Wearable
CommunityAPI.mint({
metadata: JSON.stringify({basicHairMintedAt: Date.now()}) // or ""
wearables: {
"Basic Hair": 1,
},
});
// Mint an Item
CommunityAPI.mint({
metadata: JSON.stringify({sunflowerMintedAt: Date.now()}) // or ""
items: {
"Sunflower": 1,
},
});
This endpoint can be useful if you want to create some quests, restricted functionalities, ect..
Like the mint endpoint, this one requires two parameters:
items: Use this to specify the item type your want to burn from the player's farm?
metadata: This is a string field, used to save, for example, the burn timestamp. It's not mandatory to specify anything in it, you can leave the field blank if you don't plan to use it.CommunityAPI.burn({
metadata: JSON.stringify({sunflowerBurnedAt: Date.now()}) // or ""
items: {
"Sunflower": 1,
},
});
Are you looking to use your own UI elements and workflows on your island? Well we have you covered.
You can render React components onto your own DOM tree which will display on top of the game.
Inside of your Scene, call the following method to render your component:
ReactDOM.render(
React.createElement(AppContainer),
document.getElementById("community-root")
);
// AppContainer.tsx
import React from "react";
export const AppContainer: React.FC = () => {
return (
<div className="absolute inset-0 flex items-center justify-center">
<p id="test-id" clas>
Hello world
</p>
</div>
);
};
Are you using TypeScript to build your island? Let's avoid defining everything as any and use the right types!
// File: src/types.ts
type CommunityToasts = {
text: string;
item?: string;
};
type CommunityModals = {
type: "speaking" | "loading";
messages: {
text: string;
actions?: { text: string; cb: () => void }[];
}[];
};
type CommunityAPICallRecord = Record<string, number>;
interface CommunityAPICall {
metadata: string;
wearables?: CommunityAPICallRecord;
items?: CommunityAPICallRecord;
}
interface CommunityAPI {
mint: (mint: CommunityAPICall) => void;
burn: (burn: CommunityAPICall) => void;
}
interface CommunityAPIConstructor {
new (config: { id: string; apiKey: string }): CommunityAPI;
}
declare global {
interface Window {
BaseScene: any;
createToast: (toast: CommunityToasts) => void;
openModal: (modal: CommunityModals) => void;
closeModal: () => void;
CommunityAPI: CommunityAPIConstructor;
ExternalScene: typeof ExternalScene;
}
}
Last modified 20d ago