InvJS is a framework that makes it easy to create, style and change at runtime any type of HUDs, including drag and drop inventories. It runs in browser plugins such as BLUI.
Feature Highlight
- Define behavior in blueprints
- Events: use events to fire custom functions/effects when you need them
- Selectors: easily select widgets by their type and properties to change their appearance, add/remove event listeners, etc.
- Several types of widgets: inventory grids, items, buttons (more coming soon!)
- Combine with any HTML5/CSS/JS code
- Built in utilities and effects libraries
InvJS has a flexible back end with player input events exposed to Blueprints allowing for custom implementations and integration with the rest of the game.
The front end is HTML5 based and has an extensive yet simple API that includes own event system and selectors which allows for quick styling and effects. It can also be combined with any custom HTML5 and javascript code.
The framework comes with utilities and effects libraries that can be used right away or studied in order to build new functions. Here is the highlight function at work:
Here is the plugin combined with some pick/drop mechanics in the character:
Widgets
Inv widgets are C++ classes that have to be extended in Blueprints where they can be customized. There are options for styling as well as custom events for defining behavior. The front end event system can be used for dynamic styling and animations.
All widgets can hold custom properties which are replicated to the front end for quick access for effects. It is also possible to change the size and visibility of the widgets.
Widget types:
**Grid**
Able to accommodate widgets of type Item. Special events are fired when the player tries to pick or drop an item over a specific grid. It is possible to assign built in functionality like dropItem or deleteItem depending on what the grid represents (i.e. a backpack or a trash bin). Adding custom functionality like telling the game to equip or drop an item is extremely easy.
Here are the blueprints from the videos above.
This is the setup of the “trash” grid (the one that drops the items on the ground)
The “backpack” grid
The ammo slot
**Item**
Items can be moved between different grids.
**Button**
Any function can be assigned to the buttonPressed event
Upcoming features:
Widgets:
Container
Text and Image Widget
Automatic scaling
Sorting algorithms
Multiple canvases for widgets
More built in effects!
Probably also:
Basic WYSIWYG Editor
Draggable Grids
Perspective distortion