Inventory Tutorial
In this tutorial we will make a drag and drop inventory like this.
Let's begin by making an Inventory class
from ursina import *
class Inventory(Entity ):
def __init__(self):
super().__init__()
if __name__ == '__main__' :
app = Ursina()
inventory = Inventory()
app.run()
However, if we run the code, we'll see that there's nothing visible.
Let's parent it to the ui and set the model to 'quad', an included model.
from ursina import *
class Inventory(Entity ):
def __init__(self):
super().__init__(
parent = camera.ui,
model = 'quad'
)
if __name__ == '__main__' :
app = Ursina()
inventory = Inventory()
app.run()
If we look at it now, we see it's a white square in the middle of the screen.
Let's set it to a nicer shape. We also want (0,0) to be in the upper left corner
because it makes it easier to add items later. Let's also give it a texture and a color.
If we have both, the color value will tint the texture.
Now, this is nice and all, but wouldn't it be nice to show a grid as well?
There are multiple way to do that, but in this case, we'll simply make the texture repeat
by setting texture_scale to (5,6). That'll nicely fit the size of our inventory.
from ursina import *
class Inventory(Entity ):
def __init__(self):
super().__init__(
parent = camera.ui,
model = 'quad' ,
scale = (.5 , .8 ),
origin = (-.5 , .5 ),
position = (-.3 ,.4 ),
texture = 'white_cube' ,
texture_scale = (5 ,8 ),
color = color.dark_gray
)
if __name__ == '__main__' :
app = Ursina()
inventory = Inventory()
app.run()
Let's try to add some items to the inventory.
from ursina import *
class Inventory(Entity ):
def __init__(self):
super().__init__(
parent = camera.ui,
model = 'quad' ,
scale = (.5 , .8 ),
origin = (-.5 , .5 ),
position = (-.3 ,.4 ),
texture = 'white_cube' ,
texture_scale = (5 ,8 ),
color = color.dark_gray
)
if __name__ == '__main__' :
app = Ursina()
inventory = Inventory()
item = Button(parent =inventory, color =color.red, position =(0 ,0 ))
item = Button(parent =inventory, color =color.green, position =(2 ,0 ))
app.run()
Well, that didn't go as planned. The items cover the entire inventory and
the second item is way off to the left.
Let's fix this by making another object to put the items under.
Scale the object to the size of an item.
They also don't fit the grid. Fix that by setting origin to the upper left
corner, (-.5,.5).
from ursina import *
class Inventory(Entity ):
def __init__(self):
super().__init__(
parent = camera.ui,
model = 'quad' ,
scale = (.5 , .8 ),
origin = (-.5 , .5 ),
position = (-.3 ,.4 ),
texture = 'white_cube' ,
texture_scale = (5 ,8 ),
color = color.dark_gray
)
self.item_parent = Entity (parent =self, scale =(1 /5 ,1 /8 ))
if __name__ == '__main__' :
app = Ursina()
inventory = Inventory()
item = Button(parent =inventory.item_parent, origin =(-.5 ,.5 ), color =color.red, position =(0 ,0 ))
item = Button(parent =inventory.item_parent, origin =(-.5 ,.5 ), color =color.green, position =(2 ,0 ))
app.run()
We've added some items manually to make sure they get the right scale and position,
but we should make an append() function so it's easy to add items.
Let's start by making a function called 'append()' and make it spawn an item
when we send it a string. We'll also set the button's text to the string we
receive so we can differentiate them.
Let's give them a random color too, why not.
Lastly, let's call inventory.append('test item') a couple of times to make sure it works.
from ursina import *
class Inventory(Entity ):
def __init__(self):
super().__init__(
parent = camera.ui,
model = 'quad' ,
scale = (.5 , .8 ),
origin = (-.5 , .5 ),
position = (-.3 ,.4 ),
texture = 'white_cube' ,
texture_scale = (5 ,8 ),
color = color.dark_gray
)
self.item_parent = Entity (parent =self, scale =(1 /5 ,1 /8 ))
def append(self, item):
Button(
parent = inventory.item_parent,
model = 'quad' ,
origin = (-.5 ,.5 ),
color = color.random_color(),
z = -.1
)
if __name__ == '__main__' :
app = Ursina()
inventory = Inventory()
inventory.append('test item' )
inventory.append('test item' )
app.run()
The items gets added, but they overlap. We need to find the first open slot in the inventory
and place the item there. We can to this by checking each grid position and see if any
if the items occupy that position already.
from ursina import *
class Inventory(Entity ):
def __init__(self):
super().__init__(
parent = camera.ui,
model = 'quad' ,
scale = (.5 , .8 ),
origin = (-.5 , .5 ),
position = (-.3 ,.4 ),
texture = 'white_cube' ,
texture_scale = (5 ,8 ),
color = color.dark_gray
)
self.item_parent = Entity (parent =self, scale =(1 /5 ,1 /8 ))
def find_free_spot(self):
taken_spots = [(int(e.x), int(e.y)) for e in self.item_parent.children]
for y in range (8 ):
for x in range (5 ):
if not (x,-y) in taken_spots:
return (x,-y)
def append(self, item):
Button(
parent = inventory.item_parent,
model = 'quad' ,
origin = (-.5 ,.5 ),
color = color.random_color(),
position = self.find_free_spot(),
z = -.1
)
if __name__ == '__main__' :
app = Ursina()
inventory = Inventory()
for i in range (7 ):
inventory.append('test item' )
app.run()
Make a button to add a random item to the inventory. This is not part of the inventory itself,
but it's useful in order to test it.
Assign the button's 'on_click' to a function, and it will call that function when we click it.
button.on_click = inventory
Let's make an tuple with those and make the button choose a random item from the tuple
using random.choice(items)
if __name__ == '__main__' :
app = Ursina()
inventory = Inventory()
def add_item():
inventory.append(random.choice(('bag' , 'bow_arrow' , 'gem' , 'orb' , 'sword' )))
for i in range (7 ):
add_item()
add_item_button = Button(
scale = (.1 ,.1 ),
x = -.5 ,
color = color.lime.tint(-.2 5 ),
text = '+' ,
tooltip = Tooltip('Add random item' ),
on_click = add_item
)
app.run()
To add textures, just set texture=item and it will try to find a
texture with that name. It searches first in the project's assets and then
in the assets included with ursina. I've included some icons for the purpose
if this tutorial, but feel free to add your own.
Let's also remove the random color and instead show the item's name when we hover it with the mouse.
If a button has 'tooltip' set to something, it will show it when we hover the Button.
def append(self, item):
icon = Button(
parent = inventory.item_parent,
model = 'quad' ,
texture = item,
color = color.white,
origin = (-.5 ,.5 ),
position = self.find_free_spot(),
z = -.1 ,
)
name = item.replace('_' , ' ' ).title()
icon.tooltip = Tooltip(name)
icon.tooltip.background.color = color.hsv(0 ,0 ,0 ,.8 )
We can't move the items! That's not fun.
However, that's easy to change. Just spawn a Draggable instead of Button.
Draggable inherits from Button, so the tooltips will still work!
def append(self, item):
icon = Draggable(
parent = inventory.item_parent,
model = 'quad' ,
texture = item,
color = color.white,
origin = (-.5 ,.5 ),
position = self.find_free_spot(),
z = -.1 ,
)
name = item.replace('_' , ' ' ).title()
icon.tooltip = Tooltip(name)
icon.tooltip.background.color = color.hsv(0 ,0 ,0 ,.8 )
The items can be moved now, but they don't follow the grid.
Let's round the position when we drop it.
Draggable's will automatically call on_drag() and on_drop() if has them.
round the position on drop
def append(self, item):
icon = Draggable(
parent = inventory.item_parent,
model = 'quad' ,
texture = item,
color = color.white,
origin = (-.5 ,.5 ),
position = self.find_free_spot(),
z = -.1 ,
)
name = item.replace('_' , ' ' ).title()
icon.tooltip = Tooltip(name)
icon.tooltip.background.color = color.hsv(0 ,0 ,0 ,.8 )
def drop():
icon.x = int(icon.x)
icon.y = int(icon.y)
icon.drop = drop
Add a drag function to remember the start position as org_pos.
def drag():
icon.org_pos = (icon.x, icon.y)
def drop():
icon.x = int(icon.x)
icon.y = int(icon.y)
'' if the spot is taken, swap positions'' for c in self.children:
if c == icon:
continue
if c.x == icon.x and c.y == icon.y:
print ('swap positions' )
c.position = icon.org_pos
icon.drag = drag
icon.drop = drop
We shouldn't be able to drop the items outside of the inventory.
def drop():
icon.x = int(icon.x)
icon.y = int(icon.y)
'' if outside, return to original position'' if icon.x < 0 or icon.x >= 1 or icon.y > 0 or icon.y <= -1 :
icon.position = (icon.org_pos)
return
'' if the spot is taken, swap positions'' for c in self.children:
if c == icon:
continue
if c.x == icon.x and c.y == icon.y:
print ('swap positions' )
c.position = icon.org_pos
icon.drop = drop
All the items are at the same depth, so it hard to say how they will overlap.
It feels natural that the item we're currently dragging stays on top,
so we'll move it back a bit when we drag it and forward when we drop it.
def drag():
icon.org_pos = (icon.x, icon.y)
icon.z -= .0 1 # ensure the dragged item overlaps the rest
def drop():
icon.x = int(icon.x)
icon.y = int(icon.y)
icon.z += .0 1
'' if outside, return to original position'' if icon.x < 0 or icon.x >= 1 or icon.y > 0 or icon.y <= -1 :
icon.position = (icon.org_pos)
return
'' if the spot is taken, swap positions'' for c in self.children:
if c == icon:
continue
if c.x == icon.x and c.y == icon.y:
print ('swap positions' )
c.position = icon.org_pos
icon.drag = drag
icon.drop = drop
In this tutorial we will make a drag and drop inventory like this.
1 Setting up the class
Let's begin by making an Inventory class
2 Adding graphics
However, if we run the code, we'll see that there's nothing visible.
Let's parent it to the ui and set the model to 'quad', an included model.
If we look at it now, we see it's a white square in the middle of the screen.
Let's set it to a nicer shape. We also want (0,0) to be in the upper left corner
because it makes it easier to add items later. Let's also give it a texture and a color.
If we have both, the color value will tint the texture.
Now, this is nice and all, but wouldn't it be nice to show a grid as well?
There are multiple way to do that, but in this case, we'll simply make the texture repeat
by setting texture_scale to (5,6). That'll nicely fit the size of our inventory.
3 Adding placeholder items
Let's try to add some items to the inventory.
Well, that didn't go as planned. The items cover the entire inventory and
the second item is way off to the left.
Let's fix this by making another object to put the items under.
Scale the object to the size of an item.
They also don't fit the grid. Fix that by setting origin to the upper left
corner, (-.5,.5).
4 Adding items
We've added some items manually to make sure they get the right scale and position,
but we should make an append() function so it's easy to add items.
Let's start by making a function called 'append()' and make it spawn an item
when we send it a string. We'll also set the button's text to the string we
receive so we can differentiate them.
Let's give them a random color too, why not.
Lastly, let's call inventory.append('test item') a couple of times to make sure it works.
5 Find a free slot in the inventory
The items gets added, but they overlap. We need to find the first open slot in the inventory
and place the item there. We can to this by checking each grid position and see if any
if the items occupy that position already.
6 Add random item button
Make a button to add a random item to the inventory. This is not part of the inventory itself,
but it's useful in order to test it.
Assign the button's 'on_click' to a function, and it will call that function when we click it.
button.on_click = inventory
Let's make an tuple with those and make the button choose a random item from the tuple
using random.choice(items)
7 Adding textures and hover text
To add textures, just set texture=item and it will try to find a
texture with that name. It searches first in the project's assets and then
in the assets included with ursina. I've included some icons for the purpose
if this tutorial, but feel free to add your own.
Let's also remove the random color and instead show the item's name when we hover it with the mouse.
If a button has 'tooltip' set to something, it will show it when we hover the Button.
8 Drag n' drop
We can't move the items! That's not fun.
However, that's easy to change. Just spawn a Draggable instead of Button.
Draggable inherits from Button, so the tooltips will still work!
9 Snap to grid on_drop
The items can be moved now, but they don't follow the grid.
Let's round the position when we drop it.
Draggable's will automatically call on_drag() and on_drop() if has them.
round the position on drop
10 Swap items
Add a drag function to remember the start position as org_pos.
11 Stay inside the inventory, please
We shouldn't be able to drop the items outside of the inventory.
12 Bugfix: Make the dragged items render on top
All the items are at the same depth, so it hard to say how they will overlap.
It feels natural that the item we're currently dragging stays on top,
so we'll move it back a bit when we drag it and forward when we drop it.