Creating a scroll-able UI Component.

[ztzven]

Hi everyone,

I'm new to the Excalibur community. Have been tinkering with the library all afternoon and damn impressed by it's extensive API!

So I've been building a UI component to allow me to select assets (for later use in a map creator) and am wondering if someone could shed some light on the logic needed to build a scroll-able section.

Currently the UI component looks like this:

I built a nine grid class to display the left/center/right (top/center/bottom) areas. And am simply drawing the Labels at x/y coordinates relative to the asset selector UIActor.

I imagine I'll need to hook onto the mousescroll events. But am wondering what methods I'll need to clip the text to the central section, and translate the Labels relative to scroll position.

If anyone can help it would be greatly appreciated!

Sincely,

ztzven

[Kamran Ayub]

Welcome! Glad you're having fun!

I know this will sound counterintuitive but since Excalibur uses the web to build games we actually just recommend using plain old HTML and CSS to do complex UI for games. There's already a ton of power in that and a scrollable container is a few lines of CSS (overflow-y: scroll). Then to hook into Excalibur you can use normal DOM APIs like addEventListener to call code in the game. Some people even use Angular or React to render UI on top of the game, which is cool.

There's a super rough example in a little throwaway game I started here: https://github.com/kamranayub/ScorchedEarthGame/blob/master/Web/Views/Home/Index.cshtml

I use CSS classes for states and then hook into buttons via IDs.

That said, I don't think we have issues created yet for passing scroll events from a mouse (we do touchstart touchend touchmove which would work for touch, I think). We should do that so that if you really wanted you could capture scroll events and react to them in Excalibur.

Hope that helps!

--
You received this message because you are subscribed to the Google Groups "excaliburjs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to excaliburjs...@googlegroups.com.
To post to this group, send email to excal...@googlegroups.com.
Visit this group at https://groups.google.com/group/excaliburjs.
To view this discussion on the web visit https://groups.google.com/d/msgid/excaliburjs/b6abfc0a-c875-44f9-9f67-527c73f4139b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[James McGeorge]

Hey there!

Fellow Excalibur newbie here :)

I can attest that using HTML/CSS is great with Excalibur! The roguelike I'm working on currently uses Angular 5 and I've got Angular components for things like the stats, inventory and chat windows as well as an actions window and the "talking to NPC's" window.

So far it's been really great, the Angular @Injectable services along with rxjs/Observable and friends has been awesome for keeping the UI up to date with what's going on in the game. I've also been using the angular2-draggable npm module so all my UI windows are draggable around the screen without much fuss :)

Here's a screenshot of 4 of the Angular components displaying some info, note the ezmode scroll on the Actions window which is just

#actions-content {

    max-height: 150px;

    overflow: hidden;

    overflow-y: scroll;

} 

(insert regular disclaimer about how early this is and how rubbish it might look :) )

The grid in the inventory I'm using is the @angular/material/grid-list, makes it really easy to access and display the grid contents, I think that's what you might be after for your Asset Selector. 

Along with that I'm using the angular4-drag-drop npm module so I can click-hold-drag-drop the items around the grid.

Let me know if you want any more info, I've got more Angular xp than I do Excalibur xp due to work, but I'm hoping to at least balance or flip the ratio :)

James

On Wed, Apr 18, 2018 at 5:13 PM, ztzven <ste...@frenchy.nz> wrote:

Good to be here! I hope to become active within the community ^_^ Would be awesome to even contribute to the project itself at some point ;)

Fair enough regarding the HTML/CSS option, I'm using Ex within a NG5 Project at the moment, and can see how it's data binding would be cool for UI components.

Regards,

Steven

To unsubscribe from this group and stop receiving emails from it, send an email to excaliburjs+unsubscribe@googlegroups.com.

To post to this group, send email to excal...@googlegroups.com.
Visit this group at https://groups.google.com/group/excaliburjs.

To view this discussion on the web visit https://groups.google.com/d/msgid/excaliburjs/b284b0df-3699-485f-8235-bb831f1355af%40googlegroups.com.

[Kamran Ayub]

This is awesome! If you can, keep track of anything you ran into and let us know so we can mark what stuff we should be spending time documenting! Once we get closer to 1.0, we will be leveling up the user docs further. You all are pioneers and we thank you for it!

To view this discussion on the web visit https://groups.google.com/d/msgid/excaliburjs/b284b0df-3699-485f-8235-bb831f1355af%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "excaliburjs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to excaliburjs...@googlegroups.com.
To post to this group, send email to excal...@googlegroups.com.
Visit this group at https://groups.google.com/group/excaliburjs.

To view this discussion on the web visit https://groups.google.com/d/msgid/excaliburjs/CAC3azaegRuJrDskuZer%2BF2JB20MJSHAj-00JkV-vOLeq5yfKsg%40mail.gmail.com.