Microsoft MakeCode

Inventory extension

Not long ago, I posted some code on drawing an inventory. Now in extension form!

It requires Joey’s sprite utils extension.

Here’s an example:

Controls: (for example above)

  • Inventory closed:
    • A to “eat.”
    • B to cycle through slots.
  • Inventory open:
    • Use arrow keys to select items.
    • Use A to transfer items.
    • Use B to switch the cursor between the toolbar and inventory.

Yes, the example is quite big but it’s smaller than doing it without an extension. :wink:

Here are the blocks, there a quite a lot of them.

image

Note that it doesn’t help you manage your inventory, it only draws it for you. But you can also access the array that holds the items inside with the get items block and do standard array manipulations on it, but you will have to force redraw it after because it doesn’t track the changes you make to it. It also doesn’t limit how many slots you can have in a toolbar or in an inventory, but screen-space-wise, it’s limited to 7 and 32 respectively. The toolbar and inventory is also just a sub-classed sprite, so you should be able to use the sprite-data extension to pair it to a specific sprite, although I did not test this. (Please let me know if it works!)

Note: The description part of items is not used by the extension. You can use it for whatever you want, it just must be a string. :slight_smile:

Enjoy! Would definitely appreciate suggestions on improving this extension. :slightly_smiling_face:

8 Likes

Just added this:
image
You can now set a “tooltip” under the item and it will be rendered in a 5x5 font! It does not limit how many characters you put in, but screen-space-wise, you can put 2 characters on one item without it overflowing to the next item. A common use for this is to display a quantity count:
image
Here’s an example on how to use it:

Same controls, except that pressing A while the inventory is closed will use only one item at a time.

1 Like

On my computer, “B” button does cycle through the blocks. Arrows and “A” button produce no action. Sprite does not move and no “food” appears. Your example.

1 Like

It would be helpful because I find it tedious to make inventories.

2 Likes

This is incredible! This would work really well with the terraria / minecraft clone GameGod was working on (not sure if they still are.) This is just overall super cool! Maybe add a feature to allow for the coder to check when a new item is selected in the inventory or toolbar. LOVE IT.

1 Like

Oh yea, it doesn’t do that…should probably add that in…

If you look in the code, you can that I only made code for “eating” and doing stuff in the inventory.

1 Like

Try this :slightly_smiling_face:

No. I tried all the links on this forum page; none show any numeric values. No inventory of food items. On both Edge and Chrome. Viewing the simulator full screen, in edit mode, in blocks, JS and Python. No images such as you show with “Inventory Extension Example with Tooltips and Food”, above. ASUS laptop running Windows 10 . will now check it out on cell phone.

:frowning: It works on my end. Could you try in incognito mode, maybe something is being cached?

Video showing inventory fail, just now. I always share-publish-copy and then paste code into another browser or better yet, send the share code link via email to my cell phone email so as to observe the "game " on another device or browser to prove to myself that the Arcade game can work for other people. Here it does not.

1 Like

Oh, if the item isn’t in the toolbar, it will add it to the inventory. So like if you have a pizza in the toolbar and collect a burger, it will be sent to the inventory. But if you collect a pizza, it will be added to the toolbar since it’s already in it. Sorry for the confusion.

This has great potential. Inventory fits with our industrial mobility proofs of concept as seen in our videos: YouTube channel: MakeCode and Hardware. We could use the functionality of Arcade and TFT screen to display parts collection as we move a transporter from place to place in the factory. This is the reason I would so like to see if anyone has a video of Inventory actually working ? And a share code Arcade URL which will display inventory of items as they are collected…or is that not possible ? Maybe I’m confused as to what the aim of the extension is. What is meant by “toolbar” ? “it will be added to the inventory”, does this mean a numerical value of the number of items collected will be displayed somewhere on the TFT screen ? That has never worked for me on any attempt; no numbers shown as items are collected by the sprite. Thanks for replying ; any help is appreciated.

1 Like

The toolbar you always see (with the 3 boxes) is one sprite. It has a collection of Item objects. The inventory that pops up is also a different sprite, with it’s own collection of Item objects. Each item has some attributes:

  • An image, must be 16x16
  • Name, which is displayed at the top of the inventory when “selected”
  • Description - not used.
  • Tooltip - the little text right under the item when it’s rendered. A popular use for this is to show a quantity.

So when you collect an item, it goes like this:

  1. Check if the same item is in the toolbar. If it is, increment the quantity and exit.
  2. Check if the same item is in the inventory. If it is, increment the quantity and exit.
  3. Otherwise, just put it into the inventory.

When you use an item, it just decrements the quantity and eventually just destroys it when the quantity is 0.

I sent this link to a friend , she tried the Inventory Arcade with Food and it does not work to show any numbers on her new iPhone nor on her new iPad. There are no numbers shown next to food items.

1 Like

The toolbar 3 boxes are and remain empty. No items appear in the boxes. There is no collection of item objects . When the prince sprite touches a food icon, the food disappears and no numeric value is created. I showed this in my above video.

Make sure you are using the example called “inventory extension example with food and tooltips”

It works both on my Windows computer running chrome and my andriod phone using chrome as well. :frowning:

Can someone else on the Forum please try?

Works for me

1 Like

I just clicked on that share URL, above, which you mention. No food icons appear in any of the boxes on the lower left of the simulated TFT screen. Pressing B button , as I said, selects a box but nothing else. A button does nothing. LFUD arrows move the prince sprite but the food item icons only disappear when he touches them, there is no “inventory” of items. I am spending time trying to learn how to make this work because inventory in our fantasy factory would be extremely useful. If anyone is able to make it work, could you please do as I did and activate the program, then use a cell phone to record video of what steps that you take to make it work? 10 seconds would be plenty enough of display video. Thanks again. I just now went back to review our conversation and the assertions therein. I see no mention of the word “menu” anywhere. If I click on the Menu word on the simulator then a window appears showing your example of food items with numeric values next to them; for the first time since I looked at this program. Now clicking the LRUD arrows only moves box selection, no food items are in the 3 boxes and when in “menu mode” the prince sprite does not move but other boxes are selected. In this mode, since the prince sprite does not move, no changes in the food item numeric values are made. In other words, it does not look possible to see real time changes in the inventory numbers as the prince moves to touch food Our 11 year old could have made use of this, possibly, if she had been told to click on the ‘menu’ word. If it is more functional than I describe then again, a short video showing that would help. Thanks

1 Like

It is possible to have “real-time” changes because everytime an array of items are assigned as the contents of the inventory, it updates. If you directly modify the array instead, (ex. do a pop) you can also do a “force redraw.” (there is a block for the toolbar and the inventory versions)

Yea, that’s the menu button. Took me a while to figure out as well. :sweat_smile:

Also here is a GIF of it in action:
inventory extension example with food and tooltips demo

Thanks but is there a way to erase the numerical values associated to each food item ? The program seems to save those values even after closing out the project. “Sharing” the Arcade program and re-opening it in another browser also retains the Inventory values. Something like " On start, clear all Inventory values." ? Thx