Ideas on how to implement rotary phone functionality in babylonjs :D

Questions
1

Hi everyone!

Yes, you did read it right :smiley:

image
image650×650 48.7 KB

This is an old rotary phone everyone that was born before the two thousands had in their home :slight_smile:
I have an idea for my game where I kind of want to have this kind of phone and use it to select numbers and special letters for a code! This is a playful topic where I just want some ideas how one would implement this in babylon :slight_smile: I was first thinking about just using Vue.js UI to make this, but I think it would be better to have this actually in the “game world”, zooming in the phone interface when needed. Here is kind of what I’m looking for functionality wise, but of course maybe with better UX Rotary Dial (victorribeiro.com)

So, the ideas I’ve got in mind:

  • Physically represent the number slots as a mesh that the user could “rotate”, dragging the mouse/finger in the viewport would rotate the mesh accordingly
    image
    image838×636 44.7 KB
  • Use Babylon UI somehow to add a flat texture on the actual phone base and then handle the dragging and rotating the texture on that somehow (for this I would like some comments!!). Maybe needing two textures (one for the numbers below and then one for the top part that rotates…)
    image
    image874×713 60.7 KB

Which option you think is more viable or do we have options c, d, e, etc. as well? :wink:
Also I will make a playground for this after I have a clear vision how to do this :slight_smile:

2

Hello :slight_smile:

In your link (Rotary Dial) the numbers are actually rotating, and on top of this they remain at constant angle

Do you plan to do the same, or do you plan to do the more “normal” one ? (Which is, texture with numbers in the back, and only some holes rotating above it)

1 Like
3

Yeah you’re right, I plan to do it with two layers. The numbers would be stationary at the bottom layer and the top layer would be the moving part :slight_smile:

I would have also fixed camera angle that would be pointing straight into the number input, like this:

image
image732×586 47.6 KB

4

Ok !

Well, you can inspire yourself with the playground I gave to @CodingCrusader in this topic about a spinning wheel
It’s using mouse grab and Math.atan2 to compute angles

I just downloaded a free vintage phone on turbosquid, cleaned a bit, and gave it a try :

This should be a good start, I let you add the number composing stuff :stuck_out_tongue:

4 Likes
5

Wow that was fast and awesome! I really like how it “works”, that is exactly what I’m looking for! Only have to add like the maximum angle the rotation can have and such, which I think should be easy later on :slight_smile: And also yeah the number composition is more on the logic after the selection!

I’m also still wondering if this could be done with babylon gui, since the game I’m looking is a bit cartoonish, so in theory two flat layered planes could be possible as well :thinking: Would there be any benefits on doing it with babylon gui versus this approach with the “real” wheel? I’m also thinking about generalizing some “puzzles” like this one, so could the gui approach help with this…

But yeah HUGE thanks for giving me almost ready solution to this already! :rose:

1 Like
6

I did the same thing for Trivia Murder Party 2’s rotary phone minigame. I can’t share that code but here’s the proof of concept:

http://alexswan.io/kontra-samples/rotary.html

And the code: kontra-samples/rotary.js at master · BoldBigflank/kontra-samples · GitHub

3 Likes
7

Thanks, everything helps! I’ve actually played that one haha!