I have done this before in C# in the Unity Engine using C#. The problem is I do not know how to translate the scripts into javascript. The way the system origionally worked was by having a class file that listed all the attributes an item can have, then have another script that uses the other to create a list of items, AKA the inventory system. How can I reproduce this in javascript?
One way I’ve done it before is probably pretty similar to that, but I combined the inventory and items into one.
So each lootable item in the game is defined as an object, like so:
{
id: 0,
name: "SHEET",
desc: "Standard bed sheet",
maxHeld: 5,
value: 10,
amount: 1,
type: "item"
}
This shows the info for the object, but also shows how many of this item the player holds (as ‘amount’), if amount is 0 then it is not shown in the inventory, if it is > 0 then it is listed in the player inventory along with the information about the item and how many the player holds.
This is quite old code of mine, so I expect it could do with a lot of cleanup, but you can see my inventory code here
All possible items are defined in the ‘lootable’ array right at the top of the script.
There is a small video of the inventory system I had working here
Is there a way to keep the inventory and item script seperate? How will I code the GUI to show the individual items?
Well sure, you can separate it however you want. The inventory is just going to be an object or array which indicates how many of each of the items the player holds, there’s many ways you can do that just do whichever suits you.
Again, there’s many ways to draw the GUI/Inventory system. All you’re doing is iterating over all the items in the inventory array/object and displaying them. As for how to specifically draw GUI in PlayCanvas, take a look at this topic
Best would be to decide on exactly what you want the inventory to look like and then ask how to do more specific problems - here’s some inventory options
Here is part of the origional code for the inventory and items systems from my game in C#
The class that creates the attributes of an item:
================================
using UnityEngine;
using System.Collections;
[System.Serializable]
public class Item {
public int ItemID;
public string ItemName;
public string ItemDescription;
public int ItemDamage;
}
================================
And for the inventory system:
================================
using UnityEngine;
using System.Collections;
using System.Collections.Generic;
[System.Serialziable]
public class PlayerGUIAndData : MonoBehaviour {
[System.Serializable]
public class Inventory {
public List<Item> items;
}
public Inventory inventory;
//Create the area where the GUI appears:
public Rect GUIArea = new Rect(0, 0, 0, 0);
void OnGUI () {
GUILayout.BeginArea(GUIArea);
//Make the item slots in the inventory form a vertical line:
GUILayout.BeginVertical();
//Create an item slot in the inventory for each item in it:
foreach(Item item in inventory.items){
if(item != null){
if(GUILayout.Button(item.ItemName, GUILayout.Width(50), GUILayout.Height(50))){
//Whatever happens when the player clicks on an item slot....
}
}
}
}
}
==========================================
Can someone help me translate this to Javascript for playcanvas?
I’ve created an example weight based inventory system which you can see and play with here
In the Inventory script you can see there is an item array (line 8), similar to your item list, which contains a list of all the items being held in the array.
In the Items script there is the function ‘newItem’ which returns a new item object depending on which one you request. This item object is then pushed onto the item list as you can see in the ‘addItemToInventory’ function in the Inventory script.
I’m drawing the inventory using the library Raphael.js, because that’s what I am used to. There are many other libraries you could use if you prefer.
Clicking the three buttons adds new objects to the inventory. The full project is here