Tic tac toe on cylinder

i am building tic tac toe on various 3d shapes. specifically, a cylinder first.

I have a project rendering a cylinder with a tic tac toe board on it and registering the click coordinates.

However, would it be better to use a Dynamic Texture with a canvas element wrapped around the surface of the element?

How would you recommend going about constructing this game on a cylinder? (regardless of gameplay changes that ensue)

Yep sounds like a good idea! :wink:

I’d recommend using BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(myCylinder);

Are you building AI to play with too?

im just going to have one player against themselves first, then an “optimal move” opponent in the future. The optimal move opponent will be a bit more complicated considering playing on surfaces of topological objects is different and I dont know of any pre-trained models for that sort of tic tac toe.

Will be interesting to have a look at your game :slight_smile:
As for “optimal move” opponent - seems that you can use minimax algorithm for it. Here is very good article about it - https://towardsdatascience.com/tic-tac-toe-creating-unbeatable-ai-with-minimax-algorithm-8af9e52c1e7d#958d
I think we need a kind of Babylon 3D tic-tac-toe challenge!

I have reviewed the documentation of the AdvancedDynamicTecture method. However, none of the playground examples show the dynamic texture actually applied to the surface of the 3d object. Is there an example somewhere of creating a canvas that allows interactions and wraps around the 3d object like when i use a diffuseTexture or DynamicTexture?

Do you want the user to click on the flat canvas and show the canvas aditionally on a cylinder, or rather click directly on the cylinder and interact with that, without showing the canvas directly?

There’s a demo showing how to get the UV-coordinates of a click on a mesh here

AdvancedDynamicTexture relates to GUI, not for meshes.
Actually I am not sure that you need it at all. If you need to draw a game field maybe it is better to use 2D canvas methods, like var ctx = myDynamicTexture.getContext();
Here is PG from documentation, I just added cylinder - https://playground.babylonjs.com/#5ZCGRM#824
For “X” and “O” moves you can just use font on canvas.
More docs here - Dynamic Textures | Babylon.js Documentation

Right, that is what I was looking at as well and I did the same thing in that playground. Now I am trying to figure out 1. how to properly uv map the canvas to only the mid surface of the cylinder (not the top and bottom) and 2. will I have to have some sort of interpolation function where I track the click coordinates and then draw an X or O in the proper place based on the click coordinates?

If so, are the click coordinates provided by babylon click handlers the click coordinates of the surface of the cylinder or of the 2d canvas?

pickInfo.pickedPoint relates to the mesh, it doesn’t depend on any texture.
See hit coords in the console - https://playground.babylonjs.com/#1BAPRM#358

The answer is here - https://playground.babylonjs.com/#VA2AC#3

Welcome to the Tic-Tac-Toe challenge!

1 Like