No announcement yet.

InvJS - HTML5 Framework for HUD's and Inventories

  • Filter
  • Time
  • Show
Clear All
new posts

    [PLUGIN] InvJS - HTML5 Framework for HUD's and Inventories

    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:


    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:


    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)

    Click image for larger version

Name:	GridTrash.png
Views:	1
Size:	181.0 KB
ID:	1156084

    The "backpack" grid

    Click image for larger version

Name:	GridBackpack.png
Views:	1
Size:	67.6 KB
ID:	1156085

    The ammo slot

    Click image for larger version

Name:	GridEquipAmmo.png
Views:	1
Size:	276.4 KB
ID:	1156086


    Items can be moved between different grids.


    Any function can be assigned to the buttonPressed event

    Click image for larger version

Name:	ButtonHideHUD.png
Views:	1
Size:	27.1 KB
ID:	1156087

    Upcoming features:

    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
    Last edited by OceanCom; 07-22-2015, 09:13 AM.

    I need only this four blueprints for creating this type of inventory?