0
\$\begingroup\$

Take this screenshot for example:

How exactly are they positioned perfectly adjacent to each other? Do they already create the label positions based upon the world map first, and then when the player drops an item it fills the space? Or do they use a simple padded array function server-side and some custom algorithm to position them right next to each other. I have a feeling I'm totally overthinking this.

I am using nodejs w/ the Phaser framework for my web based game and am stuck at how they accomplish this server-side. (Since all players in-game see the same exact position)

\$\endgroup\$
1
  • 1
    \$\begingroup\$ You should not confuse the position of the lootbox itself and the position of the billboards. In World of Warcraft (yes, thats not WoW but i only know WoW) the Billboards can be nicely positioned side by side even though the two or more entities are very close thoghether (almost inside of eachother) \$\endgroup\$
    – tkausl
    Oct 21 '15 at 3:17
4
\$\begingroup\$

I don't know the exact approach used in games like Diablo, but this problem is actually interesting enough to be given its own name (Automatic Label Placement), for which the general problem is NP-Hard. This means that there's copious amounts of material online, like this paper for example. It's a problem that occurs a lot in map labelling, so you may find this SO question useful.

My guess is that the algorithm used in your screenshot is some form of multi-foci force layout. See how there are labels over water, despite there being no loot boxes in water. It's likely that those labels were pushed out of place by the labels near the centre of the screen. This algorithm works by first placing all the labels near their boxes, then simultaneously repelling labels that overlap, and attracting labels back to their loot boxes. When the forces reach equilibrium, stop.

For loot box labels, a specific requirement would be that labels for items from the same box should be stacked together. You could enforce this by never allowing labels from the same box from splitting apart.

\$\endgroup\$
1
  • 1
    \$\begingroup\$ Never knew how in-depth labeling was after reading that paper. The 'multi-foci', and 'forced-layout' keywords are helping me tremendously for d3.js and canvas results, thank you so very much. \$\endgroup\$ Oct 21 '15 at 4:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.