Position based on variable / D&D Alignment System - SOLVED

[Chantal]

Hi guys!

There is probably a very easy and obvious solution I am missing, so I am hoping you can help me out

I'm looking to implement an alignment system into my game, based on the DnD Alignment system of Good/Evil and Lawfull/Chaotic.
To show the player where they currently stand, the idea is to have a small image shown on a graph (very basic example below).

I'm tracking Good/Evil (Altruism/Selfishness; AltSelf) with one variable, and Lawfull/Chaotic (LawChao) in another.
Both will range from 0 - 500, with 250 thus being the middle point. Of course this is easily adjustable, if that will help with drawing the small image at the right position.
If possible, I'd like the LawChao value to determine the xpos of the small image, and AltSelf to determine the ypos.

Could someone please enlighten me on how to do this?
What I have right now is very basic, but it shows all the elements. So it feels as if I just need a way to adjust the xpos and ypos based on the variable.

Thank you for your time!

Code: Select all

    show image "gui/alignment/alignment_bg.png"
    show image "gui/alignment/dot.png" at Position (xpos=100, ypos=100, xanchor=0, yanchor=0) 

Code: Select all

    $ AltSelf = 250
    $ LawChao = 250
    $ AltSelf_max = 500
    $ LawChao_max = 500
    $ AltSelf_min = 0
    $ LawChao_min = 0

[DannyGMaster]

I began scripting a system just like this not long ago, and I can say it's really hard to keep track
of four different alignments this way and accurately give a position to the align viewer, specially
if you use pixel unit variables like xpos and ypos. I decided to use xalign and yalign as an alternative, because it's a little more accurate, if you give xpos = 100 for example, and the player resizes the game
window, the dot could change it's position and display incorrectly (at least that's what happened to me, but I could be doing something wrong, I was still a clueless newbie back then). But if you use xalign and
yalign, you ensure that no matter what the size of the screen is, it will properly appear where you want it to.

I'll attach my code so you can see if it can adapt to your game, I never got to finish it so you would still need to create a system to change the alignment according to different choices in game but the visual part works, hopefully it will give you some ideas on how this could be implemented.
(And I'm sorry for the ugly images, it was just for testing so I just threw in some lines in the background and called it a day :/)

[Chantal]

Thank you very much for your reply, DannyGMaster

From what I understand, you have pre-defined several positions for the dot, which you can switch between?
This isn't quite what I'm looking for, as I'd like the graph to track the players alignment more gradually and show all the changes. So switching between predefined ones wouldn't quite do the trick (unless I'd make one for every +5 change, which would be unmanageable ^^")

A good tip about using xalign though! I hadn't thought about how players possibly resizing the screen would affect it.

[Milkymalk]

It's all math, really, and unless I'm missing the point here it should be easy.

Instead of 0-500, let's imagine all values to range from -250 to +250, with 0 being the middle.
Let's also assume that the center of your chart is at chart_centerx and chart_centery and that the size of the chart is chart_x and chart_y, so it expands half that far in each direction.

First you have to convert the value of your alignments into a fraction of your chart size.

spot_x = chart_centerx + int(LawChao / 250.0 * (chart_x/2.0))
spot_y = chart_centery + int(AltSelf / 250.0 * (chart_y/2.0))

Explanation:
By dividing the value by 250, we transform it to a range between -1 and +1. After that we multiply it by half the chart's size because the spot can move as far as half the chart's size in any direction.
Remember to display the spot with xanchor 0.5 and yanchor 0.5 to center it at the calculated position.

Example: LawChao is -125. Dividing by 250 gives -0.5, which moves the spot half the way up (because y=0 is top)

This of course works with values from 0-500 too. In that case, 0/0 is top left. I just changed the range in order to be able to explain it more clearly.

Just write simple functions that calculate the x and y position and use these functions in your at Position(). Or even better, use a screen:

Code: Select all

screen alignment:
    python:
        def alignspot_x():
            return (chart_centerx + int(LawChao / 250.0 * (chart_x/2.0)))

        def alignspot_y():
            return (chart_centery + int(AltSelf / 250.0 * (chart_x/2.0)))

    "chart_bg.png" xpos chart_centerx ypos chart_centery xanchor 0.5 yanchor 0.5
    "spot.png" xpos alignspot_x() ypos alignspot_y() xanchor 0.5 yanchor 0.5

Then, in the script:

Code: Select all

show screen alignment

Done. Unless images in screens can't take function calls as argument values.

[DannyGMaster]

Pretty much I had the same idea that milkymalk and ended up rewriting the system myself and added it to the cookbook. Here's a link:
viewtopic.php?f=51&t=44793

[Chantal]

Woah, thank you very much to the both of you!
This explains it perfectly, and the example and the cookbook-code provide the exact idea

Hopefully this'll also help others who are looking to implement similar ideas.
Solved!