: 30+ minutes
Introduction[]
Hey all , Yoraiz0r here.
This tutorial's purpose is to teach you how to create a tile interface , starting from simple to pretty amazing ones, from scratch.
The tutorial wil work by a step-by-step method , and we will revise our code here and there to make it prettier towards the end.
Requirements:
Nothing , as I will include the base and the end result! =D
Getting started[]
First of all , we're going to need a functional tile , a simple one , we can use the one available here.
This is just a regular item , crafted from 0 wood (air) , that places a tile that looks like a weird chest.
If you have your own functional tile , you can use that instead.
Afterwards , you'd need to make a .cs file for your tile interface , this is done by going to the tile folder , making a new file that is of the .cs extension , and has the same name as your tile.
In that .cs file , we will write everything that our interface does for now, and give the player an access to that interface from the tile.
So to get started , you will create your own tile interface Object.
tConfig luckily already has an API for us to make a convenient interface , so we're going to use it.
you start by having this code
public class Tile_Tutorial : Interfaceable
{
// this is where all of the methods of your class will be!
}
This is a declaration of your custom interface , you name your interface however you like , I named this one 'Tile_Tutorial'.
In this interface class , we'd need to make a code that generates the interface, so lets get this done.
const int Number_Of_Buttons = 3;
const int Number_Of_Slots = 3;
public static void Create()
{
Config.tileInterface = new InterfaceObj(new Tile_Tutorial(), Number_Of_Slots, Number_Of_Buttons);
Config.tileInterface.AddText("Title", 400, 270, false, 0.9f,Color.White);
Config.tileInterface.AddText("Cake", 350, 315, true, 0.9f,Color.White);
Config.tileInterface.AddText("Pie", 450, 315, true, 0.9f,Color.White);
Config.tileInterface.AddItemSlot(400,290);
Config.tileInterface.AddItemSlot(350,335);
Config.tileInterface.AddItemSlot(450,335);
OurCustomUpdateFeature();
}
What was done here , is that we did the following.
- Add two constant variables , this step was not necessary , but will be helpful on big interfaces (such as ones with 40 buttons or slots) , these variables will be used to determine how many buttons , and item slots your interface will be allowed to have.
- Wrote a 'Create()' method , this is what we will call to initialize our special interface , and in it we will make all the necessary starting steps.
Deeper analysis of what our 'Create()' method does:
- Config.tileInterface = new InterfaceObj(new Tile_Tutorial(), Number_Of_Slots, Number_Of_Buttons); In tConfig , only one tile interface can be active at a time , we set ours to a new InterfraceObj Object , that is our
- Tile_Tutorial. We also give that Tile_Tutorial 3 possible item slots and 3 possible buttons. Config.tileInterface.AddText("Title", 400, 270, false, 0.9f,Color.White); Config.tileInterface.AddText("Cake", 350, 315, true, 0.9f,Color.White); Config.tileInterface.AddText("Pie", 450, 315, true, 0.9f,Color.White); Here , we 'addtext' , this is actually adding buttons to our interface , creating them. A button is created using the AddText method , this method takes the following things: A text - this one is what you will see as your button , for example a "Cake" button. An X offset on the screen , this is the distance in pixels from the left-most edge of the screen , for example 400. A Y offset on the screen , same principle as X but the distance from the upper-most edge of the screen , for example 270. A boolean 'clickable' , if set to false you will not be able to click the button unless your code will manually change this value in the future , if true the button will be clickable and will momentarily grow in size if the mouse is over it. a float 'scale' this is the size modifier for your button , I picked 0.9 , the letter f afterwards stands for 'float'. a Color object 'button color' , you can set it to any color you'd like, I picked Color.White for these buttons.
- After we added those , we add in a triplet of matching item slots. Config.tileInterface.AddItemSlot(400,290); Config.tileInterface.AddItemSlot(350,335); Config.tileInterface.AddItemSlot(450,335); These ones are more simple then buttons , really. All you pick is the location of the slot , X and Y , going by the same principle of buttons.
- In the end of our creation method , I threw in a call to a custom method. OurCustomUpdateFeature(); In many tile interfaces , you will want the interface to change , either in shape or in button colors or button positions , or whatever , making those changes in a method outside of the regular ones will greatly help you. for now , have it to be like this: public static void OurCustomUpdateFeature(){}
Our code should now look like this:
public class Tile_Tutorial : Interfaceable {
const int Number_Of_Buttons = 3;
const int Number_Of_Slots = 3;
public static void Create() {
Config.tileInterface = new InterfaceObj(new Tile_Tutorial(), Number_Of_Slots, Number_Of_Buttons);
Config.tileInterface.AddText("Title", 400, 270, false, 0.9f,Color.White);
Config.tileInterface.AddText("Cake", 350, 315, true, 0.9f,Color.White);
Config.tileInterface.AddText("Pie", 450, 315, true, 0.9f,Color.White);
Config.tileInterface.AddItemSlot(400,290);
Config.tileInterface.AddItemSlot(350,335);
Config.tileInterface.AddItemSlot(450,335);
OurCustomUpdateFeature();
}
public static void OurCustomUpdateFeature() {
}
}
Congrats , at this phase , you have already created a tile interface , with 3 item slots , and 3 buttons! It does not do anything , but it exists! To make the player be able to access this tile interface , we'd need to write an access method to the interface , that is usually done by having the tile be rightclicked , which is what we are going to do.
public void UseTile(Player player, int x, int y) {
while(Main.tile[x,y].frameX>0) x--;
while(Main.tile[x,y].frameY>0) y--;
Tile_Tutorial.Create();
Config.tileInterface.SetLocation(new Vector2((float)x,(float)y));
Main.playerInventory = true;
}
There is not much you will want to change here , all we do is create our tile interface , setting the place we want it to be at (so that if you get too far , it will close itself , like when you get away from a chest) , and open the player inventory. Our code should now look like this:
public void UseTile(Player player, int x, int y) {
while(Main.tile[x,y].frameX>0) x--;
while(Main.tile[x,y].frameY>0) y--;
Tile_Tutorial.Create(); Config.tileInterface.SetLocation(new Vector2((float)x,(float)y));
Main.playerInventory = true;
}
public class Tile_Tutorial : Interfaceable {
const int Number_Of_Buttons = 3;
const int Number_Of_Slots = 3;
public static void Create() {
Config.tileInterface = new InterfaceObj(new Tile_Tutorial(), Number_Of_Slots, Number_Of_Buttons);
Config.tileInterface.AddText("Title", 400, 270, false, 0.9f,Color.White);
Config.tileInterface.AddText("Cake", 350, 315, true, 0.9f,Color.White);
Config.tileInterface.AddText("Pie", 450, 315, true, 0.9f,Color.White);
Config.tileInterface.AddItemSlot(400,290);
Config.tileInterface.AddItemSlot(350,335);
Config.tileInterface.AddItemSlot(450,335);
OurCustomUpdateFeature();
}
public static void OurCustomUpdateFeature() {
}
}
Feel free to compile your mod at this point (It will not compile until after "ButtonClicked", "CanPlaceSlot", "PlaceSlot", and "DropSlot" are added later in this tutorial ~Ragestorm999), place the tile and check the interface out!
==Getting business done==
So we have our tile interface available , but it does not do anything. For this tutorial , I will show you a brief example of what can be done with tiles. The example will include the following:
- If there is an item in the cake slot , and no item in the pie slot
- If there is an item in the pie slot , and no item in the cake slot
We will also set it so if either of the buttons is pressed while you have an item in both slots , both item will disappear. As you can see , we are very dependant on our item slots , in such events its a good idea to set a variable that is set to the result of checking them , so that the check only happens once when needed rather then a cazzilion times. Note: The order in which you make your buttons and slots matters , because they are kept in an array , the order determines the index number of every subject in there , for example Title being index 0 , cake being index 1 and pie being index 2. For now our order is 0: title button and slot 1: cake button and slot 2: pie button and slot 3
public void ButtonClicked(int button) {
OurCustomUpdateFeature();
Item[] itemSlots = Config.tileInterface.itemSlots;
bool I_Have_A_Cake = false;
bool I_Have_A_Pie = false;
if(itemSlots[1].stack > 0 && itemSlots[1].type > 0) I_Have_A_Cake = true;
if(itemSlots[2].stack > 0 && itemSlots[2].type > 0) I_Have_A_Pie = true;
}
Here we define the 'ButtonClicked' method. This method is called whenever a button in our interface is clicked. In it , we call our custom update feature , that does nothing for now and then we get to business.
- Item[] itemSlots = Config.tileInterface.itemSlots; Here we set a reference to the item array of the tile interface , in short it means we look at the tile interface's item slots.
- bool I_Have_A_Cake = false; bool I_Have_A_Pie = false; Here we set two variables , one checks if we have an item in the cake slot , and the other checks if we have an item in the pie slot.
- if(itemSlots[1].stack > 0 && itemSlots[1].type > 0) I_Have_A_Cake = true; if(itemSlots[2].stack > 0 && itemSlots[2].type > 0) I_Have_A_Pie = true; Here we check if there is any item in the item slot for both the cake and pie , and if these items have a stack bigger then 0 , if so , we set our variables to true.
At this point our code will look like this:
public void UseTile(Player player, int x, int y) {
while(Main.tile[x,y].frameX>0) x--;
while(Main.tile[x,y].frameY>0) y--;
Tile_Tutorial.Create(); Config.tileInterface.SetLocation(new Vector2((float)x,(float)y));
Main.playerInventory = true;
}
public class Tile_Tutorial : Interfaceable {
const int Number_Of_Buttons = 3;
const int Number_Of_Slots = 3;
public static void Create() {
Config.tileInterface = new InterfaceObj(new Tile_Tutorial(), Number_Of_Slots, Number_Of_Buttons);
Config.tileInterface.AddText("Title", 400, 270, false, 0.9f,Color.White);
Config.tileInterface.AddText("Cake", 350, 315, true, 0.9f,Color.White);
Config.tileInterface.AddText("Pie", 450, 315, true, 0.9f,Color.White);
Config.tileInterface.AddItemSlot(400,290);
Config.tileInterface.AddItemSlot(350,335);
Config.tileInterface.AddItemSlot(450,335);
OurCustomUpdateFeature();
}
public static void OurCustomUpdateFeature() {
}
public void ButtonClicked(int button) {
OurCustomUpdateFeature();
Item[] itemSlots = Config.tileInterface.itemSlots;
bool I_Have_A_Cake = false;
bool I_Have_A_Pie = false;
if(itemSlots[1].stack > 0 && itemSlots[1].type > 0) I_Have_A_Cake = true;
if(itemSlots[2].stack > 0 && itemSlots[2].type > 0) I_Have_A_Pie = true;
}
}
if(I_Have_A_Cake && I_Have_A_Pie) { itemSlots[1] = new Item(); itemSlots[2] = new Item(); return; } if(button == 1) { if(I_Have_A_Cake) { itemSlots[2] = (Item)itemSlots[1].Clone(); } if(I_Have_A_Pie) { itemSlots[1] = (Item)itemSlots[2].Clone(); itemSlots[1].stack = itemSlots[1].maxStack; } } if(button == 2) { if(I_Have_A_Cake) { Main.dayTime = !Main.dayTime; } if(I_Have_A_Pie) { itemSlots[2] = new Item(); } }
the first thing we do , is check if they(the cake and pie slots) both have items , and if so , 'reset' the items in their slots and end our checks here(return). The second thing , is that if we determined that we do not have them both , we execute a code for any of the buttons we chose to click.
if(button == 1)
{
if(I_Have_A_Cake)
{
itemSlots[2] = (Item)itemSlots[1].Clone();
}
if(I_Have_A_Pie)
{
itemSlots[1] = (Item)itemSlots[2].Clone();
itemSlots[1].stack = itemSlots[1].maxStack;
}
}
In this part , we already know we don't have both slots with items in them so there is no point to check that. We will simply check if we have the cake button pressed while we have a cake , execute the logic for it , or if we have a pie , and execute our logic for that. the same process is repeated for the pie button , with its own logic. Our code should now look like this
public void UseTile(Player player, int x, int y) {
while(Main.tile[x,y].frameX>0) x--;
while(Main.tile[x,y].frameY>0) y--;
Tile_Tutorial.Create(); Config.tileInterface.SetLocation(new Vector2((float)x,(float)y));
Main.playerInventory = true;
}
public class Tile_Tutorial : Interfaceable {
const int Number_Of_Buttons = 3;
const int Number_Of_Slots = 3;
public static void Create() {
Config.tileInterface = new InterfaceObj(new Tile_Tutorial(), Number_Of_Slots, Number_Of_Buttons);
Config.tileInterface.AddText("Title", 400, 270, false, 0.9f,Color.White);
Config.tileInterface.AddText("Cake", 350, 315, true, 0.9f,Color.White);
Config.tileInterface.AddText("Pie", 450, 315, true, 0.9f,Color.White);
Config.tileInterface.AddItemSlot(400,290);
Config.tileInterface.AddItemSlot(350,335);
Config.tileInterface.AddItemSlot(450,335);
OurCustomUpdateFeature();
}
public static void OurCustomUpdateFeature() {
}
public void ButtonClicked(int button) {
OurCustomUpdateFeature();
Item[] itemSlots = Config.tileInterface.itemSlots;
bool I_Have_A_Cake = false;
bool I_Have_A_Pie = false;
if(itemSlots[1].stack > 0 && itemSlots[1].type > 0) I_Have_A_Cake = true;
if(itemSlots[2].stack > 0 && itemSlots[2].type > 0) I_Have_A_Pie = true;
if(I_Have_A_Cake && I_Have_A_Pie) { itemSlots[1] = new Item();
itemSlots[2] = new Item(); return;
}
if(button == 1) {
if(I_Have_A_Cake) {
itemSlots[2] = (Item)itemSlots[1].Clone();
}
if(I_Have_A_Pie) { itemSlots[1] = (Item)itemSlots[2].Clone();
itemSlots[1].stack = itemSlots[1].maxStack;
}
} if(button == 2)
{
if(I_Have_A_Cake) {
Main.dayTime = !Main.dayTime;
}
if(I_Have_A_Pie) { itemSlots[2] = new Item();
}
}
}
}
Feel free to compile and test again , you just made your functional tutorial interface , and its code is pretty clean too!
Fancying it up[]
At this point , we should probably add some more things to the code , they are a bit unnecessary (They seem to be necessary for the file to compile now ~Ragestorm999), but you'd possibly want them to be in your interface regardless.
public bool CanPlaceSlot(int slot, Item mouseItem)
{
OurCustomUpdateFeature();
return true;
}
public void PlaceSlot(int slot)
{
OurCustomUpdateFeature();
}
public bool DropSlot(int slot)
{
Item[] itemSlots = Config.tileInterface.itemSlots;
if(itemSlots[slot].stack >= 1) return true;
return false;
}
CanPlaceSlot is a method that lets you control if you allow someone to place something in the slot he addressed, An example of use for it would be stopping the player from taking the item in the cake slot if there's an item in the pie slot.
PlaceSlot is called after and only if CanPlaceSlot returned true , this lets you change things after an item is placed , for example if a person places a cursed torch in your interface you can make the player blow up.
DropSlot gets called for every slot once the interface is closed , this can be used to control which items are dropped out of the interface , and which items do not , for example if you have an item that has a stack of less then 2 , don't drop it from the interface when its closed (note , the items will be lost , the interface does not keep them , it just does not drop them)
At this point , I'd like us to go back to our pretty 'OurCustomUpdateFeature()'.
Remember this one? the poor little thing was abondened empty when I said you made your interface.
Here's an example how you can really wheep up the level of your interface's prettiness with such a method.
public static void OurCustomUpdateFeature()
{
Color[] buttonColors = Config.tileInterface.buttonColor;
bool[] ButtonIsClickable = Config.tileInterface.buttonClickable;
string[] ButtonTexts = Config.tileInterface.buttonText;
Item[] itemSlots = Config.tileInterface.itemSlots;
bool I_Have_A_Cake = false;
bool I_Have_A_Pie = false;
if(itemSlots[1].stack > 0 && itemSlots[1].type > 0) I_Have_A_Cake = true;
if(itemSlots[2].stack > 0 && itemSlots[2].type > 0) I_Have_A_Pie = true;
if(I_Have_A_Cake && I_Have_A_Pie)
{
buttonColors[1] = Color.Red;
buttonColors[2] = Color.Red;
if(itemSlots[1].type == Config.itemDefs.byName["Wood"].type && itemSlots[1].stack > 0)
{
buttonColors[0] = Color.Pink;
ButtonIsClickable[0] = true;
ButtonTexts[0] = "Yorai Thinks W1k Likes CAKEZ!";
}
else
{
buttonColors[0] = Color.White;
ButtonIsClickable[0] = false;
ButtonTexts[0] = "Title";
}
return;
}
else
{
buttonColors[0] = Color.White;
ButtonIsClickable[0] = false;
ButtonTexts[0] = "Title";
}
if(I_Have_A_Cake)
{
buttonColors[1] = Color.Yellow;
buttonColors[2] = Color.Blue;
return;
}
if(I_Have_A_Pie)
{
buttonColors[1] = Color.Green;
buttonColors[2] = Color.Purple;
return;
}
buttonColors[1] = Color.White;
buttonColors[2] = Color.White;
}
Here we do quite a bit of things!
Color[] buttonColors = Config.tileInterface.buttonColor;
bool[] ButtonIsClickable = Config.tileInterface.buttonClickable;
string[] ButtonTexts = Config.tileInterface.buttonText;
These three lines give us control over the colors of the interface buttons , the control over which buttons are clickable , and the control of what text is displayed on our buttons!
Item[] itemSlots = Config.tileInterface.itemSlots;
bool I_Have_A_Cake = false;
bool I_Have_A_Pie = false;
if(itemSlots[1].stack > 0 && itemSlots[1].type > 0) I_Have_A_Cake = true;
if(itemSlots[2].stack > 0 && itemSlots[2].type > 0) I_Have_A_Pie = true;
I am certain that at this point you are familiar with what these lines do , we check our logic for a cake and a pie again.
if(I_Have_A_Cake && I_Have_A_Pie)
{
buttonColors[1] = Color.Red;
buttonColors[2] = Color.Red;
if(itemSlots[1].type == Config.itemDefs.byName["Wood"].type && itemSlots[1].stack > 0)
{
buttonColors[0] = Color.Pink;
ButtonIsClickable[0] = true;
ButtonTexts[0] = "Yorai Thinks W1k Likes CAKEZ!";
}
else
{
buttonColors[0] = Color.White;
ButtonIsClickable[0] = false;
ButtonTexts[0] = "Title";
}
return;
}
else
{
buttonColors[0] = Color.White;
ButtonIsClickable[0] = false;
ButtonTexts[0] = "Title";
}
Here we check if we have both a cake and a pie , if so , we set the color of both buttons to RED , this means they're dangerous! whoo! , really though , its jusst an example of how to warn a player to not click a button , because in our interface , if you have both the cake and the pie assnd you click something , they're both gone!
We also added an easter egg in this part , if you have a wood in your cake slot , and an item in your pie slot , the title changes color , text and becomes clickabke!
We also added the necessary faulties to turn it(the title) back to its regular state otherwise.
if(I_Have_A_Cake)
{
buttonColors[1] = Color.Yellow;
buttonColors[2] = Color.Blue;
return;
}
if(I_Have_A_Pie)
{
buttonColors[1] = Color.Green;
buttonColors[2] = Color.Purple;
return;
}
buttonColors[1] = Color.White;
buttonColors[2] = Color.White;
At this point , we once again know that we don't have both buttons clicked , because if we would , the return after the easteregg section would stop us from reaching this part of the code.
And so , if we only have an item in the cake slot , color the cake button in yellow , and pie in blue.
We can call a return after that , and repeat the same logic for the pie , because if there is no cake there would be no return in the cake , and we'll get to the pie's code.
If we saw that we have no cake and no pie (we didn't return) , lets turn both buttons back to white color.
Also , remember that we made the title button click-able? lets add a function to that.
in buttonClicked , you'll add something like this
if(button == 0)
{
Main.player[Main.myPlayer].KillMe(9001,1,false," Tried to take the cake!");
return;
}
this will kill our players with a damage level of OVER 9000! (litterally!)
Your complete code should now look like this
public void UseTile(Player player, int x, int y)
{
while(Main.tile[x,y].frameX>0) x--;
while(Main.tile[x,y].frameY>0) y--;
Tile_Tutorial.Create();
Config.tileInterface.SetLocation(new Vector2((float)x,(float)y));
Main.playerInventory = true;
}
public class Tile_Tutorial : Interfaceable
{
const int Number_Of_Buttons = 3;
const int Number_Of_Slots = 3;
public static void Create()
{
Config.tileInterface = new InterfaceObj(new Tile_Tutorial(), Number_Of_Slots, Number_Of_Buttons);
Config.tileInterface.AddText("Title", 400, 270, false, 0.9f,Color.White);
Config.tileInterface.AddText("Cake", 350, 315, true, 0.9f,Color.White);
Config.tileInterface.AddText("Pie", 450, 315, true, 0.9f,Color.White);
Config.tileInterface.AddItemSlot(400,290);
Config.tileInterface.AddItemSlot(350,335);
Config.tileInterface.AddItemSlot(450,335);
OurCustomUpdateFeature();
}
public void ButtonClicked(int button)
{
OurCustomUpdateFeature();
Item[] itemSlots = Config.tileInterface.itemSlots;
bool I_Have_A_Cake = false;
bool I_Have_A_Pie = false;
if(itemSlots[1].stack > 0 && itemSlots[1].type > 0) I_Have_A_Cake = true;
if(itemSlots[2].stack > 0 && itemSlots[2].type > 0) I_Have_A_Pie = true;
if(button == 0)
{
Main.player[Main.myPlayer].KillMe(9001,1,false," Tried to take the cake!");
return;
}
if(I_Have_A_Cake && I_Have_A_Pie)
{
itemSlots[1] = new Item();
itemSlots[2] = new Item();
return;
}
if(button == 1)
{
if(I_Have_A_Cake)
{
itemSlots[2] = (Item)itemSlots[1].Clone();
}
if(I_Have_A_Pie)
{
itemSlots[1] = (Item)itemSlots[2].Clone();
itemSlots[1].stack = itemSlots[1].maxStack;
}
}
if(button == 2)
{
if(I_Have_A_Cake)
{
Main.dayTime = !Main.dayTime;
}
if(I_Have_A_Pie)
{
itemSlots[2] = new Item();
}
}
}
public bool CanPlaceSlot(int slot, Item mouseItem)
{
OurCustomUpdateFeature();
return true;
}
public void PlaceSlot(int slot)
{
OurCustomUpdateFeature();
}
public bool DropSlot(int slot)
{
Item[] itemSlots = Config.tileInterface.itemSlots;
if(itemSlots[slot].stack >= 1) return true;
return false;
}
public static void OurCustomUpdateFeature()
{
Color[] buttonColors = Config.tileInterface.buttonColor;
bool[] ButtonIsClickable = Config.tileInterface.buttonClickable;
string[] ButtonTexts = Config.tileInterface.buttonText;
Item[] itemSlots = Config.tileInterface.itemSlots;
bool I_Have_A_Cake = false;
bool I_Have_A_Pie = false;
if(itemSlots[1].stack > 0 && itemSlots[1].type > 0) I_Have_A_Cake = true;
if(itemSlots[2].stack > 0 && itemSlots[2].type > 0) I_Have_A_Pie = true;
if(I_Have_A_Cake && I_Have_A_Pie)
{
buttonColors[1] = Color.Red;
buttonColors[2] = Color.Red;
if(itemSlots[1].type == Config.itemDefs.byName["Wood"].type && itemSlots[1].stack > 0)
{
buttonColors[0] = Color.Pink;
ButtonIsClickable[0] = true;
ButtonTexts[0] = "Yorai Thinks W1k Likes CAKEZ!";
}
else
{
buttonColors[0] = Color.White;
ButtonIsClickable[0] = false;
ButtonTexts[0] = "Title";
}
return;
}
else
{
buttonColors[0] = Color.White;
ButtonIsClickable[0] = false;
ButtonTexts[0] = "Title";
}
if(I_Have_A_Cake)
{
buttonColors[1] = Color.Yellow;
buttonColors[2] = Color.Blue;
return;
}
if(I_Have_A_Pie)
{
buttonColors[1] = Color.Green;
buttonColors[2] = Color.Purple;
return;
}
buttonColors[1] = Color.White;
buttonColors[2] = Color.White;
}
}
At this point you have completed your tutorial tile interface , and its even fancy!
This is the end of this tutorial , feel free to ask for clarification on any part that was not understood here.
Peace out , Yoraiz0r~
- If you click the cake button , the pie slot will generate a copy of the cake slot.
- If you click the pie button , the time of day will be switched (from day to night)
- If you click the cake button , the cake slot will generate a copy of the pie slot , and set the stack to its maximum size.
- If you click the pie button , the pie slot item will disappear.