Euclidean TRPG Assistant (ETA)


#1

After more than enough procrastinating, I’m finally buckling down to work on this project.

To summarize, ETA is envisioned as a tool roughly similar in purpose to tools such as Roll20 and Fantasy Grounds. The primary difference is that it will have a much easier learning curve due to a simplified UI, and it will also function in 3D. In other words, it will be a multiplayer 3D grid-based aide for people playing tabletop role-playing games.

Project Link: https://playcanvas.com/project/600366/overview/picking-test

By the time it is complete, ETA will include the following functionalities:
- a “Ruler” functionality which will allow the user to click two points on the grid, returning the distance between them from a variety of calculation methods
- an “Initiative tracker” functionality which will use random number generation and a variety of dice rolling methods to decide who goes when, as well as functionality to only allow users to manipulate their token during their own turn
- functionality to let the Game Master place new tokens on the board (representing both Player Characters and Non-Player Characters)
- functionality to let users create new maps/levels with which to play
- multiplayer functionality (with database to match)

I’m using Martin Niehoff’s Customizable Camera Script.

I’m having some trouble figuring out the ruler functionality, and so that’ll likely be something that I’ll be asking for help with. I think I’ll need to modify my Grid Generator script so that whenever the user’s cursor hovers over one of the grid squares, that grid square will light up, thus signifying that the focus is currently on that square. This will be critical to the ruler and token moving functionalities.


#2

Hey Logan,

looked up the references you mention. Also replied to your mail & updated the renderLine api of the gridGenerator.

Tough we will need to see how suitable the grid generator is for that kind of setup. It was rather build as viewport grid for stuff like model viewers. I used it as simple scale ref, for my photogrammetry stuff. Not sure if that’s what you are really looking for in that case. Not saying, it won’t work, but I think a different setup might be handier there.

The grid generator is just drawing lines onto your canvas with the renderLine function, therefore there is no square that you could light up from the grid generator itself.

You can of course just place a cube for that onto the location and use that as highlight. Something like that:

  • Have a hidden cube with a transparent material as highlight marker somewhere in the scene.
  • Attach a script to it, that follows the position of your mouse.
    • convert the screen coordinates of the mouse into the world coordinates
    • parse that into the grid divisions you defined on the gridGenerator (so it’s within the grid and not slightly off)
    • Place your highlight cube at the given location

Than you could also place 2 addition marker cubes for the left & right mouse button and use their distance between each other for the ruler.

If that setup works for you depends a bit on the complexity you want to go for. As the grid is only handling, well a grid of lines. Wouldn’t it be handier to setup the scene out of the geometry/shape you are going for in the first place?

Say you are going for a checker size grid out of cubes, spawn 64 cubes in your scene. Than you can use some simple entity picking to highlight them and tags etc to define their state for things like the ruler.

Greetings,

Martin


#3

Alright, I’ll go with the geometry-based approach instead. I feel really silly for not thinking of that sooner.

So…really stupid question, but how do I make cubes with transparent materials? I made a couple of transparent .pngs with white and cyan outlines, and I uploaded them to my project, but I can’t seem to make the flat cubes (tiles) transparent, despite the fact that the texture/material itself should be transparent.

https://playcanvas.com/project/596207/overview/eta-play-mode


#4

Re-starting with the geometry-based approach. Using swatty’s camera scripts (still need to figure out the whole “Hammer.js” thing [I tried importing Hammer.js into a different project, and it didn’t recognize it; though it seems like it works just fine without Hammer]).

https://playcanvas.com/project/596207/overview/eta-play-mode

Need to make a script that will spit out the distance between the center of two squares (not doing edge-to-edge measurements for now).


#5

@swatty
Attempting to use collision picking to select tiles, as per https://developer.playcanvas.com/en/tutorials/entity-picking/

However, it isn’t working (the tile doesn’t pulse like in the tutorial). I’m using the blue “selected_squares” to test this, and I’ve enabled both collision and rigid body on said tile. As I got the script from the above link (which was linked on https://developer.playcanvas.com/en/tutorials/entity-picking/) on May 2017, it may be possible that the script is outdated. Alternatively, I put the script in the wrong place, or I accidentally broke the very nature of physics and ray casting/collisions in my game.

Also, I’ll be wanting the tile edges to switch color (from white to cyan), which means I’ll have to somehow swap the textures out.


#6

https://playcanvas.com/project/600366/overview/picking-test
Managed to make the tiles able to change color, from white to cyan, back again. However, not much else happens when a tile is “selected.” So I’ll have to keep working on it. Next step is to save the position of the selected tile to a variable for use with the ruler function.

Big thanks to @Swatty for helping me out big time. Hopefully, I can continue to improve my skills, and eventually be able to help y’all out with your projects, too!


#7

Thats just used for the touch events on mobile devices, so yeah it will complain but still work on your computer unless you have a touchscreen :wink:
It shouldnt throw an error but my script logs a warning for the missing dependency, if I remember correctly.
But to get the touch events working you should import the library & ensure its loaded before the camera script in your scenes script loading order.
https://developer.playcanvas.com/en/user-manual/scripting/loading-order/

Just to ensure nobody else falls into the same issue, that isnt the case :wink:
I setup a quick test project and made a quick & dirty example script with some comments in the code for the given usecase. If somebody else is struggling with similar issues it might help: https://playcanvas.com/project/600356/overview/camera--picking-example

Good to hear, looks already way different than two days ago. Like where you are going & glad that I could help you out. If you have some other questions, feel free to ask.

If somebody is wondering, we have been mailing a bit back & forth, was just a bit too busy to check the forum :smiley:

Greetings,

Martin


#8

EDIT: I can’t believe it! The fragging buttons are getting in the way of the tiles! Evidently they’re a lot bigger than they look. I’m working on figuring out how to control their size/bounds better.


#9

Yaustar wrote a short script that solved the previous issue. Big props to him.

I’m currently trying to make the rulerActive variable defined at all times.


#10

image

image

image

image

image

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

This concludes today’s update.


How to refer to different parts of the API while scripting
#11

Never mind, I got it.

Thanks to whoever wrote this tutorial.


#12

Refer to this post on getting to grips with the API: How to refer to different parts of the API while scripting


#13

I have completed the token spawning functionality. Now I have to make the token moving functionality, the initiative functionality, and the map editing functionality.


#14

Token moving functionality complete.


#15

ETA’s play mode (ruler, initiative, token spawner) is complete, sans any changes that will have to be made for multiplayer.
https://playcanvas.com/project/600366/overview/eta-play-mode

Thanks again to @swatty, @yaustar, and everyone else who has helped so far. Your assistance has been completely invaluable, and I will pay that knowledge back. As well as delivering a useful tool for your TRPG sessions, too.


#16

ETA’s map editor functionality is not completely done, but I have to turn in this project soon, so I’ll just leave it be for now so I can start working on the multiplayer functionality.

Currently, users can add tiles to the scene, but cannot delete them. Barring a sudden flash of insight, I will not be adding a tile deletion functionality until after I turn this project in (April 26).


#17

W8 so its possible to manipulate the text elements on certain button clicks? or if the player gets damaged?


#18

Oh, yeah. I got the text elements to change. Sorry if I didn’t mention that earlier.
Project editor link: https://playcanvas.com/editor/scene/700970
Here’s the script that I attached to my text entity (the one labeled “Distance” by default).

var DistanceText = pc.createScript('distanceText');

// initialize code called once per entity
DistanceText.prototype.initialize = function() {
    // find our widget
    this.distText = this.entity.findByName('Distance_Text');
};

DistanceText.prototype.Print = function(number) {
    this.distText.element.text = number.toFixed(2);
};

DistanceText.prototype.PrintEtc = function(string) {
    this.distText.element.text = string;
};

And here’s an example script of me changing the script from another script:

// use the 3D distance formula to find the distance between the two tiles: sqrt( (x2-x1)^2 + (y2-y1)^2 + (z2-z1)^2 )
var distance = Math.sqrt(Math.pow((x2 - x1),2) + Math.pow((y2 - y1),2) + Math.pow((z2 - z1),2));
// call the "Print" function declared in the distanceText script to populate the Distance_Text textbox with the distance
this.app.root.findByName("Distance_Text").script.distanceText.Print(distance);

#19

Print() is used for turning numbers into strings to be printed, and PrintEtc() is used for printing anything that’s a string to begin with. I’m sure if I was a bit less lazy, I could have made a single function that could handle both, but…


#20

I’m using this tutorial to try and grok Multiplayer.
While the tutorial uses a single camera that all players share, and instead uses capsules as the player entities, I instead want the camera entity to be unique to each player, and for the tokens to be freely movable by anyone (the logic being that if Flopnar the Raging Barbarian tackles Shay’tan the Twink Wizard, Flopnar’s player should be able to move both of their tokens, even if Shay’tan’s player is away from their computer, cooking ramen). But I fear that cloning the camera entity (which has hundreds of lines of script attached to it) will slow down the game considerably. However, I don’t have time to re-write 2/3 of my project, so I’ll just have “other” cameras and hope for the best.

EDIT: I see no possible way this could go wrong.
image