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.