XP Bar

RaseCidraen
RaseCidraen
edited November 2010 in Campaign Portal Building
Hey: Okay, here's the code I'm going after.

Text, overlaid over a transparent image (Center is hollowed out), overlaid over an adjustable image that changes width.

...I absolutely love this forum. Every time I go to post here for help, I inadvertantly end up solving my own problem.

I present, an adjustable XP Bar!
«1

Comments

  • Alatheon
    Alatheon
    Posts: 35
    When I paste the code from above into a wiki page, the only thing that actually appears on the page is "0/1,000 XP"

    So, dumb question: Is there more to it than that?
  • RaseCidraen
    RaseCidraen
    Posts: 890
    I think it's because it's using the wrong '. You have to change the ' and " from Copy Paste land to actual textile one. If you replace them all it should work a treat.
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Did that work for you?
  • Alatheon
    Alatheon
    Posts: 35
    That did the trick.

    That's a neat little toy. I might just use that in the next game I start.
    (as a side note, it's exciting to finally be just a player instead of DMing all the time)
  • Alatheon
    Alatheon
    Posts: 35
    I completely stole your code for the bar from "Aurek's bio":http://www.obsidianportal.com/campaigns/ragged-vestiges/characters/aurek-stronghawk

    I like the look of it for my "new character":http://www.obsidianportal.com/campaigns/the-circle-of-thirteen/characters/berien, but it is interacting strangely with the Dynamic Character sheet (Chainsaw's 4E).
    Any suggestions for easily making these two great tastes taste great together?
  • RaseCidraen
    RaseCidraen
    Posts: 890
    I know, right? I'm so pumped to actually play!

    That's fine! Enjoy the code! 'swhat it's here for. I'm toying around with new forms of displaying it. I think it's a nifty little addition... I have no idea how to make it behave kindly with the DCS... I've never used one. Maybe you could switch to absolute positioning to fix the issue?
  • Alatheon
    Alatheon
    Posts: 35
    I'd really like it if I could set that to the top of the second page, or anywhere on the first (although it seems unlikely that I can do that within the parameters of the dynamic sheet).
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Your best bet is going to be getting Master Saw in here to see if they can play nice with each other.
  • Alatheon
    Alatheon
    Posts: 35
    I have made a rather inelegant solution to the problem, but any other pointers would be appreciated.
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Alatheon,

    I think your best bet is going to be taking the image source for the XP bar background and removing the white space to make it transparent. It'll blend better with the background that way (although my solution won't be the prettiest for you... you'll have to tool with the div containing the XP fill a bit.)

    I present my latest and greatest creation: the Bardichebar!





    0/1,000 XP
  • autumnschild
    autumnschild
    Posts: 153
    Wow guys, this is way cool!
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Thanks! I've been trying to come up with new and innovative ways of doing things... I just wish I had more things to innovate :)
  • RaseCidraen
    RaseCidraen
    Posts: 890
    I've updated the original post to reflect my new modifications, which include a transparent background XP bar, and improved codification.
  • Alatheon
    Alatheon
    Posts: 35
    Thanks for the update!
    I've also included a Scott Pilgrim inspired variant...

    @
  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited November 2010
    This is really cool! Sorry I didn't get a chance to drop in before now. Did you guys get everything figured out you wanted to here, or was there something more you needed a hand with? I'd be happy to help out, and may well appropriate this idea myself...

    Edit: Also, a link to this has been added to the FAQ.
    Post edited by ChainsawXIV on
  • RaseCidraen
    RaseCidraen
    Posts: 890
    The biggest challenge I had was getting the XP bar to fill from the left. I Don't know if there's a good way to get the XP bar to blend on anything that isn't a white background (At least that I can think of at the moment.) I wonder if there is any way for a layered div to ignore the "lower" layer axe layer and just display what is behind that.

    Thanks a ton for adding it to the FAQ!
  • gaaran
    gaaran
    Posts: 740
    Chainsaw, if your offer still stands, perhaps you could take a look at the code and just see if you have a better way of writing the code that could be injected anywhere and doesn't cause ghosts of the jpgs to interfere with text above or below it, that would be appreciated. An example of what I mean can been seen here: http://www.obsidianportal.com/campaigns/ragged-vestiges/characters/tyson-ra The outline for the white fill layer overlaps some of the text below it.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited November 2010
    For overlay on a background, what you'll want is to take a page from what Alatheon is doing above, and use transparent PNG images. For example, the same images are used to compose "these two bars":http://www.obsidianportal.com/campaign/chainsawxiv-test-campaign/wikis/bars, regardless of background. By using an image format that supports transparency, you can mask out the areas you want to see through. Doing images this way is easy, and you should be able to find tutorials galore with a quick Google search. If that gives you trouble though, holler and I'll break it down.

    One other trick you can do with a more typically shaped bar is to put end caps on the bar itself, like you see in the example linked above. They're easy to add - just check out the code on that page, and look for _left.png_ and _right.png_ - and add a nice flare of polish to things.

    Gaaran, I'm happy to help, but I don't actually see the problem you're describing at the page you linked. Did you get it fixed up on your own, or am I just misunderstanding what the issue is?
    Post edited by ChainsawXIV on
  • gaaran
    gaaran
    Posts: 740
    Its the "traits and feats" section of the character sheet (i've only tested in safari and chrome, maybe that's it) at the top left, directly below the xp bar. There's a big space that the text doesn't fill in.

    And those test bars are exactly what I was talking about, the code is nice and clean, and the bars look great, i might adopt those instead of mine, even if they are tailor shaped to fit the character, cause yours looks a lot cleaner, and it'll fix that problem :).
  • gaaran
    gaaran
    Posts: 740
    Also, Chainsaw, your character sheets are awesome and you should make a 3.5 or a pathfinder one :P
  • erwin
    erwin
    Posts: 58
    That's pretty awesome lookin'.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Ah. I see it now. It looks like the text is trying to float around a repositioned element. Try removing the floating div (the one with _bar_layer.png_ as the background image). It doesn't seem to be doing anything meaningful for the layout, and is most likely the culprit there.
  • gaaran
    gaaran
    Posts: 740
    That floating div contains the white bar that covers the filling, I use it because it's the easiest way Rase and I came up with for the non-standard bar shape.
  • gaaran
    gaaran
    Posts: 740
    So i've adopted your bar, but the right portion isn't lining up right: http://www.obsidianportal.com/campaigns/ragged-vestiges/characters/tyson-ra also, how do I center it?
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Ok, finally got my head around how you were setting things up. What you need here is a bit of absolute positioning to help you out. By positioning things absolutely (relative to their parent element, rather than relative to wherever they'd normally end up in the page flow),they can overlap without disrupting the page flow, and they're easier to adjust to boot. In the "example":http://www.obsidianportal.com/campaign/chainsawxiv-test-campaign/wikis/bars I added to the example page, I've reworked the code for your bar to work that way - all you need to do to adjust the fullness of the bar is adjust the width value of the _nunchaku_layer_ div to whatever you're looking for. Incidentally, if you were to mask out the area outside the outline in _nunchaku_outline_layer.png_ as you have the area inside it, leaving only the outline behind, it would now work on a background as well.
  • gaaran
    gaaran
    Posts: 740
    Perfect! I'm still curious about my other question, just for use on other pages :) Thanks for the help, that's great!
  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited November 2010
    Looking at the page code, I'm guessing the campaign in question is using the newer textile parser, which is adding some unwanted _p_ tags, and most importantly, sticking a _br_ after the left hand _img_ tag, which bumps the right end down by a line. You should be able to fix that by putting _notextile._ in front of the first line of this chunk of HTML. Make sure you leave a blank line after that block of code however, to call an end to that textile block. Otherwise the rest of your layout might be effected.

    Edit: To center a block element, such as a _div_, you should add _margin-left:auto;margin-right:auto;_ to its style. This tells the browser to automatically split the leftover space to either side of the element. For this to work correctly, the element must also have a width value set, so the browser can figure out how much left over space there is.
    Post edited by ChainsawXIV on
  • gaaran
    gaaran
    Posts: 740
    awesome, got it, last question, how do you make your bar centered?
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Chainsaw, thanks for stepping in and polishing the idea! I'm super stoked about how your HTML turned out. Much cleaner than what I cobbled together. I was trying to go for a Percent fill, to make updating easier (Either linearly related or inversely - depending on how I got things to work.) That's the only trouble that I can see popping up, without doing the calculation:

    CurrentXP / TotalXP = % = Xpx / 730px

    It's a small price to pay for the perfection that yours offers. The only thing I can think of is maybe using a container div of the 730px size, then everything else being nested within, to give you the option of running the % div command. Something like "here":http://www.obsidianportal.com/campaign/ragged-vestiges/wikis/rases-testing-area

    But yes, we are using the newer textile parser(I think)... I've encountered some niggly bits with it, but they've been minor so far.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Gaaran, see the edit I made to my post above last night for instructions on centering things.

    Rase, what you described would absolutely work for switching over to percentage based bar width. I can put that together when I get home from work if you want, but I suspect you're more than capable of doing that yourself, since you're the one who suggested it. All you should have to do is set the width of the existing div to maximum (730px for your bar, or 560px for mine), keeping the positioning on it, then create a new div inside it and move the background stuff over to that one.
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions