HUD, theory and logic

(Wayne Makoto Sturdy) #1

So I’ve embarked on a mission to create a HUD class and I was hoping to start a discussion about some of the ways possible with FlashPunk.

I will try to detail the requirements as best I can.

  • Camera Independent
  • Button implementation
  • Scrollable content pane (think inventory)
  • Masking / clipping of scrolled content
  • Selecting / dragging content from the pane
  • Dropping / inserting of content into the pane
  • Mouse Event bubbling (possibly related, something to think about too maybe)

My theory would use Graphiclists to display everything and as of now would comprise the following classes:

  • HUD → Entity
  • ScrollPane → Entity
  • HUDbutton → Spritemap
  • ScrollPaneItem → HUDbutton

The HUD class would be the main class and would instantiate the ScrollPane class.

The ScrollPane class would use a Graphiclist to display the ScrollPaneItems which will be clipped from view when scrolled outside of the defined mask area via the drawMask property.

The HUDbutton class extends Spritemap to make use of the different button states, UP, OVER, DOWN, DISABLED and are added to the HUD's Graphiclist.

The ScrollPaneItem extends HUDbutton to make use of its mouse interactivity and adds functionality for dragging / dropping etc.

And an easy way to make sure that the game area doesn’t receive mouse events would be to pause the game and just update the needed entities, but this may not be desirable in all cases.

Thoughts? Feelings? Mixed emotions? Setting myself up for failure?

(JasperYong) #2

is this really about Head-Up Display? It sound more like Inventory class to me :B

so with my understanding, to display item/weapon list, the objects(item/weapon) will be store in array and display through ScrollPaneItem as HUDbutton?

and would love to see Keyboard event implement as second option :stuck_out_tongue:

(Wayne Makoto Sturdy) #3

Heh, I guess it does look like that. The HUD I am working on will have an ever present inventory as part of it, so I didn’t really differentiate between the two in the subject line.

(Zachary Lewis) #4

I think Feathers, a UI framework built on Starling, has a very solid grasp on what is needed to build a fully-functional UI. They even have a rather detailed wiki explaining some of the thought and logic behind the class implementation. (Plus, they have fun demos to scroll and click around in!)

I’d look at their scrolling list class and how it operates, then reverse-engineer it to work in the FlashPunk framework.

(JasperYong) #5

also, there was also attempt to create a UI library call punkUI, not much have been done for quite some time but still pretty good

(Abel Toy) #6

@Jaspery I was thinking about making a PunkUI 2.0 sometime

(Mark) #7

I always have the problem of zooming when I add the HUD in the flashpunk scope.

Maybe add a property Zoomable to the image class if false then add a devide by FP.screen.scale in the render function.